設(shè)計(jì)規(guī)范

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

98580

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è)字重：分別為Thin、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)字體-蘋方/San Francisco

在iOS系統(tǒng)中，中文方面蘋果則加入了全新的蘋方字體，字形纖細(xì)中宮飽滿，利于閱讀，并且還提供6個(gè)字重供設(shè)計(jì)開發(fā)者使用。所以后面的設(shè)計(jì)趨勢(shì)中，字重的使用變的開始多元化了起來(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。而每套字體下面又分為Text與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é)顯示效果。