如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

數(shù)字化經(jīng)濟(jì)日益發(fā)達(dá)的現(xiàn)階段，數(shù)字化產(chǎn)品作為線上觸點(diǎn)，也就逐漸成為服務(wù)中的標(biāo)配，它更像一個服務(wù)員通過屏幕與用戶發(fā)生對話。在這場對話中，好的設(shè)計應(yīng)該像一門語言，能夠承載起傳達(dá)與溝通的工具屬性。

為什么我們需要設(shè)計語言系統(tǒng)（DLS）

我們也可以見到，越來越多的設(shè)計團(tuán)隊都會構(gòu)建一套屬于自己產(chǎn)品的設(shè)計語言系統(tǒng)。對于團(tuán)隊內(nèi)部，它的意義在于通過系統(tǒng)化的設(shè)計規(guī)則，來控制產(chǎn)品長期迭代的熵值，以及提升團(tuán)隊的協(xié)同效率，同時，設(shè)計師有機(jī)會從重復(fù)的勞動中解放出來，投入更多精力到探討問題本質(zhì)實(shí)現(xiàn)價值創(chuàng)新。就好像在石器時代，祖先們記錄事件或表達(dá)情感的混亂程度，遠(yuǎn)遠(yuǎn)高于現(xiàn)代人，關(guān)鍵在于是否擁有一套成熟的語言系統(tǒng)。

對于外部用戶，設(shè)計語言系統(tǒng)可以讓產(chǎn)品在不同終端、不同場景中的表現(xiàn)保持一致性，也有機(jī)會通過植入品牌基因的方式形成視覺錘，提升產(chǎn)品的識別度以及消費(fèi)者對品牌的認(rèn)知。就好像，我們可以通過「豬鼻」車頭識別出那是寶馬，通過「青蛙眼」車燈知道那是保時捷，是因?yàn)檫@些汽車品牌通過長期保持某個「一致性」的表現(xiàn)，形成一套高識別度的設(shè)計語言來表達(dá)「這就是我」。

界面設(shè)計的語言屬性

在這里我們將借助語言學(xué)的角度，來探討數(shù)字化產(chǎn)品界面設(shè)計語言系統(tǒng)的構(gòu)建。在語言的應(yīng)用中，我們通常會涉及語法、語素、語句、語境、語氣等維度，通過不同的組合達(dá)成應(yīng)景的表達(dá)與適時的溝通。

1. 語法

設(shè)計原則，可以理解為設(shè)計語言中的語法，是構(gòu)建設(shè)計語言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計理念，它將指引業(yè)務(wù)設(shè)計執(zhí)行的方向。

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

例如 Airbnb 的設(shè)計原則簡單歸納為幾點(diǎn)：

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

2. 語素

視覺基礎(chǔ)是構(gòu)成設(shè)計語言的最小單位，就像語素是語言中最小的音義結(jié)合體。在原子設(shè)計理論中，它屬于最小粒度的元素，通常包括：顏色、字體、圖標(biāo)、網(wǎng)格等。

3. 語句

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

4. 語義

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

5. 語境

這里說的語境包含 3 個維度：一是流程意義上的上下文，二是產(chǎn)品屬性中的語境，三是用戶當(dāng)下所處的環(huán)境。

當(dāng)設(shè)計需要對上下文進(jìn)行特別處理時，有可能對話的層級次序是受限于屏幕稀缺性，通?？刹捎?Z-Depth 疊加（Material Design屬性）、步驟條、元素關(guān)聯(lián)轉(zhuǎn)場動效等方式。舉個常見的例子，當(dāng)用戶發(fā)起一個刪除數(shù)據(jù)的請求時，界面會彈出一個二次確認(rèn)的模態(tài)會話，用戶點(diǎn)擊確認(rèn)之后才會執(zhí)行刪除操作。

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

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

△ 如上，微信讀書針對外部環(huán)境因素的自定義「語境」

6. 語氣

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

• 正確示例：使用檢索可以快速搜索任務(wù)。
• 不良示例：你一定會愛上方便快捷的檢索功能！

7. 語速

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

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

8. 響度

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

△ Tom Osborne的視覺響度指南

設(shè)計語言系統(tǒng)的生態(tài)性

1. 基因遺傳

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

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

2. 動態(tài)進(jìn)化

設(shè)計語言系統(tǒng)不是一份靜態(tài)的組件庫與規(guī)范文檔，而是一個動態(tài)的且能自我進(jìn)化的系統(tǒng)。它的動態(tài)進(jìn)化屬性基于 3 個契機(jī)：

• 設(shè)計師基于可復(fù)用組件的設(shè)計系統(tǒng)構(gòu)建產(chǎn)品功能設(shè)計時，可省下更多的時間，轉(zhuǎn)移到設(shè)計系統(tǒng)上的優(yōu)化；
• 隨著產(chǎn)品發(fā)展，設(shè)計師將會遇到更多特殊需求，從而也會創(chuàng)建新的設(shè)計模式來解決問題，而這些新的設(shè)計模式也將同時反哺設(shè)計系統(tǒng)，不斷提升系統(tǒng)的完善程度；
• 設(shè)計系統(tǒng)中可復(fù)用組件等的規(guī)模化應(yīng)用，便于設(shè)計單元缺陷的暴露，這也將為系統(tǒng)單元優(yōu)化提供優(yōu)勝劣汰的方向。

3. 開放兼容

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

當(dāng)前谷歌、蘋果、微軟、阿里巴巴等大型企業(yè)推出了開源的設(shè)計語言，這些成熟的設(shè)計體系其實(shí)承載著大量的項目實(shí)踐與經(jīng)驗(yàn)總結(jié)，對其他企業(yè)也有較大的借鑒價值。同時，對于平臺級企業(yè)，開放統(tǒng)一的數(shù)字語言，讓不同地域、不同類型的項目得以在共同的規(guī)則下發(fā)展、共生，這對于平臺生態(tài)無疑是利好的。

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

舉個例子，在法國和比利時，人們都厭惡墨綠色，因?yàn)槎?zhàn)期間兩國飽受德國納粹侵略之苦，而納粹的軍服是墨綠色的。那么，面向這兩個國家用戶的設(shè)計上，便應(yīng)該避免使用墨綠的元素。這時，設(shè)計語言系統(tǒng)中組件元素的豐富程度，很大程度決定了設(shè)計表現(xiàn)的選擇空間與可能性。

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

藍(lán)藍(lán)設(shè)計( 363858.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。