菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)，高度是不大于默認(rèn)的選項(xiàng)框的。新手很容易在彈出菜單中設(shè)定過(guò)小的高度，使整個(gè)控件看起來(lái)會(huì)非常的別扭。

5. 開(kāi)關(guān)

開(kāi)關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁(yè)的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開(kāi)關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細(xì)節(jié)填入。

6. 滑塊

滑塊形式接近開(kāi)關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來(lái)表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。

節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺(jué)得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下面的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。

7. 指示器

指示器用來(lái)展示元素序列，雖然在 APP 中沒(méi)有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來(lái)和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。

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

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

8. 提示紅點(diǎn)

提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來(lái)很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過(guò) 10 變成 2 位以后，要怎么處理。

在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來(lái)表現(xiàn)，即畫(huà)一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。

因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實(shí)際輸入的內(nèi)容所增加的寬度，去增加圓點(diǎn)的寬度。

9. 分頁(yè)控件

最后一個(gè)控件，就是分頁(yè)控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響，較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。

下面是高度：

• 高權(quán)重：40-48
• 低權(quán)重：28-36

分頁(yè)控件主要應(yīng)用在頭部和頁(yè)面中部的組件中，如下方的案例：

雖然很多時(shí)候分頁(yè)器是沒(méi)有背景色的，但是背景矩形是必須畫(huà)出來(lái)的，即隱藏填充和描邊，這樣我們就可以通過(guò)垂直居中的方式，來(lái)確定中間文字的位置。

一個(gè)完整的分頁(yè)控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬也是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會(huì)顯得過(guò)度擁擠。

分頁(yè)控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見(jiàn)的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來(lái)非常粗糙，它需要在樣式中能起到畫(huà)龍點(diǎn)睛的作用。

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

10. 總結(jié)

前面說(shuō)到了不少元素的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁(yè)面中去。

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

這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)你們沒(méi)有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。

上面將的是 UI 元素尺寸的基礎(chǔ)規(guī)范，及控件尺寸的定義。下面我們就來(lái)介紹文字設(shè)置，圖標(biāo)的尺寸，UI 的組件設(shè)計(jì)了。

三、界面的字號(hào)設(shè)置秘訣

文字的尺寸至關(guān)重要，但先理解了控件再思考文字，會(huì)更容易一些，它們之間也有一些有趣的聯(lián)系。

最新評(píng)論