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

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è)計流程

  1. 尋找隱喻

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

  1. 抽象圖形

太過抽象和太過具象的圖形,識別率都很低;

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

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為常見照片的原始尺寸比例

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容