設計規范 ·

app設計字體大小規范

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

Android與iOS系統字體詳解

1.Android默認字體-思源黑體/Robot

在Android設備中,Android始祖Google為了更好的追求視覺效果,提高用戶體驗,所以聯合了Adobe設計發布了思源黑體(Noto)來作為中文字體。

該字體字形較為平穩,利于閱讀,且有個7個不同的字重,充分滿足了不同場景下的設計需求,7個字重分別為:Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文,則使用Robot來作為基礎字體,只有6個字重:分別為Thin、Light、Regular、Medium、Bold 和 Black,視覺語言與思源黑體Noto保持一致。

另外在Google的Material Design手冊中,官方還給出了標準的字號大小。在安卓的字體單位中,不再以px,pt作為單位而是統一的使用了sp,換算方式:

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

按照iPhone7的尺寸1334×750.密度326ppi 來換算,那么Android的1dp = 1 * 326/160 ≈ 2px

2.iOS默認字體-蘋方/San Francisco

在iOS系統中,中文方面蘋果則加入了全新的蘋方字體,字形纖細中宮飽滿,利于閱讀,并且還提供6個字重供設計開發者使用。所以后面的設計趨勢中,字重的使用變的開始多元化了起來,使用Semibold中粗體、大字號作為界面的標題變的更為流行起來,較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。

而在英文方面,則使用了San Francisco 的字體,除了在iOS和Mac OS上,還單獨為Watch OS單獨對字體進行了調整,命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性,Text只有6個字重,而Display則有9個字重。

3.總結&結論

通過對比,我們可以發現:其實Android與iOS字體字形方面差異化明顯不大,不用特意下載所有字體進行單獨配置。那么在平常工作中,我們只需要按照一套標準的iOS設計稿輸出即可,在Android方面進行自動延展,最后走查確認一下效果即可。

如果涉及到使用除Regular標準體之外的字體,那么除了顏色,還應當標注相應的字重字高等信息(如Font:Pingfang SC-Semibold,line:52px) ,而不應當只標注一個加粗或者加細。當然如果人力允許的情況下,我們也可以單獨為Android做一套界面及字體適配,提高Android端的視覺顯示效果。

字體的基本使用規范

統一字號

一個App,不同位置的字體字號

你能準確地說出來嗎?

如果不能,說明你還不了解規范,沒有去制定規范。

那我們先了解一下常規的一些大小(應用于2倍尺寸中,即iphone5/6)

導航主標題字號:34/36px

蘋果默認標題字號為34px,而有些軟件也會用到36px,更加強頁面位置關系

比如微信導航標題字號36px,導航字體醒目易于對應頁面位置。

在內文展示中字號大小又是多大呢?

正文字號32px-34px

副文是28px-24px

最小字號不低于20px

字在正文字號使用中,閱讀類的APP更注重文本的閱讀便捷性

正文字號34px,會選擇性的選用蘋方粗體

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

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

副文案28px,時間文字24px

26px的字號還會用于劃分類別的提示文案

因為這樣的文字希望用戶閱讀,但不要搶過主列表信息的引導。

34px的字號還經常運用在頁面的大按鈕中。為了拉開按鈕的層次,同時加強按鈕引導性,選用了稍大號的字體。

注意了!在選用字體大小的時候一定要選擇偶數的字號。因為在開發界面的時候,字號大小換算是要除以二的

那網頁中常用的字號有哪些呢?

網頁字號最小12px

常用微軟14px/16px作為正文

大號字體是18px、20px、26px、30px

(注意使用雙數字號,單數的字體在顯示的時候會有毛邊)

總結:

互聯網在進步,所以設計趨勢也是有著各種各樣不同的形式,而字體作為基本語言,是設計師需要掌握的基本技能之一,希望能對各位讀者有所幫助。

另外其實在工作中,也建議大家對自己的經驗進行總結,對關鍵信息進行提煉加以沉淀,一方面能讓自己的知識更加牢固,另一方面也可以幫助后來者進行成長。