E2.01.2editable-region signifier设计研究

边框与填充需明确表达可输入区域

别名: 输入框示能 · text field affordance · 可编辑区域 · ghost field

概念解释

人要点进一个单行框,先得在画面上找出那块可输入区域。边框、底色或凹槽把这块区域从周围的静态文字里切出来,这种视觉标记叫可编辑区域示能(editable-region signifier)。它回答的是「字打在哪儿」,不是「大概要打多长」,也不是「此刻有没有焦点」。没有这层边界,标签看起来像标题,空白看起来像排版空隙,第一次点击会落空。

机制

可点击、可键入的控件依赖示能(signifier):一块看起来像容器、对比周围更「空」的表面。描边把槽的四至画出来;浅填充把槽从纸面里挖下去。两者都缺时,字段退化为与说明文字同一层级的墨迹,人会先尝试点标签、点提示语,或以为这页只读。仅靠一条底线的字段在密集表单里尤其容易和分隔线、链接下划线混在一起。填充若与卡片背景同色,边框若用极浅灰,噪声会把边界吃掉。示能必须在未聚焦、未悬停时就成立——靠悬停才显形的槽,在触屏上根本不会出现。

怎么研究

用首次点击测试:给未使用过该产品的人看静态表单,问「点哪里开始填姓名」。比较有完整边框、仅底线、无边框仅标签三种外观,记录命中可输入矩形的比例、误点标签或空白的次数、犹豫时长。自变量还包括背景噪声、字段密度、暗色模式。不要只测已聚焦的样子,因为发现字段发生在聚焦之前。辅助技术用户不走这条视觉通路,视觉示能研究不能替代程序化名称是否存在。

边界

终端、代码编辑器和部分专业工具把「整页都是可输入」当作默认,再画一个浅槽反而像禁区。纯键盘流程里,用户可能从未用指针去找槽,示能的收益下降。品牌上追求极简时,示能常被减到只剩底线;在字段少、周围对比足够时仍可能够用,一到多列表单或低对比主题就失效。高对比模式、强制颜色和系统放大字体可能改写边框与填充,按默认主题画出来的槽在这些模式下会消失。

怎么落地

  • 让未聚焦的单行框凭边框或对比填充就能从静态文本里被认出来,不要把发现任务交给悬停。
  • 避免用与卡片同色的「幽灵字段」;若必须弱化描边,就加强槽内填充与周围的明度差。
  • 把仅底线样式放到字段极少、且不会和链接或分隔线并排的页面;一到登记表、结账表就改回可闭合边界。
  • 验证:截掉光标和焦点环,把图发给没见过这页的人,请他们圈出所有能打字的地方。漏圈和误圈都是示能不足。

延伸

  • 同组E2.01.1 输入框宽度应提示预期内容长度 · E2.01.3 焦点态必须与默认态显著区分
  • 相邻E2.03 标签位置 · E2.21 只读、禁用与不可编辑的区分
  • 站内检索editable-region signifier · text field affordance · ghost field

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.01.2