本书紧扣用户界面设计趋势,主要包括交互设计理论、交互设计的理念与方法、用户体验设计、交互设计心理学、用户需求研究、交互设计的视觉界面设计、网站UI交互设计、移动端交互设计、交互设计团队等方面的内容。本书旨在普及用户界面设计的相关理念,全面阐述用户界面设计在网页及移动端两大主流设计领域的具体表现和所需掌握的专业技能。
本书可供UI设计师、交互设计师、用户体验专家、网页设计师等专业人士提高设计技能、开阔视野,也可帮助他们打开创意灵感之门;本书也适合想要从事UI设计相关工作的读者学习使用;本书还可作为高校和培训机构平面设计和网页设计等相关专业的教材和参考书。
第1章 从“恼人的交互设计”说起001
1.1 淋浴花洒和水龙头之间的切换003
1.2 洗手间的标志004
1.3 开关的一致性005
1.4 智能手机的接听按钮位置007
1.5 “确定”按钮008
第2章 交互设计理论概述011
2.1 交互设计的“初心”012
2.1.1 交互设计的前世012
2.1.2 交互设计的今生015
2.2 与交互设计相关的一些基本概念017
2.2.1 交互设计的概念017
2.2.2 交互设计体系018
2.2.3 UE——用户体验设计019
2.2.4 interaction——交互设计020
2.2.5 HCI——人机交互021
2.2.6 UI——用户界面022
2.3 交互系统的5个要素024
2.3.1 用户025
2.3.2 行为和目标025
2.3.3 媒介026
2.3.4 场景026
第3章 交互设计的理念与方法027
3.1 前田约翰(John Maeda)的10个精简定律028
3.1.1 缩减028
3.1.2 组织与安排029
3.1.3 差异029
3.1.4 感情030
3.1.5 信任031
3.1.6 时间031
3.1.7 学习032
3.1.8 失败033
3.1.9 脉络033
3.1.10 唯一033
3.2 本·施耐德(Ben Shneiderman)界面交互设计的8大黄金法则034
3.2.1 一致性034
3.2.2 常用用户使用快捷操作034
3.2.3 “完结”设计034
3.2.4 提供有用信息的反馈035
3.2.5 提供简单的错误操作的解决方案035
3.2.6 允许撤销操作035
3.2.7 给用户掌控感035
3.2.8 减少短时记忆负担035
3.2.9 本·施耐德的8大黄金法则在苹果产品设计中的应用036
3.3 交互设计的8大策略支柱039
3.3.1 制约040
3.3.2 反馈042
3.3.3 关联对应044
3.3.4 能见度046
3.3.5 惯例048
3.3.6 一致性050
3.3.7 个性化051
3.3.8 脆弱环节053
3.4 成功的交互设计要缜密考量的5个“W”因子053
3.4.1 Who——给谁用054
3.4.2 Why——为何用055
3.4.3 Where——在哪里用056
3.4.4 When——何时使用057
3.4.5 What——如何用058
第4章 用户体验设计061
4.1 用户体验设计的概念062
4.2 用户体验设计的4个基础062
4.2.1 独特性063
4.2.2 可实现性066
4.2.3 关联066
4.2.4 空间066
4.3 用户体验设计的5个层面067
4.3.1 用户体验设计的5个层面067
4.3.2 5个层面的关系069
4.3.3 需求和问题管理的3个要点071
4.3.4 案例 知乎App用户体验设计层次分析071
4.4 用户体验的衡量指标078
4.4.1 行为忠诚派079
4.4.2 态度忠诚派079
4.4.3 综合派081
第5章 交互设计的心理学083
5.1 交互设计的5个认知因素084
5.1.1 感知因素084
5.1.2 视觉因素085
5.1.3 注意因素086
5.1.4 记忆因素087
5.1.5 思维因素088
5.2 记忆与交互设计089
5.2.1 记忆的基本类型089
5.2.2 2个记忆定律091
5.2.3 记忆特点与交互设计原则093
5.2.4 心智模型096
5.2.5 创造利于记忆的用户体验的7种诀窍099
5.3 affordance——交互设计界最夯的字103
5.4 产品体验设计的3大心理效应105
5.4.1 鸟笼效应105
5.4.2 福格行为模型106
5.4.3 心流理论108
5.4.4 沉浸感119
5.5 巴莱特的图式理论124
5.5.1 图式理论124
5.5.2 图式理论的要点125
5.5.3 图式理论有助于提升游戏的趣味性126
5.6 普拉切克的情绪心理进化论129
5.7 评估交互设计三个“E”指标131
5.7.1 Effective131
5.7.2 Easy134
5.7.3 Enjoyable140
5.8 障碍设计的4种方法142
5.8.1 可以有效组织用户思考的障碍143
5.8.2 帮助用户更好地学习技能的障碍143
5.8.3 能让用户感觉更好的障碍144
5.8.4 对质量有提升的障碍145
第6章 用户需求研究147
6.1 用户148
6.1.1 用户研究的目的148
6.1.2 用户分类148
6.1.3 用户特征150
6.2 获取用户信息的18个有效方法151
6.2.1 用户观察151
6.2.2 问卷153
6.2.3 面谈155
6.2.4 实地调查156
6.2.5 知觉地图156
6.2.6 焦点小组158
6.2.7 亲和图159
6.2.8 拼贴161
6.2.9 关键事件法163
6.2.10 文化探测164
6.2.11 用户模型165
6.2.12 场景描述170
6.2.13 故事板171
6.2.14 情绪板172
6.2.15 期望值测试173
6.2.16 卡片分类法175
6.2.17 眼动追踪177
6.2.18 应用型用户故事地图178
第7章 交互设计的视觉界面设计183
7.1 视觉界面设计概述185
7.1.1 视觉设计的过程185
7.1.2 符号学相关知识187
7.1.3 视觉界面设计的7个组成要素190
7.1.4 视觉设计元素的整合194
7.2 版面编排197
7.2.1 版面编排的设计要点197
7.2.2 视觉界面排版设计4大原则204
7.2.3 案例Facebook改版前后的视觉界面设计对比206
7.3 文案211
7.3.1 交互文案设计的3个原则212
7.3.2 微文案的设计要点214
7.4 字体218
7.4.1 常用的几种字体219
7.4.2 具有戏剧效果的5种字体222
7.4.3 常用的字号226
7.4.4 常用的字体颜色229
7.4.5 字体细节设计策略229
7.5 色彩233
7.5.1 色彩在交互中的作用233
7.5.2 交互设计中的色彩印象237
7.5.3 用户界面交互设计的配色243
7.6 图片262
7.6.1 图片的位置262
7.6.2 图片的数量262
7.6.3 图片的面积264
7.6.4 图片的组合265
7.6.5 图片与文字的组合267
7.7 信息图形设计268
7.7.1 信息图形设计概述268
7.7.2 信息图形设计的原因269
7.7.3 信息图形的分类271
7.7.4 好的信息图形设计的特点274
7.8 动效设计277
7.8.1 动效的概述277
7.8.2 动效的功能277
7.8.3 动效体验的12条原则282
7.8.4 动效设计的四种趋势294
7.9 隐喻300
7.9.1 隐喻的概述300
7.9.2 文案中的隐喻300
7.9.3 设计中的隐喻301
7.9.4 隐喻如何应用301
7.9.5 隐喻的学习303
7.10 应用在视觉界面设计中的10个用户心理学原理304
7.10.1 80/20规则304
7.10.2 3秒原则307
7.10.3 防错原则307
7.10.4 费兹定律309
7.10.5 操纵定律312
7.10.6 泰思勒定律315
7.10.7 奥卡姆剃刀原理317
7.10.8 冯·雷斯托夫效应320
7.10.9 系列位置效应320
7.10.10 认知负荷原理321
7.11 视错觉在交互设计中的应用322
7.11.1 视错觉的概念322
7.11.2 经典视错觉与交互设计322
7.11.3 视错觉在版面设计中的应用336
7.11.4 格式塔理论338
第8章 网站UI交互设计355
8.1 网页基本概念356
8.2 网站UI设计原则356
8.2.1 以用户为中心356
8.2.2 视觉美观357
8.2.3 主题明确357
8.2.4 内容与形式统一361
8.2.5 有机的整体362
8.3 网站UI版式设计的形式美363
8.3.1 主次关系363
8.3.2 虚实对比364
8.3.3 比例尺度365
8.3.4 对称与均衡365
8.3.5 对比与调和366
8.3.6 节奏和韵律367
8.3.7 量感369
8.3.8 空间感370
8.3.9 尺度感371
8.4 网站UI交互细节设计372
8.4.1 登录页372
8.4.2 “关于我们”375
8.4.3 弹窗376
8.4.4 404页面384
第9章 移动端交互设计387
9.1 移动UI388
9.2 从桌面端到移动端的内容迁移时用户体验的优化388
9.2.1 每屏只完成一项任务388
9.2.2 精简并优化导航体系389
9.2.3 基于搜索引擎的设计模式389
9.2.4 更大的字体390
9.2.5 意义清晰的微文案390
9.2.6 去掉不必要的特效391
9.2.7 尺寸适配391
9.3 App的UI交互设计392
9.3.1 App的UI版式设计393
9.3.2 App交互细节设计案例404
第10章 交互设计团队407
10.1 交互设计师的工作职责408
10.1.1 需求分析阶段409
10.1.2 交互设计阶段410
10.1.3 视觉设计阶段411
10.1.4 开发与测试验收阶段412
10.1.5 搜集用户反馈阶段412
10.2 交互设计师必备素质412
10.2.1 能力素质要求412
10.2.2 设计体验感412
10.2.3 专注与激情413
10.2.4 团队协作415
10.2.5 利用新技术415
10.3 设计记录415
10.4 交互设计师要知道的问题清单417
10.4.1 召集开局会议时417
10.4.2 对利益关系人访谈时418
10.4.3 用户调研时418
10.4.4 用户测试时419
10.4.5 设计评审时420
10.4.6 接受利益关系人的反馈时421
参考文献422