E1.18.2sheet versus dialog button order设计研究

底部弹出面板与居中对话框的按钮排列惯例可能不同

别名: 动作表按钮顺序 · 底部面板取消 · action sheet vs dialog

概念解释

同一对「确认 / 取消」,在居中对话框底部弹出面板(sheet / action sheet)里的排法可以不一样。iOS 动作表把取消单独钉在最底、与破坏性项分开;材料设计的底部表可能把主操作做成全宽第一条。居中对话框又走左右槽。把对话框的左右顺序原样贴到底部表,或把动作表的「取消永远在最底」搬进桌面对话框,都会踩到另一套惯例。

机制

两种容器训练了不同的运动终点。底部表从拇指热区长出来,取消要好够、又要离危险项远,于是常被做成与列表分开的一条。居中对话框来自桌面窗口,按钮落在阅读终点的页脚行里。容器一换,原来的「右边是确认」不再适用:底部表是垂直列表,没有右边。人却可能仍去点「列表最后一项」或「视觉上最重的那条」,这两处在动作表里常常一个是取消、一个是破坏项,对调容器却不对调映射,滑点会换一种形状出现。惯例属于容器类型,不是属于产品的某一枚按钮。

怎么研究

同一任务(分享 / 删除 / 取消)分别放进居中对话框和底部表,保持文案不变,只改编排。用该平台的日常用户。

自变量:容器类型、是否挪用另一容器的顺序、拇指是否单手。 因变量:错按、找到取消的时间、口头「取消应该在底下 / 在右边」。

只在桌面测对话框、只在手机测表,会看不到跨容器搬迁的错误。要让同一人做两种容器。

边界

桌面没有真正的底部表,把表的排法用在模态窗口里会浪费垂直空间,也没有拇指理由。Web 的自定义底表若不像系统动作表,用户不会调用动作表惯例,此时应自洽,而不是假装是 iOS。车载、电视的远场容器又是第三套,不要用手机底表去套。

怎么落地

  • 为对话框和底部表分别指定页脚排法,不要共用一个「按钮顺序」常量。
  • 在 iOS 风格动作表里把取消与破坏性项在空间上拆开,不要把它们并排进对话框页脚那种一行里。
  • 从一种容器改到另一种时,重新做一次该容器的惯例检查,而不是复制坐标。
  • 验证:请该平台用户不看文案指出「取消会在哪」。对话框答右边或左边、底表答最底,对得上容器;两种容器答同一位置,惯例就被搬错了。

延伸

  • 同组E1.18.1 默认聚焦应落在非破坏性的选项而非默认落在危险动作 · E1.18.3 键盘回车触发的默认按钮不应指向破坏性操作 · E1.18.4 跨平台产品需要为不同操作系统适配各自的排列惯例
  • 相邻E4.15 动作表 · E4.10 模态对话框 · E1.10 按钮排列顺序
  • 站内检索action sheet · bottom sheet · dialog footer

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.18.2