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