E2.05.3float-versus-placeholder distinction设计
浮动状态需与占位符明确区分
别名: 浮动标签混占位符 · floating label vs placeholder · 槽内双文案
概念解释
浮动标签的空态和占位符都是「槽内浅色文字」。若上浮后的名称、仍留在槽内的提示、以及真正的值三种墨迹分不清，用户会把名称当成例子，或把例子当成已填内容。浮动态与占位符的区分（float-versus-placeholder distinction）要求这三层各有稳定的位置或形貌：名称最终停在槽外，占位符（若还要用）只在空且未聚焦时出现且绝不上浮，值是槽内唯一的实心文字。
机制
同一槽里最多出现过三串字：将要上浮的名称、额外的格式例子、用户输入。视觉系统按位置和对比给它们角色。若名称上浮后例子还在槽内，而且两者字号、颜色接近，角色会串：人以为小字是提示、槽内浅字是名称，或反过来。更糟的是名称与占位符用同一字符串——空态看见一次「手机号」，聚焦后再看见一次「手机号」在头顶，中间还闪过同一句，用户无法判断哪一次是身份、哪一次是例子。区分失败时，浮动标签不但没解决占位符的问题，还多制造了一层会移动的浅字。
边界
只用浮动名称、完全不放占位符时，槽内在聚焦后应是空的，区分任务最轻，只需保证空态名称不要被当成已填值。搜索框那种「槽内永远是提示、外面另有按钮名」的模式不是浮动标签，拿来当对照会误判。浏览器自动填充的值往往带着黄底，和浅色占位符本来就不同；若自动填充失败留下占位符，又和未上浮的名称撞车。动画过程中名称与占位符在同一轨迹上交叉一帧，低帧率下那一帧会被看成重影。
怎么落地
- 选定单一的槽内空态文案：要么是即将上浮的名称，要么是不参与上浮的例子，不要两句同时出现在槽内。
- 让上浮后的名称在位置上离开槽，颜色和字重也与槽内值、与任何残留提示分开。
- 若必须保留格式例子，把它放在槽外常驻说明里，不要在名称上浮后还留在插入点底下。
- 验证：截三张静帧——空着、聚焦未输入、已输入——问没见过这页的人每一张里哪一句是字段名、哪一句是例子、哪一句是值。任何一张对不上，三层墨迹就还糊在一起。