《術(shù)與道-移動(dòng)UI設(shè)計(jì)必修課》03.圖標(biāo)與圖片

1. App圖標(biāo)的特點(diǎn)

類(lèi)似于平面設(shè)計(jì)中的品牌logo;
既要能表達(dá)應(yīng)用的功能性,又要體現(xiàn)自己的獨(dú)特性;

  • 獨(dú)特的圖形
  • 表意準(zhǔn)確
  • 謹(jǐn)慎用色
  • 避免使用大量文字
  • 避免使用照片
  • 能夠適應(yīng)各種場(chǎng)景需求

小尺寸圖片應(yīng)該重新設(shè)計(jì),去除不必要的細(xì)節(jié)如紋理和質(zhì)感等

2. App圖標(biāo)設(shè)計(jì)流程

  1. 尋找隱喻

可以把要設(shè)計(jì)的應(yīng)用的功能點(diǎn)羅列出來(lái),然后通過(guò)關(guān)鍵詞進(jìn)行頭腦風(fēng)暴,比如“休息”,可以聯(lián)想到椅子、沙發(fā)、床和咖啡等;

  1. 抽象圖形

太過(guò)抽象和太過(guò)具象的圖形,識(shí)別率都很低;

  1. 競(jìng)品分析
  2. 確定風(fēng)格
  3. 調(diào)整細(xì)節(jié)
  4. 場(chǎng)景測(cè)試

3. App圖標(biāo)設(shè)計(jì)方法

  • 正負(fù)形組合

根據(jù)應(yīng)用抽象出兩到三個(gè)重要的功能點(diǎn)或產(chǎn)品特質(zhì),然后提煉相應(yīng)的圖形,選擇輪廓面積較大的為主圖形,把輪廓較小的進(jìn)行負(fù)形處理,通過(guò)圖形的組合、疊加或扣除,以組成新的圖形。

  • 折疊圖形
  • 局部提取
  • 線(xiàn)性圖標(biāo)

多以彩色微漸變背景、白色線(xiàn)條組合圖形居多。

  • 透明漸變
  • 色塊拼接
  • 圖形復(fù)用
  • 背景組合

4. 圖標(biāo)的視覺(jué)統(tǒng)一

有時(shí)圓形圖形多的話(huà)看起來(lái)顯大,長(zhǎng)條形圖形多的話(huà)看起來(lái)顯小。
為了保證各種類(lèi)型圖標(biāo)的視覺(jué)統(tǒng)一性,可以采用雙重邊框法來(lái)統(tǒng)一圖形的視覺(jué)大??;

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. 線(xiàn)性圖標(biāo)

  • 風(fēng)格:大圓角、直角、斷線(xiàn)(類(lèi)似兒童畫(huà)中的一筆畫(huà))

8. 圖片的使用

  • JPG
  • PNG8 / PNG24 可以存儲(chǔ)的顏色種類(lèi)為2^8 和 2^24種;
  • PNG24支持半透明,PNG8只支持全透明和全不透明;
  • JPG存儲(chǔ)圖像壓縮8x8的柵格像素信息,而PNG則存儲(chǔ)的是像素位置信息以及像素色值索引板信息,所以為無(wú)損壓縮;
  • 常見(jiàn)圖片比例為

1:1 用戶(hù)頭像
3:2 產(chǎn)品詳情頁(yè)頭部展示圖片
4:3 / 16:9為常見(jiàn)照片的原始尺寸比例

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容