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

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