恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
间距使用总结
0.0°
2017-09-26 原创文章 教程 举报 7571 602 498 63


上周末我跟一个大学同学在微信上聊(互)天(吹),现在他是上海一家公司的首席UED总监。中间我们聊了很多有的没的,其中他说了一句话,让我印象特别深刻。

Image title


其实很多时候,我们觉得自己的作品非常的平庸或者“看起来特别糊”,大部分原因就是配色,字体和间距的对比没有做好。这些话说起来简单,但是做起来很难。学了不少的设计理论,但是依旧做不好设计。


配色和字体的对比一直都很受大家的重视。在制定设计规范的时候,我们首先会去确定产品的主色调和辅助色。对于文字来说,不同级别的文字(标题类,正文类,提示类)会选择不同的字号和字色,这些都是会出现在你的设计规范中。然而我很少看到有人在设计规范里提到间距,所以从这个角度来看,间距经常会被我们忽视。那么这篇文章里我就对间距做了一个比较简单的总结。


为什么要使用间距?


我一直认为设计师做东西的时候一定要“较真”,你在设计过程所做的任何决定都要问自己为什么,多思考。做到有的放矢,这样会少走很多弯路,也更容易成长。


那么如果我们想了解间距乃至更加规范的使用间距,首先我们要明白为什么要使用间距。间距的使用有很多作用,可以吸引用户注意力、提升内容的可读性,阐述元素之间的关系。其实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易接受。


间距的种类


间距从位置上我们可以分为两种,一种间距是用于区分不同的内容块;另一种间距是用于区分内容块内的信息。为了表述方便,我们在这里称其为:块内间距块外间距。

Image title


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

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


从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力,因此为了更好的进行区分,块内间距都是小于块外间距的。


以Airbnb为例,因为从信息层级的角度来说,一个房源(内容块)的级别要比其介绍信息要高的多,所以每个房源之间的间距要大于房间图片、位置、价格的间距。

Image title


上图中左边的界面是正常的,右边的被我处理过了,使其块内间距和块外间距一样大。我们可以很明显的发现,右边的界面会给用户带来困扰。他们不知道下面的的文字介绍是属于上面这个图还是下面这个图。

Image title


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


行间距


间距的使用会对你的文字易读性产生很大的影响。这里文字的间距主要是指文字之间的高度间距,我们称之为行高。行高过大过小都不利于用户阅读。一般来说,行高选择为字符高度的30%是恰到好处的。



Image title



间距与线条


在文章开头我们也提到了间距的一个主要作用就是内容区分。那么说到内容区分,线条是我们无法绕开的一个话题。因为线条在界面设计中主要功能就是完成内容区分。而随着极简主义风格的兴起,去线化设计也开始成为设计的一个潮流。设计师开始使用间距(留白)来取代线条来完成区分。所以弄懂间距和线条之间的关系是非常有必要的。

Image title

同样的内容,左边的使用线条,右边使用间距。从上面这个图,我们也可以看出线条受到设计师冷落的原因。线条的使用会极大的分散用户的注意力,整个界面会会稍显拥挤。

Image title


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

Image title


其实线条和间距并不是对立的关系,在同一界面中,我们也会同时看到线条和间距,而且功能都是为了区分内容。


不只是间距


你对设计元素的归纳总结能力决定了你的上限。同样的用户提示功能,你只知道单一的使用dialog,然而大牛们却会根据提示强度的不同和是否需要用户操作来选择dialog,toast和snackbar,从而建立一套完善的用户提示体系。


Image title


同样的道理,我们都知道间距可以很好的区分内容,那么其实要完成“内容区分”,我们不一定非要使用间距。除了已经说过的线条,我们同样可以使用配色,阴影,图案等。

Image title

例如,上面这个例子中,其实间距已经很好的完成了信息层级的构建,但是整个界面会显得比较单调。我们可以引入图标和配色来强化不同内容之间的对比,而且使整个界面更加明亮。


Image title


慎用间距


这篇文章虽然是写如何更好的使用间距,但是对于间距的使用,我个人还是觉得要慎重一点。因为如果你要通过放大间距来完成信息层级的区分,那么会出现大量的留白,整个界面也会显得特别清爽。但是老板可能会不爽,这个页面怎么这么空?你是不是偷懒了啊?再加点东西进去呗,让整个界面充实起来。


Image title





当然这算是调侃,我对于间距使用的忌讳主要是来自页面长度的增加。因为一旦你的间距拉开势必会造成界面长度的增加,以前一屏就可以展示的内容你现在需要滑动才能看完。我们不知道对于用户来说,他们更偏爱清爽的界面(多留白)还是简单的操作(不要滑动)。


Image title


设计师要做好设计要把自己带入用户的角色,但是也不要去“代表”用户。通过自己的主观臆想去做设计,觉得这个界面好看就行了,但是好看对于用户来说不一定好用。可是现在设计师很少能参与到用户调研过程中,所以在工作中,我们的一些想法无法得到数据的佐证。这也是现阶段大部分设计师的一个痛点。



总结


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


Image title


微信公众号:王M争

更新:2017-09-26

收藏

602人已收藏

王M争

微信公众号:王M争

  • 63

    作品

  • 9257

    粉丝

  • 78

    关注

  • 苹果 or 谷歌,到底谁的设计更好?
  • 盘点那些容易让用户上瘾的产品设计
  • iPhone如何改变手机的交互方式
  • 为什么甲方不喜欢极简主义
相关标签

    猜你喜欢

      2017-09-26 原创文章 教程 举报 7571 602 498 63

      间距使用总结

      0.0°

      你确定要举报间距使用总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      498
      602
      63

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录