H1.11.3mobile next-field control设计研究

移动端需提供下一项跳转

别名: 键盘下一项 · input accessory next · Return to next · 手机表单跳转

概念解释

手机上系统键盘占掉下半屏,Tab 键通常不存在,人无法像桌面那样「键出当前项再键入下一项」。下一项跳转是键盘工具栏或回车键上的明确动作:结束当前输入并聚焦下一字段,最后一项再变成「完成 / 提交」。没有它,人要先收键盘、点下一项、再弹键盘,每换一项付一次模式切换。桌面 Tab 顺序、回车在桌面会不会提交,都不能代替这块手机专用的通道。

机制

触屏填表的瓶颈是键盘的升起与收起,不是击键。每点一次屏幕上的下一框,就要等键盘动画、等视口被挤压缩、再找到被键盘挡住的字段。工具栏上的「下一项」把换项留在键盘模式里,视口可以跟着焦点滚,键盘不必倒下。第二层是键帽语义要跟位置走:中间项显示「下一项」,最后一项显示「完成」或提交动词。全程都写「搜索」或「前往」,人会在第三项就以为表填完了并触发提交。inputmodeenterkeyhint 是把这个语义交给系统键盘的接口;应用自己画一套与系统键帽打架的工具栏,人不知道该按哪一个。跳转目标必须是视觉上下一项,而不是 DOM 里偶然的下一个可聚焦节点——否则手机上会把人送到页眉搜索框。

怎么研究

在真机键盘升起时填一张至少五项的表。比较无跳转(只能点屏幕)、系统「下一项」、应用自制工具栏。

自变量:是否有下一项、最后一项键帽文案、跳转是否滚动被键盘挡住的字段。 因变量:换项次数里收起键盘的比率、被键盘挡住后误点的次数、在非最后一项触发提交、完成时长。

模拟器常常没有真实键盘高度。必须用真机。横屏、分屏、第三方键盘的工具栏高度不同,要抽测。不要用桌面 Tab 的完成时长来证明手机不需要下一项。

边界

单项验证码或单字段搜索不需要「下一项」,键帽应直接是「完成 / 搜索」。日期、下拉等不是文本的控件,跳转应关闭面板再落到下一文本框,而不是在滚轮里插入一个下一项。外接键盘接到手机上时,物理 Tab 应仍可用,「下一项」可以降级。网页若无法控制系统键帽,至少要保证回车在非最后一项不提交,并在可视区域提供「下一项」按钮。

怎么落地

  • 为每个文本字段设置进入下一项的动作;最后一项把键帽改成完成或提交,中间项禁止用「搜索 / 前往」。
  • 跳转后把目标滚到键盘上方的可见区,不要落在键盘后面。
  • 自制工具栏不得和系统键帽同时给出相反含义;能交给系统的 enterkeyhint 就交给系统。
  • 验证:真机填五项,中间四次换项都不收键盘。第四项键帽不是提交。最后一项回车才提交。把第三项滚到键盘会挡住的位置,按「下一项」后输入完整可见。

延伸

  • 同组H1.11.1 焦点顺序需与视觉顺序一致 · H1.11.2 回车提交的行为需明确
  • 相邻F1.10 键盘弹出后的可视压缩 · E2.22 自动聚焦与焦点抢夺 · H1.04 实时校验的时机
  • 站内检索enterkeyhint · input accessory · next field

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.11.3