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

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

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

1. 英文的字號

在蘋果的官方建議中，有羅列比較完整的文字字號建議，但大家一定要謹記，那些就是建議，并不需要在非官方的組件中應用那些字號。

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

在 UI 中，最小字號的依據(jù)一般有兩個，一個是人眼的可見度，另一個是屏幕的顯示極限，最小的字號應該在 9pt 。而最大的字號，以 iOS11 的標題字號 34pt 為準即可。

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

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

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

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

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

2. 中文字體

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

至于最大的中文，因為蘋方并沒有 SF pro 字體那么豐富的字重，字號過大會有正負形失衡的違和感，所以，最大字號的尺寸也應比英文小。

下面是我在中文應用中建議使用的字號：

• 標題：28、24、22、20
• 正文：18、16、14
• 注釋：12、11

前面做過的原型，應用的就是這些字號。

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

3. 文字的邊距

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

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

因為前面我們已經(jīng)說過控件的尺寸如何設(shè)置，所以當我們在設(shè)置文字時，很多時候是根據(jù)控件定義的高度結(jié)合邊距來選擇文字的字號，下面通過一些控件來舉例。

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

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

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

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

最新評論