最后，前面說到的關(guān)于文字字號(hào)的設(shè)定，結(jié)合控件的規(guī)范，就能在下一節(jié)中決定組件的設(shè)計(jì)尺寸，缺一不可。

多做針對性練習(xí)，以提升對控件和文字的掌握熟練度是很有必要的。建議多做一些簡單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應(yīng)這種高效規(guī)范的方式了。

四、界面圖標(biāo)的尺寸要怎么定？

這一節(jié)要講講關(guān)于圖標(biāo)的尺寸，應(yīng)該是最容易的地方，因?yàn)榍懊娴膬?nèi)容中，應(yīng)該已經(jīng)習(xí)慣使用 4 的倍數(shù)，在圖標(biāo)中同樣遵循這樣的原則。從相關(guān)的圖標(biāo)素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。

1. 圖標(biāo)的權(quán)重

在設(shè)置具體的尺寸前，我們還是要談?wù)剻?quán)重的問題。正常的 APP，通常會(huì)包含大量的圖標(biāo)，而這些圖標(biāo)，大小并不會(huì)完全一樣。如下面的案例：

之所以這些圖標(biāo)的大小不一樣，和它們代表的功能和權(quán)重分不開關(guān)系。我們可以簡單將應(yīng)用內(nèi)會(huì)出現(xiàn)的圖標(biāo)分成 3 類，代表不同級別的權(quán)重。

最高：頁面中重要的功能入口

中等：底部導(dǎo)航欄用的圖標(biāo)

最低：一般的工具類圖標(biāo)

當(dāng)然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應(yīng)用，就還可以劃分出更細(xì)致的權(quán)重類型。而不同的權(quán)重實(shí)際上就對應(yīng)了不同尺寸的圖標(biāo)，如果有 3 種權(quán)重，那么我們在設(shè)計(jì)的過程里就會(huì)設(shè)計(jì)三種尺寸的圖標(biāo)。

2. 圖標(biāo)的尺寸

首先劃重點(diǎn)，圖標(biāo)的尺寸，主要指的是圖標(biāo)在應(yīng)用中占據(jù)的矩形區(qū)域，而不是圖標(biāo)本身圖形的區(qū)域。

我們在設(shè)計(jì)具體圖形前，是先通過確定矩形區(qū)域的尺寸，再制作參考線然后進(jìn)行設(shè)計(jì)的。而不是隨意設(shè)計(jì)了圖標(biāo)再對應(yīng)縮放到指定的位置。

例如，設(shè)計(jì)快速入口，一開始我們定義出的這個(gè)組件為分割成兩行四列的卡片，每個(gè)入口的實(shí)際大小。

所以，下面就是我對矩形尺寸定義的建議：

• 最大：64、56、48
• 中等：44、36、32
• 最?。?8、24、20

根據(jù)圖標(biāo)所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過程與字號(hào)設(shè)置是一樣的，這里就不多做演示了。

還需要注意，在一套 App 中，圖標(biāo)出現(xiàn)的尺寸數(shù)盡可能減少，尤其對于新手，只需要應(yīng)用 2-4 套不同的尺寸即可，否則也會(huì)對視覺體驗(yàn)帶來明顯的破壞。

五、UI 的組件設(shè)計(jì)

最后，就要說說組件的尺寸是怎么設(shè)置了。

最新評論