好長(zhǎng)時(shí)間沒(méi)發(fā)帖，凈想過(guò)年了，過(guò)年哈，倒騰工作總結(jié)和年貨是大事。

這幾天有人問(wèn)我說(shuō)：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想學(xué)點(diǎn)直接能拿來(lái)用的，這個(gè)要求過(guò)分嗎……”

這個(gè)，好吧，那就直接說(shuō)說(shuō)能用的知識(shí)：字體字號(hào)。

也許你會(huì)說(shuō)：字體字號(hào)？也太Low了吧，這個(gè)誰(shuí)不知道重要呀。

對(duì)于這個(gè)問(wèn)題，我想說(shuō)：會(huì)和熟練，是兩回事。一個(gè)App，不同部分的字體字號(hào)你能準(zhǔn)確地說(shuō)出來(lái)嗎？

很多剛做APP界面的設(shè)計(jì)師，經(jīng)常會(huì)因?yàn)樽痔?hào)，字體顏色，間距而困擾。

拿到設(shè)計(jì)需求后，開始進(jìn)行設(shè)計(jì)，不知道從何去調(diào)整界面的字號(hào)和行間距等。容易碰到的問(wèn)題是頁(yè)面和頁(yè)面的字號(hào)調(diào)著調(diào)著就大小或顏色不統(tǒng)一了。并且容易導(dǎo)致設(shè)計(jì)稿反復(fù)得修改。設(shè)計(jì)出來(lái)的效果圖文字左右間距層次不齊，導(dǎo)致與預(yù)期不符等。

這小節(jié)我將和大家理一理界面中常用的字體，字號(hào)，字體顏色及間距對(duì)齊的一些小經(jīng)驗(yàn)。希望能對(duì)大家有些幫助。

一、成也字，敗也字

在設(shè)計(jì)師的職業(yè)生涯中，至少一次甚至多次在工作中因?yàn)樽煮w不協(xié)調(diào)栽跟頭。在實(shí)踐的過(guò)程中我們會(huì)慢慢發(fā)現(xiàn)一些規(guī)律或者經(jīng)驗(yàn)規(guī)范。接下來(lái)我將和大家一起聊聊在界面設(shè)計(jì)中的那些常規(guī)字體的使用規(guī)范。

我們常常會(huì)聽到，這也太LOW了吧！！你能統(tǒng)一一下字體嗎？

不明確而繁瑣的字體搭配會(huì)導(dǎo)致整個(gè)畫面失調(diào)。可以這樣說(shuō)，字體可以成就設(shè)計(jì)也可以毀掉設(shè)計(jì)。

問(wèn)題的關(guān)鍵有：

字體樣式太多，導(dǎo)致頁(yè)面雜亂使用的字體不易識(shí)別字體樣式和內(nèi)容的氣氛或規(guī)范不匹配

怎么避免這樣的結(jié)果發(fā)生呢？

通過(guò)設(shè)計(jì)經(jīng)驗(yàn)可以幫助你做出更好的版式，了解不同平臺(tái)的常用字體設(shè)計(jì)規(guī)范。

在每個(gè)項(xiàng)目設(shè)計(jì)中只使用1-2個(gè)字體樣式，而在品牌字有明確的規(guī)范的情況下，只需要一種字體貫穿全文，通過(guò)對(duì)字體放大來(lái)強(qiáng)調(diào)重點(diǎn)文案。字體用的太多，越顯得不夠?qū)I(yè)。

不同的樣式的字體，形狀或系列最好相同，保證字體風(fēng)格的一致性。

字體與背景的層次要分明,確保字體樣式與色調(diào)氣氛相匹配

二、界面中文字使用的規(guī)則

在不同平臺(tái)的界面設(shè)計(jì)中規(guī)范的字體會(huì)有不同，像移動(dòng)界面的設(shè)計(jì)就會(huì)有固定的字體樣式。網(wǎng)頁(yè)中會(huì)有常用的幾個(gè)字體，在這我和大家分別介紹一下。

以下是在72像素/英寸下的規(guī)范

移動(dòng)端常規(guī)字體

IOS:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好。

Android

英文字體：Roboto

中文字體：Noto

移動(dòng)端常用的的字號(hào)有哪些呢？

導(dǎo)航主標(biāo)題字號(hào)：40-42px

我一般設(shè)計(jì)就用40px，偏小的40px字號(hào)，顯得精致些。