UI設(shè)計(jì)（全彩慕課版）

認(rèn)識(shí)UI設(shè)計(jì)　/ 1
1．1　UI設(shè)計(jì)概述 /2
1．1．1　什么是UI設(shè)計(jì) /　2
1．1．2　UI設(shè)計(jì)的用戶體驗(yàn) /　4
1．1．3　UI設(shè)計(jì)的常用工具 /　6
1．2　UI設(shè)計(jì)的運(yùn)用 /8
1．2．1　移動(dòng)App界面設(shè)計(jì) /　8
1．2．2　網(wǎng)頁(yè)界面設(shè)計(jì) /　9
1．2．3　游戲界面設(shè)計(jì) /　10
1．2．4　應(yīng)用軟件界面設(shè)計(jì) /　11
1．3　UI設(shè)計(jì)的發(fā)展趨勢(shì) /11
1．3．1　人工智能產(chǎn)品界面設(shè)計(jì) /　11
1．3．2　AR產(chǎn)品界面設(shè)計(jì) /　12
1．3．3　VR產(chǎn)品界面設(shè)計(jì) /　13
1．4　UI設(shè)計(jì)的原則 /13
1．4．1　適用性 /　13
1．4．2　規(guī)范性 /　14
1．4．3　易操作性 /　15
1．4．4　統(tǒng)一性 /15
1．4．5　層級(jí)性 /16
1．5　UI設(shè)計(jì)的流程 /17
1．5．1　分析設(shè)計(jì)需求 /17
1．5．2　明確視覺定位 /17
1．5．3　繪制原型圖 /18
1．5．4　繪制效果圖 /19
1．5．5　標(biāo)注與切圖 /20
1．6　項(xiàng)目實(shí)訓(xùn) /21
項(xiàng)目一　天氣類應(yīng)用軟件界面的素材搜集與制作 /21
項(xiàng)目二　分析大型網(wǎng)絡(luò)游戲界面的UI設(shè)計(jì)原則 /22
思考與練習(xí)　/　23
第　2章 UI設(shè)計(jì)要素 /　24
2．1　點(diǎn)、線、面 /25
2．1．1　點(diǎn) /25
2．1．2　線 /26
2．1．3　面 /27
2．1．4　分析案例——“網(wǎng)易云音樂”App播放頁(yè)界面分析 /28
2．2　色彩 /29
2．2．1　色彩的屬性 /29
2．2．2　色彩的對(duì)比 /31
2．2．3　主色、輔助色與點(diǎn)綴色 /32
2．2．4　UI設(shè)計(jì)中常見的色彩搭配 /33
2．2．5　分析案例——對(duì)“普通話學(xué)習(xí)”App界面進(jìn)行色彩分析 /34
2．3　字體 /35
2．3．1　UI設(shè)計(jì)常用字體類型 /35
2．3．2　UI設(shè)計(jì)字體規(guī)范 /37
2．3．3　UI設(shè)計(jì)中的字體排版 /39
2．3．4　設(shè)計(jì)案例——小游戲App界面中的文字設(shè)計(jì) /40
2．4　風(fēng)格 /44
2．4．1　界面風(fēng)格的設(shè)計(jì)要點(diǎn) /44
2．4．2　界面常見的設(shè)計(jì)風(fēng)格 /44
2．4．3　設(shè)計(jì)案例——插畫風(fēng)格的網(wǎng)站登錄界面設(shè)計(jì) /46
2．5　項(xiàng)目實(shí)訓(xùn) /53
項(xiàng)目一　分析網(wǎng)站首頁(yè)的UI設(shè)計(jì) /53
項(xiàng)目二　設(shè)計(jì)讀書App啟動(dòng)頁(yè)界面 /54
思考與練習(xí)　/　54
第3章　UI設(shè)計(jì)規(guī)范 /56
3．1　了解UI設(shè)計(jì)規(guī)范 /57
3．1．1　UI設(shè)計(jì)規(guī)范的原則 /57
3．1．2　UI設(shè)計(jì)規(guī)范包括的 內(nèi)容 /58
3．2　不同操作系統(tǒng)的UI設(shè)計(jì)規(guī)范 /60
3．2．1　iOS的UI設(shè)計(jì)規(guī)范 /60
3．2．2　Android操作系統(tǒng)的UI設(shè)計(jì)規(guī)范 /61
3．2．3　Windows操作系統(tǒng)的UI設(shè)計(jì)規(guī)范 /63
3．3　UI設(shè)計(jì)的圖片規(guī)范 /63
3．3．1　圖片的格式 /64
3．3．2　圖片的使用規(guī)范 /64
3．4　項(xiàng)目實(shí)訓(xùn)——分析某App界面中的UI設(shè)計(jì)規(guī)范 /65
思考與練習(xí)　/　66
第4章　UI設(shè)計(jì)布局與構(gòu)圖 /　67
4．1　UI設(shè)計(jì)的布局元素 /68
4．1．1　留白 /68
4．1．2　視覺層次 /70
4．1．3　分析案例——分析“佰草集”官方網(wǎng)站界面的布局元素 /72
4．2　UI設(shè)計(jì)的布局原則 /73
4．2．1　對(duì)齊原則 /73
4．2．2　對(duì)比原則 /74
4．2．3　重復(fù)原則 /75
4．2．4　平衡原則 /75
4．2．5　節(jié)奏與韻律原則 /76
4．2．6　分析案例——分析手機(jī)App界面的布局原則 /77
4．3　UI設(shè)計(jì)的構(gòu)圖方法 /78
4．3．1　平衡構(gòu)圖 /78
4．3．2　放射式構(gòu)圖 /79
4．3．3　九宮格構(gòu)圖 /80
4．3．4　三角形構(gòu)圖 /81
4．3．5　F形構(gòu)圖 /81
4．3．6　S形構(gòu)圖 /82
4．3．7　設(shè)計(jì)案例——用三角形構(gòu)圖設(shè)計(jì)App登錄界面 /82
4．4　項(xiàng)目實(shí)訓(xùn) /86
項(xiàng)目一　分析“自然堂”官方網(wǎng)站界面的布局與構(gòu)圖 /86
項(xiàng)目二　設(shè)計(jì)App引導(dǎo)頁(yè)界面 /88
思考與練習(xí)　/89
第5章　網(wǎng)頁(yè)界面設(shè)計(jì) /　91
5．1　認(rèn)識(shí)網(wǎng)頁(yè)界面 /92
5．1．1　網(wǎng)頁(yè)界面的組成 /92
5．1．2　常見的網(wǎng)頁(yè)界面布局方式 /94
5．1．3　網(wǎng)頁(yè)界面的設(shè)計(jì)要求 /96
5．2　網(wǎng)頁(yè)界面Logo和按鈕設(shè)計(jì) /96
5．2．1　Logo設(shè)計(jì)標(biāo)準(zhǔn)與樣式 /97
5．2．2　按鈕的類型和特點(diǎn) /98
5．2．3　設(shè)計(jì)案例——設(shè)計(jì)旅行網(wǎng)Logo /98
5．2．4　設(shè)計(jì)案例——設(shè)計(jì)網(wǎng)頁(yè)登錄按鈕 /103
5．3　網(wǎng)頁(yè)界面設(shè)計(jì) /105
5．3．1　網(wǎng)頁(yè)首頁(yè)界面的主要功能 /105
5．3．2　網(wǎng)頁(yè)內(nèi)頁(yè)界面設(shè)計(jì)的注意事項(xiàng) /106
5．3．3　設(shè)計(jì)案例——制作網(wǎng)頁(yè)首頁(yè)界面 /106
5．3．4　設(shè)計(jì)案例——制作網(wǎng)頁(yè)內(nèi)頁(yè)界面 /112
5．4　項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)“多肉微觀世界”登錄頁(yè)界面 /114
思考與練習(xí)　/116
第6章　App界面設(shè)計(jì) /　118
6．1　認(rèn)識(shí)App界面 /119
6．1．1　App基本界面構(gòu)成 /119
6．1．2　App界面布局形式 /120
6．1．3　App界面設(shè)計(jì)要點(diǎn) /125
6．2　App界面圖標(biāo)設(shè)計(jì) /125
6．2．1　認(rèn)識(shí)App界面圖標(biāo) /125
6．2．2　App界面圖標(biāo)類型 /126
6．2．3　App界面圖標(biāo)設(shè)計(jì)要點(diǎn) /127
6．2．4　設(shè)計(jì)案例——設(shè)計(jì)“書畫應(yīng)用”2．5D圖標(biāo) /129
6．3　App首頁(yè)界面設(shè)計(jì) /133
6．3．1　App首頁(yè)界面類型 /133
6．3．2　App首頁(yè)界面設(shè)計(jì)要點(diǎn) /135
6．3．3　設(shè)計(jì)案例——設(shè)計(jì)美食App首頁(yè)界面 /136
6．4　App列表頁(yè)界面設(shè)計(jì) /142
6．4．1　App列表頁(yè)界面類型 /142
6．4．2　App列表頁(yè)界面設(shè)計(jì)原則 /142
6．4．3　設(shè)計(jì)案例——設(shè)計(jì)美食App列表頁(yè)界面 /143
6．5　App其他界面設(shè)計(jì) /146
6．5．1　App其他界面類型 /146
6．5．2　設(shè)計(jì)案例——設(shè)計(jì)美食App關(guān)注頁(yè)界面 /147
6．5．3　設(shè)計(jì)案例——設(shè)計(jì)美食App個(gè)人中心頁(yè)界面 /150
6．6　項(xiàng)目實(shí)訓(xùn)——設(shè)計(jì)旅游App搜索頁(yè)界面 /154
思考與練習(xí)　/155
第7章　界面的標(biāo)注、切圖與動(dòng)效制作 /　157
7．1　界面的標(biāo)注 /158
7．1．1　界面標(biāo)注的作用 /158
7．1．2　界面標(biāo)注的內(nèi)容 /158
7．1．3　界面標(biāo)注的規(guī)范 /160
7．1．4　界面標(biāo)注的常用工具 /161
7．1．5　設(shè)計(jì)案例——標(biāo)注App首頁(yè)界面 /161
7．2　界面的切圖 /167
7．2．1　切圖的原則 /167
7．2．2　切圖的要點(diǎn) /167
7．2．3　切圖的命名規(guī)則 /168
7．2．4　設(shè)計(jì)案例——對(duì)App首頁(yè)界面進(jìn)行切圖 /169
7．3　界面的動(dòng)效制作 /171
7．3．1　界面動(dòng)效的作用 /172
7．3．2　界面動(dòng)效的類型 /172
7．3．3　設(shè)計(jì)案例——制作加載動(dòng)效 /173
7．4　項(xiàng)目實(shí)訓(xùn)——標(biāo)注App關(guān)注頁(yè)界面 /180
思考與練習(xí)　/182
第8章　綜合案例——電商主題界面設(shè)計(jì) /　183
8．1　家居網(wǎng)案例分析 /184
8．1．1　家居網(wǎng)項(xiàng)目定位 /184
8．1．2　家居網(wǎng)設(shè)計(jì)思路 /185
8．1．3　繪制家居網(wǎng)界面原型圖 /186
8．2　家居網(wǎng)界面設(shè)計(jì) /188
8．2．1　設(shè)計(jì)家居網(wǎng)Logo /188
8．2．2　設(shè)計(jì)家居網(wǎng)首頁(yè)界面 /189
8．2．3　設(shè)計(jì)家居網(wǎng)內(nèi)頁(yè)界面 /195
8．3　家居網(wǎng)App界面設(shè)計(jì) /198
8．3．1　設(shè)計(jì)家居網(wǎng)App首頁(yè)界面 /198
8．3．2　設(shè)計(jì)家居網(wǎng)App發(fā)現(xiàn)頁(yè)界面 /201
8．3．3　設(shè)計(jì)家居網(wǎng)App詳情頁(yè)界面 /202
8．3．4　設(shè)計(jì)家居網(wǎng)App商品結(jié)算頁(yè)界面 /204
8．3．5　設(shè)計(jì)家居網(wǎng)App個(gè)人中心頁(yè)界面 /206
8．3．6　設(shè)計(jì)家居網(wǎng)App登錄頁(yè)界面 /208
思考與練習(xí)　/209