Photoshop CC APP UI設(shè)計(jì)從入門到精通

目錄
第1篇UI設(shè)計(jì)入門
第01章 APP UI設(shè)計(jì)新手入門
1．1 概念解讀：認(rèn)識(shí)APP UI設(shè)計(jì)\t9
1．1．1 UI設(shè)計(jì)：人和工具之間的界面\t9
1．1．2 APP UI：用戶和手機(jī)之間的界面\t9
1．1．3 設(shè)計(jì)特點(diǎn)：小巧輕便、通信便捷\t10
1．1．4 設(shè)計(jì)基礎(chǔ)：熟悉手機(jī)的界面特色\t12
1．1．5 視覺(jué)效果：為用戶帶來(lái)不一樣的美感\(zhòng)t13
1．2 APP平臺(tái)：主流手機(jī)操作系統(tǒng)\t16
1．2．1 谷歌Android系統(tǒng)\t16
1．2．2 蘋果iOS系統(tǒng)\t18
1．2．3 微軟Windows Phone系統(tǒng)\t19
1．3 入門基礎(chǔ)：手機(jī)界面與設(shè)計(jì)流程\t21
1．3．1 手機(jī)界面：品類繁多、特點(diǎn)各異\t21
1．3．2 平板界面：操作方便、性能優(yōu)越\t23
1．3．3 階段分析：APP UI設(shè)計(jì)的基本流程\t25
1．3．4 使用要點(diǎn)：APP UI設(shè)計(jì)的色彩與圖案\t25
第02章 APP UI設(shè)計(jì)的特性
2．1 移動(dòng)應(yīng)用：良好的用戶體驗(yàn)特性\t28
2．1．1 高便攜性：便于用戶隨身攜帶\t28
2．1．2 反饋特性：幫助及時(shí)改進(jìn)APP\t29
2．1．3 定制特性：進(jìn)一步提升交互性\t31
2．1．4 簡(jiǎn)約特性：直擊用戶主要需求\t31
2．1．5 社交特性：更多的登錄和分享\t33
2．1．6 離線特性：使APP擺脫網(wǎng)絡(luò)限制\t34
2．1．7 游戲特性：增強(qiáng)APP的趣味性\t35
2．1．8 獨(dú)具特色：獨(dú)具一格的特性\t36
2．2 交互動(dòng)作：降低用戶與手機(jī)的溝通門檻\t36
2．2．1 循環(huán)動(dòng)作：使動(dòng)畫效果更加真實(shí)\t37
2．2．2 重復(fù)動(dòng)作：解釋各UI元素的關(guān)系\t38
2．2．3 關(guān)鍵動(dòng)作：適用于較復(fù)雜的動(dòng)作\t38
2．2．4 連續(xù)動(dòng)作：制作較簡(jiǎn)易的動(dòng)態(tài)效果\t38
2．2．5 夸張?jiān)瓌t：運(yùn)用無(wú)窮的想象力\t39
2．3 文字特性：符合用戶的閱讀習(xí)慣\t39
2．3．1 界面文字要容易識(shí)別\t39
2．3．2 把握文字的視覺(jué)效果\t40
2．3．3 字體與大小要有規(guī)律\t41
2．3．4 流暢閱讀的文字間距\t42
2．3．5 采用交替的文字色彩\t42
第03章 Photoshop CC的UI常用操作
3．1 熟悉Photoshop CC工作界面\t45
3．1．1 認(rèn)識(shí)菜單欄\t45
3．1．2 認(rèn)識(shí)狀態(tài)欄\t46
3．1．3 認(rèn)識(shí)工具屬性欄\t47
3．1．4 認(rèn)識(shí)工具箱\t48
3．1．5 認(rèn)識(shí)圖像編輯窗口\t48
3．1．6 認(rèn)識(shí)浮動(dòng)控制面板\t48
3．2 Photoshop CC APP UI設(shè)計(jì)入門\t49
3．2．1 打開(kāi)APP UI圖像文件\t49
3．2．2 放大與縮小顯示APP UI圖像\t50
3．2．3 運(yùn)用輔助工具設(shè)計(jì)APP UI圖像\t50
3．2．4 運(yùn)用工具裁剪APP UI圖像\t52
3．2．5 變換與編輯APP UI圖像\t53
3．3 APP UI圖像的摳取與合成\t55
3．3．1 運(yùn)用快速選擇工具摳圖\t55
3．3．2 運(yùn)用魔棒工具摳圖\t56
3．3．3 運(yùn)用矩形選框工具摳圖\t57
3．3．4 運(yùn)用磁性套索工具摳圖\t58
3．3．5 運(yùn)用魔術(shù)橡皮擦工具摳圖\t60
3．3．6 運(yùn)用自由鋼筆工具摳圖\t61
3．4 APP UI的色彩設(shè)計(jì)\t63
3．4．1 自動(dòng)校正移動(dòng)APP UI圖像色彩\t63
3．4．2 運(yùn)用“亮度/對(duì)比度”命令調(diào)整APP UI圖像\t64
3．4．3 運(yùn)用“色相/飽和度”命令調(diào)整APP UI圖像\t65
3．5 APP UI的文字編排設(shè)計(jì)\t67
3．5．1 輸入橫排APP UI圖像文字\t67
3．5．2 輸入直排APP UI圖像文字\t67
3．5．3 輸入段落APP UI圖像文字\t69
3．5．4 設(shè)置APP UI文字屬性\t70
3．5．5 創(chuàng)建APP UI變形文字效果\t71
第2篇 APP UI進(jìn)階
第04章 設(shè)計(jì)APP UI圖標(biāo)
4．1 音樂(lè)APP圖標(biāo)設(shè)計(jì)\t73
4．1．1 設(shè)計(jì)音樂(lè)APP圖標(biāo)背景效果\t73
4．1．2 設(shè)計(jì)音樂(lè)APP圖標(biāo)主體效果\t74
4．2 郵箱APP圖標(biāo)設(shè)計(jì)\t75
4．2．1 設(shè)計(jì)郵箱APP圖標(biāo)背景效果\t76
4．2．2 設(shè)計(jì)郵箱APP圖標(biāo)主體效果\t77
4．3 視頻APP圖標(biāo)設(shè)計(jì)\t78
4．3．1 設(shè)計(jì)視頻APP圖標(biāo)背景效果\t78
4．3．2 設(shè)計(jì)視頻APP圖標(biāo)細(xì)節(jié)效果\t82
第05章 設(shè)計(jì)APP UI圖形
5．1 操作鼠標(biāo)形狀設(shè)計(jì)\t88
5．1．1 設(shè)計(jì)形狀主體效果\t88
5．1．2 設(shè)計(jì)形狀細(xì)節(jié)效果\t92
5．2 APP標(biāo)題文字設(shè)計(jì)\t95
5．2．1 設(shè)計(jì)APP標(biāo)題文字效果\t96
5．2．2 設(shè)計(jì)APP標(biāo)題主體效果\t98
5．3 登錄背景圖形設(shè)計(jì)\t100
5．3．1 設(shè)計(jì)登錄背景圖形主體效果\t101
5．3．2 設(shè)計(jì)登錄背景圖形細(xì)節(jié)效果\t103
第06章 設(shè)計(jì)APP UI按鈕
6．1 APP登錄按鈕設(shè)計(jì)\t107
6．1．1 制作APP登錄按鈕背景效果\t107
6．1．2 制作APP登錄按鈕主體效果\t110
6．2 開(kāi)始游戲按鈕設(shè)計(jì)\t114
6．2．1 制作開(kāi)始游戲按鈕主體效果\t114
6．2．2 制作開(kāi)始游戲按鈕文字效果\t117
6．3 APP命令按鈕設(shè)計(jì)\t119
6．3．1 制作APP命令按鈕主體效果\t120
6．3．2 制作APP菜單按鈕細(xì)節(jié)效果\t123
6．3．3 制作APP菜單按鈕文本效果\t124
第07章 設(shè)計(jì)APP UI進(jìn)度條、滑塊、切換條
7．1 進(jìn)度條設(shè)計(jì)\t127
7．1．1 制作進(jìn)度條主體效果\t127
7．1．2 制作進(jìn)度條細(xì)節(jié)效果\t130
7．2 解鎖滑塊設(shè)計(jì)\t133
7．2．1 制作解鎖滑塊主體效果\t134
7．2．2 制作解鎖滑塊細(xì)節(jié)效果\t136
7．3 切換條設(shè)計(jì)\t141
7．3．1 制作切換條背景效果\t141
7．3．2 制作切換條細(xì)節(jié)效果\t144
第08章 設(shè)計(jì)APP UI功能框
8．1 會(huì)話框設(shè)計(jì)\t148
8．1．1 制作會(huì)話框頭像效果\t148
8．1．2 制作會(huì)話框主體效果\t150
8．2 搜索框設(shè)計(jì)\t153
8．2．1 制作搜索框主體效果\t153
8．2．2 制作搜索框細(xì)節(jié)效果\t155
8．3 對(duì)話框設(shè)計(jì)\t157
8．3．1 制作對(duì)話框主體效果\t158
8．3．2 制作對(duì)話框文字效果\t161
第09章 設(shè)計(jì)APP UI導(dǎo)航、標(biāo)簽、列表
9．1 標(biāo)簽欄設(shè)計(jì)\t165
9．1．1 制作標(biāo)簽欄背景效果\t165
9．1．2 制作標(biāo)簽欄文本效果\t168
9．2 導(dǎo)航欄設(shè)計(jì)\t169
9．2．1 制作導(dǎo)航欄背景效果\t170
9．2．2 制作導(dǎo)航欄圖標(biāo)效果\t171
9．2．3 制作導(dǎo)航欄文字效果\t176
9．3 屏幕待機(jī)列表設(shè)計(jì)\t177
9．3．1 制作列表主體效果\t177
9．3．2 制作列表細(xì)節(jié)效果\t181
第3篇 APP綜合實(shí)戰(zhàn)
第10章 手機(jī)系統(tǒng)類UI設(shè)計(jì)
10．1 智能撥號(hào)界面設(shè)計(jì)\t187
10．1．1 制作智能撥號(hào)界面主體效果\t187
10．1．2 制作智能撥號(hào)界面細(xì)節(jié)效果\t189
10．2 應(yīng)用程序界面設(shè)計(jì)\t190
10．2．1 設(shè)計(jì)應(yīng)用程序界面主體效果\t191
10．2．2 設(shè)計(jì)安卓應(yīng)用程序整體效果\t195
10．3 磁盤清理界面設(shè)計(jì)\t201
10．3．1 設(shè)計(jì)磁盤清理界面主體效果\t202
10．3．2 設(shè)計(jì)磁盤清理界面細(xì)節(jié)效果\t206
第11章 社交通信類APP界面設(shè)計(jì)
11．1 手機(jī)社區(qū)APP界面設(shè)計(jì)\t211
11．1．1 制作手機(jī)社區(qū)APP主體效果\t211
11．1．2 制作手機(jī)社區(qū)APP文字效果\t214
11．2 手機(jī)空間APP界面設(shè)計(jì)\t217
11．2．1 制作手機(jī)空間APP主體效果\t218
11．2．2 制作手機(jī)空間APP細(xì)節(jié)效果\t220
11．3 云社交APP界面設(shè)計(jì)\t223
11．3．1 制作云社交APP背景效果\t224
11．3．2 制作云社交APP文字效果\t227
第12章 工具應(yīng)用類APP界面設(shè)計(jì)
12．1 移動(dòng)WiFi登錄界面設(shè)計(jì)\t231
12．1．1 制作WiFi登錄界面背景效果\t231
12．1．2 制作WiFi登錄界面主體效果\t233
12．2 天氣預(yù)報(bào)APP界面設(shè)計(jì)\t236
12．2．1 制作天氣預(yù)報(bào)APP界面背景效果\t236
12．2．2 制作天氣預(yù)報(bào)APP界面主體效果\t239
12．3 照片美化APP界面設(shè)計(jì)\t240
12．3．1 制作照片美化APP界面主體效果\t241
12．3．2 制作照片美化APP界面文字效果\t243
第13章 影音娛樂(lè)類APP界面設(shè)計(jì)
13．1 視頻播放APP界面設(shè)計(jì)\t245
13．1．1 制作視頻播放APP界面主體效果\t245
13．1．2 制作視頻播放APP界面細(xì)節(jié)效果\t246
13．2 音樂(lè)播放APP界面設(shè)計(jì) \t248
13．2．1 制作音樂(lè)播放APP界面主體效果\t248
13．2．2 制作音樂(lè)播放APP界面細(xì)節(jié)效果\t251
13．3 休閑游戲APP界面設(shè)計(jì)\t251
13．3．1 制作休閑游戲APP界面主體效果\t252
13．3．2 制作休閑游戲APP界面細(xì)節(jié)效果\t255