起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計方法論：一種統一圖標大小的方法
最近在整理設計稿中出現的圖標，整理除了匯總之外，還需要重新調整一下圖標的大小，使他們看起來“差不多大”。調了很久，也咨詢了一些設計師朋友，最后在谷歌的Material Design找到了一種規定的方式，特此來記錄一下。需要注意的是，方法有很多，這只是提供一種可行的方法，可供參考，有什么問題可以留言討論。
首先，這種方法制作出來的圖標大小為48px*48px，需要其他尺寸的圖標可以做完之后等比放縮即可，放縮過程中可能需要注意半像素（見下文）的問題。
Material Design把圖標的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長為38px，矩形為44px*32px。
怎么判定圖標應該套用那種尺寸的？有一種方法是：將圖標與上圖的模板居中對齊，然后中心不動，放大圖標使之圖標依次碰到三種形狀的邊界，填充最滿的那個形狀的尺寸就是該圖標需要規定的尺寸。如下圖，依次將設置圖標放大并使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標最大，證明設置圖標最匹配圓形，所以使用圓形的尺寸44px*44px。
下面正式定義尺寸部分：
1. 如果形狀為方形，則圖標大小為38px*38px，若只是近似的方形，則取較小的邊為38px，等比放縮。
2. 如果形狀為圓形，則取圖標大小為44px*44px，若只是近似的圓形，取較大的邊為44px，等比放縮。
3. 如果形狀為矩形，先令短邊為32px，等比放縮圖標，若此時長邊大于或者約等于44px，則取長邊為44px，等比放縮；否則，令長邊為y，取長邊為（44+y）/2，再向上取整，然后進行等比放縮。
根據以上的規則制定出來的圖標，大小就會比較統一。如下圖，左邊是調整前，右邊是調整后。（不過也有人反饋說看不太出來o(╯□╰)o）
順便把這次整理圖標遇到的坑也記錄一下：
1. 關于半像素的問題。
半像素的問題主要是在進行Android不同尺寸適配的時候，有時候開發會要求圖標不能出現非整數的尺寸，不然可能圖標就會糊掉。所以在設計Android端使用的圖標時，注意一下這個問題。適當地對尺寸進行四舍五入一下即可。
2. 關于iconfont的問題。
現在大部分團隊都會將圖標轉換為iconfont，這樣可以縮小整個項目的大小。圖標在轉換為iconfont的時候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。
3. 關于對齊的問題。
如果有仔細看，我這個方法指定的圖標大小為48px*48px，但是里面有內容的部分，比如說圓形，就只會占據44px*44px，這時候我們當然會希望把圖形放置在圖標的中央。免不了就會使用對齊工具，咻咻兩下，一個上下居中對齊，一個左右居中對齊，搞掂。但是，慢著，如果仔細發現一下，你會發現看上去并不是居中的。這是由于人的視覺錯覺造成的【2】，這時候就需要進行適當的調整，通過自己的視覺判斷來進行對齊。
4. 關于顏色統一的問題。
一般而言，圖標設定為同一個色值（比如#999999）就能統一顏色，但是也有遇到過某個圖標會顯得顏色比較淺，這是因為sketch處理圖形的透明度有兩個地方，一個是整體的透明度（在填充選項區域的上方），一個是填充的透明度，這個往往是因為整體透明度那里有問題，修改一下即可。
【2】盡信工具，還不如沒有工具@設計譯言
#專欄作家#
妖葉秋，一年級交互設計師，人人都是產品經理專欄作家。做過ToC產品的交互設計，現在在嘗試ToB的業務。主攻交互，也懂點用研、視覺和產品的知識。愛生活、愛設計、愛讀書、愛總結，頭像下方是我的聯系方式，歡迎志同道合者與我交流。
本文原創發布于人人都是產品經理，未經許可，不得轉載。
應該是設長邊為y更通俗易懂點，不是令長邊為y ?
長邊為y，取長邊為（44+y）/2.這個設和求是一個數吧？怎么算
意思是：先嘗試把矩形的圖標，先放縮到短邊為32px，如果此時長邊小于44px，可能是40px，y就等于40px。那么此時（y+44）/2=42px。
這個42px求出來是什么，矩形的長寬定義還是沒講清楚啊
?? 這個方法值得借鑒，但我比較在意圖標的視覺重量能否一致，要知道尺寸大小一致并不代表視覺重量一致哦……
暫時沒有找到視覺重量方面的理論，如果有發現，歡迎探討