界面設(shè)計中的字號選擇

時間：2023-10-01 05:54:01 | 來源：網(wǎng)站運營

時間：2023-10-01 05:54:01 來源：網(wǎng)站運營

界面設(shè)計中的字號選擇：

【摘要】

文字作為UI設(shè)計中比重較高的元素，其字號的大小，排布的好壞，直接會影響到設(shè)計的布局和內(nèi)容的展示。不同的平臺對字號的選擇有所不同，而字號大小的選擇，往往是為了內(nèi)容更清晰，界面信息更有效的展示而服務(wù)的。這篇文章，我將以一個從業(yè)者設(shè)計師的角度，簡單的談?wù)勛约涸谧鼋缑嬖O(shè)計中的一些字號的選擇。

【作者】白金

移動端的兩種字體單位

在iOS中，字體的官方單位為pt(point)，中文稱為邏輯像素單位。在做非Retina屏幕的設(shè)計稿時，我們通常在Photoshop中將文檔的PPI(分辨率)設(shè)置為72，這個時候，1pt(邏輯像素)=1px(物理像素)。如果設(shè)計師用的是Sketch，那么其在設(shè)計模版內(nèi)的設(shè)計尺寸為375*667，在該尺寸下，1pt=1px依舊成立。需要注意的是，iOS中的pt單位和Photoshop中的pt單位雖然概念相同，但它們并不是同一個東西。Photoshop中的pt單位(點)主要用以映射印刷設(shè)備，印刷出來的1pt=1/72inch（inch為英寸，物理尺寸），而iOS中的pt(點)，則是用以映射屏幕。

在Android中，字體的官方單位是sp(scale-independent pixel)，中文稱為可縮放像素。在以160PPI(每英寸160點)屏幕為標準的顯示屏上顯示時，1sp=1px。sp與px的換算公式為sp*PPI/160=px。

iOS和Android平臺的默認字體

在iOS中，中文的默認字體為【蘋方】，英文的默認字體為【SanFrancisco】

在Android中，中文的默認字體為【思源黑體】，英文的默認字體為【Roboto】

iOS設(shè)計規(guī)范中的字體大小選擇

規(guī)范中舉例的默認字體為英文San Francisco的情況。作為iOS系統(tǒng)的默認英文字體，官方在其規(guī)范組件中對于字體大小有著詳細的規(guī)定。在官方推薦的默認大尺寸屏幕中，最大的字體大小為34pt，最小的字體大小為11pt。理論上，我們只需要保證在英文設(shè)計時，所選用的字體大小在該范圍內(nèi)即可。如下圖所示:

首先需要注意的是，這里的字體大小Size(points)是基于@2x倍圖，且屏幕的PPI設(shè)置為144的情況來輸出的。所以如果你在Photoshop中使用時，需要留意自身PPI數(shù)值，如果使用的是默認的72，且畫板創(chuàng)建為750px寬度時，這里的所有字體大小Size(points)都需要手動乘以2以后才能拿去使用。在Sketch中則可以直接使用。

按照官方提供的英文類型參考，我們大致可以將其分類為三個類別：

①標題類型：包含的字號為34pt、28pt、22pt、20pt

②正文類型：包含的字號為17pt、16pt、15pt

③注釋類型：包含的字號為13pt、12pt、11pt


其中，不同的英文字體大小，也有著對應(yīng)的行高值Leading（points），雖然行高在某些設(shè)計軟件中不太好去界定（比如Photoshop），但開發(fā)中是需要去進行設(shè)置的，這也正是為什么我們繪制的設(shè)計稿和開發(fā)成品在樣式上有差異的原因之一。




由于Apple在英文環(huán)境下提供了SF Pro多功能字體，因此需要在特定的預(yù)定下使用不同的大小，粗細或是樣式。在官方的文檔案例中，Apple將20pt及以上的字體大小，使用SF Pro Display字體樣式，而20pt以下的字體大小，則使用SF Pro Text字體樣式。

這一點需要我們在做英文設(shè)計的時候著重關(guān)注，但總體來說，目的只有一個，那就是當人們從不同的設(shè)備，屏幕尺寸和分辨率訪問你的網(wǎng)站或者App時，需要保證在任何一塊屏幕上，字體粗細適當，有著良好的易讀性和可用性。Apple官方提供的7種San Francisco字體，結(jié)合設(shè)計規(guī)范的使用，可以同時滿足手機端和iPad端的閱讀體驗。

中文字體大小的選擇

Apple官方并沒有為中文蘋方字體在設(shè)計規(guī)范中單獨列出推薦的字號大小，一般情況下我們可以直接套用英文San Francisco的大小規(guī)范。由于中文字體和英文字體在樣式上有著巨大的差異，尤其是某些中文字符的筆畫和結(jié)構(gòu)過于復雜，在套用最小字體尺寸時，往往會出現(xiàn)模糊不清，無法辨認的問題。因此，我們也可以適當結(jié)合實際情況對最小字號和最大字號的選擇做出調(diào)整即可。


按照官方提供的英文類型范圍參考，結(jié)合現(xiàn)實中使用的實際情況，我們大致可以將其分類為三個類別：

①標題類型：包含的字號為28pt、24pt、20pt

②正文類型：包含的字號為18pt、16pt、14pt、13pt

③注釋類型：包含的字號為12pt、11pt


同樣需要注意的是，這里的字體大小Size(points)同樣是基于@2x倍圖，且屏幕的PPI設(shè)置為144的情況來輸出的。因此在Photoshop中使用時，默認為72PPI的情況下，也需要先乘2后才可使用。

這里簡單用上圖舉一個例子，并不需要一板一眼完全按照規(guī)范規(guī)定的字號大小來使用，只需要在保證整體顯示舒適的前提下適當挑選合適的字體范圍即可。

Android設(shè)計規(guī)范中的字體大小選擇

Google在Material Design 2設(shè)計規(guī)范中展示了明確的字符比例指南，這份示例指南基于Roboto字體，且在不同類型的標題和正文下，通過設(shè)置字體的字重，大小，間距等，有效展示界面的層次結(jié)構(gòu)。

如表格所示，由左至右側(cè)類型分別為：

①樣式：包含了從H1至overline的所有類型，其中HX代表標題，Subtitle代表副標題，Body代表正文，BUTTON代表按鈕，Caption代表說明類文字，OVERLINE代表眉題（英文環(huán)境下出現(xiàn)）

②字體類型：此處舉例字體為Roboto

③字重類型：字體的粗細程度

④字號大?。簡挝粸镾P

⑤使用類型：作為句子使用或是全大寫使用（英文環(huán)境下出現(xiàn)）

⑥字距


由于Android系統(tǒng)的開放性，很多廠商在定制UI時，通常會換掉系統(tǒng)的默認字體?？紤]到設(shè)計的泛用性，我們僅需要使用Android系統(tǒng)的標準字體來進行設(shè)計即可。中文字體使用思源黑體，英文字體使用Roboto。

這里需要注意的是，Android環(huán)境下，谷歌按照屏幕類型的不同，指定了多套不同的資源標簽，如下圖。

密度類型	代表的分辨率（px）	屏幕密度（dpi）	換算（px/dp）
低密度（Idpi）	240X320	120	1dp=0.75px
中密度（mdpi）	320X480	160	1dp=1px
高密度（hdpi）	480X800	240	1dp=1.5px
超高密度（xhdpi）	720X1280	320	1dp=2px
超超高密度（xxhdpi）	1080X1920	480	1dp=3px
超超超高密度（xxxhdpi）	2160X3840	640	1dp=4px

而Photoshop中由于沒有sp這個單位來為Android的設(shè)計規(guī)范服務(wù)，因此我們需要根據(jù)屏幕密度類型的不同，結(jié)合換算關(guān)系，得出每個屏幕下對應(yīng)的字體px大小。

之前的文章已經(jīng)提到過，在屏幕狀態(tài)下，dpi可以等同與ppi來理解，那么換算的公式如下：

①找到當前所使用的屏幕大小對應(yīng)的dpi，例如xxhdpi屏幕，其對應(yīng)的dpi值為480

②帶入計算公式 sp*PPI/160=px 得到結(jié)論1px=3sp，再參考官方設(shè)計規(guī)范表格，例如Body2字號大小為14sp，那換算成為Photoshop中可使用的px單位，及為42px。

為你的設(shè)計選擇合適的字號大小

規(guī)范有了，我們應(yīng)該如何結(jié)合規(guī)范建議的字號尺寸，選擇合適的字號大小呢？關(guān)于這一點，我們需要考慮整個頁面中，每一部分文字所代表的含義。

圖為小宇宙APP的主界面截圖，可以看到，這里不同大小的文字代表了不同的含義。

①最頂部的【發(fā)現(xiàn)】表示該頁面的主題，因此以最大的字體大小來展示。

②【你的專屬推薦】和【編輯精選】屬于頁面中的主題模塊，它們是整個頁面的子內(nèi)容主題，且兩者之間處于同一層級

③深黑色部分【Vol.40...】是每一檔節(jié)目的標題，作為整個界面最終要的元素，因此用深色來展示。但其比重又是在某一個子內(nèi)容模塊之下，所以字體大小相對較小。

包括電臺節(jié)目標題上的副標題，底部的精選評論等，這里就不做展開說明了?？梢钥吹降氖?，頁面中不同的文字有著不同的字重和大小，這種設(shè)計搭配豐富和整個頁面的視覺效果，也幫助用戶去理解各個內(nèi)容的層級和重要程度。因此，在設(shè)計中，我們需要為不同的位置的字體選擇合適的字號大小，以不同的樣式來體現(xiàn)我們想要表達的內(nèi)容。重要元素和關(guān)鍵元素，要么字號偏大，要么顏色偏深。相對而言注釋部分就可以用稍小的字號與稍淺的顏色來區(qū)分。

以上便是筆者對字號選擇的一些理解，規(guī)范不是束縛我們的條條框框，而是輔助我們做出更好設(shè)計的工具。完全不參考規(guī)范或者一味拿規(guī)范來約束自己都是不合適的，文中所提內(nèi)容或許會因為規(guī)范的更新而變得過時，屆時再做更新，希望可以幫助到各位讀者。

---

歡迎關(guān)注技術(shù)團隊的本站賬號我們憑團隊實例運作以下專欄， 必須干貨！

互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)

與您一起聊技術(shù) (APP、微信公眾號、小程序、H5 技術(shù)總結(jié))

互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對產(chǎn)品結(jié)構(gòu)的管理思路)

產(chǎn)品君的案例庫（產(chǎn)品小伙伴深刻總結(jié)）