4.1 iOS應用圖標

iOS6及之前的版本，應用圖標的圓角半徑都可以通過1/4圓繪制出來，即繪制標準的圓角矩形即可，主屏幕應用圖標為114*114px，使用20px圓角半徑，App store應用圖標為512*512px，使用90px圓角半徑等。從iOS7開始，主屏幕應用圖標調整為120*120px，并且不再是標準的圓角矩形，而是某種連續曲線，接近于26-27px圓角半徑。

我們把兩個圓角曲線放大重疊后進行對比，其中灰色線框為標準圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對角線錨點，區別在于其曲線稍微向中心收緊。

事實上，我們很難在Retina屏幕上區分這么席位的差別，因此設計師在繪制iOS應用圖標時不必過分糾結它的圓角，直接繪制成直角矩形交給開發同學即可，如果應用圖標需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。

4.2 安卓應用圖標

安卓應用圖標同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設計師提供給程序員的同樣是直角矩形，然后程序員通過代碼進行切割使其變成圓角圖標。

4.3 iOS應用圖標設計流程

在我之前的設計作品中，有個“影記”的攝影社區APP，本篇我們就以此為產品案例拋磚引玉來學習一個iOS應用圖標的繪制過程。

4.3.1 尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗、想象、理解、談論此類事物的心理行為、語言行為和文化行為，即人們看到某樣東西或聽到某件事情能夠馬上在大腦中形成聯想。例如說到攝影，馬上就能想到相機、快門、閃光燈、暗房等。然后通過這些聯想詞，去找一些氣質相符的圖片制作情緒版，通過情緒版可以感受到產品的調性，然后從中提取一些形狀和色彩作為產品圖標的主要造型。

4.3.2 競品分析

應用市場各類產品不勝其數，在同類應用中存在大量相似的應用圖標設計，如何保持應用圖標的唯一識別性非常重要。唯一識別性不單單指圖形與其他應用有所差異，避免創意撞車，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心里預期。

4.3.3 提取關鍵詞

根據收集的圖片，創建情緒版，結合自己的產品提取關鍵詞，然后就知道在接下來的設計中應該突出什么。我們從“影記”中可提取首字母“Y”，相機中的“快門”“信號燈”“開關機”，并依次將關鍵詞描繪成下列圖形。

4.3.4 抽象圖形

確立了首字母“Y”、“快門/開關機”和“信號燈”作為應用圖標的主圖形，接下來將繪制好的3個圖形相結合，即完成初步設想。

4.3.5 圖標柵格線

使用iOS應用圖標柵格線作為設計一句有助于建立和諧的圖標繪制比例，并與iOS系統保持統一，下圖為iOS系統天氣應用使用了圖標柵格線。將圖形放置在圖標柵格上調整大小并注意圖形與其比例協調。

4.3.6 豐富細節

通過上面圖形組合已基本完成應用圖標的設計，接下來我們還應從顏色、質感、背板等著手豐富圖形的細節，建立起應用的產品氣質。“影記”作為攝影師分享佳作平臺，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應用的主色。然后，白色的信號燈過于普通，使用相機本身發出的橘紅色燈光作為信號燈的顏色，使其更加具有動感和活力。整體像「消息氣泡」的造型暗示可以在這里進行攝影交流。

4.3.7 多場景測試

將120*120px應用圖標設計稿放大至1024*1024px，交付開發提交至App Store上架，正確的圖標設計稿應是直角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住，假如圖標設計稿自帶圓角，就有可能露出圖標透明區域。

△ 注：上圖非實際大小，僅表明不同分辨率下的比例關系

此外，應用圖標還會以不同的分辨率出現在不同場景中，例如在iPhone 8plus上需@3x的圖，即將120px的圖標放大至1.5倍;而在iPhone7的設置頁需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時，一些細節就會丟失，使畫面變得模糊，因此設計師應對小尺寸圖標進行席位調整，去除不必要的裝飾元素，以確保應用圖標在小分辨率應用場景下也能保持清晰的識別度。

APP中的功能圖標

除了產品圖標，還有一種圖標被稱為功能(或系統)圖標，功能圖標指的是擔負一定功能和含義的圖形，一般來說需要像文字一般地被人迅速理解，所以表達方式上不適合特別復雜，如微信底部四個系統圖標就使用了比較簡潔的線性風格。

功能圖標在UI設計中占據非常重要的作用，幾乎存在于每一個應用界面中，無論是在導航欄、工具欄或標簽欄，還是在首頁、詳情頁或個人中心頁，都隨處可見功能圖標的身影。功能圖標具有明確的表意功能，其作用在于替代文字或輔助文字來指引用戶進行快速導航，它具有圖形化的符號，比文字更加直觀，符合普羅大眾的認知習慣，有助于用戶形成記憶思維，提高應用的易用性。同時設計精致、風格統一的功能圖標提升了產品視覺效果，不但給用戶帶來視覺上的愉悅感，還帶來了良好一致的使用體驗。

在 @1x 一倍圖設計模式下，以 24px 為網格基準的話，常使用的圖標粗細有：1px 、1.5px、2px、3px，1.5的粗細常用于高倍屏，如近幾年旗艦機的手機屏幕或者 retina電腦屏，否則像素渲染會比較模糊。

5.1 圖標柵格

圖標柵格被用來促進圖標的一致性，以及為圖形元素的定位建立一組清晰的規范。這種標準化的規范造就了一個靈活但有條理的系統，令所有的設計保持協調、一致和美學的視覺特征。

5.1.1 像素柵格

基于像素劃分的像素柵格是最基礎的柵格系統。在繪制圖標時，我們總是希望將對象對齊到每一個像素，特別是直線。因為像素對齊不僅僅可以更好地渲染，還能讓圖標更加整潔、舒服。下圖展示了Sketch 中像素對齊和沒對齊圖標之間的差異：

左：像素不對齊 右：像素對齊

可以在繪制圖標之前就先設置好柵格，在Sketch和Figma中都有相似的設置。

Material Design官網給出了圖標的輔助網格，為設計師繪制小圖標提供一致的標準。圖標網格通常包含三部分內容：活動區域，修飾區域，關鍵線形狀。我們以此為例進行介紹。

活動區域：是指圖標主要內容的繪制區域，通常而言圖標圖形的主體都在該區域內。

修飾區域：是指用于承載部分圖標的一些出格圖形，某些視覺占比較小的圖形可以延伸到修飾區域，但不能超出網格范圍。

關鍵線形狀：關鍵線形狀是網格的基礎。有4種關鍵線形狀，利用這些核心形狀作為向導，你可以在產品圖標的設計中保持一致的視覺比例。

如 Material Deisgn 的圖標網格中，活動區域寬度為 20dp，修飾區域寬度為 2dp，4 種關鍵形狀分別對齊于 20pd和 18dp 和 16dp的邊緣，對齊于像素。

上圖為基于網格和關鍵線形狀繪制圖標的示例：如左側「剪切板」圖標，整體核心圖形部分以網格中的正方矩形為模板，頂部的掛鉤圖形視覺面積較小，部分內容伸入修飾區域。右側「相機」圖標以長方矩形為模板。

5.1.2 視覺柵格

除了像素柵格，還有視覺柵格。視覺柵格可以幫助我們找出圖標的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來會比正方形更小。因此我們應該在繪制圖標時設定一個固定大小的容器，這樣它們在導出時就都是相同的尺寸了。添加內邊距可以讓圖標在視覺上看起來更加平衡，避免以后開發時還需要重新調整。

5.1.3 視覺重量

繪制圖標不光要滿足物理上大小統一，還要實現視覺上大小統一。設計師要懂得調節圖標大小以避開視覺上的覺錯。

UI界面的圖標通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會發現它們具有相同的視覺重量，因為它們變成或多或少相同的斑點效果。

根據圖標形狀，將它們放在相應的框架中。你就會發現，方形圖標比三角形或細長圖標更緊湊。