起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識一份超詳細(xì)的UI設(shè)計規(guī)范全攻略
設(shè)計語言是一個很龐大的設(shè)計體系，包括字體、網(wǎng)格系統(tǒng)、顏色、圖形等等，而筆者在本文中也分享了相關(guān)的設(shè)計原則與關(guān)鍵詞，希望對你有所啟發(fā)。
前面兩期我分享了，為什么需要設(shè)計語言，對內(nèi)對外有哪些幫助，同時和大家分享了，在做設(shè)計語言之前我們先要建立設(shè)計原則，以及設(shè)計原則下面的設(shè)計關(guān)鍵詞，通過設(shè)計關(guān)鍵詞推導(dǎo)出對應(yīng)的視覺表現(xiàn)手法，也就是通常我們所說的，形、色、字、構(gòu)、質(zhì)。
那么今天我們就直接進入正題，在前面我們定義好了，設(shè)計原則和關(guān)鍵詞，那么接下來應(yīng)該如何去做？
01 如何去做？
根據(jù)原子定律（不懂原子定律同學(xué)可以搜索原子設(shè)計方法）我們從頁面中最細(xì)小的元素入手，也可以理解為頁面中無法再拆分的元素開始，它是組成界面最基礎(chǔ)的元素，從最基礎(chǔ)的元素，開始做統(tǒng)一性，本次我將從顏色，字體，網(wǎng)格說起。
02 顏色
從顏色開始，需要根據(jù)整個頁面中場景進行顏色定義，同樣色彩也需要根據(jù)我們定義的關(guān)鍵詞去推導(dǎo)，在定義顏色過程中，可以參加色彩心理學(xué)原理，以及競品分析：
- 高品質(zhì)：深色配色，黑白，中性的配色
- 全球化：深邃紫色，科技藍(lán)，自然綠
- 年輕化：漸變色，馬卡龍撞色
在定義了上述大的色彩原理下，需要對界面中使用場景進行梳理得出下列大概色彩類型：
當(dāng)然也可以定義一些界面中常用漸變色板，現(xiàn)在很多網(wǎng)站也有很多很好看的漸變可以去嘗試。
也可以定義一些圖片上放文字效果，疊加什么顏色，顏色的模式是什么樣的，透明度是多大，這些都可以幫助我們定義好一套色彩體系。
當(dāng)然還有一些很不錯的色板，如果你不知道怎么配色，也不知道當(dāng)下流行色是怎么樣，也可以從這些色板里面選擇一個配色，挑選一些符合你們產(chǎn)品的配色。
▲https://www.materialui.co/
▲https://coolors.co/
▲http://colorsupplyyy.com/app/
03 字體
字體是界面中用戶看到最多的一些元素，除了定義界面中的字體，同時我們也要定義界面下的字體，包括線下物料宣傳等，在字體選擇上，需要注意：
- 信息傳遞是否足夠清晰，字體也是有情感的，字體表達(dá)的情感是否和我們界面中需求是一致的。
- 個性上，有的字體很方正，筆直，有的字體筆劃比較活潑，那么不同字體我們?nèi)绾稳ミx擇，同樣需要在前面大的設(shè)計關(guān)鍵詞下面去設(shè)計。
對于字體選擇，一定要根據(jù)產(chǎn)品關(guān)鍵詞去定義，以上是界面中常用一些英文和中文字體，每種字體雖然大體看差不多，其實每個字體，細(xì)看其實有些筆畫上的差異！
我個人建議蘋方字體和Helvetica Neue比較通用性更強，中文字體包比較大，特殊產(chǎn)品如果需要有個性化中文字體，需要注意字體大小包處理！
04 字號
字號是界面中很重要元素，字號大小決定了信息的層次和層次，在扁平化設(shè)計中，字號越來越重要，好的字號設(shè)置能讓界面更加清晰一致性強！相反差的字號會讓界面看起來山寨，關(guān)于字號的選擇，可以遵循iOS的規(guī)范大小，也可以根據(jù)自己產(chǎn)品個性去定義你的字號。
假如你是電商產(chǎn)品，那么你可能需要對價格字體單獨設(shè)置字號，如果你是金融產(chǎn)品，那么對應(yīng)的字號也需要定義好對應(yīng)的大小層級！
▲對于特殊字體的處理（375分辨率）
▲常用的5種字體節(jié)奏（375分辨率）
▲特殊數(shù)字或圖形化字號（375分辨率）
05 行高
參考3C原理，不明白可以百度搜，英文的行高是字號的1.2倍，但是中英文字體原因，中文字體一般是1.5-2倍之間，我們需要充分考慮不同人群特點，老人，兒童，年輕人，以及使用環(huán)境。
英文的行高一般為字體1.2倍，比如你字號是20號，那么行高24，當(dāng)然也有很多國外設(shè)計師采用黃金比例的行高，比如1.414倍，1.618倍，1.717倍數(shù)等等。
行高大小，正如我前面所說，需要充分考慮你整個界面的節(jié)奏，和內(nèi)容以及用戶人群來定義是需要緊湊還是疏密！
中文常用的行高，一般為字體大小的1.5倍比較合適，當(dāng)然也可以一些簡單的做法，就是字號+4原則，比如你字號是20，你的行高24，字號28，行高32也是可行的，每個團隊可以根據(jù)需求去定義。
06 字重
字重，顧名思義就是字體粗細(xì)，越來越多的產(chǎn)品需要通過字體粗細(xì)來拉開信息層次，當(dāng)下主流趨勢iOS11中也是通過字重來拉開信息層級的，所以在定義字體規(guī)范時候也需要重復(fù)考慮進去什么時候用什么字體。
07 網(wǎng)格系統(tǒng)
這塊知識相對比較復(fù)雜，我這邊簡單分享下，我想大多數(shù)同學(xué)都經(jīng)歷過這個情況，拿到其他設(shè)計師源文件，間距混亂，一會邊距20，一會24，一會32，特別混亂，原因在于大家間距沒有去詳細(xì)定義它的規(guī)則。
08 看看別人怎么做的？
▲Airbnb的規(guī)范中，對于間距的定義，沒有像其他規(guī)范那樣，只定義一個最小單位數(shù)值，而是定義了5種彈性間距，8，16，24，48，64在他的全部設(shè)計里面，包括元素和元素之前，圖文之間都是運用這一套間距規(guī)則，保證了整個界面的統(tǒng)一性。
▲這是國外運用比較多的8點網(wǎng)格，Airbnb在這個基礎(chǔ)上進行了進一步的簡潔，只保留了8，16，24，48，64
▲國外有項數(shù)據(jù)表明，設(shè)計師在運用8為最小單位做設(shè)計時候，一般常用間距有哪些，最后定義了5種常用間距規(guī)則。
所以，我們在規(guī)范時候，一定不要運用太多的間距規(guī)則，否則間距，很難得到控制和統(tǒng)一，建議定幾種間距，你可以是8，16，24，48，64，如果你覺得這些間距不夠用，你也可以添加新的間距規(guī)則進行，但是建議不要太多。
09 網(wǎng)格設(shè)計策略
1. 定最小單位
先定義最小單位，單位越小頁面越緊湊，目前常用比較多的有，4，5，8，假設(shè)我們最小單位是4為倍數(shù)，那我們所有的間距都按照8的倍數(shù)遞增，得到間距規(guī)則，8，16，20，40，60
▲https://designsystem.quickbooks.com/foundations/spacial-units/
2. 按增量設(shè)計
▲界面中所有的間距地方，全部運用8，16，20，40，60這幾個原則來做設(shè)計，保證頁面統(tǒng)一性。
▲頁面中的元素高度，比如banner高度也是按照間距增量去設(shè)計高度，那么整個頁面就更加有系統(tǒng)性和科學(xué)性。
▲在做系統(tǒng)設(shè)計時候經(jīng)常用到的，通過增量來做設(shè)計，希望大家都可以掌握這種間距原則！
10 圖形
圖形是界面中的靈魂，圖形也是很好傳遞視覺語言很重要的一部分，如何保證圖形一致性，打造界面中視覺記憶點，這個點很大，展開來講很多，包括品牌符號、icon插畫元素一系列等等。
11 總結(jié)
設(shè)計語言是一個很龐大的設(shè)計體系，字體、網(wǎng)格系統(tǒng)、顏色、圖形等等，包括后面定義好原子后、怎么定義組件，再到頁面。
文章里借鑒了一些國外設(shè)計語言網(wǎng)站，大家感興趣，也可以從這些網(wǎng)站里學(xué)習(xí)下，看看別人是如何做的。
關(guān)聯(lián)文章
#專欄作家#
Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），設(shè)計交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
“年輕”沒有居中:shock:
好文mark
收藏了 感謝分享
?? 點贊
先點贊收藏再學(xué)習(xí)