2022-6-14 博博
對于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置，只要看完了就能懂得如何設(shè)計 iOS 或 Android 應(yīng)用。而實際上，這些規(guī)范并不能幫助你們解決這個問題，因為設(shè)計規(guī)范涵蓋的內(nèi)容遠遠比這些復(fù)雜。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方不會提供一個列表，逐一羅列每個元素的長寬和其它參數(shù)，所以想弄明白，要自己在這兩套素材庫中選中元素查看。如下圖這個按鈕，我們就能看見它的參數(shù)值。
免費獲取 → iOS 11設(shè)計規(guī)范發(fā)布了，來下載官方源文件！
在初期，我們想要設(shè)計出嚴格符合官方規(guī)范的設(shè)計，就可以嚴格照搬官方的元素設(shè)置。但是，即使官方的源文件包含的元素字體已經(jīng)非常多了，在實際設(shè)計過程中，還是會出現(xiàn)它們無法覆蓋的設(shè)計類型，需要依靠我們自己設(shè)置。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實的中文設(shè)計場景下，我們是不可能照搬這種規(guī)范的。
新人要明白，官方的規(guī)范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計出有趣個性化的設(shè)計的，比如下面這幾款已經(jīng)看不到 「 iOS 設(shè)計 」的應(yīng)用。
官方的參數(shù)決定我們設(shè)計的下限，當你不知道該怎么做，或者設(shè)計的目標就是以系統(tǒng)原生的體驗和視覺為準，那么照搬就行了。后面的文章要說的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個元素的長寬高數(shù)值。而 UI 的設(shè)計中，無論字體、圖標還是按鈕，都需要我們嚴謹?shù)囟x它們的長寬高，如下圖設(shè)計一個按鈕的操作。
這么做的原因是因為在電子屏幕中，圖像的呈現(xiàn)是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個點只能顯示一個顏色，所以如果設(shè)置了帶有小數(shù)點的數(shù)值，那么這個元素的邊緣就會虛化。所以為了避免這種事情出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識，我會在另外的文章里分享，后面文章所有的長度單位默認以 PT 為準，即 XD 和 Sketch 默認畫布的單位，PS 中設(shè)計需要在這個基礎(chǔ)上乘以2。
只有分隔線，是唯一可以不使用整數(shù)的例外，因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論在 iOS 或 Android 的規(guī)范中，也都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會反復(fù)強調(diào)對元素的尺寸使用 8 的倍數(shù)。
實際上，我們在真實的設(shè)計環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
有了這樣的原則，并養(yǎng)成習慣，我們就能在每次設(shè)計前對元素尺寸有個大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計注冊登錄頁面的輸入框作為案例。
開始我使用 280 寬，44 高的尺寸，但是覺得有點僵硬，太正式了。這時候反思認為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4×2)=52 。這時候又覺得太高了，實際輸入內(nèi)容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結(jié)果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計過程就是一個不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
以上就是對與 UI 元素尺寸定義的第一部分，因為要講清楚需要花的篇幅太長，所以我會將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標、組件部分組成。
這里要聲明，在我的語系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁器等，更復(fù)雜的如動態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，會根據(jù)前面定義的規(guī)范，分別講解控件應(yīng)該使用的尺寸范圍：
按鈕是界面交互操作中使用最頻繁的元素了，當然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進入具體參數(shù)的講解前，要先理解按鈕實際上是所有控件中最復(fù)雜的一個，并不是因為在設(shè)計樣式上的復(fù)雜，而是因為按鈕承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖中，可以點擊的東西不少，我們就說外觀是標準樣式的按鈕，就有 9 個。而這里面，權(quán)重最高的必然是 「加入購物車」。權(quán)重最低的，應(yīng)該是前往新品頁。
定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個應(yīng)用中的權(quán)重，尺寸和權(quán)重是成正比關(guān)系的。當然，顏色也是對重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當我們設(shè)計按鈕時，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
高權(quán)重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它的最小高度應(yīng)該從 40pt 開始遞增，低于這個大小，那么這個按鈕就很難在這個頁面起到視覺支撐，因為感覺太細了。
中權(quán)重的按鈕，類似個人主頁的關(guān)注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點擊。24pt 是在我經(jīng)驗中便于點擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標簽、詳情等類型，相對于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
使用上面這種方法，在頁面中根據(jù)權(quán)重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形也有，但是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的數(shù)量。因為它們需要更多的區(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或全屏的，可以特殊處理。
普通按鈕，左右間距距離內(nèi)容過多，就會讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容來設(shè)置按鈕左右的寬，最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍。
按鈕圓角
按鈕尺寸還有最后一個屬性，就是按鈕的圓角設(shè)置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳，這種圓角的數(shù)值賦予要適當，只要超出了一定的范疇，就會對視覺的和諧產(chǎn)生影響，我習慣稱呼為——半圓不圓，如下圖右側(cè)的錯誤案例。
所以，我們在設(shè)計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，不大于高度的 1/4。例如，一個24pt的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt，如上圖的效果。
以上就是按鈕相關(guān)尺寸定義的說明，當然，在真實的設(shè)計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
常見的步進器，就是輸入框和按鈕的結(jié)合。左右有兩個用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學員的作業(yè)做次演示，當?shù)陀?28 以后，就會發(fā)現(xiàn)在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們設(shè)置圓角外框時，繪制左右兩個按鈕，并沒有合理的減去內(nèi)側(cè)的圓角，這是絕對不應(yīng)該忽略的細節(jié)。
下拉菜單要注意包含多種狀態(tài)，默認、展開和選中。默認狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態(tài)相同，而高度根據(jù)里面包含的選項數(shù)量決定。單行選項，高度是不大于默認的選項框的。新手很容易在彈出菜單中設(shè)定過小的高度，使整個控件看起來會非常的別扭。
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計開關(guān)的時候，要先確定一個矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細節(jié)填入。
滑塊形式接近開關(guān)，通常在中間有一個操作節(jié)點，下面有一個用來表示區(qū)間的線條。實際上我們該做的就是分別決定它們的尺寸。
節(jié)點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下面的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數(shù)人在定義指示器時，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
提示紅點也是大多數(shù)應(yīng)用會使用的一個控件，它的大小應(yīng)該在 24-32pt 之間。作為一個圓形，這個控件設(shè)計起來很容易，但設(shè)計師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計這樣的元素時，我們要用一個矩形元素來表現(xiàn)，即畫一個正方形，然后將圓角設(shè)成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實際輸入的內(nèi)容所增加的寬度，去增加圓點的寬度。
最后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設(shè)計時也受到排版空間的影響，較為寬松的排版風格，高度就比較大，若擁擠則反之。
下面是高度：
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器是沒有背景色的，但是背景矩形是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬也是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態(tài)時，有的設(shè)計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都應(yīng)該不大于 2pt。寬度的定義，第一種和每個選項背景區(qū)域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計效果：
前面說到了不少元素的尺寸，那么真實應(yīng)用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設(shè)計得很奇怪。當你們沒有對于特殊化風格設(shè)計的控制能力時，就先學會正確的使用上面的這些參數(shù)吧。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
更多精彩文章：
手機及小程序界面設(shè)計之一：讓設(shè)計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設(shè)計之六：讓設(shè)計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設(shè)計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復(fù)盤！
藍藍設(shè)計的小編 http://m.820esy.cn
