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

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

對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規(guī)范，新人都以為官方設(shè)計規(guī)范的作用就是告訴你們元素的大小和怎么設(shè)置，只要看完了就能懂得如何設(shè)計 iOS 或 Android 應用。而實際上，這些規(guī)范并不能幫助你們解決這個問題，因為設(shè)計規(guī)范涵蓋的內(nèi)容遠遠比這些復雜。

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

UIkit 中文幫助文檔 pdf格式

• 類型：網(wǎng)頁制作
• 大?。?/span>5.7MB
• 語言：簡體中文
• 時間：2016-07-28

查看詳情

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 總結(jié)

以上就是對與 UI 元素尺寸定義的第一部分，因為要講清楚需要花的篇幅太長，所以我會將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標、組件部分組成。

二、控件尺寸定義

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

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

1. 按鈕

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

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

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

最新評論