[译]交互设计检查单

可供性(每个控件都可以暗示如何使用它)

  • 操作和获得的结果符合逻辑并且简单易懂。

比如下拉菜单表明了有些东西会在下方显示,如果箭头向右则表明即将有信息在右边显示。

  • 虚拟操作和现实世界有清晰的映射。

比如按钮是能点的,有物理质感的。

  • 控件的功能可以快速的辨识。
  • 符号和图标对新手来说也能够理解。

比如带有”x”的按钮是用来关闭的,那些画着“打印机”的按钮是用来打印的。关于优化图标的可辨识度

反馈(能够使用户清楚发生了什么/正在发生什么)

  • 所有元素的状态应当是清楚和有效的。
  • 系统的当前状态是易于理解的。
  • 当一个任务执行完毕时,系统当提供合理的反馈和鼓励。

简洁(尽量的保持简洁,使用户专注任务)

  • 用户可以清楚的感知每一个步骤在任务流中的位置。

比如亚马逊的订单结算流程。

  • 优化符号,使他们更易于认知。

比如对于一个象征性的符号,是否用了一个新概念,是否需要学习,是否降低了用户认知的速度。

  • 不要用相似的符号代表各种不同的操作。

结构(合理的组织内容)

  • 整个系统信息架构的深度是一致的。

比如Flicker和Instagram的信息架构一深一浅。

  • 信息层级和内容架构是清晰组织的。
  • 增强排版的可读性。

比如Web端文字排版可读性指导

一致性(可预测的任务要提供相似性)

  • 如果用户需要连接图标和语言才能明白它的意思,应当减少这种设计。

比如只有图标和文本能够紧密结合在一起的时候用户才能更快的记起它的意思。

  • 整个系统中的交互动画要保持一致性。

比如Flipboard中各个页面的手势触发和相应的交互动画都是一致的。

  • 持续存在的元素尽量需要最小化前后矛盾。

比如取消按钮的样式始终如一。

  • 元素的位置要保持固定。

比如工具条在各个页面都是一样的。

  • 系统语言的使用要清楚并且保持相同的个性。
  • 符号的使用需要符合系统当前的语境。

比如在一个医学应用中使用汽车的仪表盘。

  • 语言需要清楚的表达符号的意思。

比如“Trash”图标的标签应当是“trash”代替“delete”。

可容忍性(预防错误,帮助恢复)

  • 提供简单的反转操作。

比如面包屑导航,回退按钮等。

  • 用户可以认知错误,诊断错误原因,并从错误中恢复。
  • 帮助和支持要容易使用。
  • 可访问性(适用于所有的潜在用户,考虑到不利条件,夸设备和复杂环境)
  • 标识和控件需要满足各种最小尺寸和空间来适应操作和阅读的需求。

比如图标建议最小尺寸为16像素来确保可读性,苹果建议在触屏设备下最小的操作目标尺寸为44×44像素。

  • 位置相近且形状、大小和颜色也相近的元素,要做一些调整。

原因:形状、大小和颜色相似的元素,在浏览时会造成一定的反应延迟。(本条由 UR-腾讯-baozhu 同学翻译)

  • 如果使用多种颜色,对比度要可以阅读理解。

对比度检测器

  • 对内容跨设备进行排版可读性的优化。

比如眼睛与不同设备的距离。桌面设备(20-24英寸),平板设备(18英寸以外),手机设备(16英寸以外)

  • 确实为可访问性提供回退方案。

比如为用特殊的文字符号代替图片,用文本来代替图标。W3C的可访问性方案 关于字符图标的可访问性

原文地址:http://ixdchecklist.com

Google Doc上排版更好一些:https://docs.google.com/document/d/1tT7nGJ-932UZxkGvPdLV3BCPZh2eIrWVtWRJigTmMDc/edit?usp=sharing