內(nèi)容提要
本書主要講解了iOS和Android這2種主流智能手機(jī)操作系統(tǒng)界面和APP元素，基本風(fēng)格，全面解析了各類APP界面的具體繪制方法與技巧。
本書共5章。第1章，主要講解移動UI的設(shè)計概論，度量單位、圖片格式、設(shè)計原則、設(shè)計流程以及當(dāng)今三大主流系統(tǒng)的基本知識。第2章至第3章，分別講解了iOS、Android2種主流智能手機(jī)操作系統(tǒng)設(shè)計規(guī)范和設(shè)計原則，以及圖形、控件、圖標(biāo)和完整界面的集體制作方法。第4章，主要通過APP的應(yīng)用實(shí)戰(zhàn)來向用戶展示如何制作不同類型的APP界面。
本書配套源文件和教學(xué)視頻，讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻，提升APP界面設(shè)計學(xué)習(xí)效率。
本書適合UI設(shè)計愛好者、APP界面設(shè)計從業(yè)者閱讀，也適合作為各院校相關(guān)設(shè)計專業(yè)的參考教材。
1.本書采用基礎(chǔ) 操作實(shí)例的方式講解。全面介紹移動UI界面設(shè)計的要點(diǎn)和制作技巧。知識點(diǎn)與案例完美結(jié)合，便于讀者理解學(xué)習(xí)。
2.教材中通過使用提示、小技巧和知識鏈接等功能，幫助讀者更好的學(xué)習(xí)內(nèi)容。融會貫通全部知識點(diǎn)。
3. 書中通過專家支招幫助解決讀者在學(xué)習(xí)中所遇到的問題。通過舉一反三中的案例幫助讀者復(fù)習(xí)本章所學(xué)內(nèi)容。
4.通過大型的商業(yè)案例，幫助讀者了解并掌握移動UI界面設(shè)計的綜合銀行。不止只停留在學(xué)習(xí)階段，而是應(yīng)用到應(yīng)用階段。
5.全書中的技術(shù)操作和綜合案例都提供操作視頻，當(dāng)讀者在學(xué)習(xí)過程中遇到困難時，可以借助教育視頻快速解決難題。
6.全書配套的教學(xué)課件，可以方便的幫助教師完成教學(xué)課程。
張曉景資深作者,曾在北大、農(nóng)大等培訓(xùn)機(jī)構(gòu)任專職或兼職講師。Adobe國際認(rèn)證講師資格,參與多本暢銷書寫作。Adobe專家組成員。國家軟件協(xié)會會員， 國家863專業(yè)講師。
第 1章 移動UI設(shè)計基礎(chǔ)
1.1 UI設(shè)計概論 2
1.1.1 什么是UI設(shè)計 2
1.1.2 什么是APP 3
1.1.3 手機(jī)APP UI與平面UI的區(qū)別 6
1.1.4 用于制作APP UI的常用軟件 7
1.2 手機(jī)界面設(shè)計尺寸的度量單位 13
1.2.1 英寸 13
1.2.2 分辨率 14
1.2.3 屏幕密度 15
1.2.4 網(wǎng)點(diǎn)密度 16
1.3 常見的圖片格式 16
1.3.1 位圖 16
1.3.2 矢量圖 20
1.4 APP UI的設(shè)計原則 21
1.4.1 視覺一致性原則 21
1.4.2 視覺簡易性原則 22
1.4.3 從用戶的考慮角度出發(fā) 23
1.5 手機(jī)界面的色彩搭配與視覺效果 23
1.5.1 冷暖色調(diào)的對比 23
1.5.2 色彩的意向 24
1.5.3 色彩的搭配技巧 25
1.5.4 APP界面配色原則 26
1.5.5 APP UI設(shè)計的用色規(guī)范 28
1.6 APP的設(shè)計流程 29
1.6.1 簡單大方的設(shè)計理念 29
案例 繪制相機(jī)圖標(biāo) 30
1.6.2 獨(dú)一無二的設(shè)計創(chuàng)意 33
1.6.3 全面分析應(yīng)用需求 34
1.6.4 確認(rèn)APP的設(shè)計工作 34
1.7 APP移動端的設(shè)計趨勢 35
1.7.1 專注用戶體驗(yàn) 35
1.7.2 使用模糊的背景 36
案例 繪制登陸界面 36
1.7.3 簡單的導(dǎo)航模式 40
1.7.4 大膽而醒目的字體運(yùn)用 40
1.7.5 更簡單的配色 41
1.7.6 用戶界面的情景感知 41
1.8 三大主流手機(jī)系統(tǒng)的發(fā)展歷程 42
1.8.1 iOS系統(tǒng) 42
1.8.2 Android系統(tǒng) 45
1.8.3 Windows Phone系統(tǒng) 49
1.9 不同系統(tǒng)UI視覺的主要組成要素及特征 51
1.9.1 iOS系統(tǒng)中的組成要素及特征 51
1.9.2 Android系統(tǒng)中的組成要素及特征 53
1.9.3 Windows Phone系統(tǒng) 55
1.9.4 三大手機(jī)系統(tǒng)的發(fā)展前景 57
1.10 專家支招 58
1.10.1 App屏幕設(shè)計禁忌 58
1.10.2 App文字設(shè)計禁忌 59
1.10.3 App按鈕圖標(biāo)設(shè)計禁忌 59
1.10.4 APP選項(xiàng)設(shè)計禁忌 60
1.10.5 APP空間設(shè)計禁忌 60
1.11 總結(jié)擴(kuò)展 61
1.11.1 本章小結(jié) 61
1.11.2 舉一反三繪制時鐘圖標(biāo) 61
第 2章 iOS APP系統(tǒng)應(yīng)用
2.1 iOS UI設(shè)計基礎(chǔ) 64
2.1.1 iOS的設(shè)計特色 64
2.1.2 適應(yīng)性和布局 68
2.1.3 停止與啟動 71
2.1.4 導(dǎo)航 72
2.1.5 模態(tài)情景 73
2.1.6 交互性與反饋 74
2.1.7 動畫 76
2.1.8 顏色和字體 77
2.2 iOS的界面設(shè)計規(guī)范 80
2.2.1 iOS界面設(shè)計尺寸 80
2.2.2 iOS設(shè)計元素尺寸 81
2.2.3 iOS界面圖標(biāo)尺寸 81
2.2.4 iOS界面文本尺寸 82
2.3 iOS的圖標(biāo)運(yùn)用 83
2.3.1 iOS圖標(biāo)設(shè)計的原則 83
2.3.2 iOS應(yīng)用程序圖標(biāo) 85
案例 繪制日歷圖標(biāo) 86
2.3.3 欄按鈕圖標(biāo) 90
2.4 iOS用戶界面元素 92
2.4.1 狀態(tài)欄 92
2.4.2 導(dǎo)航欄 93
2.4.3 標(biāo)簽欄 94
案例 制作新聞界面 94
2.4.4 搜索欄 103
2.4.5 工具欄 103
案例 制作瀏覽器界面 104
2.4.6 表格視圖 108
案例 制作表格視圖 109
2.4.7 活動視圖 114
2.4.8 動作 114
2.4.9 警告提醒 115
2.4.10 編輯菜單 116
2.4.11 浮動框 116
2.4.12 模態(tài)視圖 116
2.5 控件的繪制 117
2.5.1 活動指示器 117
2.5.2 選擇器 118
案例 制作鬧鐘界面 119
2.5.3 分段控件 124
案例 制作分段控件 125
2.5.4 滾動條 129
案例 制作滾動條 130
2.5.5 步進(jìn)器 134
2.5.6 開關(guān) 134
2.5.7 頁碼指示器 134
案例 制作頁碼指示器 135
2.5.8 按鈕 139
2.5.9 文本框 139
案例 制作登陸界面 140
2.5.10 進(jìn)度條 144
案例 制作進(jìn)度指示條 145
2.6 專家支招 151
2.6.1 新字體 151
2.6.2 圓角 152
2.6.3 分享界面 152
2.6.4 應(yīng)用切換 152
2.6.5 應(yīng)用切換Spotlight搜索 153
2.6.6 Siri的新界面 153
2.6.7 設(shè)置中的搜索 154
2.6.8 鍵盤大小寫切換 154
2.6.9 鏈接的分享選項(xiàng) 155
2.6.10 聽寫界面 155
2.7 總結(jié)擴(kuò)展 155
2.7.1 本章小結(jié) 155
2.7.2 舉一反三制作音樂播放器界面 156
第3章 Android APP系統(tǒng)應(yīng)用
3.1 Android UI設(shè)計基礎(chǔ) 158
3.1.1 Android UI的設(shè)計特色 158
3.1.2 設(shè)備與顯示 160
3.1.3 主題鮮明 161
3.1.4 觸摸反饋 162
3.1.5 度量單位和網(wǎng)格 163
3.1.6 字體 164
3.1.7 Android的寫作風(fēng)格 165
3.1.8 色彩 166
3.2 Android界面設(shè)計規(guī)范 167
3.2.1 Android界面圖標(biāo)的設(shè)計尺寸 167
案例 繪制Android 6.0 瀏覽器圖標(biāo) 168
3.2.2 Android的界面基本組成元素 173
3.2.3 Android的文本規(guī)范 174
3.3 Android的圖標(biāo)運(yùn)用 175
3.3.1 啟動圖標(biāo) 176
案例 繪制啟動圖標(biāo) 176
3.3.2 系統(tǒng)圖標(biāo) 179
3.3.3 系統(tǒng)圖標(biāo)的設(shè)計原則 180
3.4 Android用戶界面元素 183
3.4.1 主屏幕和二級菜單 184
3.4.2 狀態(tài)欄 184
3.4.3 導(dǎo)航抽屜 185
3.4.4 操作欄 185
案例 繪制音樂樂庫界面 186
3.5 Android控件的繪制 192
3.5.1 選項(xiàng)卡 192
案例 繪制主題壁紙下載界面 196
3.5.2 列表 200
案例 繪制列表視圖 202
3.5.3 網(wǎng)格列表 207
3.5.4 文本框 208
3.5.5 按鈕 209
案例 繪制登陸界面 211
3.5.6 菜單 214
案例 繪制電子書籍界面 216
3.5.7 開關(guān) 220
3.5.8 滾動 223
案例 繪制好友聯(lián)系人界面 223
3.5.9 活動指示器 229
3.5.10 滑塊 230
案例 繪制音樂播放器界面 231
3.5.11 提示框 235
3.6 專家支招 237
3.6.1 鎖屏界面 237
3.6.2 二級菜單界面 238
3.6.3 通知中心 238
3.6.4 小部件中心 238
3.6.5 Google now 239
3.6.6 新增聯(lián)系人 239
3.6.7 權(quán)限管理 240
3.6.8 設(shè)置界面 240
3.7 總結(jié)擴(kuò)展 240
3.7.1 本章小結(jié) 240
3.7.2 舉一反三繪制個人主頁界面 241
第4章 Windows Phone APP系統(tǒng)應(yīng)用
4.1 Windows Phone系統(tǒng)的特點(diǎn) 238
4.1.1 支持PC/平板/手機(jī)/Xbox One多平臺 238
4.1.2 磁貼界面 238
4.1.3 將辦公軟件整合其中 239
4.1.4 語音助手 240
4.1.5 瀏覽器 240
4.2 Windows Phone的設(shè)計風(fēng)格 241
4.2.1 合理運(yùn)用 241
4.2.2 注重細(xì)節(jié) 241
4.2.3 注意布局 242
4.2.4 快速流暢 242
4.2.5 數(shù)字法則 243
4.3 Windows Phone用戶界面框架 243
4.3.1 主界面 243
案例 繪制社交APP主界面 244
4.3.2 屏幕方向 249
4.3.3 主題 250
4.3.4 字體 251
4.4. Windows Phone用戶界面元素 252
4.4.1 狀態(tài)欄 252
4.4.2 頁面標(biāo)題 253
案例 繪制MV播放界面 253
4.4.3 進(jìn)度指示器 258
4.4.4 滾動指示器 259
4.5 Windows Phone基本控件 259
4.5.1 開關(guān) 260
4.5.2 按鈕 260
4.5.3 單選按鈕 260
4.5.4 復(fù)選框 261
4.5.5 搜索框 262
4.5.6 命令欄 262
4.5.7 滾動控件 263
案例 繪制音樂播放界面 263
4.6 專家支招 266
4.6.1 界面 267
4.6.2 內(nèi)置應(yīng)用 267
4.6.3 輸入法 268
4.6.4 相冊應(yīng)用 269
4.6.5 通知中心 269
4.7 總結(jié)擴(kuò)展 269
4.7.1 本章小結(jié) 269
4.7.2 舉一反三繪制電子書架界面 270
第5章 APP應(yīng)用實(shí)戰(zhàn)
5.1 APP的分類 271
5.1.1 實(shí)用功能類 271
5.1.2 游戲類 271
5.1.3 社交類 272
5.1.4 網(wǎng)購支付類 272
5.1.5 影音播放類 272
5.2 iOS應(yīng)用實(shí)戰(zhàn) 273
5.2.1 繪制日歷界面 273
5.2.2 繪制音樂播放器界面 278
5.3 Android應(yīng)用實(shí)戰(zhàn) 283
5.3.1 繪制電商界面 283
5.3.2 繪制社交界面 289
5.4 Windows Phone應(yīng)用實(shí)戰(zhàn) 295
5.4.1 繪制游戲界面 296
5.5 專家支招 302
5.5.1 選用符合產(chǎn)品氣質(zhì)的字體 302
5.5.2 巧用排版技巧 302
5.5.3 圖片的水印式裝飾 303
5.5.4 海報式的圖文分享 303
5.5.5 動起來的界面 304
5.6 總結(jié)擴(kuò)展 304
5.6.1 本章小結(jié) 304
5.6.2 舉一反三繪制酒店首頁界面 305
新書資訊