當(dāng)我們想要在整理設(shè)計(jì)稿中出現(xiàn)的圖標(biāo)，整理除了匯總之外，還需要重新調(diào)整一下圖標(biāo)的大小，使他們看起來“差不多大”。想要弄成一致性和統(tǒng)一性，非常的麻煩和耗時(shí)。

最后在谷歌的Material Design找到了一種規(guī)定的方式。

舉例：圖標(biāo)大小為48px*48px?。如果你還需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可。那你設(shè)計(jì)的圖標(biāo)最好是矢量的或者是形狀圖標(biāo)。

谷歌官方規(guī)定Material Design 圖標(biāo)的形狀類型分為三種：圓形、方形和矩形。

1.判定圖標(biāo)應(yīng)該套用那種尺寸？

將圖標(biāo)與上圖的模板居中對齊，然后中心不動(dòng)，放大圖標(biāo)使之圖標(biāo)依次碰到三種形狀的邊界，填充最滿的那個(gè)形狀的尺寸就是該圖標(biāo)需要規(guī)定的尺寸。

2.iconfont的問題

大部分團(tuán)隊(duì)都會(huì)將圖標(biāo)轉(zhuǎn)換為iconfont，這樣可以縮小整個(gè)項(xiàng)目的大小。

3.對齊

如果有仔細(xì)看，我這個(gè)方法指定的圖標(biāo)大小為48px*48px，但是里面有內(nèi)容的部分，比如說圓形，就只會(huì)占據(jù)44px*44px，這時(shí)候我們當(dāng)然會(huì)希望把圖形放置在圖標(biāo)的中央。一個(gè)上下居中對齊，一個(gè)左右居中對齊。

仔細(xì)發(fā)現(xiàn)一下，你會(huì)發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯(cuò)覺造成的【2】，這時(shí)候就需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過自己的視覺判斷來進(jìn)行對齊。

4.顏色統(tǒng)一

一般而言，圖標(biāo)設(shè)定為同一個(gè)色值（比如#FFFFF）就能統(tǒng)一顏色，但是也有遇到過某個(gè)圖標(biāo)會(huì)顯得顏色比較淺，這是因?yàn)閟ketch處理圖形的透明度有兩個(gè)地方，一個(gè)是整體的透明度（在填充選項(xiàng)區(qū)域的上方），一個(gè)是填充的透明度，這個(gè)往往是因?yàn)檎w透明度那里有問題，修改一下。

好啦，今天就分享這么多！

總結(jié)

以上是生活随笔為你收集整理的【APICloud系列|4】APP设计统一图标大小的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。