App設計必備一種統(tǒng)一圖標大小的方法

1、App設計必備:一種統(tǒng)一圖標大小的方法在同一個App中保持同樣的圖標風格顯得有為重要，統(tǒng)一性是保證設計品質(zhì)的重要一環(huán)。最近在整理設計稿中出現(xiàn)的圖標，整理除了匯總之外，還需要重新調(diào)整一下圖標的大小，使他們看起來“差不多大”。調(diào)了很久，也咨詢了一些設計師朋友，最后在谷歌的Material Design找到了一種規(guī)定的方式，特此來記錄一下。需要注意的是，方法有很多，這只是提供一種可行的方法，可供參考，有什么問題可以聯(lián)系品向科技留言討論。 圖標類型與尺寸 首先，這種方法制作出來的圖標大小為48px*48px，需要其他尺寸的圖標可以做完之后等比放縮即可，放縮過程中可能需要注意半像素（見下文）的問題。 M

2、aterial Design把圖標的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長為38px，矩形為44px*32px。 怎么判定圖標應該套用那種尺寸的？有一種方法是：將圖標與上圖的模板居中對齊，然后中心不動，放大圖標使之圖標依次碰到三種形狀的邊界，填充最滿的那個形狀的尺寸就是該圖標需要規(guī)定的尺寸。如下圖，依次將設置圖標放大并使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標最大，證明設置圖標最匹配圓形，所以使用圓形的尺寸44px*44px。 形狀填充示意圖 下面正式定義尺寸部分： 1. 如果形狀為方形，則圖標大小為38px*38px，若只是近似的方形，則取較小的邊為

3、38px，等比放縮。 2. 如果形狀為圓形，則取圖標大小為44px*44px，若只是近似的圓形，取較大的邊為44px，等比放縮。 3. 如果形狀為矩形，先令短邊為32px，等比放縮圖標，若此時長邊大于或者約等于44px，則取長邊為44px，等比放縮；否則，令長邊為y，取長邊為（44+y）/2，再向上取整，然后進行等比放縮。 根據(jù)以上的規(guī)則制定出來的圖標，大小就會比較統(tǒng)一。如下圖，左邊是調(diào)整前，右邊是調(diào)整后。（不過也有人反饋說看不太出來o()o） 圖標修改前后對比 順便把這次整理圖標遇到的坑也記錄一下： 1. 關于半像素的問題。 半像素的問題主要是在進行Android不同尺寸適配的時候，有時候開

4、發(fā)會要求圖標不能出現(xiàn)非整數(shù)的尺寸，不然可能圖標就會糊掉。所以在設計Android端使用的圖標時，注意一下這個問題。適當?shù)貙Τ叽邕M行四舍五入一下即可。 2. 關于iconfont的問題。 現(xiàn)在大部分團隊都會將圖標轉(zhuǎn)換為iconfont，這樣可以縮小整個項目的大小。圖標在轉(zhuǎn)換為iconfont的時候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。 3. 關于對齊的問題。 如果有仔細看，我這個方法指定的圖標大小為48px*48px，但是里面有內(nèi)容的部分，比如說圓形，就只會占據(jù)44px*44px，這時候我們當然會希望把圖形放置在圖標的中央。免不了就會使用對齊工具，咻咻兩下，一個上下居中對齊，一個左右居中對齊，搞掂。但是，慢著，如果仔細發(fā)現(xiàn)一下，你會發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯覺造成的【1】，這時候就需要進行適當?shù)恼{(diào)整，通過自己的視覺判斷來進行對齊。 4. 關于顏色統(tǒng)一的問題。 一般而言，圖標設定為同一個色值（比如#999999）就能統(tǒng)一顏色，但是也有遇到過某個圖標會顯得顏色比較淺，這是因為sket