默认、悬停、按下、禁用、加载五态需完备
别名: 按钮五态 · 交互状态 · control states
概念解释
一枚按钮要能走完整的状态机(state machine):默认(default / rest)、悬停(hover)、按下(pressed / active)、禁用(disabled)、加载(loading)。五态完备的意思是:每一种真实会发生的交互相位都有对应的外观与行为,而不是只画了默认和禁用两张图。缺悬停,指针用户不知道这东西能点;缺按下,接触有没有被系统接住说不清;缺加载,提交之后按钮还维持默认可点,像什么都没发生。五态是按钮作为触发器的最低生命周期,不是皮肤清单。
机制
按钮的工作是把一次意图送进系统并挡住在结果回来之前的第二次意图。每个状态对应生命周期里的一个问题:默认回答「这是可点的」;悬停回答「指针已经对准它」;按下回答「接触已被采样」;禁用回答「此刻不能点,并且不是坏掉」;加载回答「上一次已经送出,正在等结果」。缺任何一态,用户只能用相邻状态去猜当前相位。猜错的典型后果是:把禁用当成加载而空等,把加载当成默认而连点,把没有悬停的平面色块当成不可点的装饰。状态机不完备时,失败发生在「还没轮到看反馈组件」之前——人在触发器上就已经迷路。
怎么研究
用状态覆盖检查而不是满意度:列出指针进入、按下、抬起、键盘激活、无权限、请求进行中六类事件,看每类是否落到五态中的确定一态。再做残缺对照:同一按钮拿掉悬停或拿掉加载,完成「改邮箱并保存」一类任务。
自变量:缺失的是哪一态、输入通道(鼠标 / 触摸 / 键盘)。 因变量:误点禁用、重复提交、把装饰当成按钮或把按钮当成装饰的次数、完成时间。
触摸设备没有悬停相位,研究里应把悬停标为「通道不适用」而不是「缺失」。把触屏上的无悬停记成缺陷,会夸大不完备率。
边界
纯触屏产品可以没有悬停态,但按下、禁用、加载仍要在。键盘焦点不是这五态之一,却必须另有可见焦点指示,否则键盘用户会从完备的鼠标状态机里掉出去。瞬时动作(本地切标签)若在一帧内完成,加载态可以不出现,强行转圈反而造成闪烁。开关类控件的选中/未选中是值,不是这五态;不要用按下态去顶替选中态。
怎么落地
- 为每个按钮组件列出五态的视觉与行为,并标明哪一态在当前通道不适用(触屏无悬停)。
- 把请求开始切到加载态、请求结束切回默认或禁用,写进同一条状态转移,不要只改接口层。
- 键盘激活必须能进入按下与加载,不能只给鼠标做状态。
- 验证:用鼠标、触摸、键盘各走一遍「可点 → 提交中 → 失败后可再点」和「无权限禁用」。任何通道上若外观停在默认却已经发出请求,或停在可点却实际禁用,五态就不完备。