C6.06.1Keyboard occlusion of fields and actions设计研究

键盘遮挡输入区与提交按钮

别名: 键盘遮挡 · 输入框被挡 · 提交按钮不可见

概念解释

软键盘弹出后会吃掉屏幕下半截,正在编辑的字段和用来提交的按钮经常被盖住。用户能打字,却看不见刚打出的字,或打完后找不到“下一步 / 登录 / 发送”。遮挡的不是装饰,而是输入—确认闭环上的两块必要界面。

机制

软键盘是一块高约三分之一到一半视口的系统层,应用的布局若仍按未弹出时的高度计算,底部的字段、工具栏和主按钮会落到键盘后面。人的注视要在键盘、插入符和按钮之间切换;字段被挡时只能靠记忆判断有没有打错,按钮被挡时闭环断在最后一步。横屏、分屏、悬浮键盘会改变遮挡形状,但占用面积仍然大。问题在“系统层盖住了应用层”,不在键位画得对不对。

怎么研究

在目标机型上弹出键盘,记录当前字段、错误提示和主操作是否仍在可视区内,以及用户为了看见它们做出的滚动、点空白收起、改握持。自变量包括机型、方向、键盘高度(含候选栏)、字段在页面中的位置;因变量包括被挡控件数、额外滚动次数和放弃提交。只在桌面浏览器里点一下输入框,看不到这块占用。

边界

外接实体键盘或键盘最小化成一条工具栏时,占用大幅下降,这条遮挡会减轻。大屏平板上键盘不一定贴底,遮挡区域会改到别的地方。密码框被挡仍可能被接受,因为用户本就不想让旁人看见;但提交按钮被挡不能用同样理由放过。

怎么落地

  • 聚焦时把当前字段滚到键盘上方的可视区,并保证主提交按钮同样露出,而不是只露出字段。
  • 把“发送 / 下一步”做成键盘回车键的动作或键盘上方的附件栏,避免它只存在于会被盖住的页脚。
  • 真机弹出键盘截屏:字段、校验信息和主按钮三者都在可视区内才算通过。

延伸

  • 同组C6.06.2 弹出后可视区域压缩需重新布局而非简单上推 · C6.06.3 键盘收起的可发现入口
  • 相邻C6.07 键盘类型与场景匹配 · C6.14 放大镜与光标微调
  • 站内检索keyboard occlusion · visualViewport · IME inset

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.06.1