IXD交互设计检查表

  关于IXD设计检查项

可供性

控制建议如何使用它。

控件以简单且合乎逻辑的方式映射到结果。 示例：下拉箭头指向下方表明下方会出现某些内容，而如果箭头指向右侧，则表明右侧会出现某些内容。
* 相互作用
* 图像学
* 界面
* 导航 控制和现实世界之间有一个明确的比喻。 示例：按钮提供数字和物理方式的推动。
* 相互作用
* 界面 控件的功能一目了然。 * 相互作用 * 界面 符号图标需要对新用户清晰可见。 示例：符号图标 = 表示关闭的“x”按钮，图标 = 表示打印的“打印机”图标。
* 图像学

反馈

应该清楚发生了什么/正在发生什么。

所有元素状态都清晰有效地说明。 * 图像学 * 交互的 * 界面 用户很容易理解系统的当前状态。 * 图像学 * 相互作用 任务完成后提供反馈/强化。 * 用户满意度

简单

尽可能简单并以任务为中心。

顺序流程中的每个步骤对用户来说都是显而易见的。示例：Amazon 的结帐流程。 * 导航 优化符号以实现最快的识别。需要考虑的事项：使用的图标是“标志性的”还是“象征性的”？ 如果它们是象征性的，它们是否是需要学习的新概念？如果是，是否会减慢识别速度？ * 图像学 不要用相似的符号表示多个动作。 示例：使用“星号”图标保存操作，使用“竖起大拇指”图标喜欢操作。 * 图像学

结构

内容组织合理。

信息架构的深度在整个系统中是一致的。 需要考虑的事项：深层信息架构（示例： [ Flickr ](http://flickr.com) ）与浅层信息架构（示例： [ Instagram ](http://instagram.com) ） * 系统设计 * 相互作用 信息层次和内容结构组织清晰。 * 排版 * 导航 * 内容策略 测量长度优化了可读性。 * 排版

一致性

可预测性的相似性。

通过结合符号和语言来减少记忆信息的需要。 需要考虑的事项：当图标和标签结合使用时，信息的回忆会更快。 参考 Bill Moggridge 的设计思想。 * 图像学 运动和动画模式在整个系统中是一致的。 [示例：滑动手势触发Flipboard](https://flipboard.com/) 中的翻页 。 * 导航 * 交互的 利用现有元素来最大程度地减少不一致。 示例：取消按钮的样式在整个界面中都是相同的。 * 界面 元素的位置在整个系统中是一致的。 示例：工具栏位于每个页面的顶部。 * 界面 * 导航 * 信息架构 语言使用在整个系统中清晰且一致。 * 排版 符号应该与系统相关。示例：医疗 Web 应用程序中的汽车速度计活动图标。 * 图像学 * 界面 语言清楚地表示相应的符号。示例：垃圾桶图标标记为“垃圾桶”而不是删除。 * 图像学 * 界面

宽容

防止错误，帮助恢复。

提供简单的动作逆转。示例：面包屑导航、后退按钮、滑动手势。 * 导航 * 相互作用 * 系统设计 用户必须能够识别、诊断错误并从错误中恢复。 * 导航 * 界面 用户需要随时获得帮助和支持。 * 导航 * 系统设计

辅助功能

可供所有预期用户使用，尽管存在障碍、访问设备或环境条件。

符号/控件必须满足最小尺寸、空间和对比度要求。需要考虑的事项：图标必须至少为 16px 以确保最低可读性。 “Apple 建议最小目标大小为 44 像素宽 44 像素高”。 * 图像学 调整形状、大小和颜色相似的元素。 需要考虑的事项：具有相似形状、大小、颜色的元素会导致响应延迟。 * 图像学 使用多种颜色时可以访问对比度。 * 颜色 排版最适合在任何给定的环境/上下文中阅读。 需要考虑的事项：台式机（距离屏幕 20-24 英寸）、平板电脑（距离屏幕 18 英寸）和移动屏幕（距离屏幕 16 英寸）？尺寸计算器和字体比例 * 排版 确保有可访问性目的的后备方案。需要考虑的事项：图像的替代文本、图标的后备文本。 * 图像学 * 导航 * 界面