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

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

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

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

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

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

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

1. 語法

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

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

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

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

2. 語素

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

3. 語句

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

4. 語義

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

5. 語境

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

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

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

針對用戶當(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ù)。
• 不良示例：你一定會(huì)愛上方便快捷的檢索功能！

7. 語速

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

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

8. 響度

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

△ Tom Osborne的視覺響度指南

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

1. 基因遺傳

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

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

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

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

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

3. 開放兼容

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

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

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

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

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

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