其他
需要引导视线沿连续路径移动时(排序步骤、对齐内容…
当界面需要让用户按特定顺序浏览内容、或需要让一组元素被感知为同一序列时,用对齐、箭头、连接线等连续路径引导视线,并用路径中断来标示分组边界。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 48/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 55/100 ×0.15
适用场景
需要引导视线沿连续路径移动时(排序步骤、通用
解决思路
- 先在放置元素之前刻意规划阅读路径:眼睛从哪里进入、沿什么轨迹移动、最终落在哪里。
- 让左对齐的文本和元素形成一条连续的垂直边缘,使视线能自上而下自然跟随。
- 让同一列中的项目保持完全一致的对齐,用一条隐含的垂直轴线来组织阅读路径。
- 不要打乱对齐——哪怕只有几个像素的错位也会中断视线路径,从而被解读为边界或错误。
- 在表单中把所有输入框对齐到同一条左边缘,形成连续的阅读路径;错位会迫使视线在每个字段处重新定位,为每一步增加摩擦。
- 用箭头和 V 形符号(chevron)延伸视线已经在跟随的轨迹:轮播箭头指向下一段内容的方向,视线会顺着箭头走向隐含的延续。
- 在被截断列表的末尾放一个「显示更多」chevron,把阅读路径延伸到展开后的状态。
- 用线把步骤指示器连接起来,为流程创建一条显式路径。
- 在时间轴组件中用连接线暗示这些项目属于同一序列并建立方向顺序——没有这条线,同样的项目会被读成无序列表。
- 用隐含的方向路径来暗示交互:轨道上的滚动条手柄暗示一条连续的垂直内容路径。
- 在轮播下方放置圆点指示器,暗示水平方向的幻灯片序列,让路径可见。
- 下拉刷新动画应沿一条延伸到屏幕边缘之外的隐含垂直路径运动,让眼睛读到这条隐含路径、手跟着执行。
- 用中断的连续性来分隔组:在列表中插入较大的间距来表示新分区(即使没有标题)。
- 用分隔线中断垂直阅读路径,宣告类别边界。
- 用缩进把视线重定向到次要路径,表示主流程内部的子层级。
- 用连续的左对齐阅读路径暗示项目权重相等。
- 针对特定项目打破对齐——缩进、偏移或向右阶梯式排列——从而不依赖排版字体就暗示出子层级;缩进的内容不只是空间上不同,它处在另一条连续轴上,这正是层级可读的原因。
- 在每个断点审查对齐——单像素的错位即使低于意识察觉阈值,也会中断被感知的连续性。
- 在复杂布局中用连接线、箭头和圆点指示器把隐含路径显式化。
- 通过请用户描述自己如何阅读一个屏幕来测试流;被中断的连续性会表现为困惑或回溯。
- 移除那些打断预期路径却不贡献意义的元素——它们只带来重新定位的成本而没有价值。
适用边界 · 注意事项
- 当目标是「分组」而不是「排序/引导序列」时,不要用连续性法则,应改用 law-of-proximity。
- 当界面不涉及视觉排列(例如纯后端逻辑、纯文本 API),没有可供眼睛跟随的路径时,不适用。