UI设计

第1章　UI设计1

1.1　用户界面2

1.2　图形UI2

1.2.1　Windows操作系统图形UI的发展过程2

1.2.2　手机设备与图形UI的发展8

1.3　UI设计11

1.4　以用户为中心的设计13

1.5　交互设计14

第2章　以用户为中心的设计17

2.1　用户体验18

2.1.1　用户体验决定成败18

2.1.2　好的用户体验原则19

2.2　用户研究20

2.2.1　用户是谁20

2.2.2　心理模型和表现模型20

2.2.3　数字化生活方式21

2.3　建立用户角色的重要性22

2.3.1　开发者与用户不同22

2.3.2　设计要有针对性22

2.3.3　人物角色使“以用户为中心”落到实处22

2.3.4　人物角色可以减少争论，提高效率22

2.4　产品规划前期23

2.4.1　产品规划时效23

2.4.2　明确产品价值和定位23

2.4.3　明确产品生命周期23

2.4.4　明确产品对象和终端24

2.5　积累用户需求池24

2.5.1　访谈或问卷调研用户24

2.5.2　用户使用路径分析25

2.5.3　根据业务模块穷举法25

2.5.4　其他渠道25

2.6　建立有价值人物角色类型25

2.6.1　人物角色数量26

2.6.2　人物角色需求分级26

2.7　人物角色简介26

2.7.1　人物角色要具体化26

2.7.2　编写人物角色简介27

2.8　编写用户情境27

2.8.1　用户情境的典型一天27

2.8.2　编写用户情境28

第3章　交互设计29

3.1　人机交互30

3.1.1　人机交互三要素30

3.1.2　人机交互现状与未来30

3.2　UI中的交互设计思维32

3.2.1　信息传递32

3.2.2　交互行为32

3.2.3　交互行为的变革33

3.2.4　情感化设计35

3.3　信息架构36

3.3.1　信息架构师36

3.3.2　信息架构目标36

3.3.3　信息的选择与组织37

3.3.4　界面导航设计39

3.4　流程图41

3.4.1　流程图的基本构成和常用符号41

3.4.2　交互流程图42

3.4.3　制作流程图常用软件42

3.5　交互原型设计42

3.5.1　低保真原型设计42

3.5.2　高保真原型设计44

第4章　UI视觉元素47

4.1　色彩元素48

4.1.1　色彩属性48

4.1.2　色彩搭配的黄金法则50

4.1.3　色彩搭配与界面风格51

4.2　文字元素54

4.2.1　标题类文字54

4.2.2　正文类文字57

4.2.3　提示类文字60

4.2.4　交互类文字60

4.2.5　行为召唤语句61

4.2.6　文字动画62

4.3　图片元素63

4.3.1　界面中图片的种类63

4.3.2　选择图片的原则65

4.3.3　图片常见比例67

4.4　图标元素69

4.4.1　图标的概念69

4.4.2　图标设计原则70

4.4.3　图标设计的注意事项72

4.4.4　图标的视觉造型风格72

4.4.5　图标制作74

4.5　控件元素75

4.5.1　控件与图标的区别75

4.5.2　控件设计的注意事项76

4.5.3　常见的控件元素76

4.6　视觉元素的交互状态79

第5章　软件UI设计81

5.1　软件UI设计尺寸82

5.2　软件的欢迎界面82

5.3　软件的主界面84

5.3.1　TopFrame区85

5.3.2　菜单栏和工具栏85

5.3.3　功能模块区86

5.3.4　工作区87

5.3.5　状态信息区87

5.4　软件界面的设计原则87

5.4.1　界面与功能的适合性87

5.4.2　界面意图容易理解88

5.4.3　及时反馈信息89

5.4.4　防错处理89

5.4.5　风格一致和必要的个性化90

5.4.6　合理的布局90

5.4.7　合理的色彩91

5.4.8　适应用户群体和国际化92

5.4.9　*高效率92

5.4.10　可复用93

5.5　软件界面各元素设计的基本规则93

5.5.1　字体设计的基本规则93

5.5.2　菜单界面设计的基本规则93

5.5.3　命令按钮设计的基本规则94

5.5.4　工具条和图标按钮设计的基本规则94

5.5.5　提示信息设计的基本规则94

5.5.6　单选按钮设计的基本规则95

5.5.7　复选按钮设计的基本规则95

5.5.8　输入框和文本域设计的基本规则96

5.5.9　组合下拉框和列表框设计的基本规则96

5.5.10　多页选项板设计的基本规则96

5.5.11　数据表格设计的基本规则97

5.5.12　日期控件设计的基本规则97

5.5.13　软件对话窗口设计的基本规则98

5.5.14　软件消息框设计的基本规则98

5.6　窗口的交互规则100

5.6.1　一般规则100

5.6.2　焦点规则101

5.6.3　选择规则101

第6章　移动AppUI设计103

6.1　移动AppUI设计概念104

6.2　移动AppUI设计的风格类型104

6.3　移动AppUI的设计原则106

6.3.1　审美完整性原则106

6.3.2　一致性原则106

6.3.3　直接操作原则106

6.3.4　提供反馈原则106

6.3.5　隐喻的原则107

6.3.6　用户控制原则107

6.4　移动智能设备107

6.5　移动智能设备的操作系统107

6.6　iOS系统UI设计规范108

6.6.1　iOS常用术语108

6.6.2　iOS设计尺寸110

6.6.3　iOS适配111

6.6.4　iOS界面布局规范112

6.6.5　iOS文字规范113

6.6.6　iOS图标规范114

6.6.7　iOS交互注意事项117

6.7　Android系统UI设计规范118

6.7.1　Android常用术语118

6.7.2　Android设计尺寸119

6.7.3　Android适配120

6.7.4　Android界面布局规范120

6.7.5　Android文字规范123

6.7.6　Android图标规范124

6.7.7　Android交互的注意事项126

6.7.8　Android的其他设计建议126

6.8　HarmonyOS系统UI设计规范127

6.8.1　HarmonyOS常用术语127

6.8.2　HarmonyOS界面布局规范127

6.8.3　HarmonyOS文字规范127

6.8.4　HarmonyOS图标规范128

6.8.5　HarmonyOS其他设计建议128

6.9　移动App切图规则与规范128

6.9.1　切图类型129

6.9.2　切图范围129

6.9.3　*小触击区域129

6.9.4　切图命名129

6.9.5　AI切图演示130

第7章　网页UI设计131

7.1　常用术语132

7.1.1　网站132

7.1.2　网页132

7.1.3　浏览器132

7.2　网页界面风格132

7.2.1　严肃稳重型132

7.2.2　综合流量型133

7.2.3　简洁大气型133

7.2.4　生动活泼型134

7.2.5　时尚个性型134

7.2.6　传统古朴型134

7.3　屏幕分辨率与自适应135

7.3.1　横屏135

7.3.2　竖屏140

7.4　网页的栅格布局141

7.5　网页布局参考142

7.6　网页字体145

7.7　网页切图145

7.7.1　切图的原则145

7.7.2　切图的技巧145

7.7.3　切图的类型145

第8章　游戏UI设计147

8.1　游戏的分类148

8.2　游戏UI的独特性154

8.2.1　视觉风格154

8.2.2　互动感受155

8.2.3　复杂性155

8.3　游戏UI的职能156

8.3.1　实现功能切换156

8.3.2　实现反馈交流156

8.3.3　实现沉浸式体验157

8.4　游戏UI设计前期工作158

8.4.1　明确游戏的世界观158

8.4.2　明确游戏的整体风格159

8.5　游戏UI设计原则161

8.5.1　统一性原则161

8.5.2　易用性原则162

8.5.3　习惯与认知原则163

8.5.4　容错性原则164

8.5.5　及时信息反馈原则164

8.6　手游UI设计的限制165

8.6.1　尺寸限制165

8.6.2　性能限制165

8.6.3　分辨率限制165

8.6.4　音效限制165

8.6.5　操控限制166

8.6.6　沉浸式体验限制166

8.7　手游UI设计注意事项166

8.7.1　更高的易用性166

8.7.2　更及时的反馈166

8.7.3　更多样化的操作控制167

第9章　UI设计项目案例169

9.1　“找到你”App产品定位170

9.1.1　行业背景170

9.1.2　调研手段170

9.1.3　用户需求171

9.1.4　定位分析171

9.1.5　建立人物角色与情境172

9.2　交互设计173

9.2.1　产品框架173

9.2.2　低保真原型图设计173

9.3　视觉设计175

9.3.1　标志设计175

9.3.2　图标设计176

9.3.3　高保真原型图设计177

9.4　后期测试与维护180

9.4.1　项目评审与测试180

9.4.2　意见反馈与迭代184

参考文献185