Photoshop手機APP界面設計從入門到精通

第 01 章 智能手機UI設計基礎

1.1　APP UI設計相關知識　11

1.1.1　什麽是APP UI設計　11

1.1.2　做APP UI設計的目的和重要性　11

1.1.3　APP UI設計中的重要元素　11

1.1.4　平面UI與手機UI的不同　13

1.2　UI設計原則　14

1.2.1　區分重點　14

1.2.2　界面統一性　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設計師如何展示他的價值　17

1.3　關於智能手機　18

1.3.1　智能手機操作系統的分類　18

1.3.2　手機屏幕的分辨率　20

1.3.3　屏幕的色彩　20

1.4　課後練習——UI設計的流程　21

1.5　課後思考——優 秀的手機UI界面有哪些特點　22

第　02 章 APP界面設計的色彩理論

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　色彩的物理效應　26

2.2.2　色彩的心理反應　26

2.3　色彩的屬性　27

2.3.1　色彩的分類　27

2.3.2　色相　27

2.3.3　明度　27

2.3.4　飽和度　28

2.3.5　色調　28

2.4　色彩的搭配原則　28

2.4.1　色相配色　29

2.4.2　色調配色　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　瞭解狀態欄　43

3.1.5　瞭解面板　44

3.1.6　調整面板　45

3.2　選擇工具46

3.2.1　設定選區的工作組　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　調整圖層的不透明度　58

3.5　蒙版的應用　59

3.5.1　“屬性”面板　60

3.5.2　圖層蒙版的原理　61

3.5.3　圖層蒙版的編輯　62

3.5.4　矢量蒙版　62

3.5.5　剪貼蒙版　62

3.5.6　快速創建與釋放剪貼蒙版　63

案例4　創建矢量蒙版　63

3.6　課後練習——用快捷鍵熟練控制視圖以提高工作效率　64

3.7　課後思考——怎樣更好地應用圖層樣式　65

第　04 章 製作平面圖標

4.1　圖標尺寸大小　67

4.2　如何設計一組圖標　67

4.3　圖標設計的格式和大小　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　立體圖標的設計原則　100

案例1　製作Dribbble圖標　101

案例2　製作天氣圖標　105

案例3　製作Chrome圖標　110

案例4　製作twieet圖標　113

案例5　製作照相機圖標　117

案例6　製作攝像頭圖標　121

5.3　課後練習——製作短信圖標　130

5.4　課後思考——怎樣設計一個立體圖標　132

第　06 章 製作按鈕

6.1　如何設計和諧的交互　134

6.2　設計師關於按鈕設計的幾點建議　135

案例1　製作發光按鈕　136

案例2　製作控制鍵按鈕　140

案例3　製作播放器按鈕　144

案例4　製作清新開關按鈕　156

案例5　製作高調旋鈕　163

案例6　製作電源風格按鈕　168

6.3　課後練習——製作糖果按鈕　176

6.4　課後思考——按鈕設計的技巧和方法　182

第　07 章 製作局部界面元素

7.1　關於局部界面設計的幾點建議　185

7.1.1　盡量控制質感的表現　185

7.1.2　在繁簡之間做選擇185

7.1.3　不要忘記功能的表現　186

7.2　關於透明元素和透明度使用的藝術　186

7.2.1　內容模塊和網站框架的對比　186

7.2.2　半透明導航的跟蹤運用　187

7.2.3　使用較小的透明模塊來襯托187

案例1　登錄界面　188

案例2　設置界面開關　192

案例3　通知列表界面　198

案例4　日歷界面　203

案例5　對話框界面　209

案例6　調整面板　212

7.3　課後練習——製作搜索界面　220

7.4　課後思考——怎樣解決線條的鋸齒問題　227

第　08 章 設計手機UI控件

8.1　控件的設計原則230

8.1.1　進度條的設計建議　230

8.1.2　導航列表的設計建議　230

案例1　進度條 .232

案例2　音量設置圖標　243

案例3　選項按鈕　254

案例4　Wi-Fi標志　262

案例5　藍牙標志　266

案例6　上傳界面　269

案例7　菜單界面按鈕　275

案例8　通知列表界面　278

8.2　課後練習——製作導航界面　285

8.3　課後思考——如何合理地設計進度條　290

第　09 章 製作手機軟件界面

9.1　手機軟件界面的概念　293

9.2　蘋果、安卓和WP系統軟件的區別　293

案例1　製作美拍界面　294

案例2　製作我愛記單詞界面　300

案例3　製作計算器界面　307

9.3　課後練習——製作天氣預報界面　310

9.4　課後思考——你對你的用戶群瞭解嗎？　318

第　10 章 製作播放器界面

10.1　各種風格的播放器界面　321

10.2　寬大的背景面板　321

10.3　突出的質感　321

10.4　濃鬱的色調　321

10.5　清晰的邊緣　321

案例1　製作視頻播放器圖標　322

案例2　製作震撼的金屬質感的播放器圖標　325

10.6　課後練習——製作播放器皮膚　331

10.7　課後思考——UI設計師如何自我提升？　339

第　11 章 製作手機游戲界面

11.1　手機游戲界面概述　344

11.2　手機游戲界面的設計方法　344

案例　製作威龍戰士游戲界面　345

11.3　課後練習——製作大魚吃小魚游戲界面　352

11.4　課後思考——良好界面設計的幾大特點　358

第　12 章 製作智能手機UI整體界面

12.1　界面設計的核心　362

12.2　Apple和Android移動端尺寸指南　363

12.3　iOS 扁平化系統的特色　364

案例1　蘋果手機界面總體設計　366

案例2　Android手機界面總體設計　375

案例3　Windows Phone手機界面總體設計　387

12.4　課後練習——製作一組清新的界面設計　400

12.5　課後思考——借助設計資源來提高自身能力407