F3.05.1visual flow设计研究

动线由权重序列而非位置顺序决定

别名: 视觉动线 · weight sequence · 阅读顺序不等于动线

概念解释

注册页从左到右排了「邮箱、密码、创建账户」,设计师以为动线就是这条位置顺序。右侧却放了一张占半屏的产品插画,插画比三个表单控件都重。五秒测试里被写下的第一项经常是插画,表单被挤到后面。动线是权重排出来的访问序列,不是栅格上的先后。位置顺序只在各块权重接近时才成为默认路径。把「从左到右 / 从上到下」当成已经设计好的动线,是把一种弱默认当成了结果。

机制

注意每次选择当前场上权重最高、且尚未充分加工的对象。序列于是等于权重从高到低的访问,外加一点「就近」的粘滞:下一个对象若略轻但离当前注视很近,可能插队。位置顺序(源顺序、栅格编号)不进入这个选择,除非你故意让位置也贡献权重(起始侧、上方)。插画在尺寸、细节密度、往往还有饱和上同时取胜,它就是序列的第一项,邮箱输入框即使排在源顺序第一也要等。动线可以被设计,方法是排权重,不是在注释里写「用户将从左往右」。

怎么研究

先让设计者在图上标「希望的 1-2-3」,再做五秒书写或眼动,得到实际序列,算两个序列的逆序数。自变量是被人为加重的对象(插画放大、按钮饱和、标题字号),因变量是逆序数是否随该对象的权重上升。若希望序列按位置编号、实际序列按权重编号,动线就从位置假说里被证伪。不要用完成任务的对错代替序列——任务可以最终完成,动线仍然是反的。

边界

强任务目标(「我就是来改密码的」)会让人按记忆找控件,权重序列被任务图式压过。键盘 Tab 顺序跟视觉动线不是一回事:辅助技术走源顺序,视力正常的鼠标用户走权重。动画如果把某个对象从零拉到高权重,动线会在时间上改道,静止稿上的序列预测会失效。空表单、无插画的稀疏页上,位置顺序和权重序列常常重合,容易造成「位置就是动线」的错觉,那是权重碰巧均匀,不是机制换了。

怎么落地

  • 排版之前先写权重序列:第一眼、第二眼、第三眼各是哪个对象。再用尺寸、明度、孤立去实现这条序列,位置只作弱辅助。
  • 大插画、品牌字、装饰动效若不是序列第一项,把它们的尺寸或对比降到主任务对象之下,而不是在旁边加一行「请先填写左侧」。
  • 源顺序仍要和任务一致,那是给键盘和辅助技术的;不要假设它会带动视线。
  • 验证:把希望的 1-2-3 写在纸上,另找没看过稿的人看三秒后按看到的顺序写三个名字。逆序多于一处,就去降实际第一名的权重,或抬希望第一名的权重,直到书写序列与纸上序列重合。不要把插画挪到「更符合从左到右」的地方却保持原尺寸——位置换了,它往往还是第一名。

延伸

  • 同组F3.05.2 多个同权重焦点会造成动线分叉 · F3.05.3 动线应与任务顺序一致
  • 相邻F3.04.2 结构化页面按视觉权重跳跃扫描 · F3.09.2 位置带来的层级暗示可以被更强的视觉权重覆盖 · F2.14 内容优先的布局顺序
  • 站内检索visual flow · visual weight · centre of interest · scanpath

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.05.1