1. 理论表述
视觉相连的元素倾向于被感知具强的相关性(相较于不相连的元素)。
2. 理论背景
连通性原则格式组织律中的一部分,简洁法则的一种具体的表场景。
对比之前的邻近原则和相似原则,连通的用和影响要更强。
1. 利用连接线强化元素之间的相关性
某些况之下,可以利用连接线强化元素之间的相关性,暗示用户相连的元素一组。
案例1:Twitter
Twitter 的评论计是一个非常典型的案例,评论的回复评论主体之间用线来表达之间的相关性,不仅清晰易懂,而且其余应用做出了足够的差异化,也算是备了比较高的识别度了。
类似的例子还游戏时光。
案例2:游戏时光
2. 利用运动的下划线表达页面可滑动到达
有些分页组件的画设计非有趣,当我们指尖在屏幕上划过,页面平移至另一个页面的同时,分页组件方的线是平移至另一个字,这是一种相当强烈的暗示:一个页面可通过滑到达。
案例3:草、知乎、Twitter
新草、知乎、Twitter 都是底部有条可以运动下划线,这条线将左右两个分页相互连接起来,所以我们利用左右滑动去切换页时候没有任何违和感。
当然这只是一种可的、暗示性较好的形式,即使你的页面可左右滑,但是这种可的划线形式没么太大问题。
3. 对齐线也是一种隐性视觉线
除了上面谈到的那些显性的、可直接观测到的线之外,对齐线是一种隐性的视觉连接线,它虽然直接看到,但是在视觉识别系统中,对齐的元素通过一条「线」相互连接,对齐的元素相性更。
案例4:opefac
案例5:Christou1910
当然隐形线毕竟只可感知不可见,所以其影响的强度比显性线弱得多,面这案例,按钮的距离只稍微远一些,就会从组中割裂出形孤立的一元素,所以需一根显性的线去把它们的联系重新构建出。
1. 不要乱用连接线
不要乱用线,尤其是间线这种组件。
面提到了,连接线比邻近性相似性具备强的影响力,也就,只连接线一出,被连接的元素之间的相关性一比其他元素强。如果我们时间线这样的组件时日与日之间加连接线,那么日就会相互强行关联起,这不时间线的初衷。我们需的日与当日内之间具备强的关联性。
反面案例1:魔改版微信朋友圈
用一条的线,轻易就破坏了用邻近性创造出来的间内容之间的系。
2. 不要使用过多的对齐方式
一直被告知不要在同一个模块/组件/页面中过多地使用不同的对齐方式。对齐方式一多,页面中的对齐线也就丰了起来。上面说对齐线会形成的各种相关性比较的组,现在这些不同的、相互独立的组集中布在一个比较的空间之内,结果就显而易见了,页面变得极度混乱,对快速识别息造成极大的阻碍。
反面案例2:某同学的重计作品
对齐方式多,画面混乱。才会反复强调在一个页面之对齐的方式宜过多。
- 用连接(显的和隐形的、静止的和运动的)来强化元素之间的相关;
- 连接线不要乱用、滥用;
- 对齐线宜过多。
参考文献
- 《GESTALT PRINCIPLES OF PERCEPTION – 3: PROXIMITY, UNIFORM CONNECTEDNESS, AND GOOD CONTINUATION》 Andy Rutledge
- 《Gestalt Principles of Grouping》
欢迎关注作者的公众号:「超人的话亭」