而在對控件和文字都掌握熟練以后，才能進(jìn)入后面的組件設(shè)計(jì)認(rèn)識(shí)。

首先我們知道，安卓和 iOS 應(yīng)用的中英文字體各不相同，蘋果是用蘋方和 San Francisco，安卓使用思源黑體和 Robot。

在后面我們主要以 iOS 作為說明的對象，安卓可以直接參照它的字體尺寸設(shè)置。

1. 英文的字號(hào)

在蘋果的官方建議中，有羅列比較完整的文字字號(hào)建議，但大家一定要謹(jǐn)記，那些就是建議，并不需要在非官方的組件中應(yīng)用那些字號(hào)。

首先我們要先劃分出一個(gè)文字字號(hào)的范圍，之后所有字體的字號(hào)設(shè)置就在那里面挑選。

在 UI 中，最小字號(hào)的依據(jù)一般有兩個(gè)，一個(gè)是人眼的可見度，另一個(gè)是屏幕的顯示極限，最小的字號(hào)應(yīng)該在 9pt 。而最大的字號(hào)，以 iOS11 的標(biāo)題字號(hào) 34pt 為準(zhǔn)即可。

從 9-34，理論上其中每一個(gè)整數(shù)都可以使用，但我還是建議要應(yīng)用一定的習(xí)慣。下面，就是我在英文應(yīng)用設(shè)計(jì)中會(huì)使用的字體字號(hào)列表，為了便于記憶，我就只拆分成三種類型，初學(xué)者在使用時(shí)直接照搬就可以。

• 標(biāo)題：34、28、24、22、20
• 閱讀：18、16、14、12
• 注釋：11、10、9

在英文應(yīng)用中，我們應(yīng)用的字號(hào)大小隨項(xiàng)目復(fù)雜度決定，通常，尺寸會(huì)在五種以上，兩種標(biāo)題、兩種閱讀、一種注釋類字號(hào)，當(dāng)然，我們還會(huì)通過字重和色彩進(jìn)一步劃分，在這不再贅述。例如下面我使用五種字號(hào)尺寸設(shè)計(jì)出來的原型案例：

在 iOS 中，尺寸小于 20pt 使用 SF Pro Text，大于等于 20pt 時(shí)則使用 SF Pro Display 字體，這點(diǎn)大家需要牢記。

數(shù)字字體可以等同于英文，但如果有需要展示數(shù)據(jù)的需求，那么最大尺寸就要靠自己的判斷了。

2. 中文字體

中文字體和英文字體的最大差異在于筆畫數(shù)，很多中文的筆畫和結(jié)構(gòu)都異常復(fù)雜，如 「嚷」、「饕」、「餐」等，所以，最小的尺寸不可能和英文相等。建議最小中文字號(hào)使用 11pt。

至于最大的中文，因?yàn)樘O方并沒有 SF pro 字體那么豐富的字重，字號(hào)過大會(huì)有正負(fù)形失衡的違和感，所以，最大字號(hào)的尺寸也應(yīng)比英文小。

下面是我在中文應(yīng)用中建議使用的字號(hào)：

• 標(biāo)題：28、24、22、20
• 正文：18、16、14
• 注釋：12、11

前面做過的原型，應(yīng)用的就是這些字號(hào)。

中文的字號(hào)選擇范圍是比英文小的，并且，中文字重?cái)?shù)遠(yuǎn)少于英文，我們在做中文的應(yīng)用排版遠(yuǎn)遠(yuǎn)比英文應(yīng)用容易。很多新手天真的以為英文更容易設(shè)計(jì)，那都是源自對英文的陌生，只是將字符純粹的當(dāng)成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本。

3. 文字的邊距

前面講完了字號(hào)的選擇范圍，這里我們就要再來討論一個(gè)問題，就是如何選擇。

首先，合理的字號(hào)應(yīng)用是要和環(huán)境息息相關(guān)的，而這種聯(lián)系最多體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落，是需要留白的，過于擁擠的文字排列只會(huì)造成閱讀的不適。

因?yàn)榍懊嫖覀円呀?jīng)說過控件的尺寸如何設(shè)置，所以當(dāng)我們在設(shè)置文字時(shí)，很多時(shí)候是根據(jù)控件定義的高度結(jié)合邊距來選擇文字的字號(hào)，下面通過一些控件來舉例。

例如我們定義了一個(gè) 40pt 高的按鈕，在設(shè)置文字時(shí)，嘗試將多種文字字號(hào)置入，過多的間距和過小的間距都會(huì)讓按鈕看起來不精致。合適的字體大小應(yīng)該是 16pt。

而如果設(shè)置了一個(gè) 24pt 按鈕，那么得到的結(jié)論應(yīng)該是 12pt。

輸入框的文字應(yīng)用和按鈕相同，也以上下間距作為主要參考。

字號(hào)的選擇，除了本身定位（如標(biāo)題或正文）以外，是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點(diǎn)點(diǎn)時(shí)間，像上方案例演示的一樣將設(shè)計(jì)元素復(fù)制排列出來，就可以很快選出正確的數(shù)值。

最新評論