当前位置: 首页 >文章 > 让设计更有说服力的20条经典原则:连通性
收藏
分享

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

举报酸梅干超人酸梅干超人发布于 2019-05-053843阅读18点赞
编者按:作者整理了 20 条经典原则,并通过正反例子说明这些原则在设计中是如何运用的。系统学习 20 条经典原则,让你的设计更有说服力。...

1. 理论表述

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

2. 理论背景

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

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

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

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

案例1:Twitter

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

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

案例2:游戏时光

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

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

案例3:新草、知乎、Twitter

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

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

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

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

案例4:opefac

案例5:Christou1910

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

1. 不要乱用连接线

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

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

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

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

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

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

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

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

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

参考文献

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


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天59人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
猜你喜欢
原研哉新作,猫咪LOGO~

2021-03-03

小虎转载君 发表

原研哉新作,猫咪LOGO~
版式设计法则之留白的技巧

2019-01-21

广告人鱼先生 发表

版式设计法则之留白的技巧
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证