移動(dòng)UI界面設(shè)計(jì)（微課版）

第 1章 移動(dòng)UI設(shè)計(jì)基礎(chǔ)
1．1　UI設(shè)計(jì)概論　2
1．1．1　什么是UI設(shè)計(jì)　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è)計(jì)尺寸的度量單位　13
1．2．1　英寸　13
1．2．2　分辨率　14
1．2．3　屏幕密度　15
1．2．4　網(wǎng)點(diǎn)密度　16
1．3　常見(jiàn)的圖片格式　16
1．3．1　位圖　16
1．3．2　矢量圖　20
1．4　APP UI的設(shè)計(jì)原則　21
1．4．1　視覺(jué)一致性原則　21
1．4．2　視覺(jué)簡(jiǎn)易性原則　22
1．4．3　從用戶的考慮角度出發(fā)　23
1．5　手機(jī)界面的色彩搭配與視覺(jué)效果　23
1．5．1　冷暖色調(diào)的對(duì)比　23
1．5．2　色彩的意向　24
1．5．3　色彩的搭配技巧　25
1．5．4　APP界面配色原則　26
1．5．5　APP UI設(shè)計(jì)的用色規(guī)范　28
1．6　APP的設(shè)計(jì)流程　29
1．6．1　簡(jiǎn)單大方的設(shè)計(jì)理念　29
案例　繪制相機(jī)圖標(biāo)　30
1．6．2　獨(dú)一無(wú)二的設(shè)計(jì)創(chuàng)意　33
1．6．3　全面分析應(yīng)用需求　34
1．6．4　確認(rèn)APP的設(shè)計(jì)工作　34
1．7　APP移動(dòng)端的設(shè)計(jì)趨勢(shì)　35
1．7．1　專注用戶體驗(yàn)　35
1．7．2　使用模糊的背景　36
案例　繪制登陸界面　36
1．7．3　簡(jiǎn)單的導(dǎo)航模式　40
1．7．4　大膽而醒目的字體運(yùn)用　40
1．7．5　更簡(jiǎn)單的配色　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視覺(jué)的主要組成要素及特征　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è)計(jì)禁忌　58
1．10．2　App文字設(shè)計(jì)禁忌　59
1．10．3　App按鈕圖標(biāo)設(shè)計(jì)禁忌　59
1．10．4　APP選項(xiàng)設(shè)計(jì)禁忌　60
1．10．5　APP空間設(shè)計(jì)禁忌　60
1．11　總結(jié)擴(kuò)展　61
1．11．1　本章小結(jié)　61
1．11．2　舉一反三——繪制時(shí)鐘圖標(biāo)　61
第　2章 iOS APP系統(tǒng)應(yīng)用
2．1　iOS UI設(shè)計(jì)基礎(chǔ)　64
2．1．1　iOS的設(shè)計(jì)特色　64
2．1．2　適應(yīng)性和布局　68
2．1．3　停止與啟動(dòng)　71
2．1．4　導(dǎo)航　72
2．1．5　模態(tài)情景　73
2．1．6　交互性與反饋　74
2．1．7　動(dòng)畫(huà)　76
2．1．8　顏色和字體　77
2．2　iOS的界面設(shè)計(jì)規(guī)范　80
2．2．1　iOS界面設(shè)計(jì)尺寸　80
2．2．2　iOS設(shè)計(jì)元素尺寸　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è)計(jì)的原則　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　活動(dòng)視圖　114
2．4．8　動(dòng)作　114
2．4．9　警告提醒　115
2．4．10　編輯菜單　116
2．4．11　浮動(dòng)框　116
2．4．12　模態(tài)視圖　116
2．5　控件的繪制　117
2．5．1　活動(dòng)指示器　117
2．5．2　選擇器　118
案例　制作鬧鐘界面　119
2．5．3　分段控件　124
案例　制作分段控件　125
2．5．4　滾動(dòng)條　129
案例　制作滾動(dòng)條　130
2．5．5　步進(jìn)器　134
2．5．6　開(kāi)關(guān)　134
2．5．7　頁(yè)碼指示器　134
案例　制作頁(yè)碼指示器　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　鍵盤大小寫(xiě)切換　154
2．6．9　鏈接的分享選項(xiàng)　155
2．6．10　聽(tīng)寫(xiě)界面　155
2．7　總結(jié)擴(kuò)展　155
2．7．1　本章小結(jié)　155
2．7．2　舉一反三——制作音樂(lè)播放器界面　156
第3章　Android APP系統(tǒng)應(yīng)用
3．1　Android UI設(shè)計(jì)基礎(chǔ)　158
3．1．1　Android UI的設(shè)計(jì)特色　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的寫(xiě)作風(fēng)格　165
3．1．8　色彩　166
3．2　Android界面設(shè)計(jì)規(guī)范　167
3．2．1　Android界面圖標(biāo)的設(shè)計(jì)尺寸　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　啟動(dòng)圖標(biāo)　176
案例　繪制啟動(dòng)圖標(biāo)　176
3．3．2　系統(tǒng)圖標(biāo)　179
3．3．3　系統(tǒng)圖標(biāo)的設(shè)計(jì)原則　180
3．4　Android用戶界面元素　183
3．4．1　主屏幕和二級(jí)菜單　184
3．4．2　狀態(tài)欄　184
3．4．3　導(dǎo)航抽屜　185
3．4．4　操作欄　185
案例　繪制音樂(lè)樂(lè)庫(kù)界面　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
案例　繪制電子書(shū)籍界面　216
3．5．7　開(kāi)關(guān)　220
3．5．8　滾動(dòng)　223
案例　繪制好友聯(lián)系人界面　223
3．5．9　活動(dòng)指示器　229
3．5．10　滑塊　230
案例　繪制音樂(lè)播放器界面　231
3．5．11　提示框　235
3．6　專家支招　237
3．6．1　鎖屏界面　237
3．6．2　二級(jí)菜單界面　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　舉一反三——繪制個(gè)人主頁(yè)界面　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多平臺(tái)　238
4．1．2　磁貼界面　238
4．1．3　將辦公軟件整合其中　239
4．1．4　語(yǔ)音助手　240
4．1．5　瀏覽器　240
4．2　Windows Phone的設(shè)計(jì)風(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　頁(yè)面標(biāo)題　253
案例　繪制MV播放界面　253
4．4．3　進(jìn)度指示器　258
4．4．4　滾動(dòng)指示器　259
4．5　Windows Phone基本控件　259
4．5．1　開(kāi)關(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　滾動(dòng)控件　263
案例　繪制音樂(lè)播放界面　263
4．6　專家支招　266
4．6．1　界面　267
4．6．2　內(nèi)置應(yīng)用　267
4．6．3　輸入法　268
4．6．4　相冊(cè)應(yīng)用　269
4．6．5　通知中心　269
4．7　總結(jié)擴(kuò)展　269
4．7．1　本章小結(jié)　269
4．7．2　舉一反三——繪制電子書(shū)架界面　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)購(gòu)支付類　272
5．1．5　影音播放類　272
5．2　iOS應(yīng)用實(shí)戰(zhàn)　273
5．2．1　繪制日歷界面　273
5．2．2　繪制音樂(lè)播放器界面　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　海報(bào)式的圖文分享　303
5．5．5　動(dòng)起來(lái)的界面　304
5．6　總結(jié)擴(kuò)展　304
5．6．1　本章小結(jié)　304
5．6．2　舉一反三——繪制酒店首頁(yè)界面　305