UX/PatternsLibrary
Horizon 视觉规范
此 Wiki 的目的是为 Horizon 的模式实现提供总体指导原则。
前提条件
- 这些模式假定开发者正在使用 angular.js。
- 这些模式旨在提供一些指导，但不会过于严格。
- 在将模式包含在此 Wiki 中之前，应通过社区进行验证。
- 社区成员应感到可以自由地添加/编辑本文档。
我们正在努力在过于严格和拥有体验不一致的门户之间达成妥协。
点击次数
由于倾向于将其作为衡量设计有效性的标准，因此讨论完成一项任务所需的点击次数是合适的。例如，认为需要三次点击而不是四次点击的设计对用户来说总是更好。
文章
“三点击法则就像网络设计建议中的弗莱迪·克鲁格。你认为它终于死了，然后它又回来了，开始破坏关于可用设计的合理辩论。我希望说服你停止将三点击法则作为衡量可用性的标准。”
“如果三点击法则有科学依据，我们在数据中找不到它。我们的分析没有发现用户点击次数与成功找到所需内容之间存在任何相关性。”
有其他方法可以衡量与客户满意度相关的可用性。例如，有许多标准化的问卷可以为单个任务或整体体验提供评分。
组件
模式
详情面板
详情面板包含 Horizon 中对象的详细信息，通常通过从面板中的列表中单击对象名称来打开。例如，通常会单击实例面板中的实例名称以查看该实例的特定详细信息。
总的来说，如果信息过多而无法轻松地适应表格中的一行，则需要一个详情面板。例如，一个实例包括源、风味、配额和网络；太多内容无法放入单行。此外，详情面板应允许用户根据在详情面板中显示的信息对对象采取操作。例如，用户应该能够在实例详情面板中更新特定实例的风味。
A: 此区域应仅包含描述和标记，这些描述和标记描述整个对象。例如，实例 No. 12 处于活动状态，而不是内容位于其中一个选项卡中。另一方面，风味中的 Ram 量应在风味选项卡中。
B: 选项卡应代表构成对象的资源。例如，实例由镜像、风味、网络等构建。
C: 此区域应仅包含特定于该选项卡的内容。例如，描述特定风味中 VCPU 数量的标签应位于风味选项卡上。
D: 链接到 m1.small 风味的详情面板。
E: 仅包含影响整个对象的动作，例如创建快照或终止实例。
F: 详细的描述对新用户很重要。这在 OpenStack 中尤其重要，因为术语与其他的云解决方案差异很大。
G: 仅包含与选项卡内容相关的动作。例如，包含调整实例大小是合适的，但创建快照属于详情面板的顶部。
向导模态框
向导是一种特殊的模态框，旨在引导用户完成相对复杂的动作，例如启动实例。它们通常具有在用户可以完成工作流程后续步骤之前必须完成的步骤。
您应该抵制将步骤合并到右侧菜单的诱惑，并发现该设计变得视觉混乱且让用户感到困惑。在某些方面，UI 是为了适应首次使用的用户（他们想要一些指导）和想要快速完成向导的高级用户之间的妥协。还有一种观点是，更高级的用户可能会使用 CLI 来执行这些类型的操作。
维基百科对向导的描述 here.
A: 左侧的导航应显示在用户能够启动对象之前需要完成哪些步骤。用户应该能够在不完成先前步骤的情况下完成这些步骤。
B: 通常，步骤标题可以包含比菜单中显示的更多文本。原因是菜单具有空间限制，而标题通常可以包含更多文本。
C: 描述应尽可能具体。请记住，并非所有用户都熟悉此 UI 或社区使用的术语。
D: 取消按钮应始终对齐到模态框的左侧
E: 返回和下一步按钮应紧靠动作按钮的左侧。返回按钮在第一步中不应可见。
F: 启动动作应始终对齐到模态框的右侧。在完成所有必需信息之前，它应处于禁用状态。
简单模态框
响应式表格
