E2.17.1content-gated clear control设计
清空按钮仅在有内容时出现
别名: 清空按钮显隐 · clear button visibility · 空槽也有叉
概念解释
槽内一颗叉,作用是把当前值一次清掉。空槽上这颗叉没有对象,点下去什么都不发生,或把焦点弄乱。有内容才出现的清空(content-gated clear control)让控件跟着值走:有字显示,空了隐藏。它管的是清空入口的在场条件,不是清完能不能撤销,也不是这颗叉会不会挤掉右侧的字。
机制
清空是对「已有内容」的操作,示能应在对象存在时才出现。空态显示叉,人会把它当成提交、搜索或「这里可以点出菜单」,第一次点击落空,信任下降。有内容却不显示,人只能退格或全选删除,触屏上又慢又容易剩残字。显隐绑定到值,还避免空槽右侧永远占着一颗无意义的靶,减少误触。动画上叉可以淡入,但不要在空与满之间保留可点的隐形热区。
边界
密码格被圆点填满时「有内容」为真,叉应出现;不要因为看不见字形就当成空。只读槽里的值不能清,出现叉是谎言,应改用复制而不是清空。搜索槽清空还要复位结果,那是另一组控件的职责,显隐规则仍然是有词才显示。IME 组字过程中槽里有临时字,此时显示叉并点下去,可能清掉正在组的音节,要等上屏后再出现,或点叉先提交组写再清。
怎么落地
- 把清空的渲染绑到「槽内有值」:输入、粘贴、自动填充后出现,删光后消失。
- 空态不要留隐形热区;消失就是不可点。
- 密码、数字、单行多行共用同一显隐逻辑,不要有的槽永远显示叉。
- 验证:空槽截图上不应看到叉;打一个字叉出现;删光叉消失。点空槽右侧不应触发清空或焦点乱跳。组字过程中点叉,看会不会把半个拼音搞丢。