F1.13.1stable reading region设计研究

阅读区需保持稳定,不被浮动的操作控件打断视线

别名: 阅读区稳定 · floating interrupt · 浮动打断

概念解释

读到一段中间,一颗跟随滚动的分享按钮从右下角滑进这一行,把后半句盖住。眼睛刚对准的落点没了,要重新找行首。阅读区稳定要求正文所在的那一块在滚动过程中不被浮动控件改写——不挡字、不抢行、不在读者眼前挪位置。

静态地插在段落后面的按钮是另一类打扰。这里说的是跟着视线走、在读的当下改写那一块像素的东西。

机制

阅读靠的是沿行的一串短扫视,落点预期写在「下一字还在这条稳定的线上」。浮动控件相对文字运动,等于在落点上插入一个移动的遮挡或一个新的显著物。扫视被截断之后要重新对准行,成本接近一次迷路后的搜索,而不是一次正常的字间跳。控件若还带出现动画,运动瞬变会把注意从词义上拉开,读到一半的句子掉出工作记忆。

越是需要保持位置的长句、公式、代码,稳定被破坏的代价越高,因为这些对象一旦丢了落点,几乎要从这一块的开头重读。

怎么研究

用阅读任务:同一篇文章,一种条件有跟随滚动的浮动按钮或底栏渐现,一种没有。测阅读速度、回视、以及被挡住那一行是否被重读。

自变量:浮动控件是否进入正文柱、出现时是否带动画、挡住的是行中还是段末。 因变量:阅读速度、回视次数、理解题正确率、被打断后重新对准该行的时间。

眼动最能看见回视;没有眼动仪时,可在浮动控件出现的那一行出一道必须读到被挡部分才能答的题。

边界

导航型信息流本来就不是阅读柱,卡片上的浮动价签不属于这条。视频播放器的浮动进度条是在操作一块不是用来读字的表面。地图上的定位按钮浮动在图上,图不是阅读区。用户主动唤出的工具条(点一下屏幕才出现)是他们许可的打断,只要唤出前那一屏是稳的。

怎么落地

  • 分享、喜欢、目录这些浮动入口停在正文柱外面,或停在滚动时不会覆盖当前行的边。
  • 禁止在阅读进行中把控件动画进正在被看的那一行。
  • 必须提示的系统条(弱网、下载)从顶或底进,不要从正文中间冒出来。
  • 验证:用目标字号滚完一篇代表文,看有没有控件在某一帧盖住未读完的字。有一帧盖住,阅读区就还不稳定。

延伸

  • 同组F1.13.2 操作按钮混入正文阅读流会造成误触与视觉噪音 · F1.13.3 长文阅读场景应将操作收纳到边缘或滚动触发的工具条 · F1.13.4 分离并非绝对,行内操作(如划词)需要例外设计
  • 相邻F3.04 扫描模式 · F1.09 弹层遮挡操作对象
  • 站内检索stable reading region · floating interrupt · regression saccade

同组卡片

快捷操作

分享

分享当前页面

ios_share

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