? 都 2019 年了还不懂「设计语言」?看完这篇你就学会了! - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


都 2019 年了還不懂「設計語言」?看完這篇你就學會了!

2019-6-27 泥人張 行業趨勢


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

數字化經濟日益發達的現階段,數字化產品作為線上觸點,也就逐漸成為服務中的標配,它更像一個服務員通過屏幕與用戶發生對話。在這場對話中,好的設計應該像一門語言,能夠承載起傳達與溝通的工具屬性。

為什么我們需要設計語言系統(DLS)

我們也可以見到,越來越多的設計團隊都會構建一套屬于自己產品的設計語言系統。對于團隊內部,它的意義在于通過系統化的設計規則,來控制產品長期迭代的熵值,以及提升團隊的協同效率,同時,設計師有機會從重復的勞動中解放出來,投入更多精力到探討問題本質實現價值創新。就好像在石器時代,祖先們記錄事件或表達情感的混亂程度,遠遠高于現代人,關鍵在于是否擁有一套成熟的語言系統。

對于外部用戶,設計語言系統可以讓產品在不同終端、不同場景中的表現保持一致性,也有機會通過植入品牌基因的方式形成視覺錘,提升產品的識別度以及消費者對品牌的認知。就好像,我們可以通過「豬鼻」車頭識別出那是寶馬,通過「青蛙眼」車燈知道那是保時捷,是因為這些汽車品牌通過長期保持某個「一致性」的表現,形成一套高識別度的設計語言來表達「這就是我」。

界面設計的語言屬性

在這里我們將借助語言學的角度,來探討數字化產品界面設計語言系統的構建。在語言的應用中,我們通常會涉及語法、語素、語句、語境、語氣等維度,通過不同的組合達成應景的表達與適時的溝通。

1. 語法

設計原則,可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。

制定設計原則時,首先研究用戶特性,聚焦產品核心價值,然后通過腦暴等形式選擇有特點的維度,結合用戶體驗與品牌屬性將其視覺化,最后用簡要的語言歸納出來。

例如 Airbnb 的設計原則簡單歸納為幾點:

  • 統一性:每一塊設計,都是更大整體中的一部分,因此必須站在更大范圍的角度上,給予系統積極正面的貢獻。設計功能不應該是孤立的,也不能是離群的。
  • 普遍性:Airbnb 在全世界使用,用戶更是一個全球性的社區。我們的產品和可視化語言應該受到用戶歡迎,同時也要易于訪問。
  • 標志性:我們專注于設計和功能,因此在這兩方面,我們要既大膽又清晰。
  • 對話性:呼吸對生命如此重要,我們要把同樣的設計理念融入到產品里面,通過更容易理解的方式與我們的用戶進行交流、溝通。

2. 語素

視覺基礎是構成設計語言的最小單位,就像語素是語言中最小的音義結合體。在原子設計理論中,它屬于最小粒度的元素,通常包括:顏色、字體、圖標、網格等。

3. 語句

組件就像由若干個語素組成的語句,比如一個基礎按鈕,通常就是由顏色、字體、邊距等元素組成。而我們平時所說的組件庫,其實就是一部詞典,其中包含了設計系統中所需的基礎組件與用法,在界面設計中也具有較高的通用性。

4. 語義

符號是語言的載體,但符號本身沒有意義,只有被賦予含義的符號才能夠被使用,這時候語言就轉化為信息,而語言的含義就是語義。在視覺傳達設計中也一樣,使用的圖標或圖形,需具備正確的語義屬性。如果商場導視設計中非要使用「裙子」圖標來代表「男廁」入口,如此混淆語義挑戰公眾認知,那就等著被投訴吧。

5. 語境

這里說的語境包含 3 個維度:一是流程意義上的上下文,二是產品屬性中的語境,三是用戶當下所處的環境。

當設計需要對上下文進行特別處理時,有可能對話的層級次序是受限于屏幕稀缺性,通常可采用 Z-Depth 疊加(Material Design屬性)、步驟條、元素關聯轉場動效等方式。舉個常見的例子,當用戶發起一個刪除數據的請求時,界面會彈出一個二次確認的模態會話,用戶點擊確認之后才會執行刪除操作。

過去很長一段時間,數字產品設計圈內熱衷于討論的兩種風格類型:隱喻(擬物化)與抽象(扁平化),時至今日可以說扁平化的風格在應用數量上壓倒擬物化風格。然而,我依舊認為設計的風格策略取決于產品屬性中的語境,這也是如今 iOS 人機界面設計規范所提倡的,它不再像早前的規則片面拒絕隱喻設計,而是鼓勵設計師將用戶在現實中最為熟悉的視覺樣式,即操作方法映射與界面設計之中,蘋果官方的 Garageband 就是一個很有說服力的例子。

針對用戶當下所處的環境來適配界面語境,常見通過界面換膚的手法來實現,比如微信讀書等閱讀應用為用戶提供白天模式或黑夜模式的選擇。用戶所處的外部環境因素可以很大程度上決定界面語言的應用,就好像在菜市場買東西要靠吼,在圖書館借書僅需要用肢體語言便能達成。

△ 如上,微信讀書針對外部環境因素的自定義「語境」

6. 語氣

交互界面通常需要使用說明或提示文案來指導用戶完成操作,大多數情況下都是使用第二人稱,就像在與用戶對話,從以用戶為中心的角度上講,建議保持謙遜、友善的語氣,盡可能避免使用晦澀的專業術語,謹慎使用帶有強烈情感屬性的感嘆號,或過于口語化的語言。另外,語氣的拿捏也將直接影響到與用戶的距離感,以及當下的應景度。

  • 正確示例:使用檢索可以快速搜索任務。
  • 不良示例:你一定會愛上方便快捷的檢索功能!

7. 語速

語速在這里指的是界面的信息密度,在不同的場合對語速的控制能夠提升接受者的體驗,視覺設計也同樣需要注意把握間距與留白,網格系統在這里可以起到「節拍器」的作用,借助節拍器可以讓設計更具節奏感。而交互意義上的語速,更多體現在操作路徑的長度,以及動效的速率。

△  如上,富途證券在產品介紹與盤中交易2個不同場景下的「語速」

8. 響度

其實就好像我們說話可以通過音量大小來控制信息的可感知程度,希望接受者聽清楚的就說大聲一點。湯姆奧斯本(Tom Osborne)的視覺響度指南(visual loudness guide)是一個如何系統地處理按鈕和鏈接的例子,它們不是單獨列出,而是作為一個套件呈現,并且根據每個元素的視覺沖擊力會相應的擁有一個「響度」值。我們在構建設計語言系統時,也同樣需要設置梯級「響度」的按鈕、字重等組件來滿足不同場景的表達需求。

△ Tom Osborne的視覺響度指南

設計語言系統的生態性

1. 基因遺傳

同一個語系下的語言,無論是經過了朝代更迭,還是地域的遷徙,一定會保留一些固有的特性,這就是語言系統本身具有基因遺傳的生態特性。

一套成熟的設計語言系統,也同樣對產品設計表現著基因級別的底層影響力:在「代際」遺傳上,體現在經久不衰的堅持。比如 Burberry 的格子紋理,無論是在哪一年的產品款式上,都不會丟失這個屬性。在「同輩」影響上,通常體現在不同終端場景下產品表現的一致性,或是兄弟產品的相似程度。

2. 動態進化

設計語言系統不是一份靜態的組件庫與規范文檔,而是一個動態的且能自我進化的系統。它的動態進化屬性基于 3 個契機:

  • 設計師基于可復用組件的設計系統構建產品功能設計時,可省下更多的時間,轉移到設計系統上的優化;
  • 隨著產品發展,設計師將會遇到更多特殊需求,從而也會創建新的設計模式來解決問題,而這些新的設計模式也將同時反哺設計系統,不斷提升系統的完善程度;
  • 設計系統中可復用組件等的規模化應用,便于設計單元缺陷的暴露,這也將為系統單元優化提供優勝劣汰的方向。

3. 開放兼容

語言同時具備工具屬性與文化屬性,開放兼容對一門語言的意義在于被更多人接受、應用。

當前谷歌、蘋果、微軟、阿里巴巴等大型企業推出了開源的設計語言,這些成熟的設計體系其實承載著大量的項目實踐與經驗總結,對其他企業也有較大的借鑒價值。同時,對于平臺級企業,開放統一的數字語言,讓不同地域、不同類型的項目得以在共同的規則下發展、共生,這對于平臺生態無疑是利好的。

設計語言作為工具來說,需具備普適性,在文化層面上也需具備兼容度──在滿足企業自身品牌與業務需求之上,應該盡可能規避因宗教、民俗等因素帶來的沖突。

舉個例子,在法國和比利時,人們都厭惡墨綠色,因為二戰期間兩國飽受德國納粹侵略之苦,而納粹的軍服是墨綠色的。那么,面向這兩個國家用戶的設計上,便應該避免使用墨綠的元素。這時,設計語言系統中組件元素的豐富程度,很大程度決定了設計表現的選擇空間與可能性。

就好像,在美國街頭詢問公共廁所時,老美可能聽不懂 WC,那就用他們聽得懂的 Restroom 吧。這里想表達的是,你的語言系統中「詞匯」越豐富,越能兼容不同文化背景下的表達。

藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 平面設計服務。

標簽: 設計語言 « ECMAScript6學習筆記 | 微信小程序之卡片層疊滑動效果»


藍藍 http://www.thriveonsite.com

訂閱Rss
做什么网赚好呢 北京赛车pk10APP网资讯 yy那种网赚真实吗 速发彩票开户 彩票高賠率好平台 2019年最新网赚项目 2019免费挂机网赚 青春510网赚论坛 挂机网赚是真的吗 什么网赚最容易