当前位置: 首页 >文章 > 间距设计总结
收藏
分享

间距设计总结

举报王M争王M争发布于 2018-08-201434阅读1点赞
其实很多时候,我们觉得自己的作品非常的平庸或者“看起来特别糊”,大部分原因就是配色,字体和间距的对比没有做好。...

上周末我跟一个大学同学在微信上聊(互)天(吹),现在他是上海一家公司的首席UED总

监。中间我们聊了很多有的没的,其中他说了一句话,让我印象特别深刻。


其实很多时候,我们觉得自己的作品非常的平庸或者“看起来特别糊”,大部分原因就是配

色,字体和间距的对比没有做好。




配色和字体的对比一直都很受大家的重视。在制定设计规范的时候,我们首先会去确定产品

的主色调和辅助色。对于文字来说,不同级别的文字(标题类,正文类,提示类)会选择不

同的字号和字色,这些都是会出现在你的设计规范中。然而我很少看到有人在设计规范里提

到间距,所以从这个角度来看,间距经常会被我们忽视。那么这篇文章里我就对间距做了一

个比较简单的总结。




为什么要使用间距?




我一直认为设计师做东西的时候一定要“较真”,你在设计过程所做的任何决定都要问自己

为什么,多思考。做到有的放矢,这样会少走很多弯路,也更容易成长。




那么如果我们想了解间距乃至更加规范的使用间距,首先我们要明白为什么要使用间距。间

距的使用有很多作用,可以吸引用户注意力、提升内容的可读性,阐述元素之间的关系。其

实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易

接受。




间距的种类




间距从位置上我们可以分为两种,一种间距是用于区分不同的内容块;另一种间距是用于区

分内容块内的信息。为了表述方便,我们在这里称其为:块内间距和块外间距。



The more whitespace around an object , the more the eye is drawn to it.


一个物体周围的留白越多,就会越容易吸引用户的注意力。




从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的

注意力,因此为了更好的进行区分,块内间距都是小于块外间距的。




以Airbnb为例,因为从信息层级的角度来说,一个房源(内容块)的级别要比其介绍信息要

高的多,所以每个房源之间的间距要大于房间图片、位置、价格的间距。


上图中左边的界面是正常的,右边的被我处理过了,使其块内间距和块外间距一样大。我们

可以很明显的发现,右边的界面会给用户带来困扰。他们不知道下面的的文字介绍是属于上

面这个图还是下面这个图。


当然我们也可以发现其实块内间距因为其内部信息层级的差异会进行二次区分,也就是说块

内间距也不是都一样的。




行间距




间距的使用会对你的文字易读性产生很大的影响。这里文字的间距主要是指文字之间的高度

间距,我们称之为行高。行高过大过小都不利于用户阅读。一般来说,行高选择为字符高度

的30%是恰到好处的。








概同样可以用来影响一款产品的设计风格。


间距与线条




在文章开头我们也提到了间距的一个主要作用就是内容区分。那么说到内容区分,线条是我

们无法绕开的一个话题。因为线条在界面设计中主要功能就是完成内容区分。而随着极简主

义风格的兴起,去线化设计也开始成为设计的一个潮流。设计师开始使用间距(留白)来取

代线条来完成区分。所以弄懂间距和线条之间的关系是非常有必要的。






同样的内容,左边的使用线条,右边使用间距。从上面这个图,我们也可以看出线条受到设

计师冷落的原因。线条的使用会极大的分散用户的注意力,整个界面会会稍显拥挤。




虎扑的界面是有线条的,但是我发现把线条去掉以后用户还是能够通过间距来很好的区分内

容。




其实线条和间距并不是对立的关系,在同一界面中,我们也会同时看到线条和间距,而且功

能都是为了区分内容。





不只是间距




你对设计元素的归纳总结能力决定了你的上限。同样的用户提示功能,你只知道单一的使用

dialog,然而大牛们却会根据提示强度的不同和是否需要用户操作来选择dialog,toast和

snackbar,从而建立一套完善的用户提示体系。





同样的道理,我们都知道间距可以很好的区分内容,那么其实要完成“内容区分”,我们不一

定非要使用间距。除了已经说过的线条,我们同样可以使用配色,阴影,图案等。


例如,上面这个例子中,其实间距已经很好的完成了信息层级的构建,但是整个界面会显得比

较单调。我们可以引入图标和配色来强化不同内容之间的对比,而且使整个界面更加明亮。





慎用间距




这篇文章虽然是写如何更好的使用间距,但是对于间距的使用,我个人还是觉得要慎重一点。

因为如果你要通过放大间距来完成信息层级的区分,那么会出现大量的留白,整个界面也会

显得特别清爽。但是老板可能会不爽,这个页面怎么这么空?你是不是偷懒了啊?再加点东

西进去呗,让整个界面充实起来。






当然这算是调侃,我对于间距使用的忌讳主要是来自页面长度的增加。因为一旦你的间距拉

开势必会造成界面长度的增加,以前一屏就可以展示的内容你现在需要滑动才能看完。我们

不知道对于用户来说,他们更偏爱清爽的界面(多留白)还是简单的操作(不要滑动)。








设计师要做好设计要把自己带入用户的角色,但是也不要去“代表”用户。通过自己的主观

臆想去做设计,觉得这个界面好看就行了,但是好看对于用户来说不一定好用。可是现在设

计师很少能参与到用户调研过程中,所以在工作中,我们的一些想法无法得到数据的佐证。

这也是现阶段大部分设计师的一个痛点。




总结




间距对于界面设计来说是非常重要的,这篇文章希望能引起大家对它的重视,也希望你读完

以后能够有所收获。


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

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

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

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天64人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
特惠
充值
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
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证