F1.10.2field and submit co-visible设计

输入框与提交按钮需同时可见

别名: 输入提交同屏 · search and go · 键盘上的提交

概念解释

搜索框在键盘上方露着,真正把查询送出去的按钮却还在被键盘盖住的原底栏上。人打完字,看不见下一步,只能猜回车是不是提交,或先收起键盘再找按钮。字段与提交同屏要求:在键盘升起的那张图上,正在输入的框和把这段输入送走的那个控件同时可见、同时可点。

登录的密码框和「登录」、聊天的输入条和发送、表格最后一格和「保存」,都是同一对。缺任何一端,输入这件事就停在半截。

机制

输入的闭环是「写 → 核一眼 → 送出」。键盘已经占掉下半,闭环的两端若再分居键盘上下,核一眼和送出至少有一端要先关掉键盘才能完成。关键盘会丢掉输入法状态、候选词和光标位置的心理锚,再打开成本很高,于是人会拿回车碰运气,或把写好的字留在半提交。移动浏览器里回车的默认行为还不统一(换行 / 搜索 / 下一个字段),把提交赌在回车上等于把闭环交给平台差异。

把提交钉在键盘上方的那一条(输入附件带、搜索栏右侧的「搜索」、聊天发送)是在压缩之后的视口里重建闭环,而不是指望原底栏还露着。

边界

多字段表单不可能让每一个字段都和最终提交同屏——中间字段的「下一步」可以是焦点移到下一格,最终提交只与最后一组字段同屏。硬件键盘或桌面回车提交是稳定约定,同屏约束可以松。验证码自动填充把值填进字段并直接前进时,提交按钮被挡一瞬间可以接受,因为闭环被系统替走了。语音输入没有「写」的阶段,同屏对的是麦克风条和发送,而不是原输入框。

怎么落地

  • 单字段检索、聊天、验证码,把提交做成输入条的一部分,键盘升起时它仍停在键盘顶沿之上。
  • 多字段表单在键盘升起时,至少保证当前字段和下一个动作(下一项 / 提交)同屏;不要让提交只存在于卷到页脚才能见到的位置。
  • 不要把回车当作唯一提交;回车可以加速,按钮必须仍在。
  • 验证:弹出键盘,不收起,问能不能把当前输入送走。必须先收起键盘才能看到或点到提交,这对就失败。

延伸

  • 同组F1.10.1 键盘占据下半屏,改变全部位置关系 · F1.10.3 简单上推会把顶部关键信息推出屏幕
  • 相邻E2.01 单行输入框 · F1.03 就近原则与视线跳转
  • 站内检索field and submit co-visible · keyboard accessory · search and go

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F1.10.2