看完上面這張圖你就能明白了

是不是閱讀起來非常的難受？

 

那就對了！

其實折磨你的問題有以下幾點

1.字體樣式太多，雜亂無章

2.使用的字體不易識別

3.字體和內(nèi)容的氣氛不匹配

 

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

一句話：通過常用字體規(guī)范可以幫助你做出符合要求的設(shè)計

 

一.字不過三！

 

很多大神說過色不過三，其實在同一個APP或在同一個設(shè)計作品中字體也不要過三種樣式，一般在每個項目設(shè)計中使用1-2個字體樣式就夠了，然后通過對字體大小或顏色來強調(diào)重點文案。

 

 

看到上圖中的幾個界面，都是通過字體的大小來區(qū)分出界面內(nèi)容中的層級關(guān)系的。

其中包括了螞蟻花唄的banner里只用了一種字體來區(qū)分主標(biāo)題和副標(biāo)題的關(guān)系。

其實網(wǎng)頁也是一樣，使用一種字體樣式，通過字體大小的對比也能做出高逼格的構(gòu)圖和設(shè)計。

 

 

講真！字體用的太多，會顯得你不夠?qū)I(yè)！

 

 

二 .字與背景的層次要分明

 

 

看完上面兩張Banner圖是不是發(fā)現(xiàn)了同樣的問題，字體和背景融到一塊去了，在閱讀的時候非常的不方便

這樣的Banner如何才能達(dá)到廣而告知呢？

 

包括做移動界面也是一個道理，選擇下面這樣的一個背景，用戶在光照很強的時候能看清嗎？

 

 

所以易讀性和易用性是用戶的根本訴求！

 

三.字體樣式與氣氛要匹配

 

看完這個圖

 

第一個感覺就是看不懂！仔細(xì)看才知道是眼部精華油。

文字的風(fēng)格和整體的設(shè)計風(fēng)格不一致，沒有帶動用戶的購買欲。

 

我們再來看看下圖

 

 

結(jié)合文案內(nèi)容，設(shè)計風(fēng)格采用了比較明快剛勁的設(shè)計風(fēng)格，字體也選擇了比較剛勁有力的造字工坊勁黑體。氣氛匹配，用戶代入感強。

 

 

 

活動banner的氣氛非常重要，選擇合適的字體樣式能加強購買欲和點擊欲。

 

 

以風(fēng)格分類常用的字體有以下幾種類型

 

1.平穩(wěn)型字體

在陌陌APP歡迎也中使用到了比較平穩(wěn)的方正正中黑，整體風(fēng)格比較直接明了。

 

方正蘭亭系列是網(wǎng)頁設(shè)計中必用的字體，穩(wěn)重而細(xì)膩，還具有時尚科技感。

看看下面這個蘋果的網(wǎng)頁，就造了

用了方正蘭亭超細(xì)后的感覺，是不是高端了許多~

 

當(dāng)然用在科技產(chǎn)品的官網(wǎng)中更合適不過了。穩(wěn)重而富有科技感。

 

2.剛勁有力型

張海山的字體非常的好用，可以試試，清晰明了，年輕有力

 

 
 

華康儷金黑有種大字報的感覺

 

 

3.可愛型字體

 使用方正經(jīng)黑設(shè)計的內(nèi)涵banner

是不是很可愛很有深度~~~

 

 

漢儀小麥?zhǔn)褂迷诓瀹嬛械母杏X，不解釋

 

 (by 白茶)

 

華康海報體

專題和引導(dǎo)頁面中經(jīng)常會用到

 

 

騰翔金磚體

 

這也是一個非常不錯的字體

設(shè)計師利用了騰翔金磚體的原型將美食的元素融入到了設(shè)計中

 

 

（注意合法使用字體，字體都是有版權(quán)的哦~）

 

當(dāng)然我們還可以使用毛筆字生成器

 

通過自由的書法網(wǎng)站在線生成

在網(wǎng)址中輸入文本，再進(jìn)行選擇書法字體樣式

通過這種方法我們能很快的找到需要的書法字體

 

這招非常管用！

 

 

推薦大家來兩個毛筆字生成的網(wǎng)站：

http://www.akuziti.com/mb/

http://www.51poca.com/

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

1.了解系統(tǒng)字體

iOS系統(tǒng)中用的是蘋方字體系列

為了加強層次關(guān)系蘋方系列從細(xì)到粗有著不同的樣式

Android的默認(rèn)字體是Roboto和Noto系列

 

Roboto有6種字樣

Thin、Light、Regular、Medium、Bold 和 Black

 

 

Noto有7種字樣

Thin, Light、DemiLight、Regular、Medium、Bold 和 Black

 

 

 

2.統(tǒng)一字號

一個App，不同位置的字體字號

你能準(zhǔn)確地說出來嗎？

如果不能，說明你還不了解規(guī)范，沒有去制定規(guī)范。

那我們先了解一下常規(guī)的一些大小（應(yīng)用于2倍尺寸中，即iphone5/6）

導(dǎo)航主標(biāo)題字號：34/36px

蘋果默認(rèn)標(biāo)題字號為34px，而有些軟件也會用到36px，更加強頁面位置關(guān)系

比如微信導(dǎo)航標(biāo)題字號36px，導(dǎo)航字體醒目易于對應(yīng)頁面位置。

 

在內(nèi)文展示中字號大小又是多大呢？

 

正文字號32px-34px

副文是28px-24px

最小字號不低于20px

 

字在正文字號使用中，閱讀類的APP更注重文本的閱讀便捷性

正文字號34px，會選擇性的選用蘋方粗體

 

 

而列表形式、工具化的APP普遍是正文32px 

(由于屏幕使用變大正文大小趨勢變成了34px)

副文案28px,時間文字24px

26px的字號還會用于劃分類別的提示文案

因為這樣的文字希望用戶閱讀，但不要搶過主列表信息的引導(dǎo)。

 

34px的字號還經(jīng)常運用在頁面的大按鈕中。為了拉開按鈕的層次，同時加強按鈕引導(dǎo)性，選用了稍大號的字體。

注意了！在選用字體大小的時候一定要選擇偶數(shù)的字號。因為在開發(fā)界面的時候，字號大小換算是要除以二的

那網(wǎng)頁中常用的字號有哪些呢？

網(wǎng)頁字號最小12px

常用微軟14px/16px作為正文

 

大號字體是18px、20px、26px、30px

（注意使用雙數(shù)字號，單數(shù)的字體在顯示的時候會有毛邊）

好的設(shè)計不應(yīng)該永遠(yuǎn)是“人家的設(shè)計”

一定是看得不夠多，琢磨不夠透，練手太少

MICU_王鐸

[教程作者：micu設(shè)計]
(責(zé)任編輯：極限)