可用性实战（TBD）

什么是可用性？

• 可学习性（Learnability）-初次接触这个设计时，用户完成基本任务的难易程度；
• 效率 （Efficiency）-用户能多快完成任务；
• 可记忆性（Memorability）-当用户一段时间没有使用产品后，是否能马上回到以前的熟练程度；
• 出错（Errors）-用户能否从错误中恢复；
• 满意度（Satisfaction）-用户对产品的主观满意度。

Nielsen 的可用性框架

可用性是指在特定的使用场景下，产品为特定用户用于特定目的时所具有的有效性、效率和主观满意度。

ISO 的可用性框架

可用性在产品设计中的位置

可用性建设的重点层面

界面层面可用性建设的前提、基础

界面层面可用性建设的加强、巩固

当我们提到可用性是，我们重点要讨论的是交互设计。

它不是架空的，而是基于结构层，表达结构中的信息和体验。

为什么做可用性建设？

信息/体验

用户

折损

提高产品表达能力

曲解

提高用户耐心

交互有预期

界面不杂乱

信息不晦涩

最终效果体现

1. 对xx率的影响（C端）
2. 更好的贯彻管理意识，提升效率（内部系统）

提高可用性

话题太大了，本次仅从一本畅销书的理论出发

大众使用web的几个事实

扫描而非阅读

满意即可，不求最佳

勉强应付，不愿迁移

Krug可用性三大定律

1. don‘t make me think（别让我思考）。
2. 要点击多少次都没关系，只要每次点击都是无须思考的，明确无误的选择。
3. 去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。

1

1

2

3

交互明确有预期

信息清晰不冗余

“傻瓜式”阅读

结构清晰

重点明确

表达精准

适当引导

反馈即时

串联得当

复用共识：降低理解成本

• “抄袭”的雅称。复用常识就可以不思考。
• 流程创新要谨慎，“新鲜感”和“理解成本”要权衡。用户倾向于把所有的电商网站当淘宝用。
• 界面创新要谨慎，“一个网站的xxx应该在xxx位置”。用户第一眼找不到可能就失去耐心了。

边际效应：更前瞻的设计

• 工具型，或其他要求效率的系统。
• 不可完全按don't make me think原则。由于复杂度和专业性，要求使用者有前置的知识储备。
• 上手慢没关系，上手后要保证高效，需要考虑培训成本。

客服平台

H5编辑器

1. 信息清晰不冗余

网页上的所有东西都是信息，信息不止是文案，

像是按钮本身也传达一种动作的信息。

1. 结构清晰
2. 重点明确
3. 表达精准

1.2 结构清晰

关于信息结构，金字塔原理的理论值得借鉴

• 总分结构
  • 同级信息超过七个，建议拆分到几个组，超过后理解成本变高
• 同组关联
  • 时间顺序，结构顺序，程度顺序
• 同组覆盖
  • 完整概括上层，且不冗余

优秀的信息结构设计可以让用户更容易理解网站的内容，特别是B端这样复杂的网站。

信息拆分举例

• 提高用户耐心：milestone感
• 信息结构清晰：总分结构

信息直接的关系可以分为

• 同级关系
• 从属关系
• 没有关系（😂）

需要一些方法更好的体现这些关系⬇️

• 一些社区组件
• 通用布局规范

同级关系 - 重复

相同样式重复的罗列方式暗示了它们的关系是同级关系

在输入框直接后缀按钮，让它们关系更紧密，用户很容易认为搜索内容即文本框内容

将行为并列或者相反的动作按钮放在一起，这是一种亲密的关联，它们有相同的主题，暗示了它们是同组的。

同级关系 - 亲疏

同级关系 - 内部信息

同级间内部信息应做隔离。k和v属于同级关系，它们都是字段的属性，将k和v之间的距离缩短，让归属更清晰

从属关系 - 缩进

典型的，可以通过缩进表达内容的从属关系。

树形组件本质上也是通过缩进来表达从属关系。

从属关系 - 单层

用一个折叠也能表达从属关系，不过如果是多层的就不太适合了。

从属关系 - 级联

在几个字段存在从属关系时，还可以使用级联组件来展示。

非典型结构

1.2 重点明确

再次引用don't make me think的理论

• 在针对“为扫描而设计，不是阅读”这一点是，krug给了几个建议

  • ......

  • 在页面把越重要的东西越突出，建立清楚的视觉层次

  • 可以点击的地方必须突出，让人明显知道可以点击

  • ......

将重点信息强调出来可以帮助用户更好的了解网站的核心内容，降低其使用成本。信息的重要程度是随时间的变量，在时间线上保持重点突出，有利于让用户更好的完成任务。

衡量重要性的维度

• 大小
  • 大 > 小
• 顺序
  • 上 > 下
  • 左 > 右（看具体语言）
• 颜色
  • 危险 > 警告 > 主要 > 普通 > 不可操作 > 弱化

• 空间
  • 固定 > 首屏 > 次屏 > 额外空间
• 逻辑
  • 默认选中 > 其他
• 动效
  • 动态 > 静止
  • 渐变 > 瞬移
• ......

大小 - 顺序

更大就更醒目，把重要的信息放大

并且位置上靠上&靠左，符合阅读习惯

颜色

当人们达成共识时，颜色也成了语言。最需要用户关注的信息往往使用最显眼的颜色。

颜色

颜色是最常用的设计语言，不过回顾过往的项目也有滥用的地方。

颜色

通过颜色对比能让信息更有侧重，颜色并不是为了美观，可能配色主题才是

空间 - 固定

网站头部以及侧边栏一般会固定位置，这些是重要的功能。无论用户浏览多久都可以快速获得这些功能

空间 - 固定 - 区域内固定

在一个固定的区域内，需要通过滚动条来浏览面积大于当前区域的内容，通过固定来保持用户的关键浏览上下文，典型的Excel，Table组件，collapse组件

空间 - 额外空间 - 节约首屏

适当的使用折叠，可以做到在上下文连贯的基础上，让首屏展示更多重要的内容

空间 - 额外空间 - 承载次要信息

在同类枚举过多的情况下，全部展示从用户体验还是性能上都会有问题，是否查看更多的权利交给用户

空间 - 额外空间 - “足不出户”

有了丰富的“额外空间”组件，单个网页可以更好的承接更多的功能，让用户有“足不出户”的体验，组件举例：

变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。

1. Drawer，侧边弹窗（如：绩效系统绩效详情）
2. Modal，弹窗
3. Tabs，标签组

逻辑 - 默认选中

典型的，在打开百度首页的时候，他会默认的focus到输入框上，搜索也是这个页面最重要的流程

逻辑 - 默认选中

其他典型的场景：

这些默认值表达了系统设计者的意向。也可以通过一些预先的条件预判默认值提高用户体验，如通过地理位置给出建议搜索范围，潜移默化的提高使用效率。

• 筛选条件的默认值
• 表单的默认值

动效 - 吸引眼球

人脑会对动态的事物保持敏感，让重要的信息“动起来”，可以吸引用户的注意。

动效 - 解释反馈

显示世界中大部分事物不会瞬间变化，通过视觉追踪，人们可以理解发生了什么。GUI由程序控制，很多地方的改变是瞬时的，有时候用户很难察觉发生了什么

在脉脉的职言消息列表中会有消息聚合，点进来后
通过一个背景色的渐变来解释哪些是新增的消息

在ios的闹钟中，删除一个闹钟会有一个移出的动效，解释了删除这件事

1.3 表达精准

去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。--Krug

与其说是追求精简，不如说是追求一种恰到好处

意义不明

表达精准

冗余啰嗦

过于精简

不加雕琢

文学性

大白话

产品感

优美

逻辑好

更精准

• 统一术语
• 语言语气
• 面向用户&产品

“价值观” vs “人才观”

“业绩” vs “绩效”

“归属”  vs “平台”

“分组” vs “分桶”

...

统一术语

严谨，专业，非口语化

精简，去掉已经明确的上下文信息

更符合大众习惯的表述

注意易错词，登录 vs 登陆

多鼓励，少命令

...

语言语气

告诉用户为什么，前因后果，异常TODO

从用户视角描述价值

强调产品重要信息

......

面向用户&产品

• 《B端产品文案使用的六个修养》
  • http://www.woshipm.com/copy/2865650.html
• 《蚂蚁金服设计价值观》文案篇
  • https://3x.ant.design/docs/spec/copywriting-cn
• 《GUI禁忌》文字禁忌
  • https://book.douban.com/review/1955550/

提高可用性

ep2: ant-design的设计模式原则

模块关系

亲密性

对齐

对比

重复

足不出户

• 如果可以，不要跳到新页面
• 如果内容太多，要区分主次（例：okr评论）
• 说明性的信息

巧用过渡

• 解释业务逻辑
• 强调虚拟空间
• 提高感知性能

即时反馈

• 就近反馈
• 提高感知性能