互动状态

交互状态传达了界面中元素的状态,一旦采取了操作,就建立信任,并建议与元素交互的能力(或不能力)。

一组处于不同状态的按钮


原则

要含蓄,但要清楚

成功的互动反馈是提供信息,而不是装饰。避免制造视觉噪音或强烈颜色变化的复杂过渡。分散注意力的动画会造成干扰,使界面使用起来不愉快。

保持一致

对交互反馈的一致处理可以创建可识别的模式。如果交互在Shopify管理员之间产生不同的反馈,则会恶化模式的完整性,并可能使商家感到困惑。


设计交互状态

请记住,根据商家使用的输入设备不同,他们与界面的交互方式也不同。他们可能使用的设备包括:

需要考虑的输入设备

  • 鼠标
  • 触摸屏
  • 键盘
  • 的声音
  • 游戏控制器
  • 可刷新盲文显示

要了解更多,请查看可访问性的指导方针

使用符号

为商家提供提示,让他们知道如果他们使用这个界面会做什么。通过使用能指,我们可以设定组件可以做什么的期望,从而创建一个更直观、更容易使用的界面。能指的类型包括:

默认状态下的“排序”按钮。

显式的,其中内容指导商家执行预期的操作,如“排序”或“保存”。

一个“编辑”按钮,当鼠标悬停在它上面时,它的下划线出现。

隐藏的在这种情况下,除非商家与它进行交互,例如悬停或使用标签导航查看按钮是否可点击,否则线索不会显示。

“打印装箱单”按钮是灰色和无效的。

,该操作显示为非活动(比如按钮是灰色的,对悬停没有响应),因为商家无法使用它。

吐司组件、带有旋转器组件的按钮和带有错误消息的文本字段组件。

行为

使用反馈指标就像进度条组件或微调控制项组件,让他们知道接口收到了他们的请求。如果合适的话,你还可以提供额外的信息,说明需要完成什么或需要多长时间。

对于非破坏性反馈对于操作的结果,使用烤面包组件。

对于不成功的完井这就要求商家采取行动,提供阻止行动成功完成的信息,以及商家可以采取什么措施来解决问题。方法的验证错误状态文本字段组件。