移動UI圖標設計規(guī)范課件

iOS系統(tǒng)與Android系統(tǒng)

圖標設計規(guī)范iOS系統(tǒng)與Android系統(tǒng)

圖標設計規(guī)范課程回顧APP設計的基本流程移動UI設計相關理論講解簡易圖標的設計方法2/31課程回顧APP設計的基本流程2/31本章任務掌握Android圖標設計規(guī)范和設計方法掌握iOS圖標設計規(guī)范和設計方法掌握雙系統(tǒng)下啟動圖標設計的異同學會繪制AppStore啟動圖標、Android系統(tǒng)電影啟動圖標、雙系統(tǒng)下商店啟動圖標3/31本章任務掌握Android圖標設計規(guī)范和設計方法3/31目錄iOS系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標設計規(guī)范雙系統(tǒng)下啟動圖標的設計4/31目錄iOS系統(tǒng)圖標設計規(guī)范4/31iOS系統(tǒng)圖標設計規(guī)范iOS圖標概述

啟動圖標

欄圖標

小圖標5/31iOS系統(tǒng)圖標設計規(guī)范iOS圖標概述啟動圖標欄圖標小圖iOS系統(tǒng)圖標設計規(guī)范iOS系統(tǒng)圖標規(guī)范采用圓角矩形默認一般采用頂部光源在設計的時候，圓角部分是不需要進行設計的，這部分是通過程序來實現(xiàn)的6/31iOS系統(tǒng)圖標設計規(guī)范iOS系統(tǒng)圖標規(guī)范6/31iOS系統(tǒng)圖標設計規(guī)范在設計iOS啟動圖標的時候，

可以將Photoshop中圖層樣式的光源統(tǒng)一成90度7/31iOS系統(tǒng)圖標設計規(guī)范在設計iOS啟動圖標的時候，

可以將PiOS系統(tǒng)圖標設計規(guī)范為方便適配，iOS系統(tǒng)的啟動圖標存在著多種設計尺寸8/31iOS系統(tǒng)圖標設計規(guī)范為方便適配，iOS系統(tǒng)的啟動圖標存在著尺寸（px）用途512*512AdHoc發(fā)布測試的證書iTunes數(shù)字媒體播放應用程序，是供Mac和PC使用的一款免費應用軟件，能管理和播放數(shù)字音樂和視頻57*57iPhone/iPodtouch的AppStore和主屏幕114*114高分辨率的iPhone4主屏幕72*72主屏幕，為了兼容iPad29*29Spotling和設置App50*50Spotling,為了兼容iPad58*58高分辨率的iPhone4的Spotling和設置App1024*1024在AppStore商場顯示iOS系統(tǒng)圖標設計規(guī)范9/31尺寸（px）用途512*512AdHoc發(fā)布測試的證書5iOS系統(tǒng)圖標設計規(guī)范在設計的時候，優(yōu)先從1024×1024px開始設計盡量使用矢量圖層或矢量軟件進行繪制要考慮印刷設計要求10/31iOS系統(tǒng)圖標設計規(guī)范在設計的時候，優(yōu)先從1024×1024iOS系統(tǒng)圖標設計規(guī)范設計啟動圖標時應充分考慮是整個應用品牌的重要組成部分獨特的、整潔的、打動人心的、讓人印象深刻的在不同的背景以及不同的規(guī)格下都同樣美觀如果要考慮印刷，分辨率應該設置為300dpi為了考慮多尺寸適配，欄圖標和小圖標的尺寸都應該是雙數(shù)11/31iOS系統(tǒng)圖標設計規(guī)范設計啟動圖標時應充分考慮11/31演示案例：AppStore啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制毛筆頭形狀使用布爾運算繪制圖形使用漸變工具填充顏色12/31演示案例：AppStore啟動圖標設計需求描述12/31課堂練習：

iOS系統(tǒng)商店類App啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形13/31課堂練習：

iOS系統(tǒng)商店類App啟動圖標設計需求描述13/課堂練習：iOS系統(tǒng)啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形14/31課堂練習：iOS系統(tǒng)啟動圖標設計需求描述14/31目錄iOS系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標設計規(guī)范雙系統(tǒng)下啟動圖標的設計15/31目錄iOS系統(tǒng)圖標設計規(guī)范15/31Android系統(tǒng)圖標設計規(guī)范Android啟動圖標概述

啟動圖標

操作、工具欄圖標

小圖標16/31Android系統(tǒng)圖標設計規(guī)范Android啟動圖標概述啟Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)啟動圖標及規(guī)范Android系統(tǒng)啟動圖標尺寸48x48dpldpi36*36pxmdpi48*48pxhdpi72*72pxxhdpi96*96pxxxhdpi144*144pxGooglePlay512*512px17/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)啟動圖標及規(guī)Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)比較開放，

并沒有對啟動圖標在風格上有過多的硬性要求原生態(tài)的Android系統(tǒng)圖標風格特征使用一個獨特的剪影使用三維的正面視圖看起來稍微有點從上往下的透視效果，

使用戶能看到一些景深

原生Android系統(tǒng)啟動圖標樣式18/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)比較開放，

Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及規(guī)范19/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及規(guī)范設計尺寸焦點區(qū)域尺寸Android系統(tǒng)手機操作欄圖標32x32dp24x24dpldpi24x24px18x18pxmdpi32x32px24x24pxhdpi48x48px36x36pxxhdpi64x64px48x48pxxxhdpi96x96px72x72px20/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范21/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范設計尺寸焦點區(qū)域尺寸Android系統(tǒng)小圖標設計尺寸16x16dp12x12dpldpi12*12px9*9pxmdpi16*16px12*12pxhdpi24*24px18*18pxxhdpi32*32px24*24pxxxhdpi48*48px36*36px22/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范演示案例：

Android系統(tǒng)電影啟動圖標設計實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制整體形狀，通過布爾運算剪切右下角的切口和兩邊的矩形鏤空部分使用形狀工具、鋼筆工具通過波爾運算繪制高山白日形狀使用圖層樣式設置內(nèi)陰影以增加淺色高光效果23/31演示案例：

Android系統(tǒng)電影啟動圖標設計實現(xiàn)思路23/課堂練習：Android系統(tǒng)啟動圖標設計需求描述制作Android系統(tǒng)啟動圖標熟練掌握Android系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形24/31課堂練習：Android系統(tǒng)啟動圖標設計需求描述24/31目錄iOS系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標設計規(guī)范雙系統(tǒng)下啟動圖標的設計25/31目錄iOS系統(tǒng)圖標設計規(guī)范25/31雙系統(tǒng)下啟動圖標的設計啟動圖標在雙系統(tǒng)下是可以完全一樣的

iOS系統(tǒng)啟動圖標Android系統(tǒng)啟動圖標26/31雙系統(tǒng)下啟動圖標的設計啟動圖標在雙系統(tǒng)下是可以完全一樣的雙系統(tǒng)下啟動圖標的設計考慮雙系統(tǒng)下啟動圖標的差異化表現(xiàn)設計師提交的稿件

iOS系統(tǒng)啟動圖標Android系統(tǒng)啟動圖標27/31雙系統(tǒng)下啟動圖標的設計考慮雙系統(tǒng)下啟動圖標的差異化表現(xiàn)設演示案例：

雙系統(tǒng)下商場啟動圖標的設計先繪制iOS系統(tǒng)啟動圖標1024x1024像素繪制一個圓角180度的1024像素的圓角矩形使用鋼筆工具和矢量形狀繪制主體形狀，填充合適的顏色使用鋼筆工具繪制陰影，并調(diào)整圖層的不透明度再更改為Android系統(tǒng)啟動圖標在iOS系統(tǒng)啟動圖標的基礎上，復制文件，重命名將圖像尺寸縮小為512x512像素重新調(diào)整圓角正方形的數(shù)值對其余圖層進行圖層蒙版剪切28/31演示案例：

雙系統(tǒng)下商場啟動圖標的設計先繪制iOS系統(tǒng)啟動圖本章總結iOS系統(tǒng)啟動圖標的設計規(guī)范是什么？Android系統(tǒng)啟動圖標的設計規(guī)范是什么？原生的Android啟動圖標的圓角與iOS系統(tǒng)啟動圖標圓角哪個更大？29/31本章總結iOS系統(tǒng)啟動圖標的設計規(guī)范是什么？29/31本章作業(yè)完成本節(jié)課所有的演示案例、課堂練習臨摹下列按鈕和圖標Android系統(tǒng)啟動圖標設計iOS系統(tǒng)啟動圖標設計請教員根據(jù)班級情況布置預習30/31本章作業(yè)完成本節(jié)課所有的演示案例、課堂練習30/31移動UI圖標設計規(guī)范課件iOS系統(tǒng)與Android系統(tǒng)

圖標設計規(guī)范iOS系統(tǒng)與Android系統(tǒng)

圖標設計規(guī)范課程回顧APP設計的基本流程移動UI設計相關理論講解簡易圖標的設計方法33/31課程回顧APP設計的基本流程2/31本章任務掌握Android圖標設計規(guī)范和設計方法掌握iOS圖標設計規(guī)范和設計方法掌握雙系統(tǒng)下啟動圖標設計的異同學會繪制AppStore啟動圖標、Android系統(tǒng)電影啟動圖標、雙系統(tǒng)下商店啟動圖標34/31本章任務掌握Android圖標設計規(guī)范和設計方法3/31目錄iOS系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標設計規(guī)范雙系統(tǒng)下啟動圖標的設計35/31目錄iOS系統(tǒng)圖標設計規(guī)范4/31iOS系統(tǒng)圖標設計規(guī)范iOS圖標概述

啟動圖標

欄圖標

小圖標36/31iOS系統(tǒng)圖標設計規(guī)范iOS圖標概述啟動圖標欄圖標小圖iOS系統(tǒng)圖標設計規(guī)范iOS系統(tǒng)圖標規(guī)范采用圓角矩形默認一般采用頂部光源在設計的時候，圓角部分是不需要進行設計的，這部分是通過程序來實現(xiàn)的37/31iOS系統(tǒng)圖標設計規(guī)范iOS系統(tǒng)圖標規(guī)范6/31iOS系統(tǒng)圖標設計規(guī)范在設計iOS啟動圖標的時候，

可以將Photoshop中圖層樣式的光源統(tǒng)一成90度38/31iOS系統(tǒng)圖標設計規(guī)范在設計iOS啟動圖標的時候，

可以將PiOS系統(tǒng)圖標設計規(guī)范為方便適配，iOS系統(tǒng)的啟動圖標存在著多種設計尺寸39/31iOS系統(tǒng)圖標設計規(guī)范為方便適配，iOS系統(tǒng)的啟動圖標存在著尺寸（px）用途512*512AdHoc發(fā)布測試的證書iTunes數(shù)字媒體播放應用程序，是供Mac和PC使用的一款免費應用軟件，能管理和播放數(shù)字音樂和視頻57*57iPhone/iPodtouch的AppStore和主屏幕114*114高分辨率的iPhone4主屏幕72*72主屏幕，為了兼容iPad29*29Spotling和設置App50*50Spotling,為了兼容iPad58*58高分辨率的iPhone4的Spotling和設置App1024*1024在AppStore商場顯示iOS系統(tǒng)圖標設計規(guī)范40/31尺寸（px）用途512*512AdHoc發(fā)布測試的證書5iOS系統(tǒng)圖標設計規(guī)范在設計的時候，優(yōu)先從1024×1024px開始設計盡量使用矢量圖層或矢量軟件進行繪制要考慮印刷設計要求41/31iOS系統(tǒng)圖標設計規(guī)范在設計的時候，優(yōu)先從1024×1024iOS系統(tǒng)圖標設計規(guī)范設計啟動圖標時應充分考慮是整個應用品牌的重要組成部分獨特的、整潔的、打動人心的、讓人印象深刻的在不同的背景以及不同的規(guī)格下都同樣美觀如果要考慮印刷，分辨率應該設置為300dpi為了考慮多尺寸適配，欄圖標和小圖標的尺寸都應該是雙數(shù)42/31iOS系統(tǒng)圖標設計規(guī)范設計啟動圖標時應充分考慮11/31演示案例：AppStore啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制毛筆頭形狀使用布爾運算繪制圖形使用漸變工具填充顏色43/31演示案例：AppStore啟動圖標設計需求描述12/31課堂練習：

iOS系統(tǒng)商店類App啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形44/31課堂練習：

iOS系統(tǒng)商店類App啟動圖標設計需求描述13/課堂練習：iOS系統(tǒng)啟動圖標設計需求描述為iOS系統(tǒng)制作啟動圖標熟練掌握iOS系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形45/31課堂練習：iOS系統(tǒng)啟動圖標設計需求描述14/31目錄iOS系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標設計規(guī)范雙系統(tǒng)下啟動圖標的設計46/31目錄iOS系統(tǒng)圖標設計規(guī)范15/31Android系統(tǒng)圖標設計規(guī)范Android啟動圖標概述

啟動圖標

操作、工具欄圖標

小圖標47/31Android系統(tǒng)圖標設計規(guī)范Android啟動圖標概述啟Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)啟動圖標及規(guī)范Android系統(tǒng)啟動圖標尺寸48x48dpldpi36*36pxmdpi48*48pxhdpi72*72pxxhdpi96*96pxxxhdpi144*144pxGooglePlay512*512px48/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)啟動圖標及規(guī)Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)比較開放，

并沒有對啟動圖標在風格上有過多的硬性要求原生態(tài)的Android系統(tǒng)圖標風格特征使用一個獨特的剪影使用三維的正面視圖看起來稍微有點從上往下的透視效果，

使用戶能看到一些景深

原生Android系統(tǒng)啟動圖標樣式49/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)比較開放，

Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及規(guī)范50/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及規(guī)范設計尺寸焦點區(qū)域尺寸Android系統(tǒng)手機操作欄圖標32x32dp24x24dpldpi24x24px18x18pxmdpi32x32px24x24pxhdpi48x48px36x36pxxhdpi64x64px48x48pxxxhdpi96x96px72x72px51/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)圖標欄圖標及Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范52/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范設計尺寸焦點區(qū)域尺寸Android系統(tǒng)小圖標設計尺寸16x16dp12x12dpldpi12*12px9*9pxmdpi16*16px12*12pxhdpi24*24px18*18pxxhdpi32*32px24*24pxxxhdpi48*48px36*36px53/31Android系統(tǒng)圖標設計規(guī)范Android系統(tǒng)小圖標及規(guī)范演示案例：

Android系統(tǒng)電影啟動圖標設計實現(xiàn)思路新建1024x1024像素的畫布使用鋼筆工具繪制整體形狀，通過布爾運算剪切右下角的切口和兩邊的矩形鏤空部分使用形狀工具、鋼筆工具通過波爾運算繪制高山白日形狀使用圖層樣式設置內(nèi)陰影以增加淺色高光效果54/31演示案例：

Android系統(tǒng)電影啟動圖標設計實現(xiàn)思路23/課堂練習：Android系統(tǒng)啟動圖標設計需求描述制作Android系統(tǒng)啟動圖標熟練掌握Android系統(tǒng)啟動圖標的設計規(guī)范和技巧實現(xiàn)思路使用鋼筆工具繪制基礎形狀使用布爾運算繪制圖形55/31課堂練