這是一本全面介紹如何使用Photoshop進(jìn)行UI界面設(shè)計(jì)的實(shí)用教程。本書完全針對(duì)零基礎(chǔ)讀者而編寫，是入門級(jí)讀者快速而全面掌握利用Photoshop 進(jìn)行UI界面設(shè)計(jì)的必讀參考書。
本書由有著多年豐富UI設(shè)計(jì)經(jīng)驗(yàn)的一線設(shè)計(jì)師精心編寫，通過(guò)全實(shí)例、圖文并茂的詳細(xì)闡述，全面展示UI界面設(shè)計(jì)精髓，從UI界面設(shè)計(jì)基礎(chǔ)到精致按鈕及旋鈕設(shè)計(jì)，從寫實(shí)到扁平風(fēng)格等，對(duì)UI設(shè)計(jì)中的各種流行設(shè)計(jì)風(fēng)格做了全面剖析，每個(gè)案例都有制作流程詳解，并且為讀者朋友安排了相關(guān)的課后習(xí)題，讀者在學(xué)完案例后可繼續(xù)參考習(xí)題進(jìn)行深入練習(xí)，以拓展自己的創(chuàng)意思維，提高UI界面的設(shè)計(jì)水平。
本書還為廣大讀者提供了一張DVD多媒體光盤，收錄了本書中所有的調(diào)用素材及源文件，還包括了本書所有實(shí)例及課后習(xí)題的多媒體高清有聲視頻錄像。另外，為方便老師教學(xué)，本書還提供了PPT教學(xué)課件，以供老師參考。
本書特別適合智能手機(jī)UI界面設(shè)計(jì)的初學(xué)者，可作為平面設(shè)計(jì)師和智能手機(jī)APP開發(fā)人員的參考用書，也可以作為培訓(xùn)學(xué)校、大中專院校相關(guān)專業(yè)的教學(xué)參考書或上機(jī)實(shí)踐指導(dǎo)用書。
第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．5．1 團(tuán)隊(duì)成員 12
1．5．2 UI設(shè)計(jì)與項(xiàng)目流程步驟 12
1．6 智能手機(jī)操作系統(tǒng)簡(jiǎn)介 12
1．7 UI界面設(shè)計(jì)常用的軟件 14
1．7．1 Photoshop 14
1．7．2 Illustrator 14
1．7．3 CorelDRAW 14
1．8 UI色彩學(xué)基礎(chǔ)知識(shí) 15
1．8．1 顏色的概念 15
1．8．2 色彩三要素 16
1．8．3 加法混色 17
1．8．4 減法混色 17
1．8．5 補(bǔ)色 17
1．8．6 芒塞爾色彩系統(tǒng)（Munsell Color System） 17
1．9 UI設(shè)計(jì)常見配色方案 18
1．10 UI設(shè)計(jì)配色秘籍 19
1．11 UI設(shè)計(jì)色彩學(xué) 20
1．11．1 色彩與生活 21
1．11．2 色彩意象 21
1．12 精彩UI界面設(shè)計(jì)賞析 23
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 課堂案例—下載按鈕 27
2．3．1 打開素材 27
2．3．2 添加質(zhì)感 27
2．4 課堂案例—簡(jiǎn)潔進(jìn)度條 28
2．4．1 打開素材 28
2．4．2 復(fù)制變換圖形 28
2．5 課堂案例—音量滑動(dòng)條 29
2．5．1 打開素材 29
2．5．2 繪制圖形 30
2．6 課堂案例—圓形開關(guān)按鈕 30
2．6．1 制作背景并繪制圖形 30
2．6．2 添加文字 34
2．7 課堂案例—功能旋鈕 35
2．7．1 制作背景并繪制圖形 35
2．7．2 繪制功能圖像 37
2．7．3 制作立體質(zhì)感 38
2．7．4 繪制指示圖形 40
2．7．5 添加文字 41
2．8 課堂案例—金屬旋鈕 42
2．8．1 制作背景并繪制圖形 42
2．8．2 制作質(zhì)感 44
2．8．3 制作指示標(biāo)記 46
2．8．4 制作滑塊圖形 48
2．8．5 制作插孔 52
2．9 課堂案例—皮革旋鈕 56
2．9．1 制作背景 56
2．9．2 繪制圖形 57
2．9．3 制作控件 60
2．10 課堂案例—品質(zhì)音量控件 64
2．10．1 制作背景 64
2．10．2 制作控件 65
2．10．3 制作細(xì)節(jié) 74
2．11 課堂案例—音頻調(diào)節(jié)控件 76
2．11．1 制作背景并繪制圖形 76
2．11．2 繪制刻度 79
2．11．3 制作控件 82
2．12 本章小結(jié) 86
2．13 課后習(xí)題 86
2．13．1 習(xí)題1—白金質(zhì)感開關(guān)按鈕 86
2．13．2 習(xí)題2—品質(zhì)音量旋鈕 87
2．13．3 習(xí)題3—音量控件 87
第3章 趨勢(shì)流行扁平風(fēng) 88
3．1 理論知識(shí)—扁平化設(shè)計(jì) 89
3．1．1 何為扁平化設(shè)計(jì) 89
3．1．2 扁平化設(shè)計(jì)的優(yōu)缺點(diǎn) 89
3．1．3 扁平化設(shè)計(jì)四大原則 89
3．2 課堂案例—扁平鉛筆圖標(biāo) 91
3．2．1 繪制圖標(biāo) 91
3．2．2 變換圖形 92
3．2．3 繪制細(xì)節(jié) 93
3．2．4 制作陰影 95
3．3 課堂案例—微信圖標(biāo) 97
3．3．1 制作背景 97
3．3．2 繪制圖標(biāo) 98
3．4 課堂案例—淡雅應(yīng)用圖標(biāo)控件 99
3．4．1 制作背景 100
3．4．2 繪制圖形 100
3．4．3 添加素材 103
3．5 課堂案例—扁平化郵箱界面 104
3．5．1 制作背景及狀態(tài)欄 104
3．5．2 添加文字 105
3．6 課堂案例—iOS風(fēng)格音樂(lè)播放器界面 107
3．6．1 制作應(yīng)用界面 107
3．6．2 展示頁(yè)面 113
3．7 課堂案例—社交應(yīng)用登錄框 114
3．7．1 制作背景 115
3．7．2 繪制界面 116
3．8 課堂案例—簡(jiǎn)約風(fēng)天氣APP 118
3．8．1 制作背景 119
3．8．2 添加素材并繪制圖形 119
3．9 課堂案例—個(gè)人應(yīng)用APP界面 121
3．9．1 制作背景 122
3．9．2 繪制界面圖形 122
3．9．3 添加文字并制作細(xì)節(jié) 123
3．9．4 繪制二級(jí)功能頁(yè)面 125
3．10 本章小結(jié) 127
3．11 課后習(xí)題 127
3．11．1 習(xí)題1—便簽圖標(biāo)設(shè)計(jì) 127
3．11．2 習(xí)題2—扁平相機(jī)圖標(biāo) 128
3．11．3 習(xí)題3—天氣Widget 128
第4章 超強(qiáng)表現(xiàn)力之寫實(shí)風(fēng)格 129
4．1 理論知識(shí)—寫實(shí)風(fēng)格解析 130
4．1．1 寫實(shí)的藝術(shù)表現(xiàn)形式 130
4．1．2 UI設(shè)計(jì)的寫實(shí)表現(xiàn) 130
4．2 課堂實(shí)例—寫實(shí)計(jì)算器圖標(biāo) 132
4．2．1 制作背景并繪制圖形 132
4．2．2 添加文字 134
4．2．3 繪制按鍵 135
4．3 課堂實(shí)例—寫實(shí)郵箱圖標(biāo) 137
4．3．1 制作背景并繪制圖形 138
4．3．2 制作高光質(zhì)感 138
4．3．3 制作陰影質(zhì)感 139
4．3．4 繪制細(xì)節(jié)圖像 140
4．3．5 繪制郵筒元素圖像 142
4．4 課堂實(shí)例—寫實(shí)電視圖標(biāo) 145
4．4．1 制作背景并繪制圖形 145
4．4．2 添加素材 147
4．4．3 添加高光質(zhì)感 148
4．5 課堂實(shí)例—寫實(shí)小票圖標(biāo) 152
4．5．1 制作背景并繪制圖形 152
4．5．2 制作鋸齒效果 155
4．5．3 添加文字并制作陰影 155
4．6 課堂實(shí)例—寫實(shí)開關(guān)圖標(biāo) 157
4．6．1 制作背景 157
4．6．2 繪制圖形 158
4．6．3 制作控件 160
4．7 課堂實(shí)例—寫實(shí)牛皮錢包圖標(biāo) 164
4．7．1 制作背景并繪制圖形 164
4．7．2 制作高光質(zhì)感 167
4．7．3 添加素材并制作質(zhì)感 168
4．7．4 制作細(xì)節(jié) 170
4．8 本章小結(jié) 173
4．9 課后習(xí)題 174
4．9．1 習(xí)題1—寫實(shí)手機(jī)圖標(biāo) 174
4．9．2 習(xí)題2—寫實(shí)鬧鐘圖標(biāo) 174
4．9．3 習(xí)題3—寫實(shí)鋼琴圖標(biāo) 174
4．9．4 習(xí)題4—寫實(shí)開關(guān)設(shè)計(jì) 175
第5章 iOS風(fēng)格界面設(shè)計(jì) 176
5．1 理論知識(shí)—認(rèn)識(shí)iOS風(fēng)格 177
5．1．1 iOS的發(fā)展及界面分布 177
5．1．2 認(rèn)識(shí)iOS的控件 177
5．2 課堂案例—蘋果風(fēng)格登錄界面 178
5．2．1 制作背景 179
5．2．2 繪制圖形 179
5．2．3 添加素材 181
5．2．4 繪制文本框 182
5．3 課堂案例—電話界面 184
5．3．1 制作背景并繪制圖形 184
5．3．2 添加文字 186
5．3．3 制作界面元素 187
5．3．4 添加素材 188
5．4 課堂案例—用戶界面 191
5．4．1 制作背景 191
5．4．2 添加素材 195
5．4．3 繪制圖形 197
5．4．4 添加素材及文字 200
5．4．5 繪制擬物圖形 204
5．5 課堂案例—會(huì)員登錄框界面 208
5．5．1 制作背景并繪制圖形 208
5．5．2 添加文字并繪制文本框圖形 210
5．6 課堂案例—翻頁(yè)登錄界面 215
5．6．1 制作背景 215
5．6．2 繪制圖形 215
5．6．3 制作界面細(xì)節(jié) 217
5．7 本章小結(jié) 220
5．8 課后習(xí)題 220
5．8．1 習(xí)題1—攝影網(wǎng)站會(huì)員登錄 220
5．8．2 習(xí)題2—iPod應(yīng)用登錄界面 221
5．8．3 習(xí)題3—木質(zhì)登錄界面 221
第6章 精品極致圖標(biāo)制作 222
6．1 理論知識(shí)—了解圖標(biāo) 223
6．1．1 圖標(biāo)的分類 223
6．1．2 圖標(biāo)的作用 223
6．1．3 圖標(biāo)的格式 223
6．1．4 圖標(biāo)和圖像大小 224
6．1．5 精美APP圖標(biāo)欣賞 226
6．2 課堂案例—簡(jiǎn)潔羅盤圖標(biāo) 226
6．2．1 制作背景并繪制圖形 226
6．2．2 繪制表座 228
6．2．3 繪制指針 229
6．3 課堂案例—簡(jiǎn)潔進(jìn)程圖標(biāo) 230
6．3．1 制作背景并添加圖像 231
6．3．2 繪制圖形 231
6．4 課堂案例—唱片機(jī)圖標(biāo) 232
6．4．1 制作背景并繪制圖形 233
6．4．2 制作紋理圖像 234
6．4．3 繪制托盤 236
6．4．4 繪制卡座 239
6．4．5 繪制線纜圖形 239
6．5 課堂案例—濕度計(jì)圖標(biāo) 240
6．5．1 制作背景并繪制圖形 240
6．5．2 定義筆觸并設(shè)置 243
6．5．3 繪制刻度圖形 244
6．6 課堂案例—小黃人圖標(biāo) 246
6．6．1 制作背景并繪制圖形 246
6．6．2 制作圖標(biāo)元素 248
6．6．3 繪制眼鏡圖形 249
6．6．4 繪制嘴巴圖形 255
6．7 課堂案例—流量計(jì)圖標(biāo) 257
6．7．1 制作背景并繪制圖形 257
6．7．2 定義筆觸 259
6．7．3 繪制指針 261
6．8 課堂案例—清新郵件圖標(biāo) 262
6．8．1 制作背景并繪制圖形 262
6．8．2 繪制鎖扣圖形 264
6．9 課堂案例—清新音樂(lè)圖標(biāo) 265
6．9．1 制作背景并繪制圖形 266
6．9．2 制作光盤圖形 266
6．10 課堂案例—下載圖標(biāo) 267
6．10．1 制作背景并繪制圖形 267
6．10．2 制作圖標(biāo)元素 269
6．11 本章小結(jié) 272
6．12 課后習(xí)題 272
6．12．1 習(xí)題1—清新日歷圖標(biāo) 272
6．12．2 習(xí)題2—進(jìn)度圖標(biāo) 273
6．12．3 習(xí)題3—日歷和天氣圖標(biāo) 273
6．12．4 習(xí)題4—指南針圖標(biāo) 274
第7章 流行界面設(shè)計(jì)薈萃 275
7．1 理論知識(shí)—UI界面設(shè)計(jì)尺寸 276
7．1．1 iPhone和Android設(shè)計(jì)尺寸 276
7．1．2 Android 系統(tǒng)換算及主流手機(jī)設(shè)置 277
7．2 課堂案例—天氣界面 279
7．2．1 制作背景 279
7．2．2 繪制第1個(gè)界面 280
7．2．3 添加文字及素材 280
7．2．4 繪制第2個(gè)界面 283
7．3 課堂案例—票券APP界面 284
7．3．1 制作背景并繪制狀態(tài)欄 284
7．3．2 添加素材 285
7．3．3 添加文字 286
7．3．4 繪制按鈕圖形 287
7．3．5 添加文字及素材 288
7．4 課堂案例—下載數(shù)據(jù)界面 290
7．4．1 制作背景并繪制狀態(tài)欄 290
7．4．2 繪制圖形 290
7．4．3 添加文字 291
7．5 課堂案例—游戲界面 294
7．5．1 制作背景 294
7．5．2 繪制界面 296
7．5．3 繪制界面元素 297
7．5．4 添加文字 298
7．5．5 制作按鈕控件 302
7．6 課堂案例—APP游戲個(gè)人界面 307
7．6．1 創(chuàng)建畫布并添加素材 307
7．6．2 添加文字 309
7．6．3 添加圖標(biāo) 311
7．7 課堂案例—iOS風(fēng)格電臺(tái)界面 312
7．7．1 制作背景并制作狀態(tài)欄 312
7．7．2 制作界面元素 312
7．7．3 制作界面細(xì)節(jié) 317
7．7．4 添加素材 318
7．8 本章小結(jié) 320
7．9 課后習(xí)題 320
7．9．1 習(xí)題1—影視播放界面 320
7．9．2 習(xí)題2—美食應(yīng)用APP界面 320
7．9．3 習(xí)題3—經(jīng)典音樂(lè)播放器界面 321
第8章 綜合設(shè)計(jì)實(shí)戰(zhàn) 322
8．1 課堂案例—精致CD控件 323
8．1．1 制作背景并繪制圖形 323
8．1．2 繪制旋鈕 324
8．1．3 制作質(zhì)感 325
8．1．4 制作細(xì)節(jié) 327
8．1．5 添加文字 329
8．2 課堂案例—信息接收控件 330
8．2．1 制作背景并繪制圖形 330
8．2．2 制作控件元素 332
8．2．3 添加文字 333
8．3 課堂案例—天氣信息控件 334
8．3．1 制作背景 334
8．3．2 繪制界面 336
8．3．3 添加文字 345
8．4 課堂案例—Windows Phone界面 346
8．4．1 制作背景 346
8．4．2 繪制圖形 347
8．4．3 添加文字及素材 349
8．5 課堂案例—APP游戲下載頁(yè) 351
8．5．1 制作背景并添加素材 352
8．5．2 繪制圖形 352
8．5．3 繪制細(xì)節(jié)圖形 354
8．6 課堂案例—APP游戲安裝頁(yè) 355
8．6．1 制作背景并繪制圖形 356
8．6．2 添加素材并繪制圖形 356
8．6．3 添加文字 357
8．6．4 添加素材 357
8．7 本章小結(jié) 359
8．8 課后習(xí)題 359
8．8．1 習(xí)題1—點(diǎn)餐APP界面 359
8．8．2 習(xí)題2—概念手機(jī)界面 360
書單推薦
