高倍缩放要求内容重排为单列而非依赖横向滚动
别名: 重排 · 400% zoom reflow · single-column reflow
概念解释
把常用桌面宽度放大到约四倍,视口等效于一只很窄的手机。这时内容需要重排(reflow)成一条竖列往下走,而不是让用户在一行里左右找后半句。横向滚动作为阅读正文的主策略,在高倍放大下代价过高:每次读完一截都要横向推,再退回来找下一行开头。
重排要的是列叠起来,不是画布跟着变宽。宽画布加左右拖,看起来内容还在,阅读已经断了。
机制
屏幕放大或浏览器高倍缩放之后,同时可见的区域极小。人的阅读靠的是行首到行尾的一次扫视;若行尾跑到视口外面,扫视被切断,工作记忆要扛「刚才那半句」直到横向拖完。低视力用户还往往叠着放大镜,横向拖会把放大镜的窗口一起拖离行首,代价是来回找位置,不是多滑一次。
单列重排把「下一块信息」放到「当前块下面」,运动方向与阅读方向重合。多栏、固定并排的工具条、把关键操作钉在右边缘的布局,在窄视口里要么要求横向找,要么把操作挤出可见范围。数据表、地图、工具条这类本身二维的对象可以保留二维滚动;正文、表单、导航不行。
怎么研究
在约 1280 宽的窗口放到 400%,或把视口设为 320 CSS 像素宽,作为高倍重排的等效条件。任务是读完一篇正文并提交一个表单,看完成是否依赖横向拖动。
自变量:栏数、是否有固定并排侧栏、主内容是否允许换列。 因变量:完成任务所需的横向滚动次数、行内被切断的句子数、放大镜用户来回找行首的次数。
抽样要包含多栏杂志式首页和后台并排导航,不要只抽已经是单列的营销长页。屏幕放大软件(放大镜 / Zoom)下的重排表现与浏览器缩放不等价,至少各看一种。
边界
图像、地图、示意图、必须二维阅读的数据表、工具条,允许保留二维滚动,因为把它们捏成一列会丢失空间关系。左右对照的教学内容(原文 / 译文)若强制单列,对照功能本身会消失,需要改成可切换的层叠而不是简单拆栏。打印页、幻灯片画布按页设计,重排会破坏页这个单位。竖排文字的阅读方向不是「往下的单列」,不能拿横排的重排规则硬套。
怎么落地
- 在等效 320 宽(或桌面 400% 缩放)下,让正文、表单、导航叠成一列;不要把完整句子的后半段留在横向画布上。
- 并排侧栏改成可折叠或改到主列之前/之后,不要在高倍下继续抢一行。
- 二维对象(表、地图、画布)单独允许横向滚动,但要把它们跟正文的滚动容器分开,避免整页被带着横滑。
- 验证:1280 窗口放到 400%,只允许上下滚,读完主文并填完关键表单。任何一步必须左右找才能继续的,记为重排失败。