2019-6-27 濤濤
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
數字化經濟日益發達的現階段，數字化產品作為線上觸點，也就逐漸成為服務中的標配，它更像一個服務員通過屏幕與用戶發生對話。在這場對話中，好的設計應該像一門語言，能夠承載起傳達與溝通的工具屬性。我們也可以見到，越來越多的設計團隊都會構建一套屬于自己產品的設計語言系統。對于團隊內部，它的意義在于通過系統化的設計規則，來控制產品長期迭代的熵值，以及提升團隊的協同效率，同時，設計師有機會從重復的勞動中解放出來，投入更多精力到探討問題本質實現價值創新。就好像在石器時代，祖先們記錄事件或表達情感的混亂程度，遠遠高于現代人，關鍵在于是否擁有一套成熟的語言系統。
對于外部用戶，設計語言系統可以讓產品在不同終端、不同場景中的表現保持一致性，也有機會通過植入品牌基因的方式形成視覺錘，提升產品的識別度以及消費者對品牌的認知。就好像，我們可以通過「豬鼻」車頭識別出那是寶馬，通過「青蛙眼」車燈知道那是保時捷，是因為這些汽車品牌通過長期保持某個「一致性」的表現，形成一套高識別度的設計語言來表達「這就是我」。
在這里我們將借助語言學的角度，來探討數字化產品界面設計語言系統的構建。在語言的應用中，我們通常會涉及語法、語素、語句、語境、語氣等維度，通過不同的組合達成應景的表達與適時的溝通。
1. 語法
設計原則，可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。
制定設計原則時，首先研究用戶特性，聚焦產品核心價值，然后通過腦暴等形式選擇有特點的維度，結合用戶體驗與品牌屬性將其視覺化，最后用簡要的語言歸納出來。
例如 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 吧。這里想表達的是，你的語言系統中「詞匯」越豐富，越能兼容不同文化背景下的表達。
藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。