今天分享給大家的是如何定義一套UI設計規范。無論是國內大的團隊還是小的團隊，都需要做設計規范，好像沒有就不夠專業，UED 的價值就不夠高，關于UI設計規范的參考也特別多，最出名的莫過于蘋果和谷歌，也是行業鼻祖。
一、為什么需要UI設計規范
1. 對內
上圖，應該是很多設計團隊都遇見的情況，一個按鈕很多尺寸，顏色，大小，有時候我們已經有了規范，但是由于業務方各種要求，要個性化，要不一樣，導致整個 APP設計變的很混亂，這是我們設計中經常遇見的，很多 APP 因為缺少基礎規范，導致 APP 每個頁面都不一樣，設計師都是按照個人的主觀經驗做設計，導致風格層次不齊，缺乏統一性，所以對內，很多時候設計語言是為了解決統一性和效率為前提下，避免開發工程師重復開發一些組件。
2. 對外
對外，統一的品牌符號，品牌特征，有助于加深產品在用戶心中的印象，統一的顏色和交互形式能幫助用戶加深對產品的熟悉感和信任感，一個好的設計語言本身可以在體驗上為產品加分，試想一下，當你走進星巴克的時候，發現 LOGO 變了，咖啡的包裝換了，是不是會覺得是山寨的感覺，就好比漢堡XX，雖然都是同樣的薯條漢堡，但是總感覺是山寨，好的品牌規范，能夠更好創見一致性的體驗。
二、設計語言解決什么問題
1. 一致性
在整個平臺中創造一致性，顏色、按鈕、字體、品牌一致性，給用戶安全感與熟悉感，同時解決設計師因為個人特征導致界面不統一問題。
2. 明確設計原則
讓每一個設計師很清楚的知道，我們產品需要傳遞給用戶的設計特征和原則是什么，以及整個平臺的約束是什么，比如我們平臺特征是年輕，活潑，那么我們有對應的設計規范，比如圓角按鈕，漸變色。設計師就得在這個約束下去進行設計，就不能設計成直角或方正的圖形，因為和整個設計原則不匹配。
3. 效率
提升效率，對于一些我們經常用到的組件、顏色、分割線、按鈕、圖標、字體、tab、表單等組件，如果提前設計統一好，能大大減少重復性設計，能讓設計師更加專注在設計品質上，提升效率，對于基礎的顏色、字體、間距可以提前開發好，減少重復性開發。
4. 多平臺統一
我們現在處于一個各種設備的時代，各種屏幕尺寸，平板電腦，筆記本，各種安卓機器，各種廠商自定義的系統等等，我們的設計需要在這些平臺上運行，就必須保證設計的統一性。
三、設計語言包含哪些內容
前面我們已經說了，設計語言的重要性以及設計語言解決了什么問題，那么到底設計語言里面應該包含哪些內容，我們應該如何去定義這些內容呢？
1. 設計原則
https://airbnb. design/building-a-visual-language/
Airibnb 在建立他們設計語言之前，先根據整個產品公司定位，價值觀，先得出他們整一個設計語言的關鍵詞：
- 統一：每個設計應該是統一的，不能有太多個性差異化的特征；
- 關于內容：用戶應該更多關注的是內容，而非設計本身；
- 確定的：在設計中減少不確定的因素，和預期。
https://www. facebook. com/notes/facebook-design/facebook-design-principles/118951047792/
同樣的，在 facebook 的設計原則語言里面，也首先強調了他們的設計價值觀：通用，人性，干凈，統一，有用，快速，透明，在 facebook 所有設計中，都圍繞這幾個點去作為他們設計指導準則。
https://developer. apple. com/ios/human-interface-guidelines/overview/themes/
蘋果設計規范，建議每一個接觸 UI 的同學都應該去學習，蘋果的設計規范包括：完整性，一致性，直接操作，反饋，隱喻，用戶控制等。
所以我們在建立一個設計語言的第一步，先應該建立一個設計準則，關于設計準則如何定義，我會在后面的文章里面和大家詳細講解。
2. 色彩系統
設計中三大元素，色彩，字體，圖形，那么第一步我們在建立一個系統時候，色彩是很重要一部分，我們需要定義好我們整個系統的色彩架構體系，色彩體系一旦建立好，后面我們的設計都將圍繞這些色彩進行設計，色彩包括：品牌色、輔助色、字體黑白灰顏色、不可用顏色、超鏈接顏色、成功或失敗顏色等等。
△ 主色盤
△ 輔助色盤
△ 色盤延伸
3. 圖形
△ 圖形，設計中很重要元素之一，我們插畫風格圖形如何定義，圖標，背景圖形都屬于圖形一部分。
△ 插畫在設計運用類型有幾種，比如 atlassian 對于他們插畫類型進行了規范，插畫需要有隱秘和故事性在里面，插畫必須有構建的感覺，定義了人物特征以及顏色規范。
△ 包括對于空白頁圖形定義
△ 對圖標風格定義，包括色彩關系
△ 對于頭像，定義了有五官和無五官風格定義
△ 包括整個規范的正確示范和錯誤示范等等
△ 圖標規范等等
4. 柵格系統
柵格是為了保證頁面中更好的布局，保證布局統一性。
柵格系統里面又分最小單位和間距，在 airbnb 中對于間距，他們運用了8的倍數，所有的規范都是很有彈性的，8，16，24，48，64來建立。
△ 網格系統中的列，也有叫欄
△ 網格系統中的行
△ 網格系統中的水槽
△ 網格系統中的邊距
5. 字體
界面中出現最多的內容字體，字體除了傳統意義上大小之外，還有字間距、行間距、字重對比、字體顏色等等，后面系列文章中，我會詳細告訴大家如何定義字體。
△ 字重，顧名思義就是字體粗細，通過字重可以加強層級
△ 字體大小以及運用場景，字體在界面中什么樣場景運用多大字號，以及對應的字間距，行間距等等都是需要我們去定義的。
△ 字體顏色，什么時候用品牌色，成功，錯過，超鏈接出錯等等各個狀態的顏色如何去定義，后面文章我會詳細說明。
6. 投影
在設計系統中我們需要定義好投影關系，投影需要去定義不同的強度大小，以滿足頁面中需要，一般通過透明度，以及投影遠近來定義。
7. 圖文關系
圖片和文字在界面中如何處理，多色調如何運用，黑色圖片上放文字怎么處理，白色圖片放文字如何處理都是需要我們去詳細定義的。
總結
設計一套設計語言是一個很復雜的過程，前期一般需要比較資深的的設計師來完成，設計完成后，對于基礎的顏色，字體不要經常變動，成本會比較高，至少需要保證這些基礎元素，一年內不要頻繁變動，今天和大家分享的只是一個大概框架，后續我將會拆解里面每個模塊，逐步和大家分享如何去設計一個語言。
歡迎關注作者的微信公眾號：我們的設計日記，每周分享最新設計趨勢和設計經驗，科學設計方法。
圖片素材作者：RedWood Studio
「有效制作設計規范的實用方法」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓