移動 UI 設計 (微課版)

本書採用全流程設計的方式，對iOS和Android系統移動設備界面的結構及設計規範進行講解。全書採用知識點輔助案例的教學方式，在大量的知識點中融入豐富有趣的案例製作，系統解析移動端App界面設計的流程及設計技巧。書中案例使用Axure RP 10、Adobe XD、Adobe Photoshop CC、Adobe Illustrator CC和PxCook等主流UI設計軟件製作。

本書共8章:第1章，關於移動UI設計；第2章，移動UI策劃與原型設計；第3章，優秀的移動UI色彩搭配；第4章，出色的移動圖標設計；第5章，移動App 的UI設計；第6章，移動App交互設計；第7章，適配與輸出移動UI設計；第8章，設計製作移動App項目。

本書將提供全部案例的素材、源文件和教學視頻，讀者可以結合書、練習文件和教學視頻，提高移動UI設計的學習效率。本書適合UI 設計愛好者、移動UI 設計從業者閱讀，也適合作為各院校設計相關專業的教材。

受欢迎的艺术设计类图书作者，编写过多本设计类图书，包括《移动应用UI设计》《HTML+CSS+Javascript网站制作案例教程》等。

 

第　1章 關於移動UI設計

 

1.1　瞭解移動UI設計　1

1.1.1　初識UI設計　1

1.1.2　移動UI設計的概念　2

1.1.3　移動UI與PC端UI　2

1.1.4　PC端UI重置為移動UI　4

1.2　移動UI的系統分類　6

1.2.1　iOS系統　6

1.2.2　HarmonyOS系統　7

1.2.3　Android系統　7

1.2.4　Wear OS和Watch OS系統　9

1.3　移動UI設計流程　9

1.3.1　需求分析　10

1.3.2　原型設計　12

1.3.3　UI設計　15

1.4　移動UI設計原則　16

1.4.1　風格一致性原則　16

1.4.2　元素準確性原則　17

1.4.3　界面佈局合理化原則　17

1.4.4　系統響應時間原則　18

1.5　移動UI流程的職位劃分　18

1.5.1　產品經理　19

1.5.2　項目經理　19

1.5.3　UI設計師　19

1.5.4　開發工程師　20

1.6　本章小結　20

 

第　2章 移動UI策劃與原型設計

 

 

2.1　確定移動UI目標用戶　21

2.1.1　分析移動UI項目背景　21

2.1.2　掌握用戶畫像分析法　23

2.2　完成移動UI策劃書　24

2.3　瞭解思維導圖　25

2.3.1　思維導圖的設計依據　25

2.3.2　思維導圖的特點　25

2.3.3　思維導圖的作用　26

2.4　思維導圖的常用軟件　27

2.4.1　MindMeister　27

2.4.2　MindManager　27

2.4.3　XMind　28

2.4.4　操作案例——下載並安裝Xmind　28

2.5　繪制移動UI思維導圖　29

2.5.1　思維導圖的操作流程　30

2.5.2　思維導圖的基本類型　31

2.5.3　操作案例——繪制美妝App的首頁思維導圖　33

2.6　繪制移動UI草圖　34

2.6.1　瞭解草圖的概念　35

2.6.2　認識草圖的特點　36

2.6.3　草圖功能的體現　36

2.6.4　常見的草圖形式　39

2.7　瞭解原型設計　41

2.7.1　原型設計的概念　41

2.7.2　原型設計的參與者　41

2.8　製作原型的常用軟件　42

2.8.1　Axure RP　42

2.8.2　Adobe XD　43

2.8.3　操作案例——安裝Axure RP 10　43

2.9　繪制移動UI原型圖　45

2.9.1　原型的表現手法　45

2.9.2　原型的重要性　47

2.9.3　操作案例——繪制美妝App首頁草圖　49

2.9.4　App原型設計與用戶體驗　51

2.9.5　操作案例——繪制美妝App分類界面原型　54

2.10　本章小結　55

 

第3章　優秀的移動UI色彩搭配

 

3.1　認識色彩　56

3.1.1　色彩的基礎　56

3.1.2　色彩三屬性　57

3.2　和諧、統一的色彩搭配方法　58

3.2.1　同色系配色方法　58

3.2.2　鄰近色配色方法　59

3.2.3　類似色配色方法　60

3.2.4　同色調配色方法　60

3.2.5　類似色調配色方法　61

3.3　突出、對比的配色方法　62

3.3.1　中差色配色方法　62

3.3.2　對比色配色方法　62

3.3.3　互補色配色方法　63

3.3.4　對比色調配色方法　64

3.4　構建移動UI顏色系統　65

3.4.1　確定設計風格　65

3.4.2　確定主色　66

3.4.3　確定輔色　69

3.4.4　操作案例——構建美妝App顏色系統　69

3.4.5　調整配色　70

3.5　移動UI色彩搭配的註意事項　71

3.5.1　切忌將精緻美觀放在第 一位　72

3.5.2　配色方案要符合用戶的心理印象　72

3.5.3　操作案例——美妝App首頁界面配色設計　73

3.5.4　App界面內容必須便於閱讀　74

3.5.5　保守的使用色彩　75

3.5.6　規避雜亂的配色方案　75

3.5.7　操作案例——美妝App分類界面配色設計　76

3.6　本章小結　77

 

第4章　出色的移動圖標設計

 

4.1　初識App圖標　78

4.1.1　App圖標的概念　78

4.1.2　App圖標的重要性　78

4.2　圖標設計常用軟件　79

4.2.1　Illustrator　79

4.2.2　Photoshop　80

4.2.3　CorelDRAW　80

4.3　熟悉圖標柵格系統　80

4.3.1　系統圖標柵格　81

4.3.2　圖標柵格規範　81

4.4　圖標設計形式　83

4.4.1　中文風格　83

4.4.2　英文風格　84

4.4.3　圖形風格　85

4.4.4　數字風格　86

4.4.5　特殊符號風格　86

4.5　App圖標的分類　86

4.5.1　工具圖標　86

4.5.2　操作案例——設計製作磨砂質感工具圖標　91

4.5.3　裝飾圖標　94

4.5.4　啟動圖標　95

4.6　圖標尺寸　97

4.6.1　Android系統的圖標設計尺寸　97

4.6.2　操作案例——設計製作水果裝飾圖標　99

4.6.3　iOS系統的圖標設計尺寸　102

4.6.4　操作案例——設計製作時鐘啟動圖標　102

4.7　圖標組設計規範　106

4.7.1　創建製作清單　106

4.7.2　設計草圖　106

4.7.3　數字呈現　106

4.7.4　確定最終效果　107

4.7.5　命名並導出　107

4.8　本章小結　107

 

第5章　移動AppUI設計

 

5.1　移動UI的基礎元素　108

5.2　常見的UI設計軟件　108

5.2.1　Photoshop　108

5.2.2　Sketch　108

5.2.3　Adobe XD　109

5.3　移動UI的設計基礎　109

5.3.1　iOS系統的開發單位　109

5.3.2　iOS系統的界面尺寸規範　110

5.3.3　操作案例——設計製作iOS系統App啟動界面　111

5.3.4　Android系統的開發單位　115

5.3.5　Android系統的界面尺寸規範　115

5.3.6　操作案例——設計製作Android系統App界面　116

5.4　移動UI的字體規範　119

5.4.1　iOS系統字體規範　119

5.4.2　操作案例——設計製作iOS系統App登錄界面　120

5.4.3　Android系統字體規範　122

5.4.4　操作案例——設計製作Android系統App分類界面　123

5.5　移動UI圖片尺寸規範　125

5.6　移動App內容佈局　126

5.6.1　瞭解App界面中的全局邊距　126

5.6.2　操作案例——設計製作iOS系統App首頁界面　126

5.6.3　設置App界面中的內容間距　130

5.6.4　操作案例——設計製作iOS系統App側面菜單界面　131

5.6.5　移動App界面的佈局方式　133

5.7　本章小結　135

 

第6章　移動App交互設計

 

6.1　瞭解UI交互設計　135

6.1.1　交互動效的概念　135

6.1.2　基礎動效類型　135

6.2　常見的交互設計軟件　137

6.2.1　Affter Effect　137

6.2.2　Adobe XD　138

6.3　交互設計的基本流程　138

6.3.1　提出交互設計創意想法　139

6.3.2　根據想法進行豐滿實現　140

6.4　移動UI交互的類型　140

6.4.1　轉場過渡　140

6.4.2　操作案例——設計製作App轉場交互　141

6.4.3　層級展示　143

6.4.4　空間擴展　144

6.4.5　關註聚焦　144

6.4.6　內容呈現　144

6.4.7　操作案例——設計製作相冊App內容呈現交互　145

6.4.8　操作反饋　148

6.4.9　操作案例——設計製作App點贊反饋交互　149

6.5　動效在UI界面中的作用　150

6.5.1　吸引用戶註意力　150

6.5.2　為用戶提供操作反饋　151

6.5.3　加強指向性　151

6.5.4　操作案例——設計製作App後台交互　151

6.5.5　傳遞信息深度　155

6.6　交互設計需要遵循的習慣　155

6.7　本章小結　156

 

第7章　適配與輸出移動UI設計

 

7.1　標註的重要性　157

7.2　常見的標註與輸出軟件　157

7.2.1　PxCook　157

7.2.2　Assistor PS　158

7.3　標註移動UI　158

7.3.1　移動App標註內容　158

7.3.2　操作案例——標註iOS系統App界面　158

7.3.3　標註的聲明文檔　161

7.3.4　操作案例——標註Android系統App界面　161

7.4　移動UI標註規範　164

7.4.1　位置與尺寸的標註規範　164

7.4.2　色彩和文字的標註規範　165

7.4.3　切圖資源的尺寸必須是雙數　165

7.5　輸出與適配iOS系統UI設計　166

7.5.1　向上適配與向下適配　166

7.5.2　適配切片命名規範　168

7.5.3　操作案例——導出iOS系統App界面切圖資源　169

7.6　輸出與適配Android系統UI設計　171

7.6.1　Android系統中的“點9”切圖　171

7.6.2　輸出與適配的一稿兩用　174

7.6.3　操作案例——導出Android系統App切圖資源　175

7.7　本章小結　176

 

第8章　設計製作移動App項目

 

8.1　設計製作美妝電商App項目　177

8.1.1　分析美妝電商App的項目背景　177

8.1.2　製作美妝電商App的草圖原型　177

8.1.3　構建美妝電商App的顏色系統　179

8.1.4　設計製作美妝電商App的圖標組　180

8.1.5　完成美妝電商App的界面設計　182

8.1.6　完成美妝電商App的交互設計　185

8.1.7　完成美妝電商App的界面標註　186

8.1.8　導出美妝電商App的切圖資源　188

8.2　設計製作美食外賣App項目　189

8.2.1　分析美食外賣App的項目背景　189

8.2.2　製作美食外賣App的草圖原型　190

8.2.3　創建美食外賣App的顏色系統　192

8.2.4　設計製作美食外賣App的圖標組　193

8.2.5　完成美食外賣App的界面設計　196

8.2.6　完成美食外賣App的交互設計　200

8.2.7　完成美食外賣App的界面標註　201

8.2.8　導出美食外賣App的切圖資源　203