移動(dòng)互聯(lián)網(wǎng)之路：APP UI設(shè)計(jì)從入門到精通 Photoshop篇

 第1章　移動(dòng)APP界面設(shè)計(jì)基礎(chǔ) 1.1　關(guān)于手機(jī) 1 1.1.1　手機(jī)的發(fā)展歷史 1 1.1.2　手機(jī)分辨率 2 1.1.3　屏幕顏色 2 1.2　UI設(shè)計(jì) 3 1.2.1　什么是UI設(shè)計(jì) 3 1.2.2　主要性能 3 1.2.3　相關(guān)控件 4 1.2.4　手機(jī)UI設(shè)計(jì) 4 1.2.5　手機(jī)UI設(shè)計(jì)的特點(diǎn) 4 1.2.6　手機(jī)UI與平面UI的區(qū)別 5 1.3　設(shè)計(jì)中的色彩搭配 5 1.3.1　色彩的意象 5 1.3.2　手機(jī)APP UI設(shè)計(jì)的用色規(guī)范 6 1.3.3　UI調(diào)色板 7 1.3.4　APP界面設(shè)計(jì)中色彩運(yùn)用原理與對(duì)比原則 8 1.3.5　色彩的搭配方法 9 1.4　圖標(biāo)的格式 10 1.4.1　JPEG格式 10 1.4.2　PNG格式 10  案例1　制作iOS 9 撥號(hào)圖標(biāo) 11 1.4.3　GIF格式 14 1.4.4　其他常用格式 14 1.5　手機(jī)界面設(shè)計(jì)的尺寸標(biāo)準(zhǔn) 15 1.5.1　分辨率 15 1.5.2　英寸 16 1.5.3　網(wǎng)點(diǎn)密度 17 1.5.4　屏幕密度 17 1.6　常用的軟件工具 17 1.6.1　Photoshop 17  案例2　制作iOS 9快捷按鈕 19 1.6.2　Illustrator 21 1.6.3　3ds Max 22 1.6.4　IconCool Studio 25 1.6.5　Image Optimizer 26 1.7　總結(jié)擴(kuò)展 26 1.7.1　本章小結(jié) 26 1.7.2　課后練習(xí)——制作iOS 9 照片圖標(biāo) 27  第2章　常見的手機(jī)系統(tǒng) 2.1　iOS系統(tǒng) 28 2.1.1　iOS的發(fā)展過程 28 2.1.2　iOS的基本組件 32 2.1.3　iOS的開發(fā)工具和資源 34 2.1.4　iOS的設(shè)備 37 2.1.5　iOS 8與iOS 9的功能對(duì)比 37 2.2　Android系統(tǒng) 42 2.2.1　Android的發(fā)展過程 42 2.2.2　Android的基礎(chǔ)UI組件 44 2.2.3　關(guān)于深度定制的系統(tǒng) 45 2.3　Windows Phone系統(tǒng) 46 2.3.1　Windows Phone的發(fā)展歷程 46 2.3.2　了解Windows 10 47 2.3.3　Windows Phone 系統(tǒng)的特色 48 2.4　各種手機(jī)系統(tǒng)介紹 49 2.4.1　iOS的優(yōu)缺點(diǎn) 49 2.4.2　Android的優(yōu)缺點(diǎn) 50 2.4.3　Windows Phone的優(yōu)缺點(diǎn) 51 2.4.4　手機(jī)系統(tǒng)的發(fā)展前景 51 2.5　總結(jié)擴(kuò)展 51 2.5.1　本章小結(jié) 52 2.5.2　課后練習(xí)——制作iOS 9健康圖標(biāo) 52  第3章　iOS設(shè)計(jì)元素 3.1　iOS 8與iOS 9的界面對(duì)比 53 3.1.1　新字體 53 3.1.2　應(yīng)用切換 54  案例3　制作應(yīng)用程序切換界面 54 3.1.3　Spotlight搜索 58 3.1.4　電池使用細(xì)節(jié) 58 3.1.5　相機(jī)應(yīng)用 58 3.1.6　分享界面 59 3.1.7　Siri新界面 59 3.1.8　鍵盤大小寫切換 60 3.1.9　聽寫界面 60 3.1.10　圓角 60 3.2　iOS界面設(shè)計(jì) 61 3.2.1　了解用戶使用怎樣的設(shè)備 61 3.2.2　iOS界面設(shè)計(jì)的原則 61 3.3　iOS界面設(shè)計(jì)規(guī)范 64 3.3.1　界面布局 66 3.3.2　顏色與字體 67 3.3.3　語(yǔ)言風(fēng)格 68 3.3.4　確保程序在iPad和iPhone上通用 69 3.3.5　重新考慮基于Web的設(shè)計(jì) 70 3.4　iOS 基本圖形的繪制 70 3.4.1　線條的繪制 70  案例4　制作記事本圖標(biāo) 71 3.4.2　矩形的繪制 74 3.4.3　圓角矩形的繪制 76  案例5　制作智能小鍵盤 76 3.4.4　圓形的繪制 79  案例6　制作iOS 9的解鎖界面 80 3.4.5　其他形狀 83  案例7　制作iOS 9的選項(xiàng)圖標(biāo) 83 3.5　控件的繪制 86 3.5.1　活動(dòng)指示器 86  案例8　制作活動(dòng)指示器 87 3.5.2　日期和時(shí)間拾取器 91  案例9　制作選擇器 92 3.5.3　詳情按鈕 94 3.5.4　標(biāo)簽 96 3.5.5　網(wǎng)絡(luò)活動(dòng)指示器 96 3.5.6　頁(yè)面控制 97  案例10　制作頁(yè)碼指示器 98 3.5.7　進(jìn)度指示條 100  案例11　制作信息界面 100 3.5.8　刷新控制 103 3.5.9　搜索框 103  案例12　制作搜索框 104 3.5.10　滾動(dòng)條 107  案例13　制作滾動(dòng)條 108 3.5.11　文本框 113  案例14　制作文本框界面 113 3.5.12　對(duì)話框 116  案例15　制作對(duì)話框 116 3.5.13　分段控件 118  案例16　制作分段控件 119 3.5.14　按鈕 120  案例17　制作開關(guān)按鈕 121 3.6　圖標(biāo)繪制 123 3.6.1　圖標(biāo)設(shè)計(jì)的技巧 123 3.6.2　應(yīng)用圖標(biāo) 125  案例18　制作APP Store圖標(biāo) 126 3.6.3　聚光燈和設(shè)置圖標(biāo) 128 3.6.4　導(dǎo)航欄、工具欄和Tab欄中的圖標(biāo) 129  案例19　制作Tab欄中的小圖標(biāo) 130 3.7　總結(jié)擴(kuò)展 132 3.7.1　本章小結(jié) 132 3.7.2　課后練習(xí)——制作Safari瀏覽器界面 133  第４章　iOS APP應(yīng)用實(shí)戰(zhàn) 4.1　iOS APP界面的布局規(guī)范 134 4.1.1　 iOS APP界面尺寸 規(guī)范 134 4.1.2　 iOS的文本規(guī)范 135 4.1.3　 iOS界面的配色技巧 135 4.2　制作APP電商界面 135  案例20　制作電商界面1——狀態(tài)欄 136  案例21　制作電商界面2——導(dǎo)航欄 138  案例22　制作電商界面3——主體 141  案例23　制作電商界面4——標(biāo)簽欄 143 4.3　制作APP記事本界面 146  案例24　制作記事本界面 146 4.4　制作APP音樂播放器界面 151  案例25　制作音樂播放器界面 151 4.5　制作個(gè)人主頁(yè)界面 157  案例26　制作個(gè)人主頁(yè)界面設(shè)計(jì) 157 4.6　制作游戲界面 161  案例27　制作游戲界面 161 4.7　總結(jié)擴(kuò)展 170 4.7.1　本章小結(jié) 171 4.7.2　課后練習(xí)——制作登錄界面 171  第5章　Android設(shè)計(jì)元素 5.1　Android 5.0與Android 6.0界面對(duì)比 172 5.2　Android UI概論 176 5.2.1　主屏幕和二級(jí)菜單 176 5.2.2　系統(tǒng)欄 176 5.2.3　操作欄 176 5.3　Android UI設(shè)計(jì)原則 177 5.3.1　漂亮的界面 177  案例28　制作簡(jiǎn)潔的Android解鎖界面 177 5.3.2　更簡(jiǎn)單便捷的操作 180 5.3.3　更加完善的工作流程 180 5.4　Android設(shè)計(jì)概述 181 5.4.1　設(shè)備和顯示 181  案例29　Android 6.0 Chrome圖標(biāo) 183 5.4.2　字體 185  案例30　制作Android E-mail發(fā)送界面 186 5.4.3　寫作風(fēng)格 190 5.4.4　顏色 192 5.5　Android基本圖形繪制 193 5.5.1　直線 193  案例31　制作Android 注冊(cè)界面 194 5.5.2　圓 198  案例32　制作Android 時(shí)間界面 199 5.5.3　矩形 202  案例33　制作簡(jiǎn)潔的Android軟件界面 203 5.5.4　圓角矩形 207  案例34　制作簡(jiǎn)潔的Android推送界面 208 5.5.5　其他形狀 212  案例35　制作簡(jiǎn)潔的Android圖片預(yù)覽界面 214 5.6　Android APP控件制作 216 5.6.1　選項(xiàng)卡 216  案例36　制作簡(jiǎn)潔的Android選項(xiàng)卡 218 5.6.2　列表 219  案例37　制作簡(jiǎn)潔的Android文件管理器 221 5.6.3　滾動(dòng) 224  案例38　制作微信聯(lián)系人界面 225 5.6.4　下拉菜單 228  案例39　制作Android 下拉菜單 229 5.6.5　按鈕 232  案例40　制作微信個(gè)人信息界面 233 5.6.6　文本框 238  案例41　制作Android 文本框 239 5.6.7　對(duì)話框 241  案例42　制作Android 對(duì)話框 242 5.6.8　滑塊 245  案例43　制作Android 鬧鐘聲音滑塊 245 5.6.9　進(jìn)度和動(dòng)態(tài) 247  案例44　制作Android 音樂播放器 249 5.6.10　開關(guān) 252  案例45　制作Android 開關(guān) 254 5.6.11　分割線 257 5.6.12　工具提示 259 5.6.13　圖標(biāo) 259  案例46　制作Android 啟動(dòng)圖標(biāo) 260 5.7　總結(jié)擴(kuò)展 266 5.7.1　本章小結(jié) 266 5.7.2　課后練習(xí)——制作Android撥號(hào)界面 267  第6章　Android APP應(yīng)用實(shí)戰(zhàn) 6.1　Android APP的設(shè)計(jì)規(guī)范 268 6.1.1　Android APP結(jié)構(gòu)規(guī)范 268 6.1.2　Android APP切圖規(guī)范 269 6.1.3　Android APP配色 技巧 269 6.2　制作在線電影APP界面 269  案例47　制作在線電影APP 1——狀態(tài)欄 269  案例48　制作在線電影APP 2——選項(xiàng)欄 272  案例49　制作在線電影APP 3——主界面 274 6.3　制作記事本APP 277  案例50　制作記事本APP 277 6.4　制作音樂播放器界面 284  案例51　制作音樂播放器界面 285 6.5　制作聊天APP側(cè)邊欄 292  案例52　制作聊天APP側(cè)邊欄 292 6.6　總結(jié)擴(kuò)展 292 6.6.1　本章小結(jié) 298 6.6.2　課后練習(xí)——制作APP人主頁(yè)界面 299  第7章　Windows Phone設(shè)計(jì)元素和應(yīng)用實(shí)戰(zhàn) 7.1　Windows Phone 10與Windows  Phone 8.1界面對(duì)比 300 7.2　Windows Phone系統(tǒng)的 特點(diǎn) 302 7.2.1　通用Windows應(yīng)用史 302 7.2.2　Windows Phone界面特色 302 7.3　Windows Phone設(shè)計(jì)原則 303  案例53　制作Windows Phone主界面 305 7.4　Windows Phone界面框架 308 7.4.1　頁(yè)面標(biāo)題 308 7.4.2　進(jìn)度指示器 309 7.4.3　滾動(dòng)指示器 309 7.4.4　主題 310 7.5　Windows Phone用戶界面框架 311 7.5.1　主界面 311 7.5.2　屏幕方向 311 7.5.3　字體 311 7.5.4　狀態(tài)欄 312  案例54　制作Windows Phone狀態(tài)欄 312 7.5.5　磁貼和通知 314 7.6　Windows Phone標(biāo)準(zhǔn)控件 314 7.6.1　按鍵 315 7.6.2　單選按鈕 315 7.6.3　復(fù)選框 315 7.6.4　切換開關(guān) 316 7.6.5　命令欄 316 7.6.6　對(duì)話框 317 7.6.7　進(jìn)度控件 317 7.6.8　搜索 318 7.7　制作Windows Phone壁紙軟件 319  案例55　制作Windows Phone壁紙軟件 319 7.8　制作Windows Phone壁紙軟件  322  案例56　制作Windows Phone QQ界面 322 7.9　總結(jié)擴(kuò)展 325 7.9.1　本章小結(jié) 325 7.9.2　課后練習(xí)——制作腦電波測(cè)試軟件界面 326