Photoshop CC UI設(shè)計(jì)案例教程（全彩慕課版）

第 1 章 初識UI 設(shè)計(jì)
1．1　UI 設(shè)計(jì)的相關(guān)概念…………………　2
1．1．1　UI 設(shè)計(jì)的概念…………………　2
1．1．2　UI 與WUI 和GUI… …………　2
1．1．3　UI 設(shè)計(jì)常用術(shù)語中英文對照… …………………………　3
1．1．4　UI 設(shè)計(jì)常用軟件………………　3
1．2　UI 設(shè)計(jì)項(xiàng)目流程……………………　3
1．2．1　項(xiàng)目設(shè)計(jì)流程… ………………　4
1．2．2　UI 設(shè)計(jì)流程……………………　4
1．3　UI 設(shè)計(jì)的風(fēng)格表現(xiàn)…………………　5
1．4　UI 設(shè)計(jì)的行業(yè)發(fā)展…………………　6
1．4．1　UI 設(shè)計(jì)行業(yè)現(xiàn)狀………………　6
1．4．2　UI 設(shè)計(jì)發(fā)展趨勢………………　8
1．5　UI 設(shè)計(jì)的學(xué)習(xí)方法…………………　9
第　2 章 圖標(biāo)設(shè)計(jì)
2．1　圖標(biāo)的基礎(chǔ)知識… ………………　12
2．1．1　圖標(biāo)的概念… ………………　12
2．1．2　圖標(biāo)設(shè)計(jì)的流程… …………　12
2．1．3　圖標(biāo)設(shè)計(jì)的原則… …………　14
2．2　圖標(biāo)的設(shè)計(jì)規(guī)范… ………………　16
2．2．1　圖標(biāo)的尺寸及單位… ………　16
2．2．2　圖標(biāo)的視覺統(tǒng)一… …………　18
2．2．3　圖標(biāo)的清晰度… ……………　19
2．3　圖標(biāo)的風(fēng)格類型… ………………　19
2．3．1　像素風(fēng)格… …………………　19
2．3．2　扁平化風(fēng)格… ………………　20
2．3．3　擬物化風(fēng)格… ………………　24
2．3．4　微擬物風(fēng)格… ………………　25
2．3．5　立體風(fēng)格… …………………　25
2．4　課堂案例——繪制扁平化風(fēng)格-單色面性圖標(biāo)… …………………　26
2．5　課堂練習(xí)… ………………………　30
2．5．1　課堂練習(xí)——繪制扁平化風(fēng)格-不透明色塊面性圖標(biāo)… ……　30
2．5．2　課堂練習(xí)——繪制扁平化風(fēng)格-微漸變面性圖標(biāo)… …………　31
2．6　課后習(xí)題… ………………………　32
2．6．1　課后習(xí)題——繪制扁平化風(fēng)格光影效果圖標(biāo)… ……………　32
2．6．2　課后習(xí)題——繪制扁平化風(fēng)格折紙投影圖標(biāo)… ……………　32
第3　章 App 界面設(shè)計(jì)
3．1　App 的基礎(chǔ)知識…………………　35
3．1．1　App 的概念… ………………　35
3．1．2　App 設(shè)計(jì)的流程… …………　35
3．1．3　App 界面設(shè)計(jì)的原則… ……　38
3．2　App 界面設(shè)計(jì)的規(guī)范……………　40
3．2．1　iOS 設(shè)計(jì)規(guī)范… ……………　40
3．2．2　Android 設(shè)計(jì)規(guī)范… ………　46
3．3　App 常用界面類型………………　51
3．3．1　閃屏頁… ……………………　51
3．3．2　引導(dǎo)頁… ……………………　53
3．3．3　首頁… ………………………　54
3．3．4　個(gè)人中心頁… ………………　56
3．3．5　詳情頁… ……………………　56
3．3．6　注冊登錄頁… ………………　57
3．4　課堂案例——制作侃侃App……　57
3．5　課堂練習(xí)——制作Shine App… ……………………………　95
3．6　課后習(xí)題——制作Circle App… ……………………………　96
第4　章 網(wǎng)頁界面設(shè)計(jì)
4．1　網(wǎng)頁界面設(shè)計(jì)的基礎(chǔ)知識………　99
4．1．1　網(wǎng)頁界面設(shè)計(jì)的概念… ……　99
4．1．2　網(wǎng)頁界面設(shè)計(jì)的流程… ……　99
4．1．3　網(wǎng)頁界面設(shè)計(jì)的原則… ……　102
4．2　網(wǎng)頁界面設(shè)計(jì)的規(guī)范… …………　104
4．2．1　網(wǎng)頁界面設(shè)計(jì)的尺寸及單位… ………………………　104
4．2．2　網(wǎng)頁界面設(shè)計(jì)的界面結(jié)構(gòu)… ………………………　107
4．2．3　網(wǎng)頁界面設(shè)計(jì)的布局… ……　108
4．2．4　網(wǎng)頁界面設(shè)計(jì)的字體… ……　110
4．2．5　網(wǎng)頁界面設(shè)計(jì)的圖標(biāo)… ……　111
4．3　網(wǎng)頁常用界面類型………………　114
4．4　課堂案例——制作Easy Life 家居電商網(wǎng)站… ………………………　118
4．4．1　課堂案例—制作Easy Life家居電商網(wǎng)站首頁… ………　118
4．4．2　課堂案例—制作Easy Life家居電商網(wǎng)站產(chǎn)品列表頁……　142
4．4．3　課堂案例——制作Easy Life家居電商網(wǎng)站產(chǎn)品詳情頁……　151
4．5　課堂練習(xí)——制作Artsy 家居電商網(wǎng)站… ……………………………　159
4．6　課后習(xí)題——制作裝飾家居電商網(wǎng)站… ……………………………　160
第5　章 軟件界面設(shè)計(jì)
5．1　軟件界面設(shè)計(jì)的基礎(chǔ)知識………　162
5．1．1　軟件界面設(shè)計(jì)的概念… ……　162
5．1．2　軟件界面設(shè)計(jì)的流程… ……　162
5．1．3　軟件界面設(shè)計(jì)的原則… ……　165
5．2　軟件界面設(shè)計(jì)的規(guī)范… …………　166
5．2．1　軟件界面設(shè)計(jì)的尺寸及單位… ………………………　167
5．2．2　軟件界面設(shè)計(jì)的界面結(jié)構(gòu)… ………………………　168
5．2．3　軟件界面設(shè)計(jì)的布局… ……　168
5．2．4　軟件界面設(shè)計(jì)的字體… ……　172
5．2．5　軟件界面設(shè)計(jì)的圖標(biāo)… ……　174
5．3　軟件常用界面類型… ……………　178
5．4　課堂案例——制作音樂播放器軟件… ……………………………　180
5．4．1　課堂案例——制作Song 音樂播放器軟件首頁… …………　180
5．4．2　課堂案例——制作Song 音樂播放器軟件歌單頁… ………　194
5．4．3　課堂案例——制作Song 音樂播放器軟件歌曲列表頁… …　200
5．5　課堂練習(xí)——制作More 音樂播放器軟件… ……………………　207
5．6　課后習(xí)題——制作CoolPlayer音樂播放器軟件… ………………　208
第6　章 游戲界面設(shè)計(jì)
6．1　游戲界面設(shè)計(jì)的基礎(chǔ)知識………　210
6．1．1　游戲界面設(shè)計(jì)的概念… ……　210
6．1．2　游戲界面設(shè)計(jì)的流程… ……　210
6．1．3　游戲界面設(shè)計(jì)的原則… ……　212
6．2　游戲界面設(shè)計(jì)的規(guī)范… …………　214
6．2．1　游戲界面設(shè)計(jì)的尺寸及單位……　214
6．2．2　游戲界面設(shè)計(jì)的界面結(jié)構(gòu)……　215
6．2．3　游戲界面設(shè)計(jì)的布局………　215
6．2．4　游戲界面設(shè)計(jì)的字體………　216
6．2．5　游戲界面設(shè)計(jì)的圖標(biāo)………　217
6．3　游戲常用界面類型………………　217
6．4　課堂案例——制作水果消消消游戲… ……………………………　220
6．5　課堂練習(xí)——制作Boom 游戲……　229
6．6　課后習(xí)題——制作Pet Fun游戲… ……………………………　230