F1.10.2field and submit co-visible设计
输入框与提交按钮需同时可见
别名: 输入提交同屏 · search and go · 键盘上的提交
概念解释
搜索框在键盘上方露着,真正把查询送出去的按钮却还在被键盘盖住的原底栏上。人打完字,看不见下一步,只能猜回车是不是提交,或先收起键盘再找按钮。字段与提交同屏要求:在键盘升起的那张图上,正在输入的框和把这段输入送走的那个控件同时可见、同时可点。
登录的密码框和「登录」、聊天的输入条和发送、表格最后一格和「保存」,都是同一对。缺任何一端,输入这件事就停在半截。
机制
输入的闭环是「写 → 核一眼 → 送出」。键盘已经占掉下半,闭环的两端若再分居键盘上下,核一眼和送出至少有一端要先关掉键盘才能完成。关键盘会丢掉输入法状态、候选词和光标位置的心理锚,再打开成本很高,于是人会拿回车碰运气,或把写好的字留在半提交。移动浏览器里回车的默认行为还不统一(换行 / 搜索 / 下一个字段),把提交赌在回车上等于把闭环交给平台差异。
把提交钉在键盘上方的那一条(输入附件带、搜索栏右侧的「搜索」、聊天发送)是在压缩之后的视口里重建闭环,而不是指望原底栏还露着。
边界
多字段表单不可能让每一个字段都和最终提交同屏——中间字段的「下一步」可以是焦点移到下一格,最终提交只与最后一组字段同屏。硬件键盘或桌面回车提交是稳定约定,同屏约束可以松。验证码自动填充把值填进字段并直接前进时,提交按钮被挡一瞬间可以接受,因为闭环被系统替走了。语音输入没有「写」的阶段,同屏对的是麦克风条和发送,而不是原输入框。
怎么落地
- 单字段检索、聊天、验证码,把提交做成输入条的一部分,键盘升起时它仍停在键盘顶沿之上。
- 多字段表单在键盘升起时,至少保证当前字段和下一个动作(下一项 / 提交)同屏;不要让提交只存在于卷到页脚才能见到的位置。
- 不要把回车当作唯一提交;回车可以加速,按钮必须仍在。
- 验证:弹出键盘,不收起,问能不能把当前输入送走。必须先收起键盘才能看到或点到提交,这对就失败。