02-樂動云課程項目-教育類iOS手機App設(shè)計-2

樂動云課程項目-教育類iOS手機App設(shè)計-2課程回顧教育類App相關(guān)理論樂動云課程項目需求分析&設(shè)計規(guī)劃iOS系統(tǒng)界面設(shè)計規(guī)范回顧樂動云課程手機App首頁設(shè)計樂動云課程詳情頁的設(shè)計2/48本章任務(wù)iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧了解側(cè)邊欄導(dǎo)航與TAB導(dǎo)航掌握樂動云課程側(cè)邊欄頁的制作方法掌握界面標(biāo)注的方法3/48目錄iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧樂動云課程App啟動圖標(biāo)設(shè)計側(cè)邊欄導(dǎo)航和TAB導(dǎo)航樂動云課程App側(cè)邊欄界面設(shè)計切圖、標(biāo)注規(guī)范及設(shè)計技巧4/48iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧iOS系統(tǒng)圖標(biāo)規(guī)范采用圓角矩形默認(rèn)一般采用頂部光源在設(shè)計的時候，圓角部分是不需要要進行設(shè)計的，這部分是通過程序來實現(xiàn)的5/48iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧在設(shè)計iOS啟動圖標(biāo)的時候，

可以將Photoshop中圖層樣式的光源統(tǒng)一成90度6/48iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧為方便適配，iOS系統(tǒng)的啟動圖標(biāo)存在著多種設(shè)計尺寸7/48尺寸（px）用途512*512AdHoc發(fā)布測試的證書iTunes數(shù)字媒體播放應(yīng)用程序，是供Mac和PC使用的一款免費應(yīng)用軟件，能管理和播放數(shù)字音樂和視頻57*57iPhone/iPodtouch的AppStore和主屏幕114*114高分辨率的iPhone4主屏幕72*72主屏幕，為了兼容iPad29*29Spotling和設(shè)置App50*50Spotling，為了兼容iPad58*58高分辨率的iPhone4的Spotling和設(shè)置App1024*1024在AppStore商場顯示8/48iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧在設(shè)計的時候，優(yōu)先從1024*1024px開始設(shè)計盡量使用矢量工具或矢量軟件進行繪制可能會印刷9/48iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧設(shè)計啟動圖標(biāo)時應(yīng)充分考慮：是整個應(yīng)用品牌的重要組成部分獨特的，整潔的，打動人心的，讓人印象深刻的在不同的背景以及不同的規(guī)格下都同樣美觀如果要考慮印刷，分辨率應(yīng)該設(shè)置為300dpi為了考慮多尺寸適配，欄圖標(biāo)和小圖標(biāo)的尺寸都應(yīng)該是雙數(shù)10/48目錄iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧樂動云課程App啟動圖標(biāo)設(shè)計側(cè)邊欄導(dǎo)航和TAB導(dǎo)航樂動云課程App側(cè)邊欄界面設(shè)計切圖、標(biāo)注規(guī)范及設(shè)計技巧11/48演示案例：

樂動云課程App啟動圖標(biāo)設(shè)計需求描述為樂動云課程設(shè)計啟動圖標(biāo)圖標(biāo)設(shè)計尺寸：1024×1024px分辨率：72ppi實現(xiàn)思路根據(jù)Logo設(shè)計啟動圖標(biāo)遵守iOS系統(tǒng)啟動圖標(biāo)的設(shè)計規(guī)范使用鋼筆、形狀工具繪制12/48目錄iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧樂動云課程App啟動圖標(biāo)設(shè)計側(cè)邊欄導(dǎo)航和TAB導(dǎo)航樂動云課程App側(cè)邊欄界面設(shè)計切圖、標(biāo)注規(guī)范及設(shè)計技巧13/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航你需要設(shè)計一個含有許多頁面和模塊的頁面，但是東西多的不能在一屏內(nèi)顯示，你該如何處理界面布局呢？14/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航

頂部TAB導(dǎo)航側(cè)邊欄導(dǎo)航底部TAB導(dǎo)航15/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航常見的手機界面導(dǎo)航有側(cè)邊欄導(dǎo)航和TAB導(dǎo)航側(cè)邊欄導(dǎo)航抽屜導(dǎo)航或抽屜欄16/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航常見的手機界面導(dǎo)航有側(cè)邊欄導(dǎo)航和TAB導(dǎo)航側(cè)邊欄導(dǎo)航側(cè)邊欄導(dǎo)航在手機端的重要性是為了解決手機界面太小的問題，在手機端界面中引入一個三條線的符號來作為側(cè)邊欄導(dǎo)航的入口，即“更多”按鈕，也稱漢堡包按鈕17/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航常見的手機界面導(dǎo)航有側(cè)邊欄導(dǎo)航和TAB導(dǎo)航TAB導(dǎo)航又叫標(biāo)簽導(dǎo)航或標(biāo)簽欄18/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航常見的手機界面導(dǎo)航有側(cè)邊欄導(dǎo)航和TAB導(dǎo)航TAB導(dǎo)航官方推薦的標(biāo)簽欄最多只能有五個，當(dāng)標(biāo)簽多于五個的時候，可將多出的標(biāo)簽收錄到“更多”按鈕中設(shè)計時還要考慮雙系統(tǒng)下用戶的使用習(xí)慣在實際工作中，有時會采用iOS的底部導(dǎo)航進行界面布局設(shè)計19/48側(cè)邊欄導(dǎo)航和TAB導(dǎo)航側(cè)邊欄導(dǎo)航、TAB導(dǎo)航的差異側(cè)邊欄導(dǎo)航TAB導(dǎo)航別稱側(cè)邊欄、抽屜欄標(biāo)簽欄優(yōu)勢讓主屏幕有更大的顯示區(qū)域能容納更多的分類條目增加和刪減分類條目更容易直接放在界面上，簡單直觀用戶使用方便，一目了然劣勢需要有一個明顯的標(biāo)志來引導(dǎo)用戶增加用戶的學(xué)習(xí)成本需要多一個步驟才能找到分類信息侵占主屏幕顯示區(qū)域只能容納有限的幾個分類條目增加和刪減分類條目受限制適用范圍適用于分類條目比較多的導(dǎo)航適用于分類條目比較少的導(dǎo)航Pad和web端比較常見20/48目錄iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧樂動云課程App啟動圖標(biāo)設(shè)計側(cè)邊欄導(dǎo)航和TAB導(dǎo)航樂動云課程App側(cè)邊欄界面設(shè)計切圖、標(biāo)注規(guī)范及設(shè)計技巧21/48演示案例：

樂動云課程App側(cè)邊欄界面設(shè)計需求描述界面設(shè)計尺寸：750×1334px分辨率：72ppi字體：華文細(xì)黑或蘋方實現(xiàn)思路將首頁蓋印后轉(zhuǎn)化為智能對象，縮小放置在右側(cè)使用文字工具羅列文字，注意大小和顏色使用形狀工具繪制圖標(biāo)22/48目錄iOS系統(tǒng)啟動圖標(biāo)設(shè)計規(guī)范回顧樂動云課程App啟動圖標(biāo)設(shè)計側(cè)邊欄導(dǎo)航和TAB導(dǎo)航樂動云課程App側(cè)邊欄界面設(shè)計切圖、標(biāo)注規(guī)范及設(shè)計技巧23/48切圖、標(biāo)注規(guī)范及設(shè)計技巧為什么要切圖、標(biāo)注？要對哪些元素進行切圖、標(biāo)注？24/48切圖、標(biāo)注規(guī)范及設(shè)計技巧APP界面組成元素文字：設(shè)計師需要設(shè)計好字號大小和顏色，程序員根據(jù)標(biāo)注內(nèi)容對文字內(nèi)容進行文字輸出形狀：純色填充的分割線、矩形按鈕、正圓按鈕、圓角矩形按鈕等，可以由代碼輸出。設(shè)計師需要設(shè)計好相關(guān)顏色和尺寸圖標(biāo)：代碼無法實現(xiàn)特殊形狀，比如箭頭、心形、星形等。圖標(biāo)需要設(shè)計師在PS中繪制完畢，然后切成小圖片提供給程序員使用圖片：代碼無法實現(xiàn)圖片。需要由設(shè)計師提供圖片，裁切成合適大小，切圖提供給程序員使用25/48切圖、標(biāo)注規(guī)范及設(shè)計技巧設(shè)計師在完成界面設(shè)計后，需要對界面進行合理標(biāo)注，界面上需要標(biāo)注的元素包括：所有控件的位置：一般標(biāo)注左上角的坐標(biāo)圖片、可點擊區(qū)域、按鈕的尺寸文字的字號和字色線的寬度和顏色浮層或按鈕的透明度百分比26/48切圖、標(biāo)注規(guī)范及設(shè)計技巧設(shè)計師在完成界面設(shè)計后，還需要對某些元素進行單獨的切圖：不需要進行切圖：部分文字、形狀、顏色等可以由代碼直接實現(xiàn)出來27/48圖中哪些部分是需要進行切圖的？那些不需要？切圖、標(biāo)注工具Photoshop、Cutterman、馬克鰻、parker、藍(lán)湖、pxcook像素大廚等切圖、標(biāo)注規(guī)范及設(shè)計技巧28/48PxCook像素大廚特點&優(yōu)勢免費，易安裝操作便捷、靈活支持PSD文件，可自動識別文字，顏色，距離等支持iOS、Android系統(tǒng)界面切圖、標(biāo)注操作，自動轉(zhuǎn)換dp、px、pt等安裝方法切圖、標(biāo)注規(guī)范及設(shè)計技巧29/48使用PxCook像素大廚標(biāo)注基本操作方法打開示例項目智能標(biāo)注生成尺寸標(biāo)注生成文本樣式標(biāo)注生成區(qū)域標(biāo)注切圖、標(biāo)注規(guī)范及設(shè)計技巧距離標(biāo)注區(qū)域標(biāo)注顏色標(biāo)注文字標(biāo)注30/48標(biāo)注常見注意事項注意iOS、Android系統(tǒng)的選擇，即標(biāo)注單位的選擇相同的控件元素只標(biāo)一次即可小于最小點擊尺寸的圖標(biāo)按鈕需要在四周增加空白像素，即標(biāo)注熱區(qū)范圍切圖、標(biāo)注規(guī)范及設(shè)計技巧31/48演示案例：

使用像素大廚對

樂動云課程手機App首頁進行標(biāo)注需求描述使用像素大廚對樂動云課程手機App首頁進行標(biāo)注實現(xiàn)思路新建iOS項目將psd源文件倒入像素大廚對文字、圖片、距離、顏色的必要元素進行標(biāo)注32/48課堂練習(xí)：

使用像素大廚對

樂動云課程詳情頁進行標(biāo)注需求描述使用像素大廚對樂動云課程詳情頁進行標(biāo)注實現(xiàn)思路新建iOS項目將psd源文件倒入像素大廚對文字、圖片、距離、顏色的必要元素進行標(biāo)注33/48使用PxCook像素大廚切圖打開方法切圖、標(biāo)注規(guī)范及設(shè)計技巧34/48使用PxCook像素大廚切圖基本操作方法選擇輸出類型Web、iOS、Android選擇輸出尺寸選擇保存路徑切圖、標(biāo)注規(guī)范及設(shè)計技巧35/48切圖中常見的注意事項啟動圖標(biāo)的切圖方式切圖、標(biāo)注規(guī)范及設(shè)計技巧切圖效果圖36/48切圖中常見的注意事項需要設(shè)計出按鈕在各個狀態(tài)下的樣式，并切圖切圖、標(biāo)注規(guī)范及設(shè)計技巧正常狀態(tài)點擊狀態(tài)

不可點擊狀態(tài)按鈕按鈕按鈕37/48切圖中常見的注意事項需要設(shè)計出按鈕在各個狀態(tài)下的樣式，并切圖切圖、標(biāo)注規(guī)范及設(shè)計技巧38/48切圖中常見的注意事項考慮圖片未加載狀態(tài)時的占位圖片樣式，并切圖切圖、標(biāo)注規(guī)范及設(shè)計技巧39/48切圖中常見的注意事項對于尺寸小于可點擊范圍尺寸的按鈕，需要在四周增加空白像素，這時切圖要與標(biāo)注相互對應(yīng)切圖、標(biāo)注規(guī)范及設(shè)計技巧40/48切圖中常見的注意事項標(biāo)簽欄的切圖方式切圖、標(biāo)注規(guī)范及設(shè)計技巧41/48切圖中常見的注意事項全屏類切圖

注意控制圖片文件的大小切圖、標(biāo)注規(guī)范及設(shè)計技巧Tinypng42/48切圖中常見的注意事項局部切圖

注意切圖要與標(biāo)注相互對應(yīng)切圖、標(biāo)注規(guī)范及設(shè)計技巧43/48切圖中常見的注意事項注意換算關(guān)系其中iOS系統(tǒng)的雙倍圖可以與

Android系統(tǒng)的XHdpi相對應(yīng)切圖、標(biāo)注規(guī)范及設(shè)計技巧44/48演示案例：

使用像素大廚對

樂動云課程手機App首頁進行切圖需求描述使用像素大廚對樂動云課程手機App首頁進行切圖只導(dǎo)出2x圖片實現(xiàn)思路對psd源文件中的圖層進行重命