起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識像蘋果Google一樣做設計語言，帶你了解全流程
總結規范一款設計語言的意義很明確，那就是解決團隊內部的統一性與效率問題，并通過統一的設計語言打造統一的品牌符號形象，捕捉用戶認知與記憶點。那么我們又該如何總結出自己的設計語言呢？筆者將為大家做詳細的分享。
大家是如何定義一套設計語言的呢？
設計語言，貌似很火的一個詞，設計團隊都在做設計規范，好像沒有就是不夠專業，UED的價值就不夠高。
關于設計語言的參考很多，最出名的莫過于蘋果和谷歌材料設計，也是設計語言的鼻祖。后面我將分享設計語言的價值、如何去創一個設計語言、設計語言包含什么。希望通過幾期分享，幫助大家能很好的掌握這項技能。
一、為什么需要設計語言？
1. 對內
這應該是很多設計團隊會遇到這樣的情況——一個按鈕很多尺寸，顏色，大小，有時候我們已經有了規范，但是各種業務方要求個性化，要不一樣，導致整個APP設計變的很混亂，這是我們設計中經常遇見的。
很多APP因為缺少基礎原則，導致APP界面每個頁面都不一樣，風格層次不齊，缺乏統一性，所以對內，很多時候設計語言是為了解決統一性和效率為前提下，避免開發工程師重復開發一些組件。
2. 對外
對外，統一的品牌符號，品牌特征，有助于加深產品在用戶心中的印象，統一的顏色和交互形式能幫助用戶加深對產品的熟悉感和信任感，一個好的設計語言本身可以在體驗上為產品加分，也能夠更好創造一致性的體驗。
二、設計語言解決什么問題？
1. 一致性
在整個平臺中創造一致性，顏色，按鈕，字體，品牌一致性，給用戶安全感，熟悉感，同時解決設計師因為個人特征導致界面不統一問題。
2. 明確設計原則
讓每一個設計很清楚知道，產品需要傳遞給用戶的設計特征和原則是什么，以及整個平臺的約束是什么，比如我們平臺特征是安全感、方正、有對應的設計規范，比如小圓角、方正圖形。
那么設計師就得在這個約束在去進行設計，就不能設計成圓形、可愛的圖形，因為和整個設計原則是違背的。
3. 效率
提升效率，對于一些經常用到的組件、顏色、分割線、按鈕、圖標、字體、tab、表單等組件，如果提前設計統一好，能大大減少重復性設計，能讓設計師更加專注在設計品質上加強，也可提升研發效率，對于基礎的顏色、字體、間距可以提前開發好，減少重復性開發。
4. 多平臺統一
我們現在處于一個各種設備的社會，各種屏幕尺寸、平板電腦、筆記本、各種安卓機器、各種廠商自定義的系統等等，我們的設計需要在這些平臺上運行，就必須保證設計的統一性。
三、設計語言包含哪些內容？
前面我們已經說了，設計語言的重要性，以及設計語言解決了什么問題，那么到底設計語言里面應該包含哪些內容，應該如何去定義這些內容呢？
1.設計原則
（1）Airibnb在建立設計語言之前，先根據整個產品定位，價值觀，得出設計語言的關鍵詞：
- 統一：每個設計應該是統一的，不能有太多個性差異化的特征。
- 關于內容：用戶應該更多關注的是內容，而非設計本身。
- 確定的：在設計中減少不確定的因素和預期。
（2）在facebook的設計原則語言里面，也首先強調了它們的設計價值觀：通用，人性，干凈，統一，有用，快速，透明，在facebook所有設計中，都圍繞這幾個點作為設計指導準則。
（3）蘋果的設計規范包括：完整性，一致性，直接操作，反饋，隱喻，用戶控制等幾個設計原則。
所以在建立一個設計語言的第一步，應該建立一個設計準則。
2. 色彩系統
設計中三大元素——色彩、字體、圖形。
那么在建立一個系統的時候，色彩是很重要一部分，需要定義好整個系統的色彩架構體系，色彩體系一旦建立好，后面的設計都將圍繞這些色彩進行設計，色彩又包括，品牌色，輔助的，字體顏色黑白灰，不可用，超鏈接，成功或者失敗等等。
▲主色盤
▲輔助色盤
▲色盤延伸
3. 圖形
▲圖形，設計中很重要元素之一，插畫風格圖形如何定義，圖標，背景圖形都屬于圖形一部分。
▲插畫在設計運用類型有幾種，比如atlassian對于它們的插畫類型進行了規范，插畫需要有隱秘和故事性在里面，插畫必須有構建的感覺，定義了人物特征以及顏色規范。
▲包括對于空白頁圖形定義
▲對圖標風格定義，包括色彩關系
▲對于頭像，定義了有五官和無五官風格定義
▲包括整個規范的正確示范和錯誤示范
▲圖標規范
4. 柵格系統
柵格系統是為了頁面中更好的布局，保證布局統一性，柵格系統里面又分最小單位和間距。
▲在airbnb中對于間距，運用了8的倍數，所有的規范都是很有彈性的，8，16，24，48，64來建立。
▲網格系統中的列,也有叫欄
▲網格系統中的行
▲網格系統中的水槽
▲網格系統中的邊距
5. 字體
界面中出現最多的內容，字體，字體除了傳統意義上大小之外，還有字間距，行間距，字重對比等，還有字體顏色等等。
▲字重，顧名思義就是字體粗細，通過字重可以加強層級。
▲字體大小以及運用場景，字體在界面中什么樣場景運用多大字號，以及對應的字間距，行間距等等都是需要去定義的。
▲字體顏色，什么時候用品牌色，成功，錯過，超鏈接出錯等等各個狀態的顏色如何去定義。
6. 投影
在設計系統中我們需要定義好投影關系，投影需要去定義不同的強度大小，以滿足頁面中需要，一般通過透明度，以及投影遠近來定義。
7. 圖文關系
圖片和文字在界面中如何處理，多色調如何運用，黑色圖片上放文字怎么處理，白色圖片放文字如何處理都是需要去詳細定義的。
四、總結
設計一個系統是一個很復雜的過程，前期一般需要比較高階的設計來完成；設計系統完成后，對于基礎的顏色、色彩、字體不要隨意去改動，成本會比較高，至少需要保證這些字體顏色，一兩年不要大的變化。
今天和大家分享了一個設計系統，一個設計語言的大概框架，后續我將會拆解里面每個模塊，逐步和大家分享如何去設計一個語言！
#專欄作家#
Sky，微信公眾號：我們的設計日記（ID：helloskys），設計交流可加微信：hellosky678，人人都是產品經理專欄作家。支付寶體驗設計專家，阿里巴巴天貓設計專家；10年知名互聯網公司設計經驗，對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
