J2.11.2reflow设计研究

高倍缩放要求内容重排为单列而非依赖横向滚动

别名: 重排 · 400% zoom reflow · single-column reflow

概念解释

把常用桌面宽度放大到约四倍,视口等效于一只很窄的手机。这时内容需要重排(reflow)成一条竖列往下走,而不是让用户在一行里左右找后半句。横向滚动作为阅读正文的主策略,在高倍放大下代价过高:每次读完一截都要横向推,再退回来找下一行开头。

重排要的是列叠起来,不是画布跟着变宽。宽画布加左右拖,看起来内容还在,阅读已经断了。

机制

屏幕放大或浏览器高倍缩放之后,同时可见的区域极小。人的阅读靠的是行首到行尾的一次扫视;若行尾跑到视口外面,扫视被切断,工作记忆要扛「刚才那半句」直到横向拖完。低视力用户还往往叠着放大镜,横向拖会把放大镜的窗口一起拖离行首,代价是来回找位置,不是多滑一次。

单列重排把「下一块信息」放到「当前块下面」,运动方向与阅读方向重合。多栏、固定并排的工具条、把关键操作钉在右边缘的布局,在窄视口里要么要求横向找,要么把操作挤出可见范围。数据表、地图、工具条这类本身二维的对象可以保留二维滚动;正文、表单、导航不行。

怎么研究

在约 1280 宽的窗口放到 400%,或把视口设为 320 CSS 像素宽,作为高倍重排的等效条件。任务是读完一篇正文并提交一个表单,看完成是否依赖横向拖动。

自变量:栏数、是否有固定并排侧栏、主内容是否允许换列。 因变量:完成任务所需的横向滚动次数、行内被切断的句子数、放大镜用户来回找行首的次数。

抽样要包含多栏杂志式首页和后台并排导航,不要只抽已经是单列的营销长页。屏幕放大软件(放大镜 / Zoom)下的重排表现与浏览器缩放不等价,至少各看一种。

边界

图像、地图、示意图、必须二维阅读的数据表、工具条,允许保留二维滚动,因为把它们捏成一列会丢失空间关系。左右对照的教学内容(原文 / 译文)若强制单列,对照功能本身会消失,需要改成可切换的层叠而不是简单拆栏。打印页、幻灯片画布按页设计,重排会破坏页这个单位。竖排文字的阅读方向不是「往下的单列」,不能拿横排的重排规则硬套。

怎么落地

  • 在等效 320 宽(或桌面 400% 缩放)下,让正文、表单、导航叠成一列;不要把完整句子的后半段留在横向画布上。
  • 并排侧栏改成可折叠或改到主列之前/之后,不要在高倍下继续抢一行。
  • 二维对象(表、地图、画布)单独允许横向滚动,但要把它们跟正文的滚动容器分开,避免整页被带着横滑。
  • 验证:1280 窗口放到 400%,只允许上下滚,读完主文并填完关键表单。任何一步必须左右找才能继续的,记为重排失败。

延伸

  • 同组J2.11.1 浏览器整体缩放与仅调整字号是两种不同的放大路径,需分别验证 · J2.11.3 缩放后交互元素之间不能因挤压而产生误触 · J2.11.4 图片中嵌入的文字无法随页面文本一起缩放
  • 相邻J2.02 文本缩放 · J2.07 低视力与屏幕放大 · J2.08 阅读顺序
  • 站内检索reflow · 400% zoom · single-column layout

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.11.2