設(shè)計(jì)語(yǔ)言是一個(gè)很龐大的設(shè)計(jì)體系，包括字體、網(wǎng)格系統(tǒng)、顏色、圖形等等，而筆者在本文中也分享了相關(guān)的設(shè)計(jì)原則與關(guān)鍵詞，希望對(duì)你有所啟發(fā)。

前面兩期我分享了，為什么需要設(shè)計(jì)語(yǔ)言，對(duì)內(nèi)對(duì)外有哪些幫助，同時(shí)和大家分享了，在做設(shè)計(jì)語(yǔ)言之前我們先要建立設(shè)計(jì)原則，以及設(shè)計(jì)原則下面的設(shè)計(jì)關(guān)鍵詞，通過設(shè)計(jì)關(guān)鍵詞推導(dǎo)出對(duì)應(yīng)的視覺表現(xiàn)手法，也就是通常我們所說(shuō)的，形、色、字、構(gòu)、質(zhì)。

那么今天我們就直接進(jìn)入正題，在前面我們定義好了，設(shè)計(jì)原則和關(guān)鍵詞，那么接下來(lái)應(yīng)該如何去做？

01 如何去做？

根據(jù)原子定律（不懂原子定律同學(xué)可以搜索原子設(shè)計(jì)方法）我們從頁(yè)面中最細(xì)小的元素入手，也可以理解為頁(yè)面中無(wú)法再拆分的元素開始，它是組成界面最基礎(chǔ)的元素，從最基礎(chǔ)的元素，開始做統(tǒng)一性，本次我將從顏色，字體，網(wǎng)格說(shuō)起。

02 顏色

從顏色開始，需要根據(jù)整個(gè)頁(yè)面中場(chǎng)景進(jìn)行顏色定義，同樣色彩也需要根據(jù)我們定義的關(guān)鍵詞去推導(dǎo)，在定義顏色過程中，可以參加色彩心理學(xué)原理，以及競(jìng)品分析：

• 高品質(zhì)：深色配色，黑白，中性的配色
• 全球化：深邃紫色，科技藍(lán)，自然綠
• 年輕化：漸變色，馬卡龍撞色

在定義了上述大的色彩原理下，需要對(duì)界面中使用場(chǎng)景進(jìn)行梳理得出下列大概色彩類型：

當(dāng)然也可以定義一些界面中常用漸變色板，現(xiàn)在很多網(wǎng)站也有很多很好看的漸變可以去嘗試。

也可以定義一些圖片上放文字效果，疊加什么顏色，顏色的模式是什么樣的，透明度是多大，這些都可以幫助我們定義好一套色彩體系。

當(dāng)然還有一些很不錯(cuò)的色板，如果你不知道怎么配色，也不知道當(dāng)下流行色是怎么樣，也可以從這些色板里面選擇一個(gè)配色，挑選一些符合你們產(chǎn)品的配色。

▲https://www.materialui.co/

▲https://coolors.co/

▲http://colorsupplyyy.com/app/

03 字體

字體是界面中用戶看到最多的一些元素，除了定義界面中的字體，同時(shí)我們也要定義界面下的字體，包括線下物料宣傳等，在字體選擇上，需要注意：

1. 信息傳遞是否足夠清晰，字體也是有情感的，字體表達(dá)的情感是否和我們界面中需求是一致的。
2. 個(gè)性上，有的字體很方正，筆直，有的字體筆劃比較活潑，那么不同字體我們?nèi)绾稳ミx擇，同樣需要在前面大的設(shè)計(jì)關(guān)鍵詞下面去設(shè)計(jì)。

對(duì)于字體選擇，一定要根據(jù)產(chǎn)品關(guān)鍵詞去定義，以上是界面中常用一些英文和中文字體，每種字體雖然大體看差不多，其實(shí)每個(gè)字體，細(xì)看其實(shí)有些筆畫上的差異！

我個(gè)人建議蘋方字體和Helvetica Neue比較通用性更強(qiáng)，中文字體包比較大，特殊產(chǎn)品如果需要有個(gè)性化中文字體，需要注意字體大小包處理！

04 字號(hào)

字號(hào)是界面中很重要元素，字號(hào)大小決定了信息的層次和層次，在扁平化設(shè)計(jì)中，字號(hào)越來(lái)越重要，好的字號(hào)設(shè)置能讓界面更加清晰一致性強(qiáng)！相反差的字號(hào)會(huì)讓界面看起來(lái)山寨，關(guān)于字號(hào)的選擇，可以遵循iOS的規(guī)范大小，也可以根據(jù)自己產(chǎn)品個(gè)性去定義你的字號(hào)。

假如你是電商產(chǎn)品，那么你可能需要對(duì)價(jià)格字體單獨(dú)設(shè)置字號(hào)，如果你是金融產(chǎn)品，那么對(duì)應(yīng)的字號(hào)也需要定義好對(duì)應(yīng)的大小層級(jí)！

▲對(duì)于特殊字體的處理（375分辨率）

▲常用的5種字體節(jié)奏（375分辨率）

▲特殊數(shù)字或圖形化字號(hào)（375分辨率）

05 行高

參考3C原理，不明白可以百度搜，英文的行高是字號(hào)的1.2倍，但是中英文字體原因，中文字體一般是1.5-2倍之間，我們需要充分考慮不同人群特點(diǎn)，老人，兒童，年輕人，以及使用環(huán)境。

英文的行高一般為字體1.2倍，比如你字號(hào)是20號(hào)，那么行高24，當(dāng)然也有很多國(guó)外設(shè)計(jì)師采用黃金比例的行高，比如1.414倍，1.618倍，1.717倍數(shù)等等。

行高大小，正如我前面所說(shuō)，需要充分考慮你整個(gè)界面的節(jié)奏，和內(nèi)容以及用戶人群來(lái)定義是需要緊湊還是疏密！

中文常用的行高，一般為字體大小的1.5倍比較合適，當(dāng)然也可以一些簡(jiǎn)單的做法，就是字號(hào)+4原則，比如你字號(hào)是20，你的行高24，字號(hào)28，行高32也是可行的，每個(gè)團(tuán)隊(duì)可以根據(jù)需求去定義。

06 字重

字重，顧名思義就是字體粗細(xì)，越來(lái)越多的產(chǎn)品需要通過字體粗細(xì)來(lái)拉開信息層次，當(dāng)下主流趨勢(shì)iOS11中也是通過字重來(lái)拉開信息層級(jí)的，所以在定義字體規(guī)范時(shí)候也需要重復(fù)考慮進(jìn)去什么時(shí)候用什么字體。

07 網(wǎng)格系統(tǒng)

這塊知識(shí)相對(duì)比較復(fù)雜，我這邊簡(jiǎn)單分享下，我想大多數(shù)同學(xué)都經(jīng)歷過這個(gè)情況，拿到其他設(shè)計(jì)師源文件，間距混亂，一會(huì)邊距20，一會(huì)24，一會(huì)32，特別混亂，原因在于大家間距沒有去詳細(xì)定義它的規(guī)則。

08 看看別人怎么做的？

▲Airbnb的規(guī)范中，對(duì)于間距的定義，沒有像其他規(guī)范那樣，只定義一個(gè)最小單位數(shù)值，而是定義了5種彈性間距，8，16，24，48，64在他的全部設(shè)計(jì)里面，包括元素和元素之前，圖文之間都是運(yùn)用這一套間距規(guī)則，保證了整個(gè)界面的統(tǒng)一性。

▲這是國(guó)外運(yùn)用比較多的8點(diǎn)網(wǎng)格，Airbnb在這個(gè)基礎(chǔ)上進(jìn)行了進(jìn)一步的簡(jiǎn)潔，只保留了8，16，24，48，64

▲國(guó)外有項(xiàng)數(shù)據(jù)表明，設(shè)計(jì)師在運(yùn)用8為最小單位做設(shè)計(jì)時(shí)候，一般常用間距有哪些，最后定義了5種常用間距規(guī)則。

所以，我們?cè)谝?guī)范時(shí)候，一定不要運(yùn)用太多的間距規(guī)則，否則間距，很難得到控制和統(tǒng)一，建議定幾種間距，你可以是8，16，24，48，64，如果你覺得這些間距不夠用，你也可以添加新的間距規(guī)則進(jìn)行，但是建議不要太多。

09 網(wǎng)格設(shè)計(jì)策略

1. 定最小單位

先定義最小單位，單位越小頁(yè)面越緊湊，目前常用比較多的有，4，5，8，假設(shè)我們最小單位是4為倍數(shù)，那我們所有的間距都按照8的倍數(shù)遞增，得到間距規(guī)則，8，16，20，40，60

▲https://designsystem.quickbooks.com/foundations/spacial-units/

2. 按增量設(shè)計(jì)

▲界面中所有的間距地方，全部運(yùn)用8，16，20，40，60這幾個(gè)原則來(lái)做設(shè)計(jì)，保證頁(yè)面統(tǒng)一性。

▲頁(yè)面中的元素高度，比如banner高度也是按照間距增量去設(shè)計(jì)高度，那么整個(gè)頁(yè)面就更加有系統(tǒng)性和科學(xué)性。

▲在做系統(tǒng)設(shè)計(jì)時(shí)候經(jīng)常用到的，通過增量來(lái)做設(shè)計(jì)，希望大家都可以掌握這種間距原則！

10 圖形

圖形是界面中的靈魂，圖形也是很好傳遞視覺語(yǔ)言很重要的一部分，如何保證圖形一致性，打造界面中視覺記憶點(diǎn)，這個(gè)點(diǎn)很大，展開來(lái)講很多，包括品牌符號(hào)、icon插畫元素一系列等等。

11 總結(jié)

設(shè)計(jì)語(yǔ)言是一個(gè)很龐大的設(shè)計(jì)體系，字體、網(wǎng)格系統(tǒng)、顏色、圖形等等，包括后面定義好原子后、怎么定義組件，再到頁(yè)面。

文章里借鑒了一些國(guó)外設(shè)計(jì)語(yǔ)言網(wǎng)站，大家感興趣，也可以從這些網(wǎng)站里學(xué)習(xí)下，看看別人是如何做的。

關(guān)聯(lián)文章