對(duì)于剛?cè)胄械腢I設(shè)計(jì)師，往往會(huì)遇到一個(gè)基礎(chǔ)問(wèn)題，就是設(shè)計(jì)移動(dòng)APP時(shí)，是用什么尺寸或者用哪種屏幕的尺寸是適當(dāng)?shù)?？有的同學(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ù)所示。

UIkit 中文幫助文檔 pdf格式

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

查看詳情

官方不會(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)或畫冊(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)畫布的單位，PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以2。

只有分隔線，是唯一可以不使用整數(shù)的例外，因?yàn)?1pt 的分隔線看起來(lái)會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(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è)。

最新評(píng)論