看完上面這張圖你就能明白了 是不是閱讀起來非常的難受? 那就對了! 其實折磨你的問題有以下幾點 1.字體樣式太多,雜亂無章 2.使用的字體不易識別 3.字體和內(nèi)容的氣氛不匹配 怎么

看完上面這張圖你就能明白了
是不是閱讀起來非常的難受?
那就對了!
其實折磨你的問題有以下幾點
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如何才能達到廣而告知呢?
包括做移動界面也是一個道理,選擇下面這樣的一個背景,用戶在光照很強的時候能看清嗎?

所以易讀性和易用性是用戶的根本訴求!
三.字體樣式與氣氛要匹配

看完這個圖
第一個感覺就是看不懂!仔細(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)址中輸入文本,再進行選擇書法字體樣式
通過這種方法我們能很快的找到需要的書法字體
這招非常管用!

推薦大家來兩個毛筆字生成的網(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,會選擇性的選用蘋方粗體
新聞熱點
疑難解答