边框与填充需明确表达可输入区域
别名: 输入框示能 · text field affordance · 可编辑区域 · ghost field
概念解释
人要点进一个单行框,先得在画面上找出那块可输入区域。边框、底色或凹槽把这块区域从周围的静态文字里切出来,这种视觉标记叫可编辑区域示能(editable-region signifier)。它回答的是「字打在哪儿」,不是「大概要打多长」,也不是「此刻有没有焦点」。没有这层边界,标签看起来像标题,空白看起来像排版空隙,第一次点击会落空。
机制
可点击、可键入的控件依赖示能(signifier):一块看起来像容器、对比周围更「空」的表面。描边把槽的四至画出来;浅填充把槽从纸面里挖下去。两者都缺时,字段退化为与说明文字同一层级的墨迹,人会先尝试点标签、点提示语,或以为这页只读。仅靠一条底线的字段在密集表单里尤其容易和分隔线、链接下划线混在一起。填充若与卡片背景同色,边框若用极浅灰,噪声会把边界吃掉。示能必须在未聚焦、未悬停时就成立——靠悬停才显形的槽,在触屏上根本不会出现。
怎么研究
用首次点击测试:给未使用过该产品的人看静态表单,问「点哪里开始填姓名」。比较有完整边框、仅底线、无边框仅标签三种外观,记录命中可输入矩形的比例、误点标签或空白的次数、犹豫时长。自变量还包括背景噪声、字段密度、暗色模式。不要只测已聚焦的样子,因为发现字段发生在聚焦之前。辅助技术用户不走这条视觉通路,视觉示能研究不能替代程序化名称是否存在。
边界
终端、代码编辑器和部分专业工具把「整页都是可输入」当作默认,再画一个浅槽反而像禁区。纯键盘流程里,用户可能从未用指针去找槽,示能的收益下降。品牌上追求极简时,示能常被减到只剩底线;在字段少、周围对比足够时仍可能够用,一到多列表单或低对比主题就失效。高对比模式、强制颜色和系统放大字体可能改写边框与填充,按默认主题画出来的槽在这些模式下会消失。
怎么落地
- 让未聚焦的单行框凭边框或对比填充就能从静态文本里被认出来,不要把发现任务交给悬停。
- 避免用与卡片同色的「幽灵字段」;若必须弱化描边,就加强槽内填充与周围的明度差。
- 把仅底线样式放到字段极少、且不会和链接或分隔线并排的页面;一到登记表、结账表就改回可闭合边界。
- 验证:截掉光标和焦点环,把图发给没见过这页的人,请他们圈出所有能打字的地方。漏圈和误圈都是示能不足。