突破平面Photoshop UI界面設(shè)計(jì)與制作剖析

第1章 UI界面設(shè)計(jì)概述1
1.1 認(rèn)識(shí)UI界面設(shè)計(jì)1
1.1.1 什么是UI界面設(shè)計(jì)1
1.1.2 UI界面的類型1
1.1.3 UI界面設(shè)計(jì)的流程4
1.1.4 UI設(shè)計(jì)的配色5
1.1.5 UI界面設(shè)計(jì)的原則6
1.2 UI界面設(shè)計(jì)的軟件7
1.2.1 Adobe Photoshop7
1.2.2 Adobe Illustrator14
1.3 本章小結(jié)14
第2章 UI界面元素設(shè)計(jì)15
2.1 按鈕15
2.1.1 按鈕的設(shè)計(jì)規(guī)范15
2.1.2 繪制開(kāi)始游戲按鈕16
2.1.3 繪制撤銷按鈕19
2.1.4 繪制立即購(gòu)買按鈕23
2.2 導(dǎo)航25
2.2.1 導(dǎo)航的設(shè)計(jì)規(guī)范25
2.2.2 繪制圖標(biāo)式導(dǎo)航27
2.2.3 繪制列表式導(dǎo)航29
2.2.4 繪制滑動(dòng)式導(dǎo)航32
2.3 繪制其他類型的界面元素37
2.3.1 繪制搜索列表37
2.3.2 繪制調(diào)研對(duì)話框41
2.3.3 繪制播放器控件43
2.3.4 繪制寵物網(wǎng)站導(dǎo)航49
2.4 課后習(xí)題52
2.4.1 繪制登錄按鈕52
2.4.2 繪制播放進(jìn)度條52
2.5 本章小結(jié)52
第3章 繪制圖標(biāo)53
3.1 圖標(biāo)設(shè)計(jì)基礎(chǔ)53
3.1.1 圖標(biāo)設(shè)計(jì)的原則53
3.1.2 圖標(biāo)設(shè)計(jì)的流程53
3.1.3 圖標(biāo)的風(fēng)格54
3.2 折紙圖標(biāo)55
3.3 瀏覽器圖標(biāo)56
3.3.1 繪制輪廓57
3.3.2 繪制指針59
3.4 音量圖標(biāo)60
3.5 社交軟件圖標(biāo)62
3.6 網(wǎng)站圖標(biāo)65
3.6.1 繪制矩形65
3.6.2 添加素材66
3.6.3 繪制光影68
3.7 云空間圖標(biāo)69
3.7.1 繪制圖形70
3.7.2 添加樣式70
3.8 課后習(xí)題73
3.8.1 音樂(lè)圖標(biāo)73
3.8.2 日歷圖標(biāo)73
3.8.3 水晶圖標(biāo)73
3.9 本章小結(jié)74
第4章 繪制手機(jī)APP界面75
4.1 APP界面的設(shè)計(jì)基礎(chǔ)75
4.1.1 APP界面的設(shè)計(jì)規(guī)范75
4.1.2 APP界面的設(shè)計(jì)流程81
4.1.3 APP界面的分類81
4.2 認(rèn)識(shí)APP界面的組成元素83
4.2.1 狀態(tài)欄83
4.2.2 搜索框84
4.2.3 內(nèi)容區(qū)域84
4.2.4 導(dǎo)航84
4.2.5 其他組件85
4.3 制作首頁(yè)85
4.4 制作精選界面87
4.4.1 整理圖形88
4.4.2 添加素材88
4.5 制作個(gè)人界面92
4.6 制作詳情界面94
4.6.1 整理圖形94
4.6.2 添加商品信息95
4.7 課后習(xí)題99
4.7.1 繪制美食APP登錄界面99
4.7.2 繪制天氣APP主界面99
4.7.3 繪制聊天APP界面99
4.8 本章小結(jié)100
第5章 繪制網(wǎng)絡(luò)直播界面101
5.1 網(wǎng)絡(luò)直播界面設(shè)計(jì)基礎(chǔ)101
5.1.1 網(wǎng)絡(luò)直播界面概述101
5.1.2 網(wǎng)絡(luò)直播界面的設(shè)計(jì)流程101
5.1.3 網(wǎng)絡(luò)直播界面的設(shè)計(jì)原則101
5.2 制作中國(guó)風(fēng)直播預(yù)熱頁(yè)102
5.2.1 繪制背景102
5.2.2 繪制窗口103
5.2.3 繪制邊框105
5.2.4 繪制文字107
5.2.5 繪制彈窗108
5.2.6 最終結(jié)果109
5.3 制作休閑食品直播界面111
5.3.1 繪制背景111
5.3.2 添加素材112
5.3.3 繪制大標(biāo)題113
5.3.4 繪制裝飾元素115
5.4 制作美妝直播預(yù)告界面116
5.4.1 繪制背景117
5.4.2 添加圖形與文字素材118
5.4.3 最終結(jié)果121
5.5 課后習(xí)題122
5.5.1 繪制雙11直播界面122
5.5.2 繪制6·18直播界面122
5.6 本章小結(jié)123
第6章 繪制網(wǎng)頁(yè)界面124
6.1 網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)124
6.1.1 網(wǎng)頁(yè)界面的設(shè)計(jì)原則124
6.1.2 網(wǎng)頁(yè)界面的設(shè)計(jì)流程124
6.1.3 網(wǎng)頁(yè)界面的類型125
6.2 APP界面與網(wǎng)頁(yè)界面的異同127
6.2.1 尺寸差異127
6.2.2 習(xí)慣差異128
6.2.3 精準(zhǔn)度差異128
6.2.4 按鈕位置128
6.2.5 按鈕類型129
6.3 制作音樂(lè)網(wǎng)站主頁(yè)130
6.3.1 繪制背景130
6.3.2 添加素材131
6.3.3 輸入文字133
6.4 制作網(wǎng)上商城首頁(yè)134
6.4.1 繪制背景134
6.4.2 添加圖形與文字素材135
6.4.3 最終結(jié)果138
6.5 制作餐廳網(wǎng)站首頁(yè)140
6.5.1 繪制背景140
6.5.2 繪制欄目?jī)?nèi)容141
6.5.3 最終結(jié)果144
6.6 制作設(shè)計(jì)機(jī)構(gòu)網(wǎng)站首頁(yè)147
6.6.1 繪制背景147
6.6.2 添加素材148
6.7 課后習(xí)題151
6.7.1 繪制北歐家居網(wǎng)站首頁(yè)151
6.7.2 繪制旅游網(wǎng)站首頁(yè)151
6.8 本章總結(jié)151
第7章 繪制游戲界面152
7.1 游戲界面設(shè)計(jì)基礎(chǔ)152
7.1.1 游戲界面的概念152
7.1.2 游戲界面的設(shè)計(jì)流程152
7.1.3 游戲界面的設(shè)計(jì)原則152
7.2 制作歡迎頁(yè)154
7.2.1 繪制背景154
7.2.2 繪制標(biāo)題文字154
7.2.3 繪制按鈕158
7.3 制作關(guān)卡頁(yè)160
7.3.1 繪制背景160
7.3.2 繪制“上一關(guān)”按鈕162
7.3.3 添加其他按鈕165
7.3.4 繪制游戲區(qū)域167
7.3.5 繪制解鎖按鈕167
7.4 制作闖關(guān)成功頁(yè)169
7.4.1 繪制背景169
7.4.2 繪制內(nèi)部框架170
7.4.3 繪制標(biāo)題172
7.4.4 繪制星星173
7.4.5 添加道具174
7.4.6 繪制詢問(wèn)按鈕175
7.5 課后習(xí)題177
7.5.1 繪制商城頁(yè)177
7.5.2 繪制通關(guān)頁(yè)178
7.6 本章小結(jié)178
第8章 繪制平板電腦界面179
8.1 平板電腦界面概述179
8.2 繪制平板電腦音樂(lè)APP首頁(yè)179
8.2.1 劃分區(qū)域179
8.2.2 繪制輪播區(qū)域181
8.2.3 繪制主打歌曲內(nèi)容182
8.2.4 繪制側(cè)欄183
8.2.5 繪制播放進(jìn)度區(qū)域184
8.3 繪制平板電腦音樂(lè)APP搜索頁(yè)187
8.3.1 整理圖形187
8.3.2 繪制鍵盤189
8.4 繪制平板電腦音樂(lè)APP登錄界面190
8.5 課后習(xí)題193
8.5.1 繪制平板電腦視頻APP首頁(yè)193
8.5.2 繪制平板電腦健身APP首頁(yè)193
8.6 本章小結(jié)194
第9章 繪制軟件界面195
9.1 軟件界面概述195
9.2 繪制殺毒軟件界面197
9.2.1 繪制背景198
9.2.2 繪制控件198
9.2.3 添加元素200
9.3 繪制截圖軟件主界面202
9.3.1 繪制背景202
9.3.2 添加按鈕202
9.3.3 繪制控件203
9.4 繪制聊天軟件界面206
9.4.1 繪制背景206
9.4.2 添加元素207
9.5 繪制網(wǎng)盤軟件登錄界面209
9.5.1 繪制背景210
9.5.2 添加元素211
9.5.3 載入圖標(biāo)212
9.5.4 最終結(jié)果212
9.6 繪制壓縮軟件界面213
9.6.1 規(guī)劃界面213
9.6.2 添加圖標(biāo)214
9.6.3 繪制其他內(nèi)容216
9.7 課后習(xí)題218
9.7.1 繪制翻譯軟件界面218
9.7.2 繪制輸入法軟件界面218
9.8 本章小結(jié)218