在開始著手設計手機app界面時，困擾著新人的除了不知道應該在界面中放什麼以外，最突出的就是不知道元素應該使用的長寬數值，這也是困擾大家最多的問題，今天羅列一篇文章一次性搞明白，在手機的界面中如何設置元素的尺寸。

一、基礎規則

1. 官方規範

對於剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規範，新人都以為官方設計規範的作用就是告訴你們元素的大小和怎麼設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上真像大家所理解的那樣嗎？其實這些規範並不能幫助你們解決這個問題，因為設計規範涵蓋的內容遠遠比這些複雜。

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

官方不會提供一個列表，逐一羅列每個元素的長寬和其它參數，所以想弄明白，要自己在這兩套素材庫中選中元素查看。如下圖這個按鈕，我們就能看見它的參數值。

在初期，我們想要設計出嚴格符合官方規範的設計，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件包含的元素字體已經非常多了，在實際設計過程中，還是會出現它們無法覆蓋的設計類型，需要依靠我們自己設置。、

還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規範的。

新人要明白，官方的規範，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容，我們是無法設計出有趣個性化的設計的，比如下面這幾款已經看不到 「 iOS 設計 」的應用。

官方的參數決定我們設計的下限，當你不知道該怎麼做，或者設計的目標就是以系統原生的體驗和視覺為準，那麼照搬就行了。後面的文章要說的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。

2. 尺寸設置原則

UI 和平面不一樣的地方，就是極其關注元素屬性的具體數值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優秀的作品，無需緊盯著其中出現的每個元素的長寬高數值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹地定義它們的長寬高，如下圖設計一個按鈕的操作。

這麼做的原因是因為在電子屏幕中，圖像的呈現是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個點只能顯示一個顏色，所以如果設置了帶有小數點的數值，那麼這個元素的邊緣就會虛化。所以為了避免這種事情出現，我們就得用整數來定義元素的長和寬。

這當中還涉及到不少比較複雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章裡分享，後面文章所有的長度單位默認以 PT 為準，即 XD 和 Sketch 默認畫布的單位，PS 中設計需要在這個基礎上乘以2。

只有分隔線，是唯一可以不使用整數的例外，因為 1pt 的分隔線看起來會非常粗，一點也不精緻，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然後用 1pt 的線條做分隔，再導出到手機裡觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。

無論在 iOS 或 Android 的規範中，也都提到過使用 8 x 8 的網格做輔助，這導致網上有很多片面的文章會反覆強調對元素的尺寸使用 8 的倍數。

• iOS：使用 8px 網格系統，網格系統可以讓線條和圖像內容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網格上，減少按比例縮小圖像時出現的半像素和內容模糊的情況。
• 
  
• Android：所有組件都與間隔為 8dp 的基準網格對齊。排版/文字與間隔為 4dp 的基準網格對齊。在工具中的圖標同樣與間隔為 4dp 的基準網格對齊。

實際上，我們在真實的設計環境中，建議大家使用 4 的倍數作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會在後面的文章中做說明。如果發現 4 的倍數無法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那麼我們就可以使用一般的偶數如18、22、26等。

以上就是我們一開始要建立的元素尺寸原則，精簡完即：

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

有了這樣的原則，並養成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然後再根據需要按 4 的倍數調整，如下面設計註冊登錄頁面的輸入框作為案例。

開始我使用 280 寬，44 高的尺寸，但是覺得有點僵硬，太正式了。這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4×2)=52 。這時候又覺得太高了，實際輸入內容也沒那麼寬，於是再對高減 4，寬減 40，獲取最終結果。

所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數值。UI 的設計過程就是一個不停鍵入參數和調整參數的過程。

二、控件尺寸定義

這裡要聲明，在我的語系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關、分頁器等，更復雜的如動態卡片，功能快速入口等，就歸入組件中，便於我們理解。

下面，會根據前面定義的規範，分別講解控件應該使用的尺寸範圍：

1. 按鈕

按鈕是界面交互操作中使用最頻繁的元素了，當然按鈕呈現的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這裡，我們只聚焦於矩形的基礎按鈕。

在進入具體參數的講解前，要先理解按鈕實際上是所有控件中最複雜的一個，並不是因為在設計樣式上的複雜，而是因為按鈕承載了最多的產品訴求，權重差異極大，例如看下面的案例。

在上圖中，可以點擊的東西不少，我們就說外觀是標準樣式的按鈕，就有 9 個。而這裡面，權重最高的必然是 「加入購物車」。權重最低的，應該是前往新品頁。

定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個應用中的權重，尺寸和權重是成正比關係的。當然，顏色也是對重要性表現的關鍵因素，不過不在這裡展開。

按鈕高度

當我們設計按鈕時，優先要從高度入手，再去定義寬。為了便於新手理解，我首先從高度上來匹配權重，分成高、中、低三類：

• 高權重：40-56pt
• 中權重：24-40pt
• 低權重：12-24pt

高權重的按鈕，類似登錄頁的註冊、登錄，購物詳情頁的購買，流程頁中的下一步，它的最小高度應該從 40pt 開始遞增，低於這個大小，那麼這個按鈕就很難在這個頁面起到視覺支撐，因為感覺太細了。

中權重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高頻的交互次數，我們必須得保證它易於點擊。24pt 是在我經驗中便於點擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級最高的按鈕常常是處於一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產生直觀的破壞。

低權重的按鈕，就類似查看更多、標籤、詳情等類型，相對於按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大於 24pt，能容納內部文字或圖形元素即可。

使用上面這種方法，在頁面中根據權重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小於 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。

按鈕寬度

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

按鈕的寬度主要和內容掛鉤，內容數量越多，按鈕自然也就越寬。唯一的例外，只有高權重的按鈕，可以無視內容的數量。因為它們需要更多的區域，往往都是撐滿屏幕內容區域或全屏的，可以特殊處理。

普通按鈕，左右間距距離內容過多，就會讓按鈕看起來非常的不協調。所以我們要根據內容來設置按鈕左右的寬，最大寬度應該小於內容距離上下的 2 倍。

按鈕圓角

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

為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳，這種圓角的數值賦予要適當，只要超出了一定的範疇，就會對視覺的和諧產生影響，我習慣稱呼為——半圓不圓，如下圖右側的錯誤案例。

所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置範圍，不大於高度的 1/4。例如，一個24pt的圓角矩形，圓角的尺寸就應該不大於 6pt，如上圖的效果。

以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。

2. 輸入框

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

輸入框的使用高度尺寸，常規在 36-56pt 之間。低於 36pt 時則輸入框看起來會非常擁擠，比如我用下面同學的案例做個演示。

3. 步進器

常見的步進器，就是輸入框和按鈕的結合。左右有兩個用來增加數量的按鈕，中間是允許我們直接鍵入數字的輸入框。在尺寸上，它也介於兩者之間，高度在 28 – 40 之間。下面我再用同學的作業做次演示，當低於 28 以後，就會發現在屏幕中的佔比實在太小了。

步進器中常見的錯誤，是在我們設置圓角外框時，繪製左右兩個按鈕，並沒有合理的減去內側的圓角，這是絕對不應該忽略的細節。

4. 下拉菜單

下拉菜單要注意包含多種狀態，默認、展開和選中。默認狀態與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開後，下方多出來的選項菜單，就值得注意了。

菜單的寬度正常情況下與默認狀態相同，而高度根據裡面包含的選項數量決定。單行選項，高度是不大於默認的選項框的。新手很容易在彈出菜單中設定過小的高度，使整個控件看起來會非常的彆扭。

5. 開關

開關也是按鈕的一種形式，通常出現在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那麼寬大致可以使用 56pt。之後再將細節填入。

6. 滑塊

滑塊形式接近開關，通常在中間有一個操作節點，下面有一個用來表示區間的線條。實際上我們該做的就是分別決定它們的尺寸。

節點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的周長應該在 16-28pt 之間。而下面的橫線，寬度由所在內容區域的寬決定，高度一般在1-4pt 之間。

7. 指示器

指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數人在定義指示器時，不是太大，就是太小，可以只從後面提供的尺寸中選擇，就能保證指示器的尺寸不會出錯。

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

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

8. 提示紅點

提示紅點也是大多數應用會使用的一個控件，它的大小應該在 24-32pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數值超過 10 變成 2 位以後，要怎麼處理。

在設計這樣的元素時，我們要用一個矩形元素來表現，即畫一個正方形，然後將圓角設成最大，那它看上去就是一個圓形。那麼每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。

因為相同字號下，不同英文、數字的寬度都是不一樣的，我們要根據實際輸入的內容所增加的寬度，去增加圓點的寬度。

9. 分頁控件

最後一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響，較為寬鬆的排版風格，高度就比較大，若擁擠則反之。

下面是高度：

• 高權重：
  40-48
• 低權重：28-36

分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：

雖然很多時候分頁器是沒有背景色的，但是背景矩形是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。

一個完整的分頁控件，裡面會包含兩個或以上的選項，所以定義每個選項的寬也是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，採取定寬模式，寬度最小建議在 64pt 以上，才不會顯得過度擁擠。

分頁控件選項處於選中狀態時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。

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

10. 總結

前面說到了不少元素的尺寸，那麼真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。

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

這些參數雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設計得很奇怪。當你們沒有對於特殊化風格設計的控制能力時，就先學會正確的使用上面的這些參數吧。

四、界面的字號設置秘訣

關於文字我在之前的文章裡面也專門出過一篇文字的尺寸的推文：

UI字號字體設置大解密但先理解了控件再思考文字，會更容易一些，它們之間也有一些有趣的聯繫。

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

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

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

1. 英文的字號

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

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

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

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

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

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

數字字體可以等同於英文，但如果有需要展示數據的需求，那麼最大尺寸就要靠自己的判斷了。

2. 中文字體

中文字體和英文字體的最大差異在於筆畫數，很多中文的筆畫和結構都異常複雜，如 「嚷」、「饕」、「餐」等，所以，最小的尺寸不可能和英文相等。建議最小中文字號使用 11pt。

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

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

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

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

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

3. 文字的邊距

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

首先，合理的字號應用是要和環境息息相關的，而這種聯繫最多體現在文本區域的邊距上。能被合理閱讀的文本段落，是需要留白的，過於擁擠的文字排列只會造成閱讀的不適。

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

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

而如果設置了一個 24pt 按鈕，那麼得到的結論應該是 12pt。

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

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

五、界面圖標尺寸

界面圖標的尺寸該怎麼定？ 這應該是最容易的地方，因為前面的內容中，應該已經習慣使用 4 的倍數，在圖標中同樣遵循這樣的原則。從相關的圖標素材下載網站就可以發現這種規律，如 iconfont、iconsearch 等等。

1.圖標的權重

在設置具體的尺寸前，我們還是要談談權重的問題。正常的 APP，通常會包含大量的圖標，而這些圖標，大小並不會完全一樣。如下面的案例：

之所以這些圖標的大小不一樣，和它們代表的功能和權重分不開關係。我們可以簡單將應用內會出現的圖標分成 3 類，代表不同級別的權重。

最高：頁面中重要的功能入口

中等：底部導航欄用的圖標

最低：一般的工具類圖標

當然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應用，就還可以劃分出更細緻的權重類型。而不同的權重實際上就對應了不同尺寸的圖標，如果有 3 種權重，那麼我們在設計的過程裡就會設計三種尺寸的圖標。

首先劃重點，圖標的尺寸，主要指的是圖標在應用中佔據的矩形區域，而不是圖標本身圖形的區域。

我們在設計具體圖形前，是先通過確定矩形區域的尺寸，再製作參考線然後進行設計的。而不是隨意設計了圖標再對應縮放到指定的位置。

例如，設計快速入口，一開始我們定義出的這個組件為分割成兩行四列的卡片，每個入口的實際大小。

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

• 最大：64、56、48
• 中等：44、36、32
• 最小：28、24、20

還需要注意，在一套 App 中，圖標出現的尺寸數儘可能減少，尤其對於新手，只需要應用 2-4 套不同的尺寸即可，否則也會對視覺體驗帶來明顯的破壞。

六、UI 的組件設計

最後，就要說說組件的尺寸是怎麼設置了。首先我們要知道組件是什麼，它是一個包含了控件、文字、圖標的功能合集。可以是一個獨立的信息展示單元，也可以完成一個複雜的操作流，是學習 App 設計中最重要的環節。

1. 組件的尺寸原則

定義組件的長和寬，方式有兩種，一種是根據環境制定，一種是根據內容調節。

第一種，即通過外部的元素來確定組件的尺寸。例如我們要設計一個頭部的幻燈片組件，以左右可以滾動的形式展現。那麼我們首先要根據想要幻燈片在屏幕中的佔比來制定高度，例如我們覺得大致要有屏幕 1/3 的比例，那麼可以設定高度為 220pt（664除3），而根據上下對齊的原則，左右就由屏幕寬減去左右內邊距 16pt 即可。

第二種，是根據我們裡面添加的元素來確定寬和高。例如在首頁幻燈片下方，添加左右滾動的卡片，那麼我們先設定裡面的控件和文字尺寸，然後再通過制定內邊距的形式確定組件的尺寸。

當然，也有混合的定義方式，如一開始訂好寬，根據內容設定高，像花瓣瀑布流的卡片，或者定義好高來調節寬。具體使用什麼形式，就要因地制宜了。

下面會通過幾個常見的組件案例，來演示如何定義它們的尺寸的。

2. 動態卡片

動態卡片是很常用的組件，通常以卡片的形式展現。每條動態通常佔據內容區域的整列，即左右減去制定好的內邊距 16pt，那麼就是 375-32 = 343pt 的寬。而高度，就要根據裡面所包含的元素了，如下圖所示。

3. 設置列表

設置列表中，由高度相同的列表項組成，它們的高和寬應該是根據設計的風格一開始就制定好，如比較緊湊的風格我們採用 48pt 的高，比較寬鬆的風格就採用 64pt 的高。然後我們再排列內部的元素，進行水平居中。

4. 班次信息

常見的班次信息，我們在定義它尺寸時，也是根據內容來考慮的。首先確認它是一個撐滿屏幕的組件即 375pt 寬，再填入對應的字段內容。

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

5. 瓷片區

主流的瓷片區，其實也由子模塊組合而成，而如淘寶這類會有很多瓷片區並列的狀態，我們優先要考慮的，是每個瓷片區在屏幕中的佔比，也就是先定義好瓷片區的高度，再拆分內容的子模塊。

例如劃分為兩行的瓷片區，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，裡面的元素，再根據這個內容區域進行排版。

完成一個完整的組件，是根據它的內容和周圍的環境決定，我們只要感覺前面幾個部分所說的參數設置進行分解，就可以很輕鬆的定義出組件的實際尺寸。而無論任何組件，它們都沒有固定的尺寸值，需要大家不斷的練習掌握制定的思路。之後再設計完整的頁面，或整套應用時，就能大大提升效率和設計質量。

七、總結

有目的和邏輯性的對參數進行設置，是 UI 設計中最重要的一環！想要真正掌握它們，就一定要多做練習進行鞏固。相信任何人都可以在這個過程中發現 UI 設計的樂趣。

閱讀更多 壹念視覺 的文章

關鍵字: iOS 官方 元素