- Photoshop CC 移動UI設計案例教程(全彩慕課版)
- 胡金黎 朱海燕
- 581字
- 2020-06-12 16:11:32
2.1.4 iOS圖標規范
在iOS中,圖標分為應用圖標和系統圖標兩種,下面分別介紹這兩種圖標的設計規范。
1. 應用圖標
應用圖標的概念:應用圖標是應用程序的圖標,如圖2-14所示。應用圖標主要應用于主屏幕、App Store、Spotlight及設置中。

圖2-14 iOS系統中的各類應用圖標
應用圖標的設計:應用圖標的設計尺寸可以采用1024px,并根據iOS官方模板進行規范,如圖2-15所示。正確的圖標設計稿應是直角矩形不帶圓角的,iOS會自動應用一個圓角遮罩將圖標的4個角遮住。

圖2-15 iOS官方模板
應用圖標的適配:應用圖標會以不同的分辨率出現在主屏幕、App Store、Spotlight及設置場景中,尺寸也應根據不同設備的分辨率進行適配,如圖2-16所示。

圖2-16 iOS系統中不同設備應用圖標的尺寸
2. 系統圖標
系統圖標的概念:系統圖標即界面中的功能圖標,主要應用于導航欄、工具欄及標簽欄。當未找到符合需求的系統圖標時,UI設計師可以設計自定義圖標,如圖2-17所示。

圖2-17 系統圖標(由澳大利亞Prospa產品設計負責人AndrewMcKay創作)
系統圖標的設計:在導航欄和工具欄上的圖標一般是44px(22pt@2x),在標簽欄上的圖標一般是50px(25pt@2x)。蘋果官方提供了4種不同形狀的標簽欄圖標尺寸供UI設計師參考。其意義是讓不同外形的圖標在同一個標簽欄上時,保證視覺平衡,如圖2-18所示。

圖2-18 標簽欄圖標尺寸
系統圖標的適配:系統圖標會以不同的分辨率出現在導航欄、工具欄及標簽欄場景中,尺寸也應根據不同設備的分辨率進行適配,如圖2-19所示。

圖2-19 iOS系統中不同設備系統圖標的尺寸
推薦閱讀
- EJB 3.0 Database Persistence with Oracle Fusion Middleware 11g: LITE
- Enhancing Microsoft Content Management Server with ASP.NET 2.0
- 畫筆圣經 Photoshop專業繪畫技法
- Photoshop日系少女寫真后期解密
- 下一代空間計算:AR與VR創新理論與實踐
- 通達信炒股軟件從入門到精通(第2版)
- 零基礎學AutoCAD 2018(全視頻教學版)
- Photoshop CS6完美創意設計:不一樣的圖像藝術處理
- CINEMA 4D R20完全實戰技術手冊
- Photoshop海報設計技巧與實戰
- Mastering Redis
- Photoshop+Firefly從入門到精通
- FLUENT 15.0流場分析實戰指南
- Building Websites with Mambo
- Photoshop數字創意設計教程(案例微課版)