PS App UI 設計從零開始學

目    錄

 第1章　App UI設計基礎 1

1.1　 App UI設計概述2

1.1.1  什麼是UI設計2

1.1.2  什麼是App UI設計2

1.1.3   App UI設計必備技術 4

1.2　Phtoshop軟件的基本操作6

1.2.1  安裝、卸載、啟動和

退出Photoshop6

1.2.2  圖形圖像文件的基本操作7

1.3　Photoshop系統界面調整12

1.3.1  界面組成12

1.3.2  調整界面16

1.4　App UI界面設計團隊與流程16

1.4.1  App界面設計者與產品團隊 16

1.4.2  App界面設計與項目流程 17

1.4.3  視覺設計18

1.5　App UI界面設計理論18

1.5.1  用戶操作習慣 18

1.5.2  界面佈局 19

1.5.3  操作簡單 23

1.5.4  在操作方式上創新 24

1.5.5  在設計中投入情感 24

1.5.6  App UI的配色理論 24

1.6　App UI界面設計技巧27

1.6.1  完整的App UI 設計流程27

1.6.2  圖標設計流程30

1.6.3  讓圖標更具吸引力30

第2章　App UI光影設計32

2.1　UI設計師必備技能之顏色搭配33

2.1.1  簡約配色設計33

2.1.2  混合特效設計34

2.1.3  具體案例 34

2.2　案例：玻璃質感圖標設計35

2.2.1  設計構思35

2.2.2  操作步驟36

2.3　案例：模擬插座設計40

2.3.1  設計構思40

2.3.2  操作步驟40

2.4　案例：木紋質感設計42

2.4.1  設計構思43

2.4.2  操作步驟43

2.5　案例：絢麗光線界面設計57

2.5.1  設計構思57

2.5.2  操作步驟58

第3章　App UI字體設計62

3.1　UI設計師必備技能之文字設計63

3.1.1  字號設計63

3.1.2  UI文字設計標準64

3.2　案例：斜面浮雕字體設計65

3.2.1  設計構思65

3.2.2  操作步驟65

3.3　案例：鑽石字體設計69

3.3.1  設計構思69

3.3.2  操作步驟69

3.4　案例：碎裂巖石材質字體設計72

3.4.1  設計構思 72

3.4.2  操作步驟73

第4章　App UI簡約圖標設計76

4.1　UI設計師必備技能之圖標（ICON）

設計77

4.2　案例：特價圖標設計78

4.2.1  設計構思78

4.2.2  操作步驟78

4.3　案例：搜索圖標設計80

4.3.1  設計構思80

4.3.2  操作步驟81

4.4　案例：照相機圖標設計83

4.4.1  設計構思83

4.4.2  操作步驟84

4.5　案例：鬧鐘圖標設計86

4.5.1  設計構思86

4.5.2  操作步驟86

4.6　案例：簡約平面圖標整套設計91

4.6.1  設計構思92

4.6.2  操作步驟92

第5章  App UI三維圖標設計99

5.1　UI設計師必備技能之三維圖標

設計100

5.1.1  表現形態100

5.1.2  圖標特性101

5.1.3  圖標設計的構思101

5.2　案例：立體日歷圖標設計102

5.2.1  設計構思102

5.2.2  操作步驟102

5.3　案例：立體錄音器圖標設計105

5.3.1  設計構思106

5.3.2  操作步驟106

5.4　案例：立體時鐘圖標設計108

5.4.1  設計構思108

5.4.2  操作步驟109

5.5　案例：立體勾選框圖標設計111

5.5.1  設計構思112

5.5.2  操作步驟112

5.6　案例：實體手機設計114

5.6.1  設計構思115

5.6.2  操作步驟115

第6章　App UI多樣圖形設計122

6.1　UI設計師必備技能之構圖技巧123

6.1.1  粗細對比123

6.1.2  遠近對比123

6.1.3  疏密對比124

6.1.4  靜動對比124

6.1.5  中西對比124

6.1.6  古今對比125

6.2　案例：個性二維碼掃描圖形設計125

6.2.1  設計構思126

6.2.2  操作步驟126

6.3　案例：徽標圖形設計128

6.3.1  設計構思128

6.3.2  操作步驟129

6.4　案例：個性條形碼設計132

6.4.1  設計構思132

6.4.2  操作步驟132

6.5　案例：電影宣傳海報設計134

6.5.1  設計構思135

6.5.2  操作步驟135

第7章  App UI按鈕設計138

7.1　UI設計師必備技能之按鈕設計139

7.1.1  關系分組按鈕139

7.1.2  層級關系139

7.1.3  善用陰影140

7.1.4  圓角邊界140

7.1.5  強調重點141

7.1.6  按鈕尺寸141

7.1.7  表述必須明確141

7.2　案例：立體旋鈕設計 142

7.2.1  設計構思142

7.2.2  操作步驟142

7.3　案例：WIFI按鈕設計146

7.3.1  設計構思146

7.3.2  操作步驟146

7.4　案例：金屬質感按鈕設計150

7.4.1  設計構思150

7.4.2  操作步驟150

7.5　案例：音量調節按鈕設計155

7.5.1  設計構思156

7.5.2  操作步驟156

7.6　案例：透明界面按鈕設計160

7.6.1  設計構思160

7.6.2  操作步驟161

7.7　案例：滑動控件設計168

7.7.1  設計構思168

7.7.2  操作步驟169

第8章　App UI基礎界面設計171

8.1　UI設計師必備技能之界面設計172

8.1.1  清晰地展現信息層級172

8.1.2  採用一致的設計語言172

8.1.3  在細節上給予驚喜173

8.2　案例：遊戲加載界面設計173

8.2.1  設計構思173

8.2.2  操作步驟173

8.3　案例：撥號界面和等待接聽界面

設計179

8.3.1  設計構思179

8.3.2  操作步驟180

8.4　案例：搜索結果頁面設計185

8.4.1  設計構思185

8.4.2  操作步驟185

8.5　案例：個性報錯頁面設計188

8.5.1  設計構思189

8.5.2  操作步驟189

第9章　App UI導航列表設計194

9.1　UI設計師必備技能之交互設計195

9.1.1  可視性195

9.1.2  反饋195

9.1.3  限制195

9.1.4  映射196

9.1.5   一致性196

9.1.6  啟發性196

9.2　案例：導航欄設計196

9.2.1  設計構思196

9.2.2  操作步驟197

9.3　案例：透明列表頁面設計198

9.3.1  設計構思199

9.3.2  操作步驟199

9.4　案例：通話界面設計204

9.4.1  設計構思204

9.4.2  操作步驟205

9.5　案例：食譜小部件頁面的設計207

9.5.1  設計構思207

9.5.2  操作步驟208

第10章　App綜合案例設計211

10.1　案例：引導頁面設計212

10.1.1  設計構思212

10.1.2  操作步驟213

10.2　案例：登錄/註冊界面設計215

10.2.1  設計構思216

10.2.2  操作步驟216

10.3　案例：扁平化選擇列表設計218

10.3.1  設計構思219

10.3.2  操作步驟219

10.4　案例：歡迎界面設計221

10.4.1  設計構思222

10.4.2  操作步驟222