從零開始畫圖標(biāo)系列：?jiǎn)?dòng)圖標(biāo)設(shè)計(jì)指南

本文我們開始講解最后一種類型的圖標(biāo) ── 啟動(dòng)圖標(biāo)。在第一章我們已經(jīng)對(duì)啟動(dòng)圖標(biāo)有了基礎(chǔ)的認(rèn)識(shí)，所以下圖再簡(jiǎn)單回顧一遍。

想要在啟動(dòng)圖標(biāo)設(shè)計(jì)上入門，就要先從規(guī)范開始學(xué)習(xí)，然后了解不同的風(fēng)格以及對(duì)應(yīng)風(fēng)格的設(shè)計(jì)過程。

往期回顧：

• 《從零開始畫圖標(biāo)系列：超全面的基礎(chǔ)知識(shí)》
• 《從零開始畫圖標(biāo)系列：工具類圖標(biāo)設(shè)計(jì)規(guī)范》
• 《從零開始畫圖標(biāo)系列：線性圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)演示！》
• 《從零開始畫圖標(biāo)系列：面性圖標(biāo)設(shè)計(jì)方法詳解》
• 《從零開始畫圖標(biāo)系列：裝飾圖標(biāo)設(shè)計(jì)指南》

啟動(dòng)圖標(biāo)的設(shè)計(jì)規(guī)范

說到啟動(dòng)圖標(biāo)的規(guī)范，首先會(huì)想到的，就是 iOS 提供的圖標(biāo)柵格。通過這個(gè)柵格，會(huì)規(guī)范圖形的尺寸，以及所處的位置。

這個(gè)模板和工具圖標(biāo)的使用方法類似，我們?cè)诤竺娴陌咐M(jìn)一步講解。接著，來說明一個(gè)更重要的問題，就是啟動(dòng)圖標(biāo)畫布的尺寸。

默認(rèn)的情況下，我們使用 1024x1024 尺寸來設(shè)計(jì)啟動(dòng)圖標(biāo)，這個(gè)參數(shù)在 iOS 和 Android 中都適用。

之所以使用這么大的尺寸，是由屏幕分辨率的差異和使用場(chǎng)景導(dǎo)致的。

第一，在手機(jī)硬件中，根據(jù)屏幕規(guī)格的不同，展示圖標(biāo)的實(shí)際像素量也不同，即圖標(biāo)的尺寸會(huì)發(fā)生改變。

例如在 1x 的屏幕中，圖標(biāo)使用 60x60px；在 2x 的屏幕中，就使用 120x120pt；3x 則是 180x180。

第二，不同設(shè)備和顯示場(chǎng)景里，應(yīng)用的圖標(biāo)尺寸也不一樣。對(duì)于一個(gè)真實(shí)的項(xiàng)目來說，圖標(biāo)不是只放在手機(jī)上運(yùn)行，無論是 iOS 還是 Android 的 APP 都可以在 PAD 上安裝，圖標(biāo)尺寸規(guī)格就不同。并且，在網(wǎng)頁或者手機(jī)應(yīng)用商店里，也需要展示啟動(dòng)圖標(biāo)，顯示的規(guī)格和真實(shí)應(yīng)用列表中又不同。

所以，在 iOS 官方的圖標(biāo)模板中，我們會(huì)看見里面羅列了非常多的圖標(biāo)尺寸，我們只需要設(shè)計(jì)第一個(gè) 1024 規(guī)格的，將這個(gè)圖標(biāo)置入到 PS 的智能對(duì)象，或者 Sketch 的 Symbol 中，就可以一次性生成所有尺寸，不需要我們自己手動(dòng)調(diào)整各種規(guī)格的圖標(biāo)輸出。

應(yīng)該有同學(xué)這時(shí)候還會(huì)產(chǎn)生疑問，模板里的畫布就是一個(gè)正方形，但是大多數(shù)手機(jī)的 APP 圖標(biāo)使用的是圓角，所以，應(yīng)該如何制作這個(gè)圓角，以及它的相關(guān)參數(shù)呢？

真實(shí)項(xiàng)目中，除非項(xiàng)目的特定要求，只需要提交正方形的圖形即可，之后無論是 APP Store，還是多數(shù)安卓應(yīng)用商店，都會(huì)「自動(dòng)」對(duì)該圖形進(jìn)行裁切，生成符合自己系統(tǒng)的圓角圖標(biāo)。

如果我們想要設(shè)計(jì)出正方形圖形后預(yù)覽真實(shí)的效果，就可以用我們準(zhǔn)備的 PSD 模板，將正方形置入到模板中即可。

在設(shè)計(jì)已經(jīng)確認(rèn)以后，我們就要導(dǎo)出這些圖標(biāo)。因?yàn)閱?dòng)圖標(biāo)有很多擬物的設(shè)計(jì)或會(huì)使用真實(shí)的攝影素材，所以應(yīng)用商店提交的格式會(huì)選用位圖格式而不是矢量格式，所以導(dǎo)出啟動(dòng)圖標(biāo)，只需要導(dǎo)出對(duì)應(yīng)尺寸的 PNG 即可。

啟動(dòng)圖標(biāo)的設(shè)計(jì)演示

1. 圖標(biāo)形式

在一些比較基礎(chǔ)的應(yīng)用類型中，通常會(huì)直接使用工具圖標(biāo)的圖形設(shè)計(jì)啟動(dòng)圖標(biāo)。因?yàn)榛A(chǔ)的 APP 服務(wù)大多有表意極其清晰的工具圖標(biāo)與之對(duì)應(yīng)，例如郵箱、計(jì)算器、音樂、地圖等類型應(yīng)用，企業(yè)往往在使用一些抽象的品牌化圖形與表意更清晰的工具圖標(biāo)中選擇后者。

工具圖標(biāo)的設(shè)計(jì)其實(shí)很簡(jiǎn)單，就是在畫板中完成兩種元素的設(shè)計(jì)，一個(gè)是背景，一個(gè)是上方圖標(biāo)。

背景的設(shè)計(jì)，比較常見的有兩種類型，純色、漸變。而上方圖標(biāo)的設(shè)計(jì)里，包含的類型就是我們前面講過的幾種常見的工具圖標(biāo)。所以你看，只要將它們組合，就可以很輕松地設(shè)計(jì)出符合主流特征的啟動(dòng)圖標(biāo)。

所以，如果我們要設(shè)計(jì)一款筆記應(yīng)用，那么就可以先畫一個(gè)線性的筆記圖標(biāo)，然后再將它置入格線模板中確認(rèn)大小，再分別為它們上色，就可以完成設(shè)計(jì)了。

2. 文字形式

文字形式的設(shè)計(jì)，背景和上方一樣，也只使用純色和漸變，但這種設(shè)計(jì)的主要難點(diǎn)在于字體的設(shè)計(jì)上。

想要放文字，大家首先想到的肯定是直接用字體打進(jìn)去，但是切記，字體的商業(yè)版權(quán)問題是不能視而不見的。選擇字體前，一定要關(guān)注該字體是否是免費(fèi)的，百度或者官網(wǎng)都可以查詢。或者一開始就在免費(fèi)字庫中挑選，如思源黑、思源宋、王漢宗系列等等。

可商用字體合輯：《我整理了200款免費(fèi)商用字體，放心下載不會(huì)侵權(quán)！》

如果覺得直接使用字庫文字太沒有設(shè)計(jì)感，那可以選擇做一次字體的二次創(chuàng)作，對(duì)于新手來說簡(jiǎn)單一點(diǎn)。即一開始挑選一個(gè)合適的字體，然后在 AI 中對(duì)該字體進(jìn)行臨摹，再對(duì)細(xì)節(jié)進(jìn)行重新加工，比如襯線的調(diào)整，筆畫粗細(xì)的調(diào)整等等。

比如要設(shè)計(jì)一個(gè)我的應(yīng)用，那么我可以取「超人的電話亭」的第一個(gè)字──超，作為圖標(biāo)上方的文字。然后我選用「方正蘭亭大黑」作為基礎(chǔ)字形，對(duì)它進(jìn)行重構(gòu)即可。

最后建議，如果不是一些比較嚴(yán)肅或是傳統(tǒng)的題材，盡量不要選用宋體或是楷體進(jìn)行設(shè)計(jì)。

前往優(yōu)設(shè)字體設(shè)計(jì)專題學(xué)習(xí)更多干貨：「字體設(shè)計(jì)」

3. 擬物形式

雖然現(xiàn)在整體設(shè)計(jì)環(huán)境中，擬物已經(jīng)被扁平取代，但不代表它已經(jīng)消失，或是在形式上不合理。適當(dāng)?shù)臄M物設(shè)計(jì)會(huì)讓我們對(duì)應(yīng)用功能的認(rèn)識(shí)更清晰，且更有趣味性。

還是老慣例，我們從簡(jiǎn)單的擬物設(shè)計(jì)入手。目前擬物的領(lǐng)域中，使用最普遍的風(fēng)格也是新手最容易學(xué)習(xí)的風(fēng)格，即「輕擬物」的設(shè)計(jì)。這種風(fēng)格需要刻畫的細(xì)節(jié)相對(duì)較少，更易于我們掌握，只要能用好漸變即可。

比如，iOS 的官方應(yīng)用──文件，圖標(biāo)的形式就符合輕擬物的特征。簡(jiǎn)單分析一遍，即在確定完輪廓后，通過漸變填充來表示物體本身的高光和陰影，并添加投影來制造立體感。

如果要設(shè)計(jì)一些更復(fù)雜的擬物圖形，可以通過多做擬物圖標(biāo)的練習(xí)會(huì)更有幫助。在今天扁平化圖形當(dāng)?shù)赖沫h(huán)境中，設(shè)計(jì)得精良的擬物圖標(biāo)往往可以在滿屏的扁平圖標(biāo)中脫穎而出，助于吸引用戶啟動(dòng)應(yīng)用。

總結(jié)

啟動(dòng)圖標(biāo)的介紹到這里就結(jié)束了，新手該掌握的知識(shí)點(diǎn)并不多。無論是更好的字體、圖案、插畫，都已經(jīng)進(jìn)入 LOGO 設(shè)計(jì)的范疇。如果要在這個(gè)領(lǐng)域進(jìn)一步提升，那么針對(duì)性訓(xùn)練的效果反而不理想，需要長(zhǎng)期積累視覺、圖形的整體設(shè)計(jì)能力。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」