1. App圖標(biāo)的特點
類似于平面設(shè)計中的品牌logo;
既要能表達應(yīng)用的功能性,又要體現(xiàn)自己的獨特性;
- 獨特的圖形
- 表意準(zhǔn)確
- 謹(jǐn)慎用色
- 避免使用大量文字
- 避免使用照片
- 能夠適應(yīng)各種場景需求
小尺寸圖片應(yīng)該重新設(shè)計,去除不必要的細節(jié)如紋理和質(zhì)感等
2. App圖標(biāo)設(shè)計流程
- 尋找隱喻
可以把要設(shè)計的應(yīng)用的功能點羅列出來,然后通過關(guān)鍵詞進行頭腦風(fēng)暴,比如“休息”,可以聯(lián)想到椅子、沙發(fā)、床和咖啡等;
- 抽象圖形
太過抽象和太過具象的圖形,識別率都很低;
- 競品分析
- 確定風(fēng)格
- 調(diào)整細節(jié)
- 場景測試
3. App圖標(biāo)設(shè)計方法
- 正負形組合
根據(jù)應(yīng)用抽象出兩到三個重要的功能點或產(chǎn)品特質(zhì),然后提煉相應(yīng)的圖形,選擇輪廓面積較大的為主圖形,把輪廓較小的進行負形處理,通過圖形的組合、疊加或扣除,以組成新的圖形。
- 折疊圖形
- 局部提取
- 線性圖標(biāo)
多以彩色微漸變背景、白色線條組合圖形居多。
- 透明漸變
- 色塊拼接
- 圖形復(fù)用
- 背景組合
4. 圖標(biāo)的視覺統(tǒng)一
有時圓形圖形多的話看起來顯大,長條形圖形多的話看起來顯小。
為了保證各種類型圖標(biāo)的視覺統(tǒng)一性,可以采用雙重邊框法來統(tǒng)一圖形的視覺大小;
5. iOS應(yīng)用圖標(biāo)規(guī)范
以iPhone6為例
- App圖標(biāo) 120x120
- AppStore 1024x1024 + 180 round-radius
- TabBar 50x50
- NavigationBar / ToolBar 44x44
- 設(shè)置列表中圖標(biāo) 58x58
- WebClip 120x120
6. Android應(yīng)用圖標(biāo)規(guī)范
- LDPI 3 75x75
- MDPI 4 100x100
- HDPI 6 150x150
- XHDPI 8 200x200
- XXHDPI 12 300x300
- Android應(yīng)用圖標(biāo)標(biāo)準(zhǔn) Launcher 144x144 XHDPI
7. 線性圖標(biāo)
- 風(fēng)格:大圓角、直角、斷線(類似兒童畫中的一筆畫)
8. 圖片的使用
- JPG
- PNG8 / PNG24 可以存儲的顏色種類為2^8 和 2^24種;
- PNG24支持半透明,PNG8只支持全透明和全不透明;
- JPG存儲圖像壓縮8x8的柵格像素信息,而PNG則存儲的是像素位置信息以及像素色值索引板信息,所以為無損壓縮;
- 常見圖片比例為
1:1 用戶頭像
3:2 產(chǎn)品詳情頁頭部展示圖片
4:3 / 16:9為常見照片的原始尺寸比例