UI设计 / 高等院校艺术设计类系列教材
￥49.80定价
作者： 田雅岚，刘伟
出版时间：2023-04
出版社：清华大学出版社
获奖信息：重庆文理学院特色应用型教材
- 清华大学出版社
- 9787302633334
- 1-1
- 464328
- 42246789-4
- 16开
- 2023-04
- 艺术设计
- 本科
作者简介
内容简介
《UI设计》以培养全方位用户界面（UI） 设计人才为教学目标进行编写，理论和实践紧密结合，详细解读了用户UI 设计理论与方法。《UI设计》注重培养读者的产品思维、用户思维和交互思维模式与应用实践能力，内容涵盖UI 设计概念，以用户为中心的设计理念，交互设计，UI 视觉元素设计，软件、移动App、网页、游戏UI 设计以及用户UI 设计项目流程解析。 《UI设计》内容翔实、案例丰富、图片精美，可作为高校和培训机构等相关专业课程的实验和实训教材，也适合对UI 设计感兴趣或未来想从事UI 设计相关工作的读者阅读。
目录
目 录
第1章 UI设计 1
1.1 用户界面 2
1.2 图形 UI 2
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 Top Frame区 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章 移动 App UI设计 103
6.1 移动 App UI设计概念 104
6.2 移动 App UI设计的风格类型 104
6.3 移动 App UI的设计原则 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 Harmony OS系统 UI设计规范 127
6.8.1 Harmony OS常用术语 127
6.8.2 Harmony OS界面布局规范 127
6.8.3 Harmony OS文字规范 127
6.8.4 Harmony OS图标规范 128
6.8.5 Harmony OS其他设计建议 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
第1章 UI设计 1
1.1 用户界面 2
1.2 图形 UI 2
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 Top Frame区 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章 移动 App UI设计 103
6.1 移动 App UI设计概念 104
6.2 移动 App UI设计的风格类型 104
6.3 移动 App UI的设计原则 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 Harmony OS系统 UI设计规范 127
6.8.1 Harmony OS常用术语 127
6.8.2 Harmony OS界面布局规范 127
6.8.3 Harmony OS文字规范 127
6.8.4 Harmony OS图标规范 128
6.8.5 Harmony OS其他设计建议 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
