2.3 如何繪制應(yīng)用圖標(biāo)

iOS 6及之前版本，應(yīng)用圖標(biāo)的圓角半徑都可以通過1/4圓繪制出來，即繪制標(biāo)準(zhǔn)的圓角矩形即可，主屏幕應(yīng)用圖標(biāo)為114×114px，使用20px圓角半徑；App Store應(yīng)用圖標(biāo)為512×512px，使用90px圓角半徑等。從iOS 7開始，主屏幕應(yīng)用圖標(biāo)調(diào)整為120×120px，并且不再是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線，接近于26～27px圓角半徑。

我們把兩個(gè)形狀重疊放大后進(jìn)行對(duì)比，可以發(fā)現(xiàn)它們圓角之間的差別，其中灰色線框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角，藍(lán)色為iOS 7圓角，它與圓角矩形擁有相同的對(duì)角線錨點(diǎn)，區(qū)別在于其曲線稍微向中心收緊。

事實(shí)上，我們很難在Retina顯示屏上區(qū)分這么細(xì)微的差別，因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過分糾結(jié)它的圓角，直接繪制成直角矩形交給開發(fā)工程師即可，如應(yīng)用圖標(biāo)需用于展示，可以繪制120×120px圓角矩形、27px圓角半徑代替。

在App Store上有個(gè)“7分鐘健身”的專題，本篇我們就以此為產(chǎn)品案例來學(xué)習(xí)一個(gè)iOS應(yīng)用圖標(biāo)的繪制過程，在后面的篇幅中我們再來講解Android應(yīng)用圖標(biāo)的繪制方法。

尋找隱喻

隱喻是在彼類事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟愂挛锏男睦硇袨椤⒄Z言行為和文化行為，即人們看到某樣?xùn)|西或聽到某件事情能夠馬上在大腦中形成聯(lián)想，例如當(dāng)說到健身，我們就馬上想到強(qiáng)壯、健康、熱情、肌肉、秒表、跑步機(jī)等。

競品分析

在同類應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì)，如何保持應(yīng)用圖標(biāo)的唯一識(shí)別性非常重要。唯一識(shí)別性不單單是指圖形與其他應(yīng)用有所差異，讓用戶在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶的心理預(yù)期。圖1，通常7個(gè)圓點(diǎn)首先想到Loading，難以與“7分鐘”發(fā)生聯(lián)系；圖2，表意太寬泛，數(shù)字7可以是與7相關(guān)的任何事情；圖3，雖然增加了正六邊形背景，仍然表意不明確；圖4，秒表與運(yùn)動(dòng)、健身相關(guān)，數(shù)字7在秒表圖形中間代表著時(shí)間，因此這是表意非常清晰的設(shè)計(jì)。

提取關(guān)鍵詞

我們從“7分鐘健身”中可以提取“7”“時(shí)間”“健康”“身體”，并將這4個(gè)關(guān)鍵詞描繪成下列圖形。仔細(xì)分析這個(gè)產(chǎn)品后發(fā)現(xiàn)，它與主流健身應(yīng)用在挖掘用戶需求上有著很大的差異化，強(qiáng)調(diào)的是每天花7分鐘鍛煉身體。因此，“7分鐘”才是這個(gè)產(chǎn)品的核心賣點(diǎn)，我們在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)應(yīng)突出“7”和“時(shí)間”的視覺表現(xiàn)。

抽象圖形

確立了“7”和“時(shí)間”作為應(yīng)用圖標(biāo)的圖形，“7”的圖形可以直接使用阿拉伯?dāng)?shù)字7,“時(shí)間”的圖形除了要體現(xiàn)“時(shí)間”外，還需兼顧體現(xiàn)“健身”。我們發(fā)現(xiàn)“秒表”的圖形能夠同時(shí)體現(xiàn)這兩個(gè)元素，即與競品分析中的圖4有著同樣的視覺表現(xiàn)，因此要在圖形上有所區(qū)別，繪制好兩個(gè)圖形后將兩者相結(jié)合，即完成初步設(shè)想。

圖標(biāo)柵格線

使用iOS應(yīng)用圖標(biāo)柵格線作為設(shè)計(jì)依據(jù)有助于建立和諧的圖標(biāo)繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線。

將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)，在下圖中：圖1比例過小；圖2視覺重心偏上，因?yàn)閳D形的中心點(diǎn)并不在圖形的圓心，因此不能與圖標(biāo)柵格同心圓；圖3視覺重心偏下，因?yàn)閳D形的重心并不在中軸線，因此不能與圖標(biāo)柵格水平居中對(duì)齊；圖4比例協(xié)調(diào)，圖形略微靠上使得視差平衡。

豐富細(xì)節(jié)

“7”與“秒表”的組合圖形并不具有唯一識(shí)別性，我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié)，建立起應(yīng)用的產(chǎn)品氣質(zhì)。首先，7分鐘健身強(qiáng)調(diào)輕松訓(xùn)練，并非高強(qiáng)度的激烈運(yùn)動(dòng)，因此健康的綠色比燃燒的暖色系更加適合作為應(yīng)用的主色。接著，淺色或線性漸變色的背板過于普通（第1步和第2步），使用徑向漸變能與大多數(shù)的應(yīng)用形成差異化（第3步），給背板增加光芒萬丈的視覺效果，使其更加具有動(dòng)感和活力，這就是7 Minute Workout Challenge的應(yīng)用圖標(biāo)（第4步）。

多場景測試

將120×120px應(yīng)用圖標(biāo)設(shè)計(jì)終稿放大至1024×1024px，交付開發(fā)工程師提交至App Store上架，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形，iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住，假如圖標(biāo)設(shè)計(jì)稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域。

此外，應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場景中，例如在iPhone 7 Plus上需@3x的圖，即將120×120px放大至1.5倍；在iPhone 7的設(shè)置頁需58×58px的圖，即將120×120px縮小。將大圖縮小成為小圖，一些細(xì)節(jié)就會(huì)丟失，使畫面變得模糊，因此設(shè)計(jì)師應(yīng)對(duì)小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整，去除不必要的裝飾元素，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場景下也能保持清晰的辨識(shí)度。（注：下圖非實(shí)際大小，僅表明不同分辨率的比例關(guān)系。）