C6.06.1Keyboard occlusion of fields and actions设计研究
键盘遮挡输入区与提交按钮
别名: 键盘遮挡 · 输入框被挡 · 提交按钮不可见
概念解释
软键盘弹出后会吃掉屏幕下半截,正在编辑的字段和用来提交的按钮经常被盖住。用户能打字,却看不见刚打出的字,或打完后找不到“下一步 / 登录 / 发送”。遮挡的不是装饰,而是输入—确认闭环上的两块必要界面。
机制
软键盘是一块高约三分之一到一半视口的系统层,应用的布局若仍按未弹出时的高度计算,底部的字段、工具栏和主按钮会落到键盘后面。人的注视要在键盘、插入符和按钮之间切换;字段被挡时只能靠记忆判断有没有打错,按钮被挡时闭环断在最后一步。横屏、分屏、悬浮键盘会改变遮挡形状,但占用面积仍然大。问题在“系统层盖住了应用层”,不在键位画得对不对。
怎么研究
在目标机型上弹出键盘,记录当前字段、错误提示和主操作是否仍在可视区内,以及用户为了看见它们做出的滚动、点空白收起、改握持。自变量包括机型、方向、键盘高度(含候选栏)、字段在页面中的位置;因变量包括被挡控件数、额外滚动次数和放弃提交。只在桌面浏览器里点一下输入框,看不到这块占用。
边界
外接实体键盘或键盘最小化成一条工具栏时,占用大幅下降,这条遮挡会减轻。大屏平板上键盘不一定贴底,遮挡区域会改到别的地方。密码框被挡仍可能被接受,因为用户本就不想让旁人看见;但提交按钮被挡不能用同样理由放过。
怎么落地
- 聚焦时把当前字段滚到键盘上方的可视区,并保证主提交按钮同样露出,而不是只露出字段。
- 把“发送 / 下一步”做成键盘回车键的动作或键盘上方的附件栏,避免它只存在于会被盖住的页脚。
- 真机弹出键盘截屏:字段、校验信息和主按钮三者都在可视区内才算通过。