第 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　課后練習——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　課后練習——制作配色卡．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　課后練習——用快捷鍵熟練控制視圖以提高工作效率　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　課后練習——制作鬧鐘圖標　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　課后練習——制作短信圖標　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　制作電源風格按鈕　168
6．3　課后練習——制作糖果按鈕　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　半透明導航的跟蹤運用　187
7．2．3　使用較小的透明模塊來襯托187
案例1　登錄界面　188
案例2　設(shè)置界面開關(guān)　192
案例3　通知列表界面　198
案例4　日歷界面　203
案例5　對話框界面　209
案例6　調(diào)整面板　212
7．3　課后練習——制作搜索界面　220
7．4　課后思考——怎樣解決線條的鋸齒問題　227
第　08 章 設(shè)計手機UI控件
8．1　控件的設(shè)計原則230
8．1．1　進度條的設(shè)計建議　230
8．1．2　導航列表的設(shè)計建議　230
案例1　進度條 ．232
案例2　音量設(shè)置圖標　243
案例3　選項按鈕　254
案例4　Wi-Fi標志　262
案例5　藍牙標志　266
案例6　上傳界面　269
案例7　菜單界面按鈕　275
案例8　通知列表界面　278
8．2　課后練習——制作導航界面　285
8．3　課后思考——如何合理地設(shè)計進度條　290
第　09 章 制作手機軟件界面
9．1　手機軟件界面的概念　293
9．2　蘋果、安卓和WP系統(tǒng)軟件的區(qū)別　293
案例1　制作美拍界面　294
案例2　制作我愛記單詞界面　300
案例3　制作計算器界面　307
9．3　課后練習——制作天氣預報界面　310
9．4　課后思考——你對你的用戶群了解嗎？　318
第　10 章 制作播放器界面
10．1　各種風格的播放器界面　321
10．2　寬大的背景面板　321
10．3　突出的質(zhì)感　321
10．4　濃郁的色調(diào)　321
10．5　清晰的邊緣　321
案例1　制作視頻播放器圖標　322
案例2　制作震撼的金屬質(zhì)感的播放器圖標　325
10．6　課后練習——制作播放器皮膚　331
10．7　課后思考——UI設(shè)計師如何自我提升？　339
第　11 章 制作手機游戲界面
11．1　手機游戲界面概述　344
11．2　手機游戲界面的設(shè)計方法　344
案例　制作威龍戰(zhàn)士游戲界面　345
11．3　課后練習——制作大魚吃小魚游戲界面　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　課后練習——制作一組清新的界面設(shè)計　400
12．5　課后思考——借助設(shè)計資源來提高自身能力407