2024-7-30 資深UI設(shè)計(jì)者
在著手設(shè)計(jì)UI界面時(shí)，困擾著新人最突出的問題就是元素尺寸如何設(shè)置的問題。所以整理了一篇文章做一下掃盲，力求讓新人一次搞懂。
因?yàn)槲恼聦?shí)在太長，所以會(huì)分為上下兩篇發(fā)布，本篇內(nèi)容為：
- 00.基礎(chǔ)原則
- 01.控件尺寸
一、官方規(guī)范
對(duì)于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜，比如我們之前翻譯過的 iOS 規(guī)范。
超人的電話亭獨(dú)家譯制 iOS 系統(tǒng)規(guī)范
規(guī)范鏈接：https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ
密碼：vpkj
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個(gè)按鈕，我們就能看見它的各項(xiàng)屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因?yàn)?iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設(shè)計(jì)出符合官方規(guī)范的界面，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過程中，還是會(huì)出現(xiàn)它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場(chǎng)景下，我們是不可能照搬這種規(guī)范的！
所以每一個(gè)學(xué)習(xí)UI設(shè)計(jì)的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計(jì)出有趣個(gè)性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計(jì) ”的應(yīng)用。
官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設(shè)置原則
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報(bào)或畫冊(cè)，使用百分比、目測(cè)的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個(gè)元素的長寬高的數(shù)值。而 UI 的設(shè)計(jì)中，無論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設(shè)置的對(duì)話框中去輸入精確到1pt的數(shù)值。
這么做是因?yàn)樵陔娮悠聊恢校瑘D像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的，像素點(diǎn)是最小的顯示單位，一個(gè)像素只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，若在 PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規(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)容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對(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ì)在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡(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è)登錄頁面的輸入框作為案例。
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了！這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4x2)=52pt 。這時(shí)候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁控件等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會(huì)根據(jù)前面定義的基礎(chǔ)原則，分別講解控件應(yīng)該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解一點(diǎn)，按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)。并不是因?yàn)樵谠O(shè)計(jì)樣式上復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點(diǎn)擊的東西不少，我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個(gè)應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁的注冊(cè)、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個(gè)數(shù)值，那么按鈕就很難在頁面中起到視覺支撐的作用，因?yàn)闀?huì)感覺到它太細(xì)了。
中權(quán)重的按鈕，類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的長度。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會(huì)讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小，應(yīng)該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個(gè)屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會(huì)顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹(jǐn)慎，只要超出了一定的范疇，就會(huì)對(duì)視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。
所以，我們?cè)谠O(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，小于等于高度的 1/4。例如，一個(gè) 24pt 的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號(hào)密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。
三、步進(jìn)器 ( Steppers )
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28pt 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯(cuò)誤，是在我們?cè)诶L制左右兩個(gè)按鈕，設(shè)置外框的圓角時(shí)，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度，不大于默認(rèn)的選項(xiàng)框。但也不能過小，新手很容易在彈出菜單中設(shè)定過小的高度，使個(gè)控件看起來會(huì)非常的別扭。
五、開關(guān) ( Switches )
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細(xì)節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小。可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點(diǎn) ( Badges )
提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32 pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，所以我們要根據(jù)實(shí)際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個(gè)控件，就是分頁控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響。較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時(shí)候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個(gè)完整的分頁控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt以上，才不會(huì)顯得過度擁擠。
分頁控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話，前者和每個(gè)選項(xiàng)背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會(huì)覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)設(shè)計(jì)師沒有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。
UI元素尺寸的上篇就到這里結(jié)束了，未完待續(xù)哦~ 還有下篇哦~
作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZODczMTQ0.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)(paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://paul-jarrel.com