F1.10.3push-up eviction设计

简单上推会把顶部关键信息推出屏幕

别名: 上推逐出 · scroll focused field · 顶部被挤走

概念解释

为了不让聚焦的输入框被键盘盖住,整页往上推,直到框贴着键盘。原先在顶部的标题、收款人、金额、校验错误,跟着被推出视口。人在底部对着一个裸字段打字,已经看不见自己在给谁转、转多少。上推逐出(push-up eviction)是「保证字段可见」这条善意规则的副作用:可见性被用在错误的那一块上,上下文从顶上掉下去。

邮件的收件人、支付的收款账户、验证码提示「已发送至 138****」,都是被上推最先丢掉的那类信息。

机制

「把聚焦字段滚进可视区」是许多系统的默认。实现上往往是整块滚动容器平移,直到字段下沿高于键盘。平移是刚性的:字段之上的所有东西按原间距一起走,顶部没有优先权。于是字段越靠下,被挤走的顶部就越多。短页上推等于把标题直接送出屏幕;长页上推可能把错误文案——它写在字段上方——刚好送到键盘上方看不见的地方,人对着一个标红的框却读不到原因。

字段可见和上下文可见是两个约束,不能用同一个平移同时满足。要同时成立,要么钉住顶部那一条,只滚中间,要么把上下文复制一份到键盘上方的附件条。

边界

字段本身就在顶部(搜索页的唯一框)时,上推几乎不逐出什么,这条副作用不出现。桌面窗口很高,键盘又不占应用内部高度,上推很少发生。全屏播放器里弹出的短评论框,顶部信息本来就被播放器自己藏了,矛盾不在键盘。用户自己向上滚走顶部,是他们的选择,不要和系统自动上推混为一谈——后者是产品在用户没要求时丢掉上下文。

怎么落地

  • 转账、登录、验证码这类顶部带着对象或金额的表单,键盘升起时钉住那一条上下文,只让中间字段区域滚动。
  • 错误文案不要只写在字段上方然后跟着滚走;键盘升起时把它复制到仍可见的一条,或改写在字段内部。
  • 拒绝「无论字段在哪都滚到键盘正上方」的一刀切,先看顶部有没有必须留下的对象身份。
  • 验证:聚焦最底部的字段,看收款人、金额、标题、错误是否还在屏上。字段清楚、对象是谁却要靠记忆,就是被上推逐出了。

延伸

  • 同组F1.10.1 键盘占据下半屏,改变全部位置关系 · F1.10.2 输入框与提交按钮需同时可见
  • 相邻F1.11 首屏与折线以下 · F1.01 操作点与作用对象的距离
  • 站内检索push-up eviction · scroll into view · keyboard inset

同组卡片

快捷操作

分享

分享当前页面

ios_share

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