視覺語言本身可以具備足夠明顯清晰的特色，就像每個人的表達方式和口音一樣，這使得視覺語言本身可以強化和凸顯品牌特色。那麼想要創建一套屬於自己的視覺語言，可以從9個方面入手。
我們使用語言與人進行溝通，傳達信息，記錄內容，而視覺語言也發揮著類似的作用。從色彩到排版樣式，從插畫到品牌構建，視覺語言同樣承擔著類似的功能，它和傳統的語言有著類似的特徵包括結構化和溝通功能。
所以，視覺語言也是規範化的，標準化的，它足夠自由，也保有約束。視覺語言本身也可以具備足夠明顯清晰的特色，就像每個人的表達方式和口音一樣，這使得視覺語言本身可以強化和凸顯品牌特色。那麼想要創建一套屬於自己的視覺語言，可以從下面的9個方面入手。
1. 構建品牌獨有的配色方案
我們總是說，色彩和形體是用戶第一眼最快注意到的東西。配色方案的視覺表現力最強，這使得配色方案成為視覺語言中辨識度最高的組成部分。配色方案本身需要具備一定的獨特性，確保它整體上能夠讓人記住，區別於其他，品牌不至於在繁雜的互聯網世界中迷失，也不會讓用戶無法記住。
另一方面，配色方案應該具備良好的兼容性，能夠調和品牌不同模塊，比如：網站、APP、社交媒體、包裝、名片等。
配色也應該體現品牌的價值。想想麥當勞的配色吧，黃色和紅色為主。這兩種色彩本身能夠觸發幸福（黃色）和飢餓（紅色）的感覺，兩者搭配加上經典的金拱門的LOGO，麥當勞的視覺識別度可以說是相當高的。此外，麥當勞旗下的許多其他的設計，也是在這個配色的基礎上構建的。
2. 構建排版的層次結構
排版層次結構的構建，和選擇字體同樣重要。不同的排版層次，能夠給人截然不同的感受，清晰還是粗糙，雅緻還是有趣。在排版的層次結構上，並不存在對錯，更多需要考慮的是合適不合適，風格和感受上的一致性。
當然，不同層級的信息，在排版層級上還是要有比較清晰的體現的，大小疏密對比度不足，會難以讓用戶感知到內容之間的重要性的差異。
以 Airbnb 為例，網站的排版有著清晰的層次結構，字體的大小、字重、間距和配色都已經標準化了。相應的，給人的體驗也始終保持著應有的一貫性。
3. 建立柵格來規範內容之間的空間關係
視覺元素之間的位置關係，和它們本身的設計是同等重要的。如果你希望整個設計在細節上是清晰明確的，那麼柵格會給你想要的。
FreeCodeCamp 對此有很明確的描述：
柵格賦予了UI界面元素以模塊化的清晰結構，這使得整個設計團隊能在此基礎上更好地合作。這使得產品能夠快速清晰地輸出到不同的平臺上。如果你是基於某個想法來構建概念設計，那麼這種方法更加實用有效。
簡而言之，柵格讓視覺呈現的複雜度降低了。
4. 創建組件庫
從按鈕、圖標再到卡片，你應當創建出一整套可用的、風格一致的UI組件庫。
同樣功能的控件，在頁面不同的地方、或者不同的頁面上有著截然不同的風格，是讓人迷惑而糟心的。一個好的組件庫，應當包含全部常用的UI組件，以及針對 iOS 和 Android 平臺所適配之後的UI組件。雖然構建組件庫本身的工作量並不小，但是在完成之後，能讓後續的工作事半功倍。
5. 強調圖片的風格和特徵
在諸多圖形化的元素當中，圖片和插畫是視覺性最突出的元素，這也是整個視覺語言當中最重要的因素之一，因為它從某種意義上是和品牌關係最緊密的素材。
構成視覺語言涉及到圖片素材的方方面面，構圖、色彩、濾鏡，甚至相關動效的細節。
下面是 Smashmallow 中的網頁設計，即使它們並不是同期設計也不是服務於相同的功能，但是很明顯插畫所採用的視覺風格是一致的，並且每幅插畫當中都使用了共同的元素：熱氣球。
這一元素和品牌本身是有著緊密關聯的，而用戶也可以從這些插畫圖片的內容，迅速意識到品牌本身的一些概念。
6. 為動效設定規則
動畫效果同樣是要遵循一些規則的。是快速移動還是慢速移動，是懸停觸發還是自動運行？
這些動效的運動規則其實是有著明顯的視覺識別度的，就像日漫和美漫在視覺和運動規則上存在差別一樣。
就像下面這個來自Dribbble 的動效，它大體上做著勻速的圓周運動，速度適中，其中有些元素並沒有完全按照圓周運動。那麼想想看，是否所有的做圓周運動的物體都和它一樣呢？它們是否會帶來不一樣的視覺觀感呢？
7. 讓視覺和文本內容匹配起來
視覺語言並不是只涉及到視覺元素，文本並不是與之割裂的，在設計的時候，兩者需要合理地配合，在體驗上達成一致，傳達一致的信息。
在下面的 Steffany 這個網站當中，整體設計呈現出非常明顯的女性化的特徵，文本內容在表達方式和調性上和整體的視覺語言保持著一致，並沒有出現兩者衝突或者競爭的狀況。
8. 可信且可靠
視覺語言只有在用戶接納的情況下，才會最大程度地發揮作用，它要給人可靠的感覺。所以，整個視覺語言需要和你的品牌定位、氣質表裡合一，而不能讓設計和產品、企業的氣質割裂開來。
你能想象沒有主角的芝麻街會是怎樣的一種氣場麼？
整個品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來的，每一個細節的設計都是圍繞著這些角色來創建的。注意網站中角色和其他視覺元素之間的映射關係，它們讓用戶清晰地感知到角色和整體設計之間的關係是表裡如一的，這使得整個網站的設計更容易為用戶所接受，視覺語言在此發揮了作用。
9. 落實到具體標準文檔當中
整個視覺語言在構建起來之後，需要保持各方面的一致性，在具體設計的時候，則得有一份詳實具體的設計文檔供整個設計團隊和利益相關人員，作為參考。所以，完成整個設計之後，將整個視覺語言相關的內容和素材製作成設計風格指南，和整個品牌的設計規範統一到一起。
閱讀更多 人人都是產品經理 的文章
