本書以Photoshop UI圖標(biāo)制作和界面交互設(shè)計(jì)為基礎(chǔ), 通過47個(gè)學(xué)習(xí)型案例, 以及24個(gè)課后練習(xí)和課后思考, 重點(diǎn)介紹了熱門的手機(jī)APP UI的基礎(chǔ)知識(shí)和設(shè)計(jì)技巧, 并通過講解安卓手機(jī)和蘋果手機(jī)整體界面的制作, 更深入闡述了手機(jī)APP UI設(shè)計(jì)的應(yīng)用知識(shí)。全書案例講解與知識(shí)點(diǎn)相結(jié)合, 具有很強(qiáng)的實(shí)用性, 能幫助讀者在ZUI短的時(shí)間內(nèi)精通軟件使用方法。 全書共12章, 包括智能手機(jī)UI設(shè)計(jì)基礎(chǔ)、APP界面設(shè)計(jì)的色彩理論、熟悉Photoshop的常用工具、制作平面圖標(biāo)、制作立體圖標(biāo)、制作按鈕、制作局部界面元素、設(shè)計(jì)手機(jī)UI控件、制作手機(jī)軟件界面、制作播放器界面、制作手機(jī)游戲界面及制作智能手機(jī)UI整體界面等內(nèi)容。
第 01 章 智能手機(jī)UI設(shè)計(jì)基礎(chǔ)
1．1 APP UI設(shè)計(jì)相關(guān)知識(shí) 11
1．1．1 什么是APP UI設(shè)計(jì) 11
1．1．2 做APP UI設(shè)計(jì)的目的和重要性 11
1．1．3 APP UI設(shè)計(jì)中的重要元素 11
1．1．4 平面UI與手機(jī)UI的不同 13
1．2 UI設(shè)計(jì)原則 14
1．2．1 區(qū)分重點(diǎn) 14
1．2．2 界面統(tǒng)一性 15
1．2．3 清晰度是重中之重 15
1．2．4 界面存在的意義 16
1．2．5 讓界面處在用戶的掌握之中 16
1．2．6 界面的存在必須有所用途 16
1．2．7 強(qiáng)烈的視覺層次感 17
1．2．8 UI設(shè)計(jì)師如何展示他的價(jià)值 17
1．3 關(guān)于智能手機(jī) 18
1．3．1 智能手機(jī)操作系統(tǒng)的分類 18
1．3．2 手機(jī)屏幕的分辨率 20
1．3．3 屏幕的色彩 20
1．4 課后練習(xí)——UI設(shè)計(jì)的流程 21
1．5 課后思考——優(yōu)秀的手機(jī)UI界面有哪些特點(diǎn) 22
第 02 章 APP界面設(shè)計(jì)的色彩理論
2．1 色彩的意象 24
2．1．1 紅色的色彩意象 24
2．1．2 橙色的色彩意象 24
2．1．3 黃色的色彩意象 24
2．1．4 綠色的色彩意象 24
2．1．5 藍(lán)色的色彩意象 25
2．1．6 紫色的色彩意象 25
2．1．7 褐色的色彩意象 25
2．1．8 黑色的色彩意象 25
2．1．9 白色的色彩意象 25
2．1．10 灰色的色彩意象 25
2．2 色彩的重要性 26
2．2．1 色彩的物理效應(yīng) 26
2．2．2 色彩的心理反應(yīng) 26
2．3 色彩的屬性 27
2．3．1 色彩的分類 27
2．3．2 色相 27
2．3．3 明度 27
2．3．4 飽和度 28
2．3．5 色調(diào) 28
2．4 色彩的搭配原則 28
2．4．1 色相配色 29
2．4．2 色調(diào)配色 29
2．4．3 明度配色 30
2．5 課后練習(xí)——制作配色卡．31
2．6 課后思考——如何找到完美的色彩搭配 32
第 03 章 熟悉Photoshop的常用工具
3．1 Photoshop CC的工作界面 40
3．1．1 了解工作界面的工作組件 40
3．1．2 了解工具箱 41
3．1．3 了解選項(xiàng)欄 41
3．1．4 了解狀態(tài)欄 43
3．1．5 了解面板 44
3．1．6 調(diào)整面板 45
3．2 選擇工具46
3．2．1 設(shè)定選區(qū)的工作組 46
3．2．2 矩形選框工具的選項(xiàng)欄 47
3．2．3 磁性套索工具的選項(xiàng)欄 48
3．2．4 魔棒工具的選項(xiàng)欄 49
案例1 利用多邊形套索工具繪制立體盒子 50
3．3 填充工具 51
3．3．1 漸變工具的選項(xiàng)欄 52
3．3．2 油漆桶工具的選項(xiàng)欄 54
案例2 使用漸變工具填充圖像顏色 55
3．4 圖層的編輯 56
3．4．1 理解圖層的概念 56
3．4．2 圖層編組命令 57
3．4．3 排列命令 57
3．4．4 自動(dòng)對(duì)齊圖層命令 58
案例3 調(diào)整圖層的不透明度 58
3．5 蒙版的應(yīng)用 59
3．5．1 “屬性”面板 60
3．5．2 圖層蒙版的原理 61
3．5．3 圖層蒙版的編輯 62
3．5．4 矢量蒙版 62
3．5．5 剪貼蒙版 62
3．5．6 快速創(chuàng)建與釋放剪貼蒙版 63
案例4 創(chuàng)建矢量蒙版 63
3．6 課后練習(xí)——用快捷鍵熟練控制視圖以提高工作效率 64
3．7 課后思考——怎樣更好地應(yīng)用圖層樣式 65
第 04 章 制作平面圖標(biāo)
4．1 圖標(biāo)尺寸大小 67
4．2 如何設(shè)計(jì)一組圖標(biāo) 67
4．3 圖標(biāo)設(shè)計(jì)的格式和大小 73
4．3．1 JPEG格式 73
4．3．2 PNG格式 73
4．3．3 GIF格式 73
案例1 制作Home圖標(biāo) 74
案例2 制作日歷圖標(biāo) 76
案例3 制作錄音機(jī)圖標(biāo) 78
案例4 制作文件夾圖標(biāo) 80
案例5 制作徽章圖形 82
案例6 制作秒表圖形 85
案例7 制作桃心圖形 89
案例8 制作可回收資源圖標(biāo) 91
4．4 課后練習(xí)——制作鬧鐘圖標(biāo) 93
4．5 課后思考——如何快速制作一組圖標(biāo) 98
第 05 章 制作立體圖標(biāo)
5．1 如何讓圖標(biāo)更具吸引力 100
5．2 立體圖標(biāo)的設(shè)計(jì)原則 100
案例1 制作Dribbble圖標(biāo) 101
案例2 制作天氣圖標(biāo) 105
案例3 制作Chrome圖標(biāo) 110
案例4 制作twieet圖標(biāo) 113
案例5 制作照相機(jī)圖標(biāo) 117
案例6 制作攝像頭圖標(biāo) 121
5．3 課后練習(xí)——制作短信圖標(biāo) 130
5．4 課后思考——怎樣設(shè)計(jì)一個(gè)立體圖標(biāo) 132
第 06 章 制作按鈕
6．1 如何設(shè)計(jì)和諧的交互 134
6．2 設(shè)計(jì)師關(guān)于按鈕設(shè)計(jì)的幾點(diǎn)建議 135
案例1 制作發(fā)光按鈕 136
案例2 制作控制鍵按鈕 140
案例3 制作播放器按鈕 144
案例4 制作清新開關(guān)按鈕 156
案例5 制作高調(diào)旋鈕 163
案例6 制作電源風(fēng)格按鈕 168
6．3 課后練習(xí)——制作糖果按鈕 176
6．4 課后思考——按鈕設(shè)計(jì)的技巧和方法 182
第 07 章 制作局部界面元素
7．1 關(guān)于局部界面設(shè)計(jì)的幾點(diǎn)建議 185
7．1．1 盡量控制質(zhì)感的表現(xiàn) 185
7．1．2 在繁簡(jiǎn)之間做選擇185
7．1．3 不要忘記功能的表現(xiàn) 186
7．2 關(guān)于透明元素和透明度使用的藝術(shù) 186
7．2．1 內(nèi)容模塊和網(wǎng)站框架的對(duì)比 186
7．2．2 半透明導(dǎo)航的跟蹤運(yùn)用 187
7．2．3 使用較小的透明模塊來襯托187
案例1 登錄界面 188
案例2 設(shè)置界面開關(guān) 192
案例3 通知列表界面 198
案例4 日歷界面 203
案例5 對(duì)話框界面 209
案例6 調(diào)整面板 212
7．3 課后練習(xí)——制作搜索界面 220
7．4 課后思考——怎樣解決線條的鋸齒問題 227
第 08 章 設(shè)計(jì)手機(jī)UI控件
8．1 控件的設(shè)計(jì)原則230
8．1．1 進(jìn)度條的設(shè)計(jì)建議 230
8．1．2 導(dǎo)航列表的設(shè)計(jì)建議 230
案例1 進(jìn)度條 ．232
案例2 音量設(shè)置圖標(biāo) 243
案例3 選項(xiàng)按鈕 254
案例4 Wi-Fi標(biāo)志 262
案例5 藍(lán)牙標(biāo)志 266
案例6 上傳界面 269
案例7 菜單界面按鈕 275
案例8 通知列表界面 278
8．2 課后練習(xí)——制作導(dǎo)航界面 285
8．3 課后思考——如何合理地設(shè)計(jì)進(jìn)度條 290
第 09 章 制作手機(jī)軟件界面
9．1 手機(jī)軟件界面的概念 293
9．2 蘋果、安卓和WP系統(tǒng)軟件的區(qū)別 293
案例1 制作美拍界面 294
案例2 制作我愛記單詞界面 300
案例3 制作計(jì)算器界面 307
9．3 課后練習(xí)——制作天氣預(yù)報(bào)界面 310
9．4 課后思考——你對(duì)你的用戶群了解嗎？ 318
第 10 章 制作播放器界面
10．1 各種風(fēng)格的播放器界面 321
10．2 寬大的背景面板 321
10．3 突出的質(zhì)感 321
10．4 濃郁的色調(diào) 321
10．5 清晰的邊緣 321
案例1 制作視頻播放器圖標(biāo) 322
案例2 制作震撼的金屬質(zhì)感的播放器圖標(biāo) 325
10．6 課后練習(xí)——制作播放器皮膚 331
10．7 課后思考——UI設(shè)計(jì)師如何自我提升？ 339
第 11 章 制作手機(jī)游戲界面
11．1 手機(jī)游戲界面概述 344
11．2 手機(jī)游戲界面的設(shè)計(jì)方法 344
案例 制作威龍戰(zhàn)士游戲界面 345
11．3 課后練習(xí)——制作大魚吃小魚游戲界面 352
11．4 課后思考——良好界面設(shè)計(jì)的幾大特點(diǎn) 358
第 12 章 制作智能手機(jī)UI整體界面
12．1 界面設(shè)計(jì)的核心 362
12．2 Apple和Android移動(dòng)端尺寸指南 363
12．3 iOS 扁平化系統(tǒng)的特色 364
案例1 蘋果手機(jī)界面總體設(shè)計(jì) 366
案例2 Android手機(jī)界面總體設(shè)計(jì) 375
案例3 Windows Phone手機(jī)界面總體設(shè)計(jì) 387
12．4 課后練習(xí)——制作一組清新的界面設(shè)計(jì) 400
12．5 課后思考——借助設(shè)計(jì)資源來提高自身能力407
書單推薦
