让设计更有说服力的20条经典原则:连通性 - 优设网 - UISDC

让设计更有说服力的20条经典原则:连通性

2019/05/04 13622评论区

编者按:作者整理了 20 条经典原则,并通过正反例子说明这些原则在设计中是如何运用的。系统学习 20 条经典原则,让你的设计更有说服力。

连通性原则该如何运用?有什么注意要点?一起来看这篇文章。

往期回顾:

简介说明

1. 理论表述

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

2. 理论背景

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

对比之前的邻近性原则和相似性原则,连通性的作用和影响都要更强。

设计案例

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

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

案例1:Twitter

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

类似的例子还有游戏时光。

案例2:游戏时光

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

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

案例3:新草、知乎、Twitter

新草、知乎、Twitter 都是底部有一条可以运动的下划线,这条线将左右两个分页相互连接起来,所以我们利用左右滑动去切换页面的时候没有任何违和感。

当然这只是一种可用的、暗示性较好的形式,即使你的页面可以左右滑动,但是不用这种可运动的下划线形式也没什么太大问题。

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

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

案例4:opefac

案例5:Christou1910

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

注意事项

1. 不要乱用连接线

不要乱用连接线,尤其是时间线这种组件。

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

反面案例1:魔改版微信朋友圈

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

2. 不要使用过多的对齐方式

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

反面案例2:某同学的重设计作品

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

总结

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

参考文献

欢迎关注作者的微信公众号:「超人的电话亭」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/connectivity-rule

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里