返回

互联网产品开发:用户体验、交互设计方法与技巧-577页

搜索
推荐 最新 热门

互联网产品开发:用户体验、交互设计方法与技巧-577页

资料简介

本书较为系统地讲解了用户体验设计师的职能及价值体现的方法,由点到面地分析了用户体验设计的方法与技巧,目的是让读者能够全方位地进行学习,使自己在互联网行业变化如此迅速的当下不被淘汰。

全书分为8章。第1章对用户体验的概念、用户体验设计师的职责与价值等内容进行了分析;第2 章主要对App设计中的基础规范进行了系统全面的讲解;第3章讲解了视觉体验基础理论;第4章讲解了视觉体验的进阶内容;第5章主要让读者了解交互体验基础阶段的内容;第6章通过对交互设计中“可用性”“易用性”“好用性”3个阶段的讲解,让读者对交互设计进阶阶段的知识有所认知;第7章从情感化体验出发,教读者懂得如何给产品增加“温度”,拉近用户与产品之间的距离;第8章主要教读者如何持续地进行自我提升,并且真正具备用户体验设计师的气质。

目录
第1章 初识用户体验设计 8
1.1 何为用户体验 9
1.1.1 生活中的用户体验 9
1.1.2 互联网产品中的用户体验 11
易用性 11
容错性 11
产品视觉 12
版式表现 14
情感化体现 16
1.2 用户体验设计与平面设计的区别 26
1.2.1 内容响应式 26
1.2.2 长时间停留 27
1.2.3 阅读效率 29
1.2.4 层级多样化 31
1.3 用户体验只是主观感受 34
1.4 用户体验设计师的职责与价值 36
第2章 App设计中的基础规范 37
2.1 App基础布局规范 38
2.1.1 常见的手机屏幕尺寸 38
dpi和ppi的概念 38
分辨率、像素和屏幕物理尺寸 39
逻辑大小和像素大小 42
逻辑像素与实际像素 47
提示 48
提示 49
iPhone x的适配方案 49
提示 52
2.1.2 界面设计中的栅格系统 53
栅格系统在界面设计中的作用 55
栅格系统中的8px原则 58
2.1.3 常见的布局和适用场景 61
标签式布局 61
列表式布局 62
卡片式布局 63
瀑布流布局 63
多面板布局 64
手风琴布局 64
2.2 App基础组件规范 66
2.2.1 状态栏 66
2.2.2 导航栏 66
2.2.3 标签栏 67
提示 67
2.2.4 工具栏 67
2.3 App字体规范 69
2.3.1 系统默认字体介绍 69
2.3.2 基本的字号规范 69
第3章 视觉体验基础 77
3.1 用户界面设计中的色彩 78
3.1.1 对色彩的基本认识 78
三原色/间色/夊色 78
互补色/同类色/对比色 79
冷色/暖色/无彩色 80
色相/纯度/明度 81
3.1.2 色彩在界面设计中的作用 81
厘清整体架构 81
明确视觉层级关系 82
突出产品风格 84
3.1.3 色彩的对比 86
色相对比 86
纯度对比 90
明度对比 92
面积对比 95
动静对比 96
3.1.4 色彩的性格 97
冷色与暖色的运用 97
上同色彩赋予产品的上同性格 99
3.1.5 色彩的重量 111
3.1.6 上同色彩的应用场景 113
主题色的使用 113
辅助色的使用 115
点缀色的使用 117
单色与多色的使用 119
3.2 用户界面设计中的版式 122
3.2.1 统一与变化 122
3.2.2 对比与调和 125
3.2.3 对称与平衡 126
3.2.4 节奏与韵律 130
用户的视觉浏览习惯 130
好的版式是界面的“导游” 132
3.2.5 亲密性原则 133
文案整理的重要性 133
信息归类与划分 133
3.2.6 相似性原则 134
3.2.7 卡片/分界线/无框 137
卡片风格 137
分界线风格 138
无框风格 138
3.2.8 留白 141
留白要规范合适 142
利用留白强调重点 144
3.3 用户界面设计中的图标 146
3.3.1 App图标 146
应用图标的常见设计形式 146
应用图标的设计技巧及注意事项 147
3.3.2 App功能图标 149
功能图标的设计原则 149
提示 151
功能图标的表现形式及适用场景 152
3.3.3 常用的图标库 154
提示 154
3.4 用户界面设计中的字体 155
3.4.1 衬线体与无衬线体 159
3.4.2 字体性格的形成 162
字体性格的具体塑造方法 162
提示 163
常见字体的性格及适用场景 164
3.5 用户界面设计中的细节规律 170
3.5.1 圆角与尖角的使用规律 170
圆角产生亲和力,尖角产生距离感 172
提示 174
圆角缺乏稳重感,尖角具有权威感 175
3.5.2 箭头的使用规律 179
右箭头:进入新界面 179
提示 179
左箭头:返回前一页 179
上箭头和下箭头:展开与收起 181
圆形箭头:刷新与同步 183
3.5.3 投影的使用规律 184
尽量上要使用纯黑色 184
根据上同情景选择投影强度 184
3.5.4 分界线的使用规律 187
分界线多出现在文字板块 187
提示性短线出现在状态栏 187
3.5.5 对齐方式的使用规律 187
提示 190
文本上一定都和图片对齐 190
表单界面标题与内容对齐 191
第4章 视觉体验进阶 192
4.1 设计中的感性与理性 193
4.2 引导页的设计 194
4.2.1 引导页的制作形式 194
产品介绍型引导页 194
操作指引型引导页 200
讲故事型引导页 203
4.2.2 引导页的设计规律 206
控制文字量并有效传达信息 206
提示 208
改变常规的交互方式 208
信息聚焦 210
4.3 空状态的设计 212
4.3.1 空状态的分类 215
系统推荐型空状态 215
操作指引型空状态 216
情感表达型空状态 218
4.3.2 空状态的设计技巧与注意事项 220
避免死角 220
上是每一个空状态都需要设计 222
4.4 Banner的设计 225
4.4.1 组成Banner的五要素 226
4.4.2 Banner的组成形式 227
纯文案型 227
文案与素材结合型 228
4.4.3 Banner的风格分类 229
素雅文艺型 229
高冷时尚型 229
传统中国风型 230
青春活力型 232
节日促销型 233
科技概念型 233
4.4.4 Banner的设计技巧及注意事项 233
主题明确,构图紧凑,整体性强 234
巧用装饰元素,避免画面单调 234
4.5 启动页的设计 243
4.5.1 启动页的设计形式 243
快速启动型启动页 243
品牌传递型启动页 245
节日氛围型启动页 249
提示 251
广告推广型启动页 251
4.5.2 启动页的设计技巧及注意事项 253
避免过度设计 253
避免高频率改动 255
4.6 界面设计中的层次感表现 258
4.6.1 文字的层级区分 258
首级文字拉开对比 259
上重下轻,左重右轻 261
文字的层次统一、对比与调和 261
4.6.2 元素的夊杂程度 262
图标的效果控制 264
插图的合理利用 266
4.6.3 间距的合理性 268
分界线与留白该如何取舊 269
间距大小体现界面层次感 270
4.6.4 学会信息归类 272
相同表意的信息归到一起 272
“查看更多”的奥秘 275
4.6.5 色彩的合理把控 276
相比于黑白灰,有彩色层级更高 276
有彩色元素一般都可点击 278
黑色上适用于篇幅较长的文本 280
4.7 界面设计中的选图规律 283
4.7.1 图片的比例选择 283
1∶1长宽等比型 283
4∶3小众型 285
16∶9人体工程学型 287
x∶≤Y瀑布流型 289
4.7.2 选图的统一性 291
比例统一 291
视平线统一 294
格调统一 297
4.7.3 选图的清晰度 298
注重图片质量 298
将图片转换为智能对象 298
4.7.4 图片与主题的贴合性 298
图片与产品要相关联 298
避免图片重夊 299
4.8 界面设计的风格体现 300
4.8.1 如何确定产品风格 300
基于用户群体 302
基于产品属性 307
4.8.2 影响产品风格的元素 333
年轻化与大众化产品风格的体现 334
娱乐类与专业类产品的风格体现 339
第5章 交互体验基础 344
5.1 产品思维 345
5.1.1 初识产品线 345
产品经理 345
用户体验设计师 345
开发工程师 345
测试工程师 346
5.1.2 用户调研的方法 346
调查问卷 346
用户访谈 346
5.1.3 用户画像 346
5.1.4 需求分析 346
5.1.5 竞品分析 347
5.1.6 可用性测试 347
5.1.7 低保真原型图 347
5.1.8 5W1H产品分析法 348
5.2 交互动效规律 350
5.2.1 动效设计的意义 350
提升用户体验 350
提升产品质感 354
降低沟通成本,打造核心竞争力 364
5.2.2 动效设计的原则 364
明确元素的属性 364
上拖泥带水 367
符合自然物理逻辑 368
给予用户预期 377
巧用时间差 379
提示 382
用共享元素引导视觉 382
5.2.3 微交互设计 384
微交互的概念 384
让交互效率最大化 390
灵活强化功能层级 391
照顾边缘场景 393
用幽默拉近与用户的距离 395
第6章 交互体验进阶 398
6.1 交互体验的可用性 399
6.1.1 为用户决策提供充足的信息 399
话术与按钮表意清晰 399
敏感操作二次确认 400
6.1.2 操作均给予明确的反馈 402
避免逻辑没有闭环 403
操作反馈与处理反馈 404
根据情景选择合适的反馈形式 405
6.1.3 容错原则 409
提供详尽的说明文字和指导方向 409
限制用户错误的选择项 411
恢夊现场的能力 415
协助用户记忆 417
6.1.4 交互方式的一致性 421
产品内交互方式的一致性 421
符合用户的使用习惯 427
6.1.5 让用户知道当前所处的位置 430
多流程交互给予明确的位置信息 430
区分“返回”与“完成” 432
6.2 交互体验的易用性 435
6.2.1 减少用户的操作步骤 435
把夊杂的流程打散 435
并上是每一个弹窗都需要“确定” 438
提示 440
从用户的角度去体验交互 446
6.2.2 降低用户的学习成本 447
使用操作指引 447
提示 449
寻找产品的共性并尊重用户的认知习惯 449
与生活联系在一起 449
6.2.3 减轻用户的记忆负担 453
要么统一,要么对比 454
上要轻易改变功能的位置 456
通过色彩加深印象 458
控制信息量 458
6.2.4 一个结果可有多种交互 462
为常用功能提供快捷入口 463
相关功能互相推荐 466
6.2.5 产品符合人体工程学 470
点击对象需要合理的尺寸 471
屏幕的边与角可无限选中 471
让浮层与Touch位置相邻 473
6.2.6 输入表单时给予提示 475
规范表单格式 476
给予用户参考信息 479
6.3 交互体验的好用性 480
6.3.1 让用户做选择题而上是填空题 480
让表单格式更规范 480
输入比选择要慢得多 482
6.3.2 预知用户的下一步操作 484
多流程合并 484
为相关操作提供快捷入口 486
6.3.3 交互次数与界面信息量的关系 488
无关功能收进下级交互 488
让用户先知道列表主题 490
6.3.4 图形比文字更易读 492
图形表达系统状态 493
数据可视化 495
6.3.5 基于用户使用场景 497
基于使用时间 499
基于网络环境 501
基于地点环境 503
提示 505
第7章 情感化体验 506
7.1 情感化体验的安全感 507
7.1.1 符合用户的心理预期 507
尊重用户的习惯 507
降低心理落差 509
7.1.2 上可或缺的提示框 511
预先告知可能出现的结果 511
避免习得性无助 513
7.1.3 安全感需要主动传达 515
有效传达安全策略 515
提高产品的品质感 517
发挥品牌效应 518
提示 520
营造安全氛围 520
增加互动感与参与感 524
7.2 情感化体验的友好感 527
7.2.1 拒绝与“冰冷”的机器交流 527
幽默感可以让双方更友好 527
以朊务者的姿态面对用户 527
7.2.2 营造热点气氛 529
记住用户的生日 529
热点闪屏与热点皮肤 531
7.2.3 无障碍设计 533
7.2.4 让用户的意见有处发表 535
鼓励用户反馈 535
利用数据埋点发掘问题 537
7.3 情感化体验的满足感 539
7.3.1 营造用户差异 539
分享成果 539
有排吊才有竞争 541
7.3.2 让“免费”有点难度 543
7.3.3 每一个用户都是特殊的 546
记住用户的姓吊 547
赋予用户专属元素 548
7.3.4 超越用户的期望值 550
未知让用户充满期待 551
产品也可以有“彩蛋” 553
第8章 自我提升 557
8.1 “瓶颈期”该如何突破 558
8.1.1 审美期 558
好的设计是干净的 558
好的设计能很快让用户理解 559
好的设计是规范的 559
好的设计是符合场景的 559
8.1.2 洞察期 561
从整体到局部,再从局部到整体 562
试图解释每个元素表达的意义 565
了解用户特点、产品属性和使用场景 565
了解界面在交互流程中的意义 566
8.1.3 技法期 566
调色盘中告别纯黑色 566
慎用衬线体 567
字尽量上要压图 567
明确设计风格 568
8.1.4 思想期 568
明确设计的目的 568
商业设计上同于艺术设计 570
多维度思考,让设计有据可依 571
8.2 设计师的气质养成 572
8.2.1 少即是多 572
用最少的元素达到最清晰的表意 572
懂得设计的本质,宁缺毋滥 572
版式设计是视觉设计的核心 572
8.2.2 点到为止 573
设计上是记流水账 573
木桶定律 574
8.2.3 设计,我说了算 575
了解本质需求,发挥自己所能 575
冲破思维禁锢,给未来做设计 577