F1.10.1keyboard viewport rewrite设计

键盘占据下半屏,改变全部位置关系

别名: 键盘重排 · IME inset · 可视区改写

概念解释

输入框一聚焦,系统键盘从底边长出来,常常吃掉百分之四十以上的高度。原先的「底部」变成键盘顶沿,底栏、悬浮按钮、贴底的提交、甚至列表最后几行,全部改了邻居。键盘改写视口(keyboard viewport rewrite)说的不是键盘很大,是整套位置关系被换成另一张图:谁在屏上、谁贴着谁、拇指热区在哪,都要按弹出之后那张图重算。

按弹出之前的布局做的决定——主按钮贴底、错误提示在字段下方、空状态居中——在弹出之后可以同时失效。

机制

触屏系统把键盘做成一块不透明的系统层,应用拿到的可用高度突然变短。如果应用仍按原高度排,下层控件会被键盘盖住;如果把整页按新高度压缩,原来的垂直节奏(顶栏、内容、底栏)被挤成两截。无论哪一种,弹出前的坐标都不能再用。中文等输入法还有候选栏,实际侵占比「标准键盘」截图更高,按英文键盘高度做的避让会差出一截。

键盘高度还随设备和模式变:浮动键盘、分体键盘、横屏键盘,每一档都是一张新的位置图。只测一档等于没测。

边界

外接键盘或桌面没有这块系统层,视口不被改写。密码管理器、一次性验证码的自动填充条会再吃一截,比键盘更窄但一样改邻居。语音输入把键盘换成麦克风条,高度不同,按键盘写死的避让会留下空洞或仍遮挡。分屏里键盘可能属于另一半窗口,应用自己的半屏高度不变,这条改写不发生。

怎么落地

  • 把「键盘弹起」当成一种独立的布局状态来设计,而不是原布局上盖一块。底栏、悬浮按钮、贴底提交在这个状态下要重新找位置,或让位给键盘顶沿。
  • 用系统提供的 inset / 可视区变化来驱动,不要写死一种键盘高度。
  • 中文候选栏、表情面板、语音条各测一次,确认没有控件还停在被盖住的旧底部。
  • 验证:聚焦每个会唤出键盘的字段,看弹出前后各拍一张。两张图上的主按钮、当前字段、错误文案的相对位置若仍按弹出前理解,就会有一块已经不在了。

延伸

  • 同组F1.10.2 输入框与提交按钮需同时可见 · F1.10.3 简单上推会把顶部关键信息推出屏幕
  • 相邻F1.12 固定元素与安全区 · F1.04 拇指热区与关键操作落位
  • 站内检索keyboard viewport rewrite · IME inset · safe area insets

同组卡片

快捷操作

分享

分享当前页面

ios_share

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