视觉上相连的元素倾向于被感知为具有更强的相关性（相较于不相连的元素）。

  连通性原则是格式塔组织律中的一个部分，是简洁法则的一种具体的表现场景。

设计案例

利用连接线强化元素之间的相关性

  在某些情况之下，可以利用连接线来强化元素之间的相关性，暗示用户相连的元素是一个组。

  • 案例1：Twitter

      Twitter 的评论区设计是一个非常典型的案例，评论的回复与评论主体之间用连线来表达他们之间的相关性，不仅清晰易懂，而且与其余应用做出了足够的差异化，也算是具备了比较高的识别度了。

  • 案例2：游戏时光

利用运动的下划线表达页面可滑动到达

  有些分页组件的动画设计非常有趣，当用指尖在屏幕上划过，页面平移至另一个页面的同时，分页组件下方的线也是平移至另一个字段下，这是一种相当强烈的暗示：下一个页面可以通过滑动到达。

  • 案例：新草、知乎、Twitter

      新草、知乎、Twitter 都是底部有一条可以运动的下划线，这条线将左右两个分页相互连接起来，所以利用左右滑动去切换页面的时候没有任何违和感。
      当然这只是一种可用的、暗示性较好的形式，即使你的页面可以左右滑动，但是不用这种可运动的下划线形式也没什么太大问题。

对齐线也是一种隐性视觉线

  除了上面谈到的那些显性的、可直接观测到的线之外，对齐线也是一种隐性的视觉连接线，它虽然不能直接看到，但是在视觉识别系统中，对齐的元素通过一条「线」相互连接，所以对齐的元素相关性更高。

  • 案例1：opefac
  • 案例2：Christou1910

  当然隐形线毕竟只可感知而不可见，所以其影响的强度要比显性线弱得多，像上面这个案例，按钮的距离只要稍微远一些，就会从组中割裂出来形成孤立的一个元素，所以才需要一根显性的线去把它们的联系重新构建出来。

注意事项

不要乱用连接线

  不要乱用连接线，尤其是时间线这种组件。
  前面提到了，连接线比邻近性和相似性具备更强的影响力，也就是说，只要连接线一出现，被连接的元素之间的相关性一定比其他元素更强。如果做时间线这样的组件时在日期与日期之间加上连接线，那么日期就会相互强行关联起来，这不是时间线的初衷。需要的是日期与当日内容之间具备更强的关联性。

  • 反面案例：魔改版微信朋友圈

      一条小小的连接线，很轻易就破坏了用邻近性创造出来的时间与内容之间的联系。

不要使用过多的对齐方式

  不要在同一个模块/组件/页面中过多地使用不同的对齐方式。对齐方式一多，页面中的对齐线也就丰富了起来。上面说到对齐线会形成的各种相关性比较强的组，现在这些不同的、相互独立的组集中分布在一个比较小的空间之内，结果就显而易见了，页面变得极度混乱，对快速识别信息造成极大的阻碍。

  • 反面案例：设计作品

      对齐方式多，画面混乱。所以才会反复强调在一个页面之内对齐的方式不宜过多。

总结

  • 利用连接线（显性的和隐形的、静止的和运动的）来强化元素之间的相关性；
  • 连接线不要乱用、滥用；
  • 对齐线不宜过多。