站長(zhǎng)資訊網(wǎng) 
看完上面這張圖你就能明白了
是不是閱讀起來(lái)非常的難受？
那就對(duì)了！
其實(shí)折磨你的問(wèn)題有以下幾點(diǎn)
1.字體樣式太多，雜亂無(wú)章
2.使用的字體不易識(shí)別
3.字體和內(nèi)容的氣氛不匹配
怎么避免這樣的結(jié)果發(fā)生呢？
一句話：通過(guò)常用字體規(guī)范可以幫助你做出符合要求的設(shè)計(jì)
一.字不過(guò)三！
很多大神說(shuō)過(guò)色不過(guò)三，其實(shí)在同一個(gè)APP或在同一個(gè)設(shè)計(jì)作品中字體也不要過(guò)三種樣式，一般在每個(gè)項(xiàng)目設(shè)計(jì)中使用1-2個(gè)字體樣式就夠了，然后通過(guò)對(duì)字體大小或顏色來(lái)強(qiáng)調(diào)重點(diǎn)文案。
看到上圖中的幾個(gè)界面，都是通過(guò)字體的大小來(lái)區(qū)分出界面內(nèi)容中的層級(jí)關(guān)系的。
其中包括了螞蟻花唄的banner里只用了一種字體來(lái)區(qū)分主標(biāo)題和副標(biāo)題的關(guān)系。
其實(shí)網(wǎng)頁(yè)也是一樣，使用一種字體樣式，通過(guò)字體大小的對(duì)比也能做出高逼格的構(gòu)圖和設(shè)計(jì)。
講真！字體用的太多，會(huì)顯得你不夠?qū)I(yè)！
二 .字與背景的層次要分明
看完上面兩張Banner圖是不是發(fā)現(xiàn)了同樣的問(wèn)題，字體和背景融到一塊去了，在閱讀的時(shí)候非常的不方便
這樣的Banner如何才能達(dá)到廣而告知呢？
包括做移動(dòng)界面也是一個(gè)道理，選擇下面這樣的一個(gè)背景，用戶(hù)在光照很強(qiáng)的時(shí)候能看清嗎？
所以易讀性和易用性是用戶(hù)的根本訴求！
三.字體樣式與氣氛要匹配
看完這個(gè)圖
第一個(gè)感覺(jué)就是看不懂！仔細(xì)看才知道是眼部精華油。
文字的風(fēng)格和整體的設(shè)計(jì)風(fēng)格不一致，沒(méi)有帶動(dòng)用戶(hù)的購(gòu)買(mǎi)欲。
我們?cè)賮?lái)看看下圖
結(jié)合文案內(nèi)容，設(shè)計(jì)風(fēng)格采用了比較明快剛勁的設(shè)計(jì)風(fēng)格，字體也選擇了比較剛勁有力的造字工坊勁黑體。氣氛匹配，用戶(hù)代入感強(qiáng)。
活動(dòng)banner的氣氛非常重要，選擇合適的字體樣式能加強(qiáng)購(gòu)買(mǎi)欲和點(diǎn)擊欲。
以風(fēng)格分類(lèi)常用的字體有以下幾種類(lèi)型
1.平穩(wěn)型字體
在陌陌APP歡迎也中使用到了比較平穩(wěn)的方正正中黑，整體風(fēng)格比較直接明了。
方正蘭亭系列是網(wǎng)頁(yè)設(shè)計(jì)中必用的字體，穩(wěn)重而細(xì)膩，還具有時(shí)尚科技感。
看看下面這個(gè)蘋(píng)果的網(wǎng)頁(yè)，就造了
用了方正蘭亭超細(xì)后的感覺(jué)，是不是高端了許多~
當(dāng)然用在科技產(chǎn)品的官網(wǎng)中更合適不過(guò)了。穩(wěn)重而富有科技感。
2.剛勁有力型
張海山的字體非常的好用，可以試試，清晰明了，年輕有力
華康儷金黑有種大字報(bào)的感覺(jué)
3.可愛(ài)型字體
使用方正經(jīng)黑設(shè)計(jì)的內(nèi)涵banner
是不是很可愛(ài)很有深度~~~
漢儀小麥?zhǔn)褂迷诓瀹?huà)中的感覺(jué)，不解釋
(by 白茶)
華康海報(bào)體
專(zhuān)題和引導(dǎo)頁(yè)面中經(jīng)常會(huì)用到
騰翔金磚體
這也是一個(gè)非常不錯(cuò)的字體
設(shè)計(jì)師利用了騰翔金磚體的原型將美食的元素融入到了設(shè)計(jì)中
（注意合法使用字體，字體都是有版權(quán)的哦~）
當(dāng)然我們還可以使用毛筆字生成器
通過(guò)自由的書(shū)法網(wǎng)站在線生成
在網(wǎng)址中輸入文本，再進(jìn)行選擇書(shū)法字體樣式
通過(guò)這種方法我們能很快的找到需要的書(shū)法字體
這招非常管用！
推薦大家來(lái)兩個(gè)毛筆字生成的網(wǎng)站：
http://www.akuziti.com/mb/
http://www.51poca.com/
二.界面中文字使用的規(guī)則
1.了解系統(tǒng)字體
iOS系統(tǒng)中用的是蘋(píng)方字體系列
為了加強(qiáng)層次關(guān)系蘋(píng)方系列從細(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)一字號(hào)
一個(gè)App，不同位置的字體字號(hào)
你能準(zhǔn)確地說(shuō)出來(lái)嗎？
如果不能，說(shuō)明你還不了解規(guī)范，沒(méi)有去制定規(guī)范。
那我們先了解一下常規(guī)的一些大?。☉?yīng)用于2倍尺寸中，即iphone5/6）
導(dǎo)航主標(biāo)題字號(hào)：34/36px
蘋(píng)果默認(rèn)標(biāo)題字號(hào)為34px，而有些軟件也會(huì)用到36px，更加強(qiáng)頁(yè)面位置關(guān)系
比如微信導(dǎo)航標(biāo)題字號(hào)36px，導(dǎo)航字體醒目易于對(duì)應(yīng)頁(yè)面位置。
在內(nèi)文展示中字號(hào)大小又是多大呢？
正文字號(hào)32px-34px
副文是28px-24px
最小字號(hào)不低于20px
字在正文字號(hào)使用中，閱讀類(lèi)的APP更注重文本的閱讀便捷性
正文字號(hào)34px，會(huì)選擇性的選用蘋(píng)方粗體
而列表形式、工具化的APP普遍是正文32px
(由于屏幕使用變大正文大小趨勢(shì)變成了34px)
副文案28px,時(shí)間文字24px
26px的字號(hào)還會(huì)用于劃分類(lèi)別的提示文案
因?yàn)檫@樣的文字希望用戶(hù)閱讀，但不要搶過(guò)主列表信息的引導(dǎo)。
34px的字號(hào)還經(jīng)常運(yùn)用在頁(yè)面的大按鈕中。為了拉開(kāi)按鈕的層次，同時(shí)加強(qiáng)按鈕引導(dǎo)性，選用了稍大號(hào)的字體。
注意了！在選用字體大小的時(shí)候一定要選擇偶數(shù)的字號(hào)。因?yàn)樵陂_(kāi)發(fā)界面的時(shí)候，字號(hào)大小換算是要除以二的
那網(wǎng)頁(yè)中常用的字號(hào)有哪些呢？
網(wǎng)頁(yè)字號(hào)最小12px
常用微軟14px/16px作為正文
大號(hào)字體是18px、20px、26px、30px
（注意使用雙數(shù)字號(hào)，單數(shù)的字體在顯示的時(shí)候會(huì)有毛邊）
好的設(shè)計(jì)不應(yīng)該永遠(yuǎn)是“人家的設(shè)計(jì)”
一定是看得不夠多，琢磨不夠透，練手太少
MICU_王鐸
