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

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