Photoshop CC移動(dòng)UI設(shè)計(jì)實(shí)用教程

第 1章 初識(shí)UI設(shè)計(jì) 9
1．1 認(rèn)識(shí)UI設(shè)計(jì) 10
1．2 常用UI設(shè)計(jì)單位解析 10
1．3 UI設(shè)計(jì)常用圖像格式 11
1．4 UI設(shè)計(jì)準(zhǔn)則 11
1．5 UI設(shè)計(jì)與團(tuán)隊(duì)合作關(guān)系 12
1．6 智能手機(jī)操作系統(tǒng)簡介 12
1．7 UI設(shè)計(jì)常用的軟件 13
1．8 UI色彩學(xué)知識(shí) 15
1．9 UI設(shè)計(jì)常見配色方案 17
1．10 UI設(shè)計(jì)配色技巧 18
1．11 UI設(shè)計(jì)色彩學(xué) 20
1．12 精彩UI設(shè)計(jì)賞析 22
1．13 本章小結(jié) 23
第 2章 精致按鈕及旋鈕設(shè)計(jì) 24
2．1 理論知識(shí)——移動(dòng)APP按鈕尺寸分析 25
2．2 課堂案例——下載按鈕 25
2．2．1 打開素材 26
2．2．2 添加質(zhì)感 26
2．3 課堂案例——簡潔按鍵開關(guān) 27
2．3．1 制作背景并添加文字 27
2．3．2 繪制按鍵 27
2．4 課堂案例——音量滑動(dòng)條 28
2．4．1 打開素材 28
2．4．2 繪制圖形 28
2．5 課堂案例——立體多邊形按鈕 29
2．5．1 制作漸變背景 29
2．5．2 繪制圖形 30
2．6 課堂案例——滑動(dòng)按鈕 32
2．6．1 制作背景繪制圖形 32
2．6．2 繪制控件 34
2．7 課堂案例——滑動(dòng)調(diào)節(jié)按鈕 36
2．7．1 制作背景繪制圖形 37
2．7．2 繪制控件 38
2．7．3 添加質(zhì)感 39
2．7．4 繪制刻度 40
2．8 課堂案例——功能旋鈕 41
2．8．1 制作背景繪制圖形 41
2．8．2 繪制功能圖像 43
2．8．3 制作立體質(zhì)感 45
2．8．4 繪制指示圖形 47
2．8．5 添加文字 48
2．9 課堂案例——品質(zhì)音量控件 49
2．9．1 制作背景 49
2．9．2 制作控件 50
2．9．3 制作細(xì)節(jié) 59
2．10 本章小結(jié) 61
2．11 課后習(xí)題 61
2．11．1 課后習(xí)題1——下單按鈕 61
2．11．2 課后習(xí)題2——圓形開關(guān)按鈕 62
2．11．3 課后習(xí)題3——金屬旋鈕 62
2．11．4 課后習(xí)題4——音頻調(diào)節(jié)控件 63
第3章 趨勢(shì)流行扁平風(fēng) 64
3．1 理論知識(shí)——扁平化設(shè)計(jì) 65
3．1．1 什么是扁平化設(shè)計(jì) 65
3．1．2 扁平化設(shè)計(jì)的優(yōu)點(diǎn)和缺點(diǎn) 65
3．1．3 扁平化設(shè)計(jì)的四大原則 65
3．2 課堂案例——盾牌圖標(biāo) 67
3．2．1 制作漸變背景 67
3．2．2 添加投影 68
3．3 課堂案例——扁平分享圖標(biāo) 69
3．3．1 繪制圓形 69
3．3．2 繪制裝飾圖形 70
3．3．3 制作投影 71
3．4 課堂案例——加速圖標(biāo) 72
3．4．1 制作背景及輪廓 72
3．4．2 繪制圖標(biāo)元素 73
3．4．3 制作陰影 74
3．5 課堂案例——企業(yè)管理登錄界面 75
3．5．1 繪制主圖形 75
3．5．2 添加素材及文字 77
3．6 課堂案例——社交應(yīng)用登錄框 77
3．6．1 制作背景 77
3．6．2 繪制界面 78
3．7 課堂案例——美食APP界面 81
3．7．1 繪制圖形并添加素材 81
3．7．2 繪制界面元素 82
3．8 課堂案例——扁平化郵箱界面 84
3．8．1 制作背景及狀態(tài)欄 84
3．8．2 添加文字 85
3．9 課堂案例——個(gè)人應(yīng)用APP界面 87
3．9．1 制作背景 87
3．9．2 繪制界面圖形 88
3．9．3 添加文字并制作細(xì)節(jié) 89
3．9．4 繪制二級(jí)功能頁面 90
3．10 本章小結(jié) 93
3．11 課后習(xí)題 93
3．11．1 課后習(xí)題1——扁平鉛筆圖標(biāo) 93
3．11．2 課后習(xí)題2——扁平相機(jī)圖標(biāo) 94
3．11．3 課后習(xí)題3——簡約風(fēng)天氣APP 94
第4章 超強(qiáng)表現(xiàn)寫實(shí)風(fēng) 96
4．1 理論知識(shí)——寫實(shí)風(fēng)格詳解 97
4．1．1 寫實(shí)的藝術(shù)表現(xiàn)形式 97
4．1．2 UI設(shè)計(jì)的寫實(shí)表現(xiàn) 97
4．2 課堂案例--——寫實(shí)SIM卡 98
4．2．1 制作背景繪制輪廓 98
4．2．2 繪制細(xì)節(jié)圖形 99
4．3 課堂案例——寫實(shí)專輯包裝 100
4．3．1 制作背景 101
4．3．2 制作封面 102
4．3．3 繪制光盤 103
4．3．4 制作質(zhì)感 105
4．3．5 制作封口細(xì)節(jié) 107
4．4 課堂案例——寫實(shí)鬧鐘圖標(biāo) 110
4．4．1 制作背景 110
4．4．2 繪制鬧鐘輪廓 110
4．4．3 繪制揚(yáng)聲器孔 115
4．4．4 繪制燈開關(guān) 117
4．4．5 繪制表盤圖形 119
4．4．6 制作表盤細(xì)節(jié) 120
4．5 課堂案例——寫實(shí)電視機(jī)圖標(biāo) 123
4．5．1 制作背景并繪制電視輪廓 123
4．5．2 繪制屏幕圖形 126
4．5．3 繪制電視細(xì)節(jié) 128
4．6 課堂案例——寫實(shí)小票圖標(biāo) 131
4．6．1 制作背景并繪制圖形 132
4．6．2 制作鋸齒效果 134
4．6．3 添加文字并制作陰影 135
4．7 本章小結(jié) 137
4．8 課后習(xí)題 137
4．8．1 課后習(xí)題1——寫實(shí)計(jì)算器圖標(biāo) 137
4．8．2 課后習(xí)題2——寫實(shí)鋼琴圖標(biāo) 137
4．8．3 課后習(xí)題3——寫實(shí)開關(guān)圖標(biāo) 138
第5章 iOS風(fēng)格界面設(shè)計(jì) 139
5．1 理論知識(shí)——認(rèn)識(shí)iOS風(fēng)格 140
5．1．1 iOS的發(fā)展及界面分布 140
5．1．2 認(rèn)識(shí)iOS的控件 140
5．2 課堂案例——蘋果風(fēng)格登錄界面 141
5．2．1 制作背景 141
5．2．2 繪制圖形 142
5．2．3 添加素材 144
5．2．4 繪制文本框 145
5．3 課堂案例——會(huì)員登錄頁 147
5．3．1 制作背景 147
5．3．2 繪制主界面 149
5．3．3 制作細(xì)節(jié) 151
5．3．4 繪制文本框 152
5．4 課堂案例——通信應(yīng)用界面 154
5．4．1 制作背景 155
5．4．2 添加元素 158
5．5 課堂案例——音樂電臺(tái)界面設(shè)計(jì) 160
5．5．1 制作背景 160
5．5．2 繪制界面 161
5．5．3 添加圖形元素 165
5．5．4 添加素材圖像 167
5．5．5 繪制功能控件 168
5．6 課堂案例——iPod應(yīng)用登錄界面 169
5．6．1 制作背景及繪制狀態(tài)欄 169
5．6．2 添加界面元素 170
5．7 課堂案例——iOS風(fēng)格音樂播放器界面 173
5．7．1 制作應(yīng)用界面 174
5．7．2 展示頁面 181
5．8 本章小結(jié) 182
5．9 課后習(xí)題 182
5．9．1 課后習(xí)題1——會(huì)員登錄框界面 182
5．9．2 課后習(xí)題2——用戶界面 182
5．9．3 課后習(xí)題3——翻頁登錄界面 183
第6章 精品圖標(biāo)制作 184
6．1 理論知識(shí)——了解圖標(biāo) 185
6．1．1 圖標(biāo)的分類 185
6．1．2 圖標(biāo)的作用 185
6．1．3 圖標(biāo)的格式 185
6．1．4 圖標(biāo)和圖像大小 186
6．1．5 精美APP圖標(biāo)欣賞 188
6．2 課堂案例——簡潔羅盤圖標(biāo) 188
6．2．1 制作背景繪制圖形 188
6．2．2 繪制表座 191
6．2．3 繪制指針 191
6．3 課堂案例——簡潔進(jìn)程圖標(biāo) 193
6．3．1 制作背景添加圖像 193
6．3．2 繪制圖形 193
6．4 課堂案例——美麗拍圖標(biāo) 195
6．4．1 繪制矩形并添加陰影 195
6．4．2 繪制標(biāo)志圖形 197
6．4．3 制作細(xì)節(jié)部分 198
6．5 課堂案例——下載圖標(biāo) 200
6．5．1 制作背景并繪制圖形 201
6．5．2 制作圖標(biāo)元素 203
6．6 課堂案例——相機(jī)和計(jì)算器圖標(biāo) 205
6．6．1 制作背景并繪制圖標(biāo) 206
6．6．2 制作細(xì)節(jié) 208
6．6．3 繪制鏡頭 210
6．6．4 繪制計(jì)算器圖標(biāo) 211
6．6．5 制作圖標(biāo)元素 212
6．6．6 制作細(xì)節(jié) 214
6．7 課堂案例——日歷和天氣圖標(biāo) 217
6．7．1 制作背景 217
6．7．2 繪制日歷圖標(biāo) 218
6．7．3 制作圖標(biāo)細(xì)節(jié) 222
6．7．4 制作翻頁 223
6．7．5 繪制天氣圖標(biāo) 224
6．8 本章小結(jié) 228
6．9 課后習(xí)題 228
6．9．1 課后習(xí)題1——唱片機(jī)圖標(biāo) 228
6．9．2 課后習(xí)題2——進(jìn)度圖標(biāo) 229
6．9．3 課后習(xí)題3——濕度計(jì)圖標(biāo) 229
6．9．4 課后習(xí)題4——小黃人圖標(biāo) 230
第7章 流行界面設(shè)計(jì)薈萃 231
7．1 理論知識(shí)——UI設(shè)計(jì)尺寸 232
7．1．1 iPhone和Android設(shè)計(jì)尺寸 232
7．1．2 Android 系統(tǒng)換算及主流手機(jī)設(shè)置 234
7．2 課堂案例——存儲(chǔ)數(shù)據(jù)界面 236
7．2．1 制作背景繪制圖形 236
7．2．2 添加細(xì)節(jié)圖像 239
7．3 課堂案例——自然協(xié)會(huì)應(yīng)用界面 240
7．3．1 制作主題背景 240
7．3．2 繪制界面圖形 241
7．3．3 添加圖像 242
7．3．4 繪制圖形 243
7．4 課堂案例——點(diǎn)餐APP界面 245
7．4．1 制作背景 245
7．4．2 添加素材及文字 246
7．4．3 添加界面元素 247
7．4．4 繪制功能圖形及添加素材 252
7．5 課堂案例——鎖屏界面 254
7．5．1 制作背景 255
7．5．2 繪制界面圖形 258
7．5．3 添加文字信息 261
7．5．4 添加素材功能圖標(biāo) 265
7．6 課堂案例——票券APP界面 266
7．6．1 制作背景并繪制狀態(tài)欄 266
7．6．2 添加素材 267
7．6．3 添加文字 268
7．6．4 繪制按鍵圖形 269
7．6．5 添加文字及素材 271
7．7 本章小結(jié) 272
7．8 課后習(xí)題 272
7．8．1 課后習(xí)題1——經(jīng)典音樂播放器界面 272
7．8．2 課后習(xí)題2——下載數(shù)據(jù)界面 273
7．8．3 課后習(xí)題3——APP游戲個(gè)人界面 273
第8章 綜合設(shè)計(jì)實(shí)戰(zhàn) 275
8．1 課堂案例——信息接收控件 276
8．1．1 制作背景并繪制圖形 276
8．1．2 制作控件元素 277
8．1．3 添加文字 279
8．2 課堂案例——Sense Widget 280
8．2．1 制作背景并繪制界面圖形 280
8．2．2 添加文字信息及素材 285
8．3 課堂案例——簡潔視頻播放界面 286
8．3．1 制作主題背景 286
8．3．2 添加控件素材 289
8．3．3 添加投影 290
8．4 課堂案例——怡人秋景主題天氣界面 291
8．4．1 制作背景 291
8．4．2 繪制界面 294
8．4．3 添加文字 306
8．5 課堂案例——概念手機(jī)界面 306
8．5．1 制作背景及繪制圖形 307
8．5．2 添加素材 308
8．5．3 添加文字 310
8．5．4 繪制手機(jī)元素圖形 311
8．6 本章小結(jié) 318
8．7 課后習(xí)題 318
8．7．1 課后習(xí)題1——精致CD控件 318
8．7．2 課后習(xí)題2——APP游戲安裝頁 319