2019-6-27 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
數(shù)字化經(jīng)濟(jì)日益發(fā)達(dá)的現(xiàn)階段，數(shù)字化產(chǎn)品作為線上觸點(diǎn)，也就逐漸成為服務(wù)中的標(biāo)配，它更像一個(gè)服務(wù)員通過(guò)屏幕與用戶發(fā)生對(duì)話。在這場(chǎng)對(duì)話中，好的設(shè)計(jì)應(yīng)該像一門(mén)語(yǔ)言，能夠承載起傳達(dá)與溝通的工具屬性。我們也可以見(jiàn)到，越來(lái)越多的設(shè)計(jì)團(tuán)隊(duì)都會(huì)構(gòu)建一套屬于自己產(chǎn)品的設(shè)計(jì)語(yǔ)言系統(tǒng)。對(duì)于團(tuán)隊(duì)內(nèi)部，它的意義在于通過(guò)系統(tǒng)化的設(shè)計(jì)規(guī)則，來(lái)控制產(chǎn)品長(zhǎng)期迭代的熵值，以及提升團(tuán)隊(duì)的協(xié)同效率，同時(shí)，設(shè)計(jì)師有機(jī)會(huì)從重復(fù)的勞動(dòng)中解放出來(lái)，投入更多精力到探討問(wèn)題本質(zhì)實(shí)現(xiàn)價(jià)值創(chuàng)新。就好像在石器時(shí)代，祖先們記錄事件或表達(dá)情感的混亂程度，遠(yuǎn)遠(yuǎn)高于現(xiàn)代人，關(guān)鍵在于是否擁有一套成熟的語(yǔ)言系統(tǒng)。
對(duì)于外部用戶，設(shè)計(jì)語(yǔ)言系統(tǒng)可以讓產(chǎn)品在不同終端、不同場(chǎng)景中的表現(xiàn)保持一致性，也有機(jī)會(huì)通過(guò)植入品牌基因的方式形成視覺(jué)錘，提升產(chǎn)品的識(shí)別度以及消費(fèi)者對(duì)品牌的認(rèn)知。就好像，我們可以通過(guò)「豬鼻」車(chē)頭識(shí)別出那是寶馬，通過(guò)「青蛙眼」車(chē)燈知道那是保時(shí)捷，是因?yàn)檫@些汽車(chē)品牌通過(guò)長(zhǎng)期保持某個(gè)「一致性」的表現(xiàn)，形成一套高識(shí)別度的設(shè)計(jì)語(yǔ)言來(lái)表達(dá)「這就是我」。
在這里我們將借助語(yǔ)言學(xué)的角度，來(lái)探討數(shù)字化產(chǎn)品界面設(shè)計(jì)語(yǔ)言系統(tǒng)的構(gòu)建。在語(yǔ)言的應(yīng)用中，我們通常會(huì)涉及語(yǔ)法、語(yǔ)素、語(yǔ)句、語(yǔ)境、語(yǔ)氣等維度，通過(guò)不同的組合達(dá)成應(yīng)景的表達(dá)與適時(shí)的溝通。
1. 語(yǔ)法
設(shè)計(jì)原則，可以理解為設(shè)計(jì)語(yǔ)言中的語(yǔ)法，是構(gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計(jì)理念，它將指引業(yè)務(wù)設(shè)計(jì)執(zhí)行的方向。
制定設(shè)計(jì)原則時(shí)，首先研究用戶特性，聚焦產(chǎn)品核心價(jià)值，然后通過(guò)腦暴等形式選擇有特點(diǎn)的維度，結(jié)合用戶體驗(yàn)與品牌屬性將其視覺(jué)化，最后用簡(jiǎn)要的語(yǔ)言歸納出來(lái)。
例如 Airbnb 的設(shè)計(jì)原則簡(jiǎn)單歸納為幾點(diǎn)：
2. 語(yǔ)素
視覺(jué)基礎(chǔ)是構(gòu)成設(shè)計(jì)語(yǔ)言的最小單位，就像語(yǔ)素是語(yǔ)言中最小的音義結(jié)合體。在原子設(shè)計(jì)理論中，它屬于最小粒度的元素，通常包括：顏色、字體、圖標(biāo)、網(wǎng)格等。
3. 語(yǔ)句
組件就像由若干個(gè)語(yǔ)素組成的語(yǔ)句，比如一個(gè)基礎(chǔ)按鈕，通常就是由顏色、字體、邊距等元素組成。而我們平時(shí)所說(shuō)的組件庫(kù)，其實(shí)就是一部詞典，其中包含了設(shè)計(jì)系統(tǒng)中所需的基礎(chǔ)組件與用法，在界面設(shè)計(jì)中也具有較高的通用性。
4. 語(yǔ)義
符號(hào)是語(yǔ)言的載體，但符號(hào)本身沒(méi)有意義，只有被賦予含義的符號(hào)才能夠被使用，這時(shí)候語(yǔ)言就轉(zhuǎn)化為信息，而語(yǔ)言的含義就是語(yǔ)義。在視覺(jué)傳達(dá)設(shè)計(jì)中也一樣，使用的圖標(biāo)或圖形，需具備正確的語(yǔ)義屬性。如果商場(chǎng)導(dǎo)視設(shè)計(jì)中非要使用「裙子」圖標(biāo)來(lái)代表「男廁」入口，如此混淆語(yǔ)義挑戰(zhàn)公眾認(rèn)知，那就等著被投訴吧。
5. 語(yǔ)境
這里說(shuō)的語(yǔ)境包含 3 個(gè)維度：一是流程意義上的上下文，二是產(chǎn)品屬性中的語(yǔ)境，三是用戶當(dāng)下所處的環(huán)境。
當(dāng)設(shè)計(jì)需要對(duì)上下文進(jìn)行特別處理時(shí)，有可能對(duì)話的層級(jí)次序是受限于屏幕稀缺性，通?？刹捎?Z-Depth 疊加（Material Design屬性）、步驟條、元素關(guān)聯(lián)轉(zhuǎn)場(chǎng)動(dòng)效等方式。舉個(gè)常見(jiàn)的例子，當(dāng)用戶發(fā)起一個(gè)刪除數(shù)據(jù)的請(qǐng)求時(shí)，界面會(huì)彈出一個(gè)二次確認(rèn)的模態(tài)會(huì)話，用戶點(diǎn)擊確認(rèn)之后才會(huì)執(zhí)行刪除操作。
過(guò)去很長(zhǎng)一段時(shí)間，數(shù)字產(chǎn)品設(shè)計(jì)圈內(nèi)熱衷于討論的兩種風(fēng)格類(lèi)型：隱喻（擬物化）與抽象（扁平化），時(shí)至今日可以說(shuō)扁平化的風(fēng)格在應(yīng)用數(shù)量上壓倒擬物化風(fēng)格。然而，我依舊認(rèn)為設(shè)計(jì)的風(fēng)格策略取決于產(chǎn)品屬性中的語(yǔ)境，這也是如今 iOS 人機(jī)界面設(shè)計(jì)規(guī)范所提倡的，它不再像早前的規(guī)則片面拒絕隱喻設(shè)計(jì)，而是鼓勵(lì)設(shè)計(jì)師將用戶在現(xiàn)實(shí)中最為熟悉的視覺(jué)樣式，即操作方法映射與界面設(shè)計(jì)之中，蘋(píng)果官方的 Garageband 就是一個(gè)很有說(shuō)服力的例子。
針對(duì)用戶當(dāng)下所處的環(huán)境來(lái)適配界面語(yǔ)境，常見(jiàn)通過(guò)界面換膚的手法來(lái)實(shí)現(xiàn)，比如微信讀書(shū)等閱讀應(yīng)用為用戶提供白天模式或黑夜模式的選擇。用戶所處的外部環(huán)境因素可以很大程度上決定界面語(yǔ)言的應(yīng)用，就好像在菜市場(chǎng)買(mǎi)東西要靠吼，在圖書(shū)館借書(shū)僅需要用肢體語(yǔ)言便能達(dá)成。
△ 如上，微信讀書(shū)針對(duì)外部環(huán)境因素的自定義「語(yǔ)境」
6. 語(yǔ)氣
交互界面通常需要使用說(shuō)明或提示文案來(lái)指導(dǎo)用戶完成操作，大多數(shù)情況下都是使用第二人稱，就像在與用戶對(duì)話，從以用戶為中心的角度上講，建議保持謙遜、友善的語(yǔ)氣，盡可能避免使用晦澀的專業(yè)術(shù)語(yǔ)，謹(jǐn)慎使用帶有強(qiáng)烈情感屬性的感嘆號(hào)，或過(guò)于口語(yǔ)化的語(yǔ)言。另外，語(yǔ)氣的拿捏也將直接影響到與用戶的距離感，以及當(dāng)下的應(yīng)景度。
7. 語(yǔ)速
語(yǔ)速在這里指的是界面的信息密度，在不同的場(chǎng)合對(duì)語(yǔ)速的控制能夠提升接受者的體驗(yàn)，視覺(jué)設(shè)計(jì)也同樣需要注意把握間距與留白，網(wǎng)格系統(tǒng)在這里可以起到「節(jié)拍器」的作用，借助節(jié)拍器可以讓設(shè)計(jì)更具節(jié)奏感。而交互意義上的語(yǔ)速，更多體現(xiàn)在操作路徑的長(zhǎng)度，以及動(dòng)效的速率。
△ 如上，富途證券在產(chǎn)品介紹與盤(pán)中交易2個(gè)不同場(chǎng)景下的「語(yǔ)速」
8. 響度
其實(shí)就好像我們說(shuō)話可以通過(guò)音量大小來(lái)控制信息的可感知程度，希望接受者聽(tīng)清楚的就說(shuō)大聲一點(diǎn)。湯姆奧斯本（Tom Osborne）的視覺(jué)響度指南（visual loudness guide）是一個(gè)如何系統(tǒng)地處理按鈕和鏈接的例子，它們不是單獨(dú)列出，而是作為一個(gè)套件呈現(xiàn)，并且根據(jù)每個(gè)元素的視覺(jué)沖擊力會(huì)相應(yīng)的擁有一個(gè)「響度」值。我們?cè)跇?gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)時(shí)，也同樣需要設(shè)置梯級(jí)「響度」的按鈕、字重等組件來(lái)滿足不同場(chǎng)景的表達(dá)需求。
△ Tom Osborne的視覺(jué)響度指南
1. 基因遺傳
同一個(gè)語(yǔ)系下的語(yǔ)言，無(wú)論是經(jīng)過(guò)了朝代更迭，還是地域的遷徙，一定會(huì)保留一些固有的特性，這就是語(yǔ)言系統(tǒng)本身具有基因遺傳的生態(tài)特性。
一套成熟的設(shè)計(jì)語(yǔ)言系統(tǒng)，也同樣對(duì)產(chǎn)品設(shè)計(jì)表現(xiàn)著基因級(jí)別的底層影響力：在「代際」遺傳上，體現(xiàn)在經(jīng)久不衰的堅(jiān)持。比如 Burberry 的格子紋理，無(wú)論是在哪一年的產(chǎn)品款式上，都不會(huì)丟失這個(gè)屬性。在「同輩」影響上，通常體現(xiàn)在不同終端場(chǎng)景下產(chǎn)品表現(xiàn)的一致性，或是兄弟產(chǎn)品的相似程度。
2. 動(dòng)態(tài)進(jìn)化
設(shè)計(jì)語(yǔ)言系統(tǒng)不是一份靜態(tài)的組件庫(kù)與規(guī)范文檔，而是一個(gè)動(dòng)態(tài)的且能自我進(jìn)化的系統(tǒng)。它的動(dòng)態(tài)進(jìn)化屬性基于 3 個(gè)契機(jī)：
3. 開(kāi)放兼容
語(yǔ)言同時(shí)具備工具屬性與文化屬性，開(kāi)放兼容對(duì)一門(mén)語(yǔ)言的意義在于被更多人接受、應(yīng)用。
當(dāng)前谷歌、蘋(píng)果、微軟、阿里巴巴等大型企業(yè)推出了開(kāi)源的設(shè)計(jì)語(yǔ)言，這些成熟的設(shè)計(jì)體系其實(shí)承載著大量的項(xiàng)目實(shí)踐與經(jīng)驗(yàn)總結(jié)，對(duì)其他企業(yè)也有較大的借鑒價(jià)值。同時(shí)，對(duì)于平臺(tái)級(jí)企業(yè)，開(kāi)放統(tǒng)一的數(shù)字語(yǔ)言，讓不同地域、不同類(lèi)型的項(xiàng)目得以在共同的規(guī)則下發(fā)展、共生，這對(duì)于平臺(tái)生態(tài)無(wú)疑是利好的。
設(shè)計(jì)語(yǔ)言作為工具來(lái)說(shuō)，需具備普適性，在文化層面上也需具備兼容度──在滿足企業(yè)自身品牌與業(yè)務(wù)需求之上，應(yīng)該盡可能規(guī)避因宗教、民俗等因素帶來(lái)的沖突。
舉個(gè)例子，在法國(guó)和比利時(shí)，人們都厭惡墨綠色，因?yàn)槎?zhàn)期間兩國(guó)飽受德國(guó)納粹侵略之苦，而納粹的軍服是墨綠色的。那么，面向這兩個(gè)國(guó)家用戶的設(shè)計(jì)上，便應(yīng)該避免使用墨綠的元素。這時(shí)，設(shè)計(jì)語(yǔ)言系統(tǒng)中組件元素的豐富程度，很大程度決定了設(shè)計(jì)表現(xiàn)的選擇空間與可能性。
就好像，在美國(guó)街頭詢問(wèn)公共廁所時(shí)，老美可能聽(tīng)不懂 WC，那就用他們聽(tīng)得懂的 Restroom 吧。這里想表達(dá)的是，你的語(yǔ)言系統(tǒng)中「詞匯」越豐富，越能兼容不同文化背景下的表達(dá)。
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com