UI設計（全彩慕課版）

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