app設(shè)計(jì)字體大小規(guī)范

app的界面設(shè)計(jì)除了排版外,還有很多留白和文字,而文字被不少人忽略,字體的使用,字體的大小粗細(xì)變化都沒(méi)有好好仔細(xì)斟酌,今天分享UI設(shè)計(jì)中的字體使用指南,初學(xué)者必備!

Android與iOS系統(tǒng)字體詳解

1.Android默認(rèn)字體-思源黑體/Robot

在Android設(shè)備中,Android始祖Google為了更好的追求視覺(jué)效果,提高用戶體驗(yàn),所以聯(lián)合了Adobe設(shè)計(jì)發(fā)布了思源黑體(Noto)來(lái)作為中文字體。

該字體字形較為平穩(wěn),利于閱讀,且有個(gè)7個(gè)不同的字重,充分滿足了不同場(chǎng)景下的設(shè)計(jì)需求,7個(gè)字重分別為:Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文,則使用Robot來(lái)作為基礎(chǔ)字體,只有6個(gè)字重:分別為T(mén)hin、Light、Regular、Medium、Bold 和 Black,視覺(jué)語(yǔ)言與思源黑體Noto保持一致。

另外在Google的Material Design手冊(cè)中,官方還給出了標(biāo)準(zhǔn)的字號(hào)大小。在安卓的字體單位中,不再以px,pt作為單位而是統(tǒng)一的使用了sp,換算方式:

px = sp*ppi/160 ,sp = px / (ppi / 160)

按照iPhone7的尺寸1334×750.密度326ppi 來(lái)?yè)Q算,那么Android的1dp = 1 * 326/160 ≈ 2px

2.iOS默認(rèn)字體-蘋(píng)方/San Francisco

在iOS系統(tǒng)中,中文方面蘋(píng)果則加入了全新的蘋(píng)方字體,字形纖細(xì)中宮飽滿,利于閱讀,并且還提供6個(gè)字重供設(shè)計(jì)開(kāi)發(fā)者使用。所以后面的設(shè)計(jì)趨勢(shì)中,字重的使用變的開(kāi)始多元化了起來(lái),使用Semibold中粗體、大字號(hào)作為界面的標(biāo)題變的更為流行起來(lái),較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。

而在英文方面,則使用了San Francisco 的字體,除了在iOS和Mac OS上,還單獨(dú)為Watch OS單獨(dú)對(duì)字體進(jìn)行了調(diào)整,命名為 San Francisco Compact。而每套字體下面又分為T(mén)ext與Display兩種屬性,Text只有6個(gè)字重,而Display則有9個(gè)字重。

3.總結(jié)&結(jié)論

通過(guò)對(duì)比,我們可以發(fā)現(xiàn):其實(shí)Android與iOS字體字形方面差異化明顯不大,不用特意下載所有字體進(jìn)行單獨(dú)配置。那么在平常工作中,我們只需要按照一套標(biāo)準(zhǔn)的iOS設(shè)計(jì)稿輸出即可,在Android方面進(jìn)行自動(dòng)延展,最后走查確認(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)注一個(gè)加粗或者加細(xì)。當(dāng)然如果人力允許的情況下,我們也可以單獨(dú)為Android做一套界面及字體適配,提高Android端的視覺(jué)顯示效果。

字體的基本使用規(guī)范

統(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)使用中,閱讀類的APP更注重文本的閱讀便捷性

正文字號(hào)34px,會(huì)選擇性的選用蘋(píng)方粗體

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

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

副文案28px,時(shí)間文字24px

26px的字號(hào)還會(huì)用于劃分類別的提示文案

因?yàn)檫@樣的文字希望用戶閱讀,但不要搶過(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ì)有毛邊)

總結(jié):

互聯(lián)網(wǎng)在進(jìn)步,所以設(shè)計(jì)趨勢(shì)也是有著各種各樣不同的形式,而字體作為基本語(yǔ)言,是設(shè)計(jì)師需要掌握的基本技能之一,希望能對(duì)各位讀者有所幫助。

另外其實(shí)在工作中,也建議大家對(duì)自己的經(jīng)驗(yàn)進(jìn)行總結(jié),對(duì)關(guān)鍵信息進(jìn)行提煉加以沉淀,一方面能讓自己的知識(shí)更加牢固,另一方面也可以幫助后來(lái)者進(jìn)行成長(zhǎng)。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!