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

我們使用語言與人進(jìn)行溝通，傳達(dá)信息，記錄內(nèi)容，而視覺語言也發(fā)揮著類似的作用。從色彩到排版樣式，從插畫到品牌構(gòu)建，視覺語言同樣承擔(dān)著類似的功能，它和傳統(tǒng)的語言有著類似的特征包括結(jié)構(gòu)化和溝通功能。

所以，視覺語言也是規(guī)范化的，標(biāo)準(zhǔn)化的，它足夠自由，也保有約束。視覺語言本身也可以具備足夠明顯清晰的特色，就像每個(gè)人的表達(dá)方式和口音一樣，這使得視覺語言本身可以強(qiáng)化和凸顯品牌特色。那么想要?jiǎng)?chuàng)建一套屬于自己的視覺語言，可以從下面的9個(gè)方面入手。

1. 構(gòu)建品牌獨(dú)有的配色方案

我們總是說，色彩和形體是用戶第一眼最快注意到的東西。配色方案的視覺表現(xiàn)力最強(qiáng)，這使得配色方案成為視覺語言中辨識(shí)度最高的組成部分。配色方案本身需要具備一定的獨(dú)特性，確保它整體上能夠讓人記住，區(qū)別于其他，品牌不至于在繁雜的互聯(lián)網(wǎng)世界中迷失，也不會(huì)讓用戶無法記住。

另一方面，配色方案應(yīng)該具備良好的兼容性，能夠調(diào)和品牌不同模塊，比如網(wǎng)站、APP、社交媒體、包裝、名片等。

配色也應(yīng)該體現(xiàn)品牌的價(jià)值。想想麥當(dāng)勞的配色吧，黃色和紅色為主。這兩種色彩本身能夠觸發(fā)幸福（黃色）和饑餓（紅色）的感覺，兩者搭配加上經(jīng)典的金拱門的LOGO，麥當(dāng)勞的視覺識(shí)別度可以說是相當(dāng)高的。此外，麥當(dāng)勞旗下的許多其他的設(shè)計(jì)，也是在這個(gè)配色的基礎(chǔ)上構(gòu)建的。

2. 構(gòu)建排版的層次結(jié)構(gòu)

排版層次結(jié)構(gòu)的構(gòu)建，和選擇字體同樣重要。不同的排版層次，能夠給人截然不同的感受，清晰還是粗糙，雅致還是有趣。在排版的層次結(jié)構(gòu)上，并不存在對(duì)錯(cuò)，更多需要考慮的是合適不合適，風(fēng)格和感受上的一致性。

當(dāng)然，不同層級(jí)的信息，在排版層級(jí)上還是要有比較清晰的體現(xiàn)的，大小疏密對(duì)比度不足，會(huì)難以讓用戶感知到內(nèi)容之間的重要性的差異。

以 Airbnb 為例，網(wǎng)站的排版有著清晰的層次結(jié)構(gòu)，字體的大小、字重、間距和配色都已經(jīng)標(biāo)準(zhǔn)化了。相應(yīng)的，給人的體驗(yàn)也始終保持著應(yīng)有的一貫性。

3. 建立柵格來規(guī)范內(nèi)容之間的空間關(guān)系

視覺元素之間的位置關(guān)系，和它們本身的設(shè)計(jì)是同等重要的。如果你希望整個(gè)設(shè)計(jì)在細(xì)節(jié)上是清晰明確的，那么柵格會(huì)給你想要的。

FreeCodeCamp 對(duì)此有很明確的描述：

柵格賦予了UI界面元素以模塊化的清晰結(jié)構(gòu)，這使得整個(gè)設(shè)計(jì)團(tuán)隊(duì)能在此基礎(chǔ)上更好地合作。這使得產(chǎn)品能夠快速清晰地輸出到不同的平臺(tái)上。如果你是基于某個(gè)想法來構(gòu)建概念設(shè)計(jì)，那么這種方法更加實(shí)用有效。

簡(jiǎn)而言之，柵格讓視覺呈現(xiàn)的復(fù)雜度降低了。

4. 創(chuàng)建組件庫

從按鈕、圖標(biāo)再到卡片，你應(yīng)當(dāng)創(chuàng)建出一整套可用的、風(fēng)格一致的UI組件庫。

同樣功能的控件，在頁面不同的地方、或者不同的頁面上有著截然不同的風(fēng)格，是讓人迷惑而糟心的。一個(gè)好的組件庫，應(yīng)當(dāng)包含全部常用的UI組件，以及針對(duì) iOS 和 Android 平臺(tái)所適配之后的UI組件。雖然構(gòu)建組件庫本身的工作量并不小，但是在完成之后，能讓后續(xù)的工作事半功倍。

5. 強(qiáng)調(diào)圖片的風(fēng)格和特征

在諸多圖形化的元素當(dāng)中，圖片和插畫是視覺性最突出的元素，這也是整個(gè)視覺語言當(dāng)中最重要的因素之一，因?yàn)樗鼜哪撤N意義上是和品牌關(guān)系最緊密的素材。

構(gòu)成視覺語言涉及到圖片素材的方方面面，構(gòu)圖，色彩，濾鏡，甚至相關(guān)動(dòng)效的細(xì)節(jié)。

下面是 Smashmallow 中的網(wǎng)頁設(shè)計(jì)，即使它們并不是同期設(shè)計(jì)也不是服務(wù)于相同的功能，但是很明顯插畫所采用的視覺風(fēng)格是一致的，并且每幅插畫當(dāng)中都使用了共同的元素：熱氣球。這一元素和品牌本身是有著緊密關(guān)聯(lián)的，而用戶也可以從這些插畫圖片的內(nèi)容，迅速意識(shí)到品牌本身的一些概念。

6. 為動(dòng)效設(shè)定規(guī)則

動(dòng)畫效果同樣是要遵循一些規(guī)則的。是快速移動(dòng)還是慢速移動(dòng)，是懸停觸發(fā)還是自動(dòng)運(yùn)行？這些動(dòng)效的運(yùn)動(dòng)規(guī)則其實(shí)是有著明顯的視覺識(shí)別度的，就像日漫和美漫在視覺和運(yùn)動(dòng)規(guī)則上存在差別一樣。

就像下面這個(gè)來自Dribbble 的動(dòng)效，它大體上做著勻速的圓周運(yùn)動(dòng)，速度適中，其中有些元素并沒有完全按照?qǐng)A周運(yùn)動(dòng)。那么想想看，是否所有的做圓周運(yùn)動(dòng)的物體都和它一樣呢？它們是否會(huì)帶來不一樣的視覺觀感呢？

7. 讓視覺和文本內(nèi)容匹配起來

視覺語言并不是只涉及到視覺元素，文本并不是與之割裂的，在設(shè)計(jì)的時(shí)候，兩者需要合理地配合，在體驗(yàn)上達(dá)成一致，傳達(dá)一致的信息。

在下面的 Steffany 這個(gè)網(wǎng)站當(dāng)中，整體設(shè)計(jì)呈現(xiàn)出非常明顯的女性化的特征，文本內(nèi)容在表達(dá)方式和調(diào)性上和整體的視覺語言保持著一致，并沒有出現(xiàn)兩者沖突或者競(jìng)爭(zhēng)的狀況。

8. 可信且可靠

視覺語言只有在用戶接納的情況下，才會(huì)地發(fā)揮作用，它要給人可靠的感覺。所以，整個(gè)視覺語言需要和你的品牌定位、氣質(zhì)表里合一，而不能讓設(shè)計(jì)和產(chǎn)品、企業(yè)的氣質(zhì)割裂開來。

你能想象沒有主角的芝麻街會(huì)是怎樣的一種氣場(chǎng)么？

整個(gè)品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來的，每一個(gè)細(xì)節(jié)的設(shè)計(jì)都是圍繞著這些角色來創(chuàng)建的。注意網(wǎng)站中角色和其他視覺元素之間的映射關(guān)系，它們讓用戶清晰地感知到角色和整體設(shè)計(jì)之間的關(guān)系是表里如一的，這使得整個(gè)網(wǎng)站的設(shè)計(jì)更容易為用戶所接受，視覺語言在此發(fā)揮了作用。

9. 落實(shí)到具體標(biāo)準(zhǔn)文檔當(dāng)中

整個(gè)視覺語言在構(gòu)建起來之后，需要保持各方面的一致性，在具體設(shè)計(jì)的時(shí)候，則得有一份詳實(shí)具體的設(shè)計(jì)文檔供整個(gè)設(shè)計(jì)團(tuán)隊(duì)和利益相關(guān)人員，作為參考。所以，完成整個(gè)設(shè)計(jì)之后，將整個(gè)視覺語言相關(guān)的內(nèi)容和素材制作成設(shè)計(jì)風(fēng)格指南，和整個(gè)品牌的設(shè)計(jì)規(guī)范統(tǒng)一到一起。

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(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ù)。