對(duì)于剛?cè)胄械腢I設(shè)計(jì)師，往往會(huì)遇到一個(gè)基礎(chǔ)問(wèn)題，就是設(shè)計(jì)移動(dòng)APP時(shí)，是用什么尺寸或者用哪種屏幕的尺寸是適當(dāng)?shù)模坑械耐瑢W(xué)花了很長(zhǎng)時(shí)間也不知道怎么做，困擾著新人的除了不知道應(yīng)該在界面中放什么以外，最突出的就是不知道元素應(yīng)該使用的長(zhǎng)寬數(shù)值，也是學(xué)生問(wèn)得最多的問(wèn)題，所以著手整理了這篇篇文章做掃盲，一次性搞明白，在手機(jī)的界面中如何設(shè)置元素的尺寸。 

一、基礎(chǔ)規(guī)則1. 官方規(guī)范

對(duì)于剛開(kāi)始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問(wèn)題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜。

我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫(kù)所示。

官方不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長(zhǎng)寬和其它參數(shù)，所以想弄明白，要自己在這兩套素材庫(kù)中選中元素查看。如下圖這個(gè)按鈕，我們就能看見(jiàn)它的參數(shù)值。

在初期，我們想要設(shè)計(jì)出嚴(yán)格符合官方規(guī)范的設(shè)計(jì)，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件包含的元素字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過(guò)程中，還是會(huì)出現(xiàn)它們無(wú)法覆蓋的設(shè)計(jì)類型，需要依靠我們自己設(shè)置。

還有如字體的應(yīng)用，官方源文件使用的語(yǔ)言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見(jiàn)文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場(chǎng)景下，我們是不可能照搬這種規(guī)范的。

新人要明白，官方的規(guī)范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無(wú)法設(shè)計(jì)出有趣個(gè)性化的設(shè)計(jì)的，比如下面這幾款已經(jīng)看不到 「 iOS 設(shè)計(jì) 」的應(yīng)用。

官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺(jué)為準(zhǔn)，那么照搬就行了。后面的文章要說(shuō)的，就是脫離開(kāi)這些束縛，正確自定義 UI 元素的尺寸。

2. 尺寸設(shè)置原則

UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無(wú)論是海報(bào)或畫(huà)冊(cè)，使用百分比、目測(cè)的形式就足以讓我們做出很多優(yōu)秀的作品，無(wú)需緊盯著其中出現(xiàn)的每個(gè)元素的長(zhǎng)寬高數(shù)值。而 UI 的設(shè)計(jì)中，無(wú)論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長(zhǎng)寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作。

這么做的原因是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來(lái)完成的，像素點(diǎn)是最小的顯示單位，一個(gè)點(diǎn)只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種事情出現(xiàn)，我們就得用整數(shù)來(lái)定義元素的長(zhǎng)和寬。

這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問(wèn)題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享，后面文章所有的長(zhǎng)度單位默認(rèn)以 PT 為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫(huà)布的單位，PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以2。

只有分隔線，是唯一可以不使用整數(shù)的例外，因?yàn)?1pt 的分隔線看起來(lái)會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫(huà)個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。

無(wú)論在 iOS 或 Android 的規(guī)范中，也都提到過(guò)使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會(huì)反復(fù)強(qiáng)調(diào)對(duì)元素的尺寸使用 8 的倍數(shù)。

iOS：使用 8px 網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無(wú)需太多的修飾和銳化。將圖形邊界對(duì)齊到網(wǎng)格上，減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對(duì)齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。

實(shí)際上，我們?cè)谡鎸?shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會(huì)在后面的文章中做說(shuō)明。如果發(fā)現(xiàn) 4 的倍數(shù)無(wú)法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26等。

以上就是我們一開(kāi)始要建立的元素尺寸原則，精簡(jiǎn)完即：

使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)；使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。

有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對(duì)元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計(jì)注冊(cè)登錄頁(yè)面的輸入框作為案例。

開(kāi)始我使用 280 寬，44 高的尺寸，但是覺(jué)得有點(diǎn)僵硬，太正式了。這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4×2)=52 。這時(shí)候又覺(jué)得太高了，實(shí)際輸入內(nèi)容也沒(méi)那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。

所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺(jué)用鼠標(biāo)拖拽出來(lái)的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過(guò)程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過(guò)程。

3. 總結(jié)

以上就是對(duì)與 UI 元素尺寸定義的第一部分，因?yàn)橐v清楚需要花的篇幅太長(zhǎng)，所以我會(huì)將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標(biāo)、組件部分組成。

二、控件尺寸定義

這里要聲明，在我的語(yǔ)系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開(kāi)關(guān)、分頁(yè)器等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。

下面，會(huì)根據(jù)前面定義的規(guī)范，分別講解控件應(yīng)該使用的尺寸范圍：

1. 按鈕

按鈕是界面交互操作中使用最頻繁的元素了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。

在進(jìn)入具體參數(shù)的講解前，要先理解按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)，并不是因?yàn)樵谠O(shè)計(jì)樣式上的復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。

在上圖中，可以點(diǎn)擊的東西不少，我們就說(shuō)外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 「加入購(gòu)物車」。權(quán)重最低的，應(yīng)該是前往新品頁(yè)。

定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個(gè)應(yīng)用中的權(quán)重，尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過(guò)不在這里展開(kāi)。

按鈕高度

當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來(lái)匹配權(quán)重，分成高、中、低三類：

• 高權(quán)重：40-56pt
• 中權(quán)重：24-40pt
• 低權(quán)重：12-24pt

高權(quán)重的按鈕，類似登錄頁(yè)的注冊(cè)、登錄，購(gòu)物詳情頁(yè)的購(gòu)買，流程頁(yè)中的下一步，它的最小高度應(yīng)該從 40pt 開(kāi)始遞增，低于這個(gè)大小，那么這個(gè)按鈕就很難在這個(gè)頁(yè)面起到視覺(jué)支撐，因?yàn)楦杏X(jué)太細(xì)了。

中權(quán)重的按鈕，類似個(gè)人主頁(yè)的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。

低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見(jiàn)，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。

使用上面這種方法，在頁(yè)面中根據(jù)權(quán)重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開(kāi)層次，還容易使視覺(jué)感受變差。

按鈕寬度

主流的按鈕都是橫向的長(zhǎng)方形，正方形也有，但是不能變成縱向的矩形。

按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無(wú)視內(nèi)容的數(shù)量。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或全屏的，可以特殊處理。

普通按鈕，左右間距距離內(nèi)容過(guò)多，就會(huì)讓按鈕看起來(lái)非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容來(lái)設(shè)置按鈕左右的寬，最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍。

按鈕圓角

按鈕尺寸還有最后一個(gè)屬性，就是按鈕的圓角設(shè)置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。

為矩形設(shè)置圓角，是為了讓按鈕看起來(lái)有一定的圓潤(rùn)感不會(huì)顯得太尖銳，這種圓角的數(shù)值賦予要適當(dāng)，只要超出了一定的范疇，就會(huì)對(duì)視覺(jué)的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。

所以，我們?cè)谠O(shè)計(jì)圓角的過(guò)程中，一定要仔細(xì)感受圓角在畫(huà)面中的和諧性。而圓角的設(shè)置范圍，不大于高度的 1/4。例如，一個(gè)24pt的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt，如上圖的效果。

以上就是按鈕相關(guān)尺寸定義的說(shuō)明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無(wú)法滿足的情況，這就需要大家多做嘗試了。

2. 輸入框

輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見(jiàn)的就是登錄頁(yè)賬號(hào)密碼輸入框，以及首頁(yè)上方的搜索欄了。

輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來(lái)會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。

3. 步進(jìn)器

常見(jiàn)的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來(lái)增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。

步進(jìn)器中常見(jiàn)的錯(cuò)誤，是在我們?cè)O(shè)置圓角外框時(shí)，繪制左右兩個(gè)按鈕，并沒(méi)有合理的減去內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。

4. 下拉菜單

下拉菜單要注意包含多種狀態(tài)，默認(rèn)、展開(kāi)和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開(kāi)后，下方多出來(lái)的選項(xiàng)菜單，就值得注意了。

菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)，高度是不大于默認(rèn)的選項(xiàng)框的。新手很容易在彈出菜單中設(shè)定過(guò)小的高度，使整個(gè)控件看起來(lái)會(huì)非常的別扭。

5. 開(kāi)關(guān)

開(kāi)關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁(yè)的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開(kāi)關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細(xì)節(jié)填入。

6. 滑塊

滑塊形式接近開(kāi)關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來(lái)表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。

節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺(jué)得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下面的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。

7. 指示器

指示器用來(lái)展示元素序列，雖然在 APP 中沒(méi)有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來(lái)和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。

指示器主要是圓形和矩形兩種形式：

• 圓形：8、10、12
• 矩形：14×2、16×2、20×3

8. 提示紅點(diǎn)

提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來(lái)很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過(guò) 10 變成 2 位以后，要怎么處理。

在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來(lái)表現(xiàn)，即畫(huà)一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。

因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實(shí)際輸入的內(nèi)容所增加的寬度，去增加圓點(diǎn)的寬度。

9. 分頁(yè)控件

最后一個(gè)控件，就是分頁(yè)控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響，較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。

下面是高度：

• 高權(quán)重：40-48
• 低權(quán)重：28-36

分頁(yè)控件主要應(yīng)用在頭部和頁(yè)面中部的組件中，如下方的案例：

雖然很多時(shí)候分頁(yè)器是沒(méi)有背景色的，但是背景矩形是必須畫(huà)出來(lái)的，即隱藏填充和描邊，這樣我們就可以通過(guò)垂直居中的方式，來(lái)確定中間文字的位置。

一個(gè)完整的分頁(yè)控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬也是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會(huì)顯得過(guò)度擁擠。

分頁(yè)控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見(jiàn)的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來(lái)非常粗糙，它需要在樣式中能起到畫(huà)龍點(diǎn)睛的作用。

下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都應(yīng)該不大于 2pt。寬度的定義，第一種和每個(gè)選項(xiàng)背景區(qū)域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：

10. 總結(jié)

前面說(shuō)到了不少元素的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁(yè)面中去。

可以看到，模塊大小很均衡，看上去不會(huì)覺(jué)得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。

這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)你們沒(méi)有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。

上面將的是 UI 元素尺寸的基礎(chǔ)規(guī)范，及控件尺寸的定義。下面我們就來(lái)介紹文字設(shè)置，圖標(biāo)的尺寸，UI 的組件設(shè)計(jì)了。

三、界面的字號(hào)設(shè)置秘訣

文字的尺寸至關(guān)重要，但先理解了控件再思考文字，會(huì)更容易一些，它們之間也有一些有趣的聯(lián)系。

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

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

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

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

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

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

在 UI 中，最小字號(hào)的依據(jù)一般有兩個(gè)，一個(gè)是人眼的可見(jiàn)度，另一個(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ì)通過(guò)字重和色彩進(jìn)一步劃分，在這不再贅述。例如下面我使用五種字號(hào)尺寸設(shè)計(jì)出來(lái)的原型案例：

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

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

2. 中文字體

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

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

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

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

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

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

3. 文字的邊距

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

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

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

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

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

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

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

最后，前面說(shuō)到的關(guān)于文字字號(hào)的設(shè)定，結(jié)合控件的規(guī)范，就能在下一節(jié)中決定組件的設(shè)計(jì)尺寸，缺一不可。

多做針對(duì)性練習(xí)，以提升對(duì)控件和文字的掌握熟練度是很有必要的。建議多做一些簡(jiǎn)單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應(yīng)這種高效規(guī)范的方式了。

四、界面圖標(biāo)的尺寸要怎么定？

這一節(jié)要講講關(guān)于圖標(biāo)的尺寸，應(yīng)該是最容易的地方，因?yàn)榍懊娴膬?nèi)容中，應(yīng)該已經(jīng)習(xí)慣使用 4 的倍數(shù)，在圖標(biāo)中同樣遵循這樣的原則。從相關(guān)的圖標(biāo)素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。

1. 圖標(biāo)的權(quán)重

在設(shè)置具體的尺寸前，我們還是要談?wù)剻?quán)重的問(wèn)題。正常的 APP，通常會(huì)包含大量的圖標(biāo)，而這些圖標(biāo)，大小并不會(huì)完全一樣。如下面的案例：

之所以這些圖標(biāo)的大小不一樣，和它們代表的功能和權(quán)重分不開(kāi)關(guān)系。我們可以簡(jiǎn)單將應(yīng)用內(nèi)會(huì)出現(xiàn)的圖標(biāo)分成 3 類，代表不同級(jí)別的權(quán)重。

最高：頁(yè)面中重要的功能入口

中等：底部導(dǎo)航欄用的圖標(biāo)

最低：一般的工具類圖標(biāo)

當(dāng)然，這是我簡(jiǎn)化過(guò)的邏輯，類似淘寶、京東、攜程這類大型應(yīng)用，就還可以劃分出更細(xì)致的權(quán)重類型。而不同的權(quán)重實(shí)際上就對(duì)應(yīng)了不同尺寸的圖標(biāo)，如果有 3 種權(quán)重，那么我們?cè)谠O(shè)計(jì)的過(guò)程里就會(huì)設(shè)計(jì)三種尺寸的圖標(biāo)。

2. 圖標(biāo)的尺寸

首先劃重點(diǎn)，圖標(biāo)的尺寸，主要指的是圖標(biāo)在應(yīng)用中占據(jù)的矩形區(qū)域，而不是圖標(biāo)本身圖形的區(qū)域。

我們?cè)谠O(shè)計(jì)具體圖形前，是先通過(guò)確定矩形區(qū)域的尺寸，再制作參考線然后進(jìn)行設(shè)計(jì)的。而不是隨意設(shè)計(jì)了圖標(biāo)再對(duì)應(yīng)縮放到指定的位置。

例如，設(shè)計(jì)快速入口，一開(kāi)始我們定義出的這個(gè)組件為分割成兩行四列的卡片，每個(gè)入口的實(shí)際大小。

所以，下面就是我對(duì)矩形尺寸定義的建議：

• 最大：64、56、48
• 中等：44、36、32
• 最?。?8、24、20

根據(jù)圖標(biāo)所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過(guò)程與字號(hào)設(shè)置是一樣的，這里就不多做演示了。

還需要注意，在一套 App 中，圖標(biāo)出現(xiàn)的尺寸數(shù)盡可能減少，尤其對(duì)于新手，只需要應(yīng)用 2-4 套不同的尺寸即可，否則也會(huì)對(duì)視覺(jué)體驗(yàn)帶來(lái)明顯的破壞。

五、UI 的組件設(shè)計(jì)

最后，就要說(shuō)說(shuō)組件的尺寸是怎么設(shè)置了。

首先我們要知道組件是什么，它是一個(gè)包含了控件、文字、圖標(biāo)的功能合集?？梢允且粋€(gè)獨(dú)立的信息展示單元，也可以完成一個(gè)復(fù)雜的操作流，是學(xué)習(xí) App 設(shè)計(jì)中最重要的環(huán)節(jié)。

1. 組件的尺寸原則

定義組件的長(zhǎng)和寬，方式有兩種，一種是根據(jù)環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。

第一種，即通過(guò)外部的元素來(lái)確定組件的尺寸。例如我們要設(shè)計(jì)一個(gè)頭部的幻燈片組件，以左右可以滾動(dòng)的形式展現(xiàn)。那么我們首先要根據(jù)想要幻燈片在屏幕中的占比來(lái)制定高度，例如我們覺(jué)得大致要有屏幕 1/3 的比例，那么可以設(shè)定高度為 220pt（664除3），而根據(jù)上下對(duì)齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。

第二種，是根據(jù)我們里面添加的元素來(lái)確定寬和高。例如在首頁(yè)幻燈片下方，添加左右滾動(dòng)的卡片，那么我們先設(shè)定里面的控件和文字尺寸，然后再通過(guò)制定內(nèi)邊距的形式確定組件的尺寸。

當(dāng)然，也有混合的定義方式，如一開(kāi)始訂好寬，根據(jù)內(nèi)容設(shè)定高，像花瓣瀑布流的卡片，或者定義好高來(lái)調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。

下面會(huì)通過(guò)幾個(gè)常見(jiàn)的組件案例，來(lái)演示如何定義它們的尺寸的。

2. 動(dòng)態(tài)卡片

動(dòng)態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動(dòng)態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。

3. 設(shè)置列表

設(shè)置列表中，由高度相同的列表項(xiàng)組成，它們的高和寬應(yīng)該是根據(jù)設(shè)計(jì)的風(fēng)格一開(kāi)始就制定好，如比較緊湊的風(fēng)格我們采用 48pt 的高，比較寬松的風(fēng)格就采用 64pt 的高。然后我們?cè)倥帕袃?nèi)部的元素，進(jìn)行水平居中。

4. 班次信息

常見(jiàn)的班次信息，我們?cè)诙x它尺寸時(shí)，也是根據(jù)內(nèi)容來(lái)考慮的。首先確認(rèn)它是一個(gè)撐滿屏幕的組件即 375pt 寬，再填入對(duì)應(yīng)的字段內(nèi)容。

這時(shí)候可以將上下的內(nèi)容拆分成3個(gè)不同的子模塊，班次、時(shí)間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時(shí)間則根據(jù)內(nèi)容設(shè)置邊距的方式，最后得到的高度總和，就是班次信息組件的高度。

5. 瓷片區(qū)

主流的瓷片區(qū)，其實(shí)也由子模塊組合而成，而如淘寶這類會(huì)有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個(gè)瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。

例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個(gè)內(nèi)容區(qū)域進(jìn)行排版。

完成一個(gè)完整的組件，是根據(jù)它的內(nèi)容和周圍的環(huán)境決定，我們只要感覺(jué)前面幾個(gè)部分所說(shuō)的參數(shù)設(shè)置進(jìn)行分解，就可以很輕松的定義出組件的實(shí)際尺寸。而無(wú)論任何組件，它們都沒(méi)有固定的尺寸值，需要大家不斷的練習(xí)掌握制定的思路。之后再設(shè)計(jì)完整的頁(yè)面，或整套應(yīng)用時(shí)，就能大大提升效率和設(shè)計(jì)質(zhì)量。

總結(jié)

有目的和邏輯性的對(duì)參數(shù)進(jìn)行設(shè)置，是 UI 設(shè)計(jì)中最重要的一環(huán)！想要真正掌握它們，就一定要多做練習(xí)進(jìn)行鞏固。相信任何人都可以在這個(gè)過(guò)程中發(fā)現(xiàn) UI 設(shè)計(jì)的樂(lè)趣。

圖片素材作者：Timo Kuilder

以上就是我們匯總的超全面的UI元素尺寸設(shè)置指南，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

最新評(píng)論