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

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

四、界面圖標的尺寸要怎么定？

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

1. 圖標的權重

在設置具體的尺寸前，我們還是要談談權重的問題。正常的 APP，通常會包含大量的圖標，而這些圖標，大小并不會完全一樣。如下面的案例：

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

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

中等：底部導航欄用的圖標

最低：一般的工具類圖標

當然，這是我簡化過的邏輯，類似淘寶、京東、攜程這類大型應用，就還可以劃分出更細致的權重類型。而不同的權重實際上就對應了不同尺寸的圖標，如果有 3 種權重，那么我們在設計的過程里就會設計三種尺寸的圖標。

2. 圖標的尺寸

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

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

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

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

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

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

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

五、UI 的組件設計

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

最新評論