app的界面設(shè)計除了排版外,還有很多留白和文字,而文字被不少人忽略,字體的使用,字體的大小粗細(xì)變化都沒有好好仔細(xì)斟酌,今天分享UI設(shè)計中的字體使用指南,初學(xué)者必備!
Android與iOS系統(tǒng)字體詳解
1.Android默認(rèn)字體-思源黑體/Robot
在Android設(shè)備中,Android始祖Google為了更好的追求視覺效果,提高用戶體驗,所以聯(lián)合了Adobe設(shè)計發(fā)布了思源黑體(Noto)來作為中文字體。
該字體字形較為平穩(wěn),利于閱讀,且有個7個不同的字重,充分滿足了不同場景下的設(shè)計需求,7個字重分別為:Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文,則使用Robot來作為基礎(chǔ)字體,只有6個字重:分別為Thin、Light、Regular、Medium、Bold 和 Black,視覺語言與思源黑體Noto保持一致。
另外在Google的Material Design手冊中,官方還給出了標(biāo)準(zhǔn)的字號大小。在安卓的字體單位中,不再以px,pt作為單位而是統(tǒng)一的使用了sp,換算方式:
px = sp*ppi/160 ,sp = px / (ppi / 160)
按照iPhone7的尺寸1334×750.密度326ppi 來換算,那么Android的1dp = 1 * 326/160 ≈ 2px
2.iOS默認(rèn)字體-蘋方/San Francisco
在iOS系統(tǒng)中,中文方面蘋果則加入了全新的蘋方字體,字形纖細(xì)中宮飽滿,利于閱讀,并且還提供6個字重供設(shè)計開發(fā)者使用。所以后面的設(shè)計趨勢中,字重的使用變的開始多元化了起來,使用Semibold中粗體、大字號作為界面的標(biāo)題變的更為流行起來,較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。
而在英文方面,則使用了San Francisco 的字體,除了在iOS和Mac OS上,還單獨為Watch OS單獨對字體進(jìn)行了調(diào)整,命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性,Text只有6個字重,而Display則有9個字重。
3.總結(jié)&結(jié)論
通過對比,我們可以發(fā)現(xiàn):其實Android與iOS字體字形方面差異化明顯不大,不用特意下載所有字體進(jìn)行單獨配置。那么在平常工作中,我們只需要按照一套標(biāo)準(zhǔn)的iOS設(shè)計稿輸出即可,在Android方面進(jìn)行自動延展,最后走查確認(rèn)一下效果即可。
如果涉及到使用除Regular標(biāo)準(zhǔn)體之外的字體,那么除了顏色,還應(yīng)當(dāng)標(biāo)注相應(yīng)的字重字高等信息(如Font:Pingfang SC-Semibold,line:52px) ,而不應(yīng)當(dāng)只標(biāo)注一個加粗或者加細(xì)。當(dāng)然如果人力允許的情況下,我們也可以單獨為Android做一套界面及字體適配,提高Android端的視覺顯示效果。
字體的基本使用規(guī)范
統(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ù)的字體在顯示的時候會有毛邊)
總結(jié):
互聯(lián)網(wǎng)在進(jìn)步,所以設(shè)計趨勢也是有著各種各樣不同的形式,而字體作為基本語言,是設(shè)計師需要掌握的基本技能之一,希望能對各位讀者有所幫助。
另外其實在工作中,也建議大家對自己的經(jīng)驗進(jìn)行總結(jié),對關(guān)鍵信息進(jìn)行提煉加以沉淀,一方面能讓自己的知識更加牢固,另一方面也可以幫助后來者進(jìn)行成長。
全站高品質(zhì)素材免費下載!