第 1章 交互设计的基本认识 013
1.1 交互设计师的价值体现 014
1.1.1 在团队工作流程中的价值体现 014
1.1.2 在用户体验提升工作中的价值体现 015
1.2 UED团队的设计流程 018
1.2.1 产品需求 018
1.2.2 需求评审 019
1.2.3 交互设计 019
1.2.4 交互评审 020
1.2.5 视觉设计 021
1.2.6 视觉评审 021
1.2.7 开发走查 021
1.2.8 可用性报告 022
1.3 如何通过交互设计提升用户体验 022
1.3.1 优化功能流程 022
1.3.2 提升设计体验 023
1.3.3 优化实现机制 024
第 2章 交互设计的基本原则 025
2.1 尼尔森十大可用性原则 026
2.1.1 状态可感知原则 026
2.1.2 贴近用户认知原则 027
2.1.3 操作可控性原则 028
2.1.4 一致性原则 029
2.1.5 防错性原则 029
2.1.6 识别好过回忆原则 030
2.1.7 灵活高效原则 031
2.1.8 美学和极简设计原则 032
2.1.9 容错性原则 032
2.1.10 人性化帮助原则 034
2.2 高效性原则 035
2.2.1 优化性能 035
2.2.2 减少操作路径 036
2.2.3 减少页面跳转 036
2.2.4 支持批量操作 037
2.3 及时反馈性原则 037
2.3.1 结果反馈 038
2.3.2 状态反馈 040
2.3.3 过渡反馈 041
2.3.4 操作反馈 042
2.3.5 声音和震动反馈 043
2.4 易学性原则 043
2.4.1 加强视觉引导 044
2.4.2 明确场景指示 044
2.4.3 遵循用户已有的习惯 045
2.4.4 合理运用动画与视觉效果 045
2.5 易读性原则 046
2.5.1 通过布局区分信息层级 046
2.5.2 保持适当的留白 046
2.5.3 简化元素 047
2.5.4 运用三大定律 048
第3章 iOS与Material Design设计规范详解 049
3.1 iOS系统组件的设计规范 050
3.1.1 UI栏(UI-Bars) 051
3.1.2 UI视图(UI-Views) 053
3.2 Material Design组件的设计规范062
3.2.1 菜单 063
3.2.2 底部动作条 064
3.2.3 进度和动态 064
3.2.4 按钮 065
3.2.5 滑块 067
3.2.6 卡片 068
3.2.7 Snackbar与Toast 068
3.2.8 纸片 069
3.2.9 副标题 070
3.2.10 警告框 070
3.2.11 开关 071
3.2.12 分隔线 072
3.2.13 Tabs 072
3.2.14 网格 073
3.2.15 文本框 073
3.2.16 列表 074
3.2.17 工具提示 074
3.2.18 列表控制 075
3.3 iOS系统和Android系统在设计中的差异 076
3.3.1 消息提醒机制的差异 076
3.3.2 手势操作的差异 077
3.3.3 组件风格的差异 078
3.3.4 发送按钮的差异 080
3.3.5 导航栏的差异 080
3.3.6 返回上一级页面组件的差异 081
3.4 iOS 和Material Design的元件库 081
3.4.1 制作统一可复用的Axure元件库 082
3.4.2 Axure元件库的使用方法 086
3.4.3 源文件 086
3.5 App中六大组件的使用方法与区别087
3.5.1 警告框和底部操作列表 087
3.5.2 标签栏和工具栏 088
3.5.3 底部动作条和菜单 088
3.5.4 选择器和底部操作列表 089
3.5.5 下拉菜单和活动视图控制器 089
3.5.6 Snackbar和Toast 090
第4章 以功能划分的移动端组件与控件设计规范详解 091
4.1 组件与控件的基本认识 092
4.2 导航类组件 092
4.2.1 底部标签式导航 093
4.2.2 分段控制式导航 094
4.2.3 列表式导航 094
4.2.4 下拉菜单式导航 095
4.2.5 抽屉式导航 095
4.2.6 宫格式导航 096
4.2.7 卡片式导航 096
4.3 引导类组件 097
4.3.1 幻灯片式引导 097
4.3.2 浮层式引导 098
4.3.3 嵌入式引导 098
4.4 加载类组件 099
4.4.1 全屏加载 100
4.4.2 分步加载 100
4.4.3 下拉加载 101
4.4.4 上拉加载 101
4.4.5 预加载 102
4.4.6 智能加载 102
4.5 网络异常类组件 103
4.5.1 网络切换 103
4.5.2 断网情况 104
4.5.3 弱网情况 107
4.6 空数据类组件 107
4.6.1 初始状态 108
4.6.2 清空状态 108
4.6.3 出错状态 109
4.7 提示类组件 111
4.7.1 红点提示 111
4.7.2 数字提示 112
4.7.3 系统推送提示 112
4.7.4 弹窗提示 113
4.8 操作类组件 114
4.8.1 底部操作列表 114
4.8.2 底部浮层视图 115
4.8.3 编辑菜单 115
4.8.4 底部工具栏 116
4.8.5 按钮 117
4.8.6 选择器 119
4.8.7 下拉菜单 119
4.8.8 文本框 120
4.9 单元控件类组件 121
4.9.1 搜索 121
4.9.2 开关 122
4.9.3 页面控制器 122
4.9.4 图标 123
4.9.5 滑块 124
4.9.6 进度 124
4.9.7 选框 124
第5章 Web端系统组件的设计规范详解 125
5.1 Web 端组件设计规范的基本介绍 126
5.1.1 Web 端设计规范的价值 126
5.1.2 Web 端设计理念 127
5.1.3 Web 端设计原则 132
5.2 反馈类组件 134
5.2.1 Toast 134
5.2.2 警示提示 136
5.2.3 对话框 137
5.2.4 通知提醒框 138
5.2.5 文字提示 138
5.3 表单类组件 139
5.3.1 短文本 139
5.3.2 短文本联想 141
5.3.3 长文本 143
5.3.4 选择器 146
5.3.5 树选择 148
5.3.6 日期选择器 151
5.3.7 时间选择器 154
5.3.8 级联 156
5.3.9 数字输入 158
5.3.10 单选组件 159
5.3.11 复选框 159
5.3.12 开关 160
5.4 基础类组件 161
5.5 数据类组件 162
5.5.1 徽标数 162
5.5.2 上传 163
5.5.3 进度条 164
5.5.4 加载 164
5.6 导航类组件 165
5.6.1 导航菜单 166
5.6.2 面包屑 168
5.6.3 标签页 169
5.6.4 分页 170
5.6.5 步骤条 171
5.6.6 下拉菜单 172
5.7 其他类组件 172
5.7.1 标签 173
5.7.2 表格 174
5.7.3 列表 175
5.7.4 卡片 176
第6章 交互原型图的设计规范与方法 177
6.1 交互原型图的设计规范 178
6.1.1 明确主场景和适用人群 178
6.1.2 信息结构合理化 179
6.1.3 流程设计简单合理化 180
6.1.4 设计符合大部分用户的认知模型 180
6.1.5 交互逻辑无缺失 181
6.1.6 异常场景无遗漏 182
6.1.7 关键字段有规则定义 182
6.1.8 极限情况有定义 182
6.1.9 是否涉及多种角色和权限 183
6.1.10 全局组件有说明 183
6.2 掌握交互设计背后的逻辑 184
6.2.1 警示框 185
6.2.2 Toast 186
6.2.3 对象内嵌 186
6.3 易遗漏的交互场景分析 187
6.3.1 iOS 版历史搜索原型图分析 188
6.3.2 常见的易遗漏的交互场景 190
6.4 移动端长表单设计 192
6.4.1 主方案1 193
6.4.2 主方案2 194
6.4.3 主方案3 195
6.5 交互文档的输出规范与方法 197
6.5.1 完整的项目简介 197
6.5.2 需求分析 198
6.5.3 新增修改记录 198
6.5.4 信息架构 198
6.5.5 交互设计的方案阐述 199
6.5.6 页面交互流程图 200
6.5.7 异常页面和异常情况的说明 202
第7章 团队产品交互设计的工作流程 203
7.1 分析产品需求 204
7.1.1 产品战略级需求 204
7.1.2 用户级产品需求 205
7.1.3 用户体验级产品需求 206
7.2 需求评审 206
7.3 交互设计 210
7.4 交互评审 218
7.5 视觉设计 219
7.6 视觉评审 219
7.7 交互视觉走查 219
7.7.1 交互走查 220
7.7.2 视觉走查 220
7.7.3 走查报告 220
第8章 交互设计综合分析与讲解 221
8.1 站在开发的角度优化产品方案 222
8.1.1 缓存机制 222
8.1.2 数据上传机制 223
8.2 标签栏是固定好,还是不固定好 225
8.2.1 通过消息列表进入个人主页 225
8.2.2 通过通讯录列表进入个人主页 226
8.3 常见的四大用户体验误区 227
8.3.1 路径越浅,体验就越好 227
8.3.2 过分强调小场景 227
8.3.3 过度反馈 228
8.3.4 数据上传前台显示,而非后台加载 228
8.4 探索流量分发的设计方法 229
8.4.1 设计流量分发的目的 230
8.4.2 如何进行流量分发设计 231
8.4.3 如何验证流量分发设计效果 235
8.5 微信设计背后的产品逻辑分析 235
8.5.1 点赞评论聚合 235
8.5.2 朋友圈的模块设置 236
8.5.3 购物、钱包和游戏模块设置 237
8.5.4 朋友圈支持的图片上传格式 237
8.5.5 通讯录的模块设置 238
8.5.6 微信号为何不能修改 238
8.5.7 相册模块的命名 239
8.5.8 朋友圈的查看设置 239
8.5.9 群发仅限200 人设置 240
8.5.10 对话列表的删除设置 240