移動UI界面設計（微課版）

第 1章 移動UI設計基礎
1．1　UI設計概論　2
1．1．1　什么是UI設計　2
1．1．2　什么是APP　3
1．1．3　手機APP UI與平面UI的區(qū)別　6
1．1．4　用于制作APP UI的常用軟件　7
1．2　手機界面設計尺寸的度量單位　13
1．2．1　英寸　13
1．2．2　分辨率　14
1．2．3　屏幕密度　15
1．2．4　網(wǎng)點密度　16
1．3　常見的圖片格式　16
1．3．1　位圖　16
1．3．2　矢量圖　20
1．4　APP UI的設計原則　21
1．4．1　視覺一致性原則　21
1．4．2　視覺簡易性原則　22
1．4．3　從用戶的考慮角度出發(fā)　23
1．5　手機界面的色彩搭配與視覺效果　23
1．5．1　冷暖色調的對比　23
1．5．2　色彩的意向　24
1．5．3　色彩的搭配技巧　25
1．5．4　APP界面配色原則　26
1．5．5　APP UI設計的用色規(guī)范　28
1．6　APP的設計流程　29
1．6．1　簡單大方的設計理念　29
案例　繪制相機圖標　30
1．6．2　獨一無二的設計創(chuàng)意　33
1．6．3　全面分析應用需求　34
1．6．4　確認APP的設計工作　34
1．7　APP移動端的設計趨勢　35
1．7．1　專注用戶體驗　35
1．7．2　使用模糊的背景　36
案例　繪制登陸界面　36
1．7．3　簡單的導航模式　40
1．7．4　大膽而醒目的字體運用　40
1．7．5　更簡單的配色　41
1．7．6　用戶界面的情景感知　41
1．8　三大主流手機系統(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　三大手機系統(tǒng)的發(fā)展前景　57
1．10　專家支招　58
1．10．1　App屏幕設計禁忌　58
1．10．2　App文字設計禁忌　59
1．10．3　App按鈕圖標設計禁忌　59
1．10．4　APP選項設計禁忌　60
1．10．5　APP空間設計禁忌　60
1．11　總結擴展　61
1．11．1　本章小結　61
1．11．2　舉一反三——繪制時鐘圖標　61
第　2章 iOS APP系統(tǒng)應用
2．1　iOS UI設計基礎　64
2．1．1　iOS的設計特色　64
2．1．2　適應性和布局　68
2．1．3　停止與啟動　71
2．1．4　導航　72
2．1．5　模態(tài)情景　73
2．1．6　交互性與反饋　74
2．1．7　動畫　76
2．1．8　顏色和字體　77
2．2　iOS的界面設計規(guī)范　80
2．2．1　iOS界面設計尺寸　80
2．2．2　iOS設計元素尺寸　81
2．2．3　iOS界面圖標尺寸　81
2．2．4　iOS界面文本尺寸　82
2．3　iOS的圖標運用　83
2．3．1　iOS圖標設計的原則　83
2．3．2　iOS應用程序圖標　85
案例　繪制日歷圖標　86
2．3．3　欄按鈕圖標　90
2．4　iOS用戶界面元素　92
2．4．1　狀態(tài)欄　92
2．4．2　導航欄　93
2．4．3　標簽欄　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　步進器　134
2．5．6　開關　134
2．5．7　頁碼指示器　134
案例　制作頁碼指示器　135
2．5．8　按鈕　139
2．5．9　文本框　139
案例　制作登陸界面　140
2．5．10　進度條　144
案例　制作進度指示條　145
2．6　專家支招　151
2．6．1　新字體　151
2．6．2　圓角　152
2．6．3　分享界面　152
2．6．4　應用切換　152
2．6．5　應用切換Spotlight搜索　153
2．6．6　Siri的新界面　153
2．6．7　設置中的搜索　154
2．6．8　鍵盤大小寫切換　154
2．6．9　鏈接的分享選項　155
2．6．10　聽寫界面　155
2．7　總結擴展　155
2．7．1　本章小結　155
2．7．2　舉一反三——制作音樂播放器界面　156
第3章　Android APP系統(tǒng)應用
3．1　Android UI設計基礎　158
3．1．1　Android UI的設計特色　158
3．1．2　設備與顯示　160
3．1．3　主題鮮明　161
3．1．4　觸摸反饋　162
3．1．5　度量單位和網(wǎng)格　163
3．1．6　字體　164
3．1．7　Android的寫作風格　165
3．1．8　色彩　166
3．2　Android界面設計規(guī)范　167
3．2．1　Android界面圖標的設計尺寸　167
案例　繪制Android 6．0 瀏覽器圖標　168
3．2．2　Android的界面基本組成元素　173
3．2．3　Android的文本規(guī)范　174
3．3　Android的圖標運用　175
3．3．1　啟動圖標　176
案例　繪制啟動圖標　176
3．3．2　系統(tǒng)圖標　179
3．3．3　系統(tǒng)圖標的設計原則　180
3．4　Android用戶界面元素　183
3．4．1　主屏幕和二級菜單　184
3．4．2　狀態(tài)欄　184
3．4．3　導航抽屜　185
3．4．4　操作欄　185
案例　繪制音樂樂庫界面　186
3．5　Android控件的繪制　192
3．5．1　選項卡　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　開關　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　權限管理　240
3．6．8　設置界面　240
3．7　總結擴展　240
3．7．1　本章小結　240
3．7．2　舉一反三——繪制個人主頁界面　241
第4章　Windows Phone APP系統(tǒng)應用
4．1　Windows Phone系統(tǒng)的特點　238
4．1．1　支持PC/平板/手機/Xbox One多平臺　238
4．1．2　磁貼界面　238
4．1．3　將辦公軟件整合其中　239
4．1．4　語音助手　240
4．1．5　瀏覽器　240
4．2　Windows Phone的設計風格　241
4．2．1　合理運用　241
4．2．2　注重細節(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　頁面標題　253
案例　繪制MV播放界面　253
4．4．3　進度指示器　258
4．4．4　滾動指示器　259
4．5　Windows Phone基本控件　259
4．5．1　開關　260
4．5．2　按鈕　260
4．5．3　單選按鈕　260
4．5．4　復選框　261
4．5．5　搜索框　262
4．5．6　命令欄　262
4．5．7　滾動控件　263
案例　繪制音樂播放界面　263
4．6　專家支招　266
4．6．1　界面　267
4．6．2　內置應用　267
4．6．3　輸入法　268
4．6．4　相冊應用　269
4．6．5　通知中心　269
4．7　總結擴展　269
4．7．1　本章小結　269
4．7．2　舉一反三——繪制電子書架界面　270
第5章　APP應用實戰(zhàn)
5．1　APP的分類　271
5．1．1　實用功能類　271
5．1．2　游戲類　271
5．1．3　社交類　272
5．1．4　網(wǎng)購支付類　272
5．1．5　影音播放類　272
5．2　iOS應用實戰(zhàn)　273
5．2．1　繪制日歷界面　273
5．2．2　繪制音樂播放器界面　278
5．3　Android應用實戰(zhàn)　283
5．3．1　繪制電商界面　283
5．3．2　繪制社交界面　289
5．4　Windows Phone應用實戰(zhàn)　295
5．4．1　繪制游戲界面　296
5．5　專家支招　302
5．5．1　選用符合產(chǎn)品氣質的字體　302
5．5．2　巧用排版技巧　302
5．5．3　圖片的水印式裝飾　303
5．5．4　海報式的圖文分享　303
5．5．5　動起來的界面　304
5．6　總結擴展　304
5．6．1　本章小結　304
5．6．2　舉一反三——繪制酒店首頁界面　305