H1.15.2placeholder is not a label设计研究

仅靠占位符代替标签会在输入后丢失字段含义

别名: 占位符当标签 · floating label empty · placeholder vanishes

概念解释

占位符是输入框空着时显示的浅色提示,用来给格式例子。用它代替标签指屏幕上没有始终可见的「邮箱」「电话」,只靠框里那句浅字。人一开始还能看见含义;一开始输入或被自动填充之后,浅字消失,框里只剩值,含义丢掉。浮动标签若在聚焦时把占位符抬成标签,算有持久标签;若填充后标签不在,仍算丢失。程序化绑定、错误关联、必填的双通道,是另三步。

机制

标签的工作是在填写的全过程里回答「这是什么」。占位符的工作是在空着的时候示范「写成什么样」。把前者塞进后者,空态勉强可用,非空态失败。自动填充、粘贴、从草稿恢复都会跳过空态,人直接面对一排没有标签的值,只能靠内容猜这是邮箱还是用户名。第二层是对比与记忆:占位符对比度通常低于正文,低视力用户在空态就已经看不清;能看清的人一旦开始输入,工作记忆要同时保住「我在填什么」和正在构造的值。多字段并排时(卡号、有效期、CVV),三个框填满后完全同质,填错栏在这一刻发生。阅读器对占位符的支持也不稳定:有的当名称读,有的忽略,有的只在空时读一次。

怎么研究

做「只有占位符」「持久标签 + 占位符当例子」「浮动标签在填充后仍在」三种。任务包含自动填充和中途被打断再回来。

自变量:标签是否在非空时仍可见、占位符对比度、是否并排多个仅占位符的框。 因变量:填充后仍能说出字段含义的比率、并排框填错栏、低对比下空态能否读出占位符、阅读器在非空时是否还能报名称。

不要在空态截图上做检查——丢失发生在非空。自动填充条件必须有。

边界

单项搜索框用占位符「搜索」加按钮上的可见「搜索」,非空时按钮仍提供含义,伤害较小。密码框用圆点代替值,若再没有标签,连「这是密码」也会丢。占位符里写格式例子(name@example.com)是正当用法,前提是旁边还有持久标签。移动端为了省垂直空间拿掉标签,损失的是中断恢复,不是首屏美观。

怎么落地

  • 每个字段始终保留可见标签;占位符只放格式例子,不放字段名。
  • 浮动标签必须在有值、有填充、失焦之后仍然可见,不能回到「只有值」。
  • 并排的短字段各自有标签,不要靠三个不同占位符在空态区分。
  • 验证:自动填充整行地址后,遮住记忆问每一框是什么;答不出即失败。低对比模式看空态占位符是否还可读——即使可读,也不能当标签。阅读器在字段已有值时 Tab 进入,确认仍听到字段名而不是只听到值。

延伸

  • 同组H1.15.1 每个输入需要与其可见标签建立程序化关联 · H1.15.3 错误提示需要通过无障碍属性关联到对应字段 · H1.15.4 必填状态需要同时提供视觉与非视觉的可感知标识
  • 相邻E2.04 占位符 · E2.05 浮动标签 · H1.13 智能预填与自动填充
  • 站内检索placeholder · floating label · persistent label

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.15.2