- Photoshop CC 移動UI設計案例教程(全彩慕課版)
- 胡金黎 朱海燕
- 908字
- 2020-06-12 16:11:33
2.2.5 Android圖標規范
在Android中,圖標規范可以根據Material Design設計語言分成應用圖標和系統圖標兩個方面。
1. 應用圖標
應用圖標的概念:應用圖標即產品圖標,是品牌和產品的視覺表達,主要出現在主屏幕上,如圖2-36所示。

圖2-36 Android系統中各類應用圖標
應用圖標的設計:創建應用圖標時,應以320dpi分辨率中的48dp尺寸為基準。Material Design語言提供了4種不同的圖標形狀供UI設計師參考,以保持視覺平衡,如圖2-37所示。

圖2-37 Material Design官網提供的4類圖標內部結構線
應用圖標的適配:應用圖標的尺寸應根據不同設備的分辨率進行適配,如圖2-38所示。當應用圖標應用于Google Play中時,其尺寸是512px×512px。

圖2-38 Android系統中不同設備應用圖標的尺寸
2. 系統圖標
系統圖標的概念:系統圖標即界面中的功能圖標,通過簡潔、現代的圖形表達一些常見功能。Material Design提供了一套完整的系統圖標,如圖2-39所示,同時設計師也可以根據產品的調性進行自定義設計。

圖2-39 Material Design官網提供的完整的系統圖標
系統圖標的設計:創建系統圖標時,以320dpi分辨率中的24dp尺寸為基準。圖標應該留出一定的邊距,如圖2-40所示,以保證不同面積的圖標有協調一致的視覺效果。

圖2-40 系統圖標的設計
Material Design語言提供了4種不同的圖標形狀供UI設計師參考,以保持視覺平衡,如圖2-41所示。

圖2-41 Material Design官網提供的4類圖標內部結構線
設計時為保證圖標清晰,需將軟件中X坐標和Y坐標設為整數,而不是小數,將圖標“放在像素上”,如圖2-42所示。

圖2-42 正確示例(左)與錯誤示例(右)
系統圖標由?描邊末端、?圓角、?反白區域、?描邊、?內部角、?邊界區域6部分組成,如圖2-43所示。

圖2-43 系統圖標
邊角:邊角半徑默認為2dp。內角應該是方形而不要使用圓形,圓角建議使用2dp,如圖2-44所示。

圖2-44 邊角半徑為2dp的圖標解析圖
描邊:系統圖標使用2dp的描邊以保持圖標的一致性,如圖2-45所示。

圖2-45 描邊為2dp的圖標解析圖
描邊末端:描邊末端應該是直線并帶有角度,留白區域的描邊粗細也應該是2dp。描邊如果是傾斜45°,那么末端應該也以傾斜45°為結束,如圖2-46所示。

圖2-46 描邊末端為2dp的圖標解析圖
視覺校正:如果系統圖標需要設計復雜的細節,則可以進行細微的調整以提高其清晰度,如圖2-47所示。

圖2-47 復雜圖標的視覺校正解析圖
系統圖標的適配:系統圖標的尺寸應根據不同設備的分辨率進行適配,如圖2-48所示。

圖2-48 系統圖標的適配
- 社會科學數據處理軟件應用
- 性能測試從零開始
- Getting Started with Microsoft Application Virtualization 4.6
- 邊做邊學:Photoshop圖像制作案例教程(Photoshop CC 2019·微課版)
- 跟儲君老師學Excel極簡思維
- SolidWorks2014基礎實例教程
- Photoshop電商設計與產品精修實戰(微視頻版)
- 7小時精通剪映:短視頻剪輯/調色/特效/字幕(手機版+電腦版)
- iPad Procreate風格繪畫之美
- iOS智能手機APP界面設計實戰教程
- Joomla! E/Commerce with VirtueMart
- AI繪畫精講:Stable Diffusion從入門到精通
- Photoshop CC圖形圖像處理實戰教程(微課版)
- SAI+Photoshop漫畫繪制技法從入門到精通(第2版)
- MATLAB完全自學教程