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