8年资深设计师:间距不会调?掌握这一个点,从此不再迷茫! - www.looksinfo.com网 - UISDC

8年资深设计师:间距不会调?掌握这一个点,从此不再迷茫!

2018/07/27 18526评论 5

之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是却忽略了界面中空间的运用,也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程,这篇分享有助于我们处理好界面间距一致性问题,让设计更加统一,同时定义规范里面的原子设计方法,能完美融合。

间距无处不在,界面中的边距,距离上边,左边,右边,顶部等各种属性。因此作为一名设计师,我们需要很好的掌握各种间距规律,通过间距规律很好的组织好内容。

一、为什么要统一间距?

是否大家和其他设计师在合作过程中,经常打开一个设计师源文件时候,发现各种间距大小,各种不一致地方,明明同一个页面,已经定义好规范,但是每个人使用的间距大小不一致。可能你们规范已经定义好了,最小单位是5,按照5的倍数去做设计,但是还是会出现各种奇葩的间距,10,12,18等等。或者说有的设计师是按照5来说的,间距会出现10,15,20,25,30,很难解释清楚哪种场景下用什么样间距规则。

不止是设计师,估计研发打开我们标注稿都是崩溃的。所以我们需要去统一间距规则,它的优点是能很好的让设计师之间合理的了解我们间距系统规则,同时开发在做设计开发时候,不需要每次都重复开发不同间距,导致整个 APP 风格混乱,那么我们如何去做呢?

二、它的价值是什么?

对于设计师:效率上,减少决策和思考,当我做一个需求时候,我不需要考虑到底用多大间距,同时能保持元素之间的节奏。

对于团队:设计师和开发之间沟通更加简单,开发人员能很好的按照最小单位按照增量递增去写间距,而不必每次都进行测量。

对于用户:他们信任的品牌有一致性的美感,在设备上没有模糊的像素偏移等,就和微信一样,说不出哪里好,但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有讲过,他们的间距,所有间距规则都是在8的倍数上进行递增,而且并不是毫无头绪的递增,只定义了几种增量关系,克制的有序的间距弹性,最小的是8,16,24,32,48,56,72。

△ 同样在 iPad端,间距规则也是有序的,克制的间距弹性,而不会出现我们日常设计中经常间距随意任选的使用,毫无规则乱用。

△ 在 Airbnb 的最新规范中,PC 和无线所有设计间距规范原则只定义了5种,8,16,24,48,64让规则更加简单,更好的统一了整个风格的一致性。

这些原则除了在元素和元素中运用,其实在按钮中,在按钮里面文字和上下左右的距离,都是有序的,我特别喜欢一句话,设计语言只有在有序的遵循和重复使用下才有用。

四、怎么做?

1. 定最小原子单位

这个最小间距规则可以是3的倍数,像蘑菇街、豆瓣一样,如果你希望产品留白比较多,也可以是5的倍数,例如 pinterest、亚马逊等,这个没有绝对的,一切根据你们产品内容丰富程度决定。

△ 亚马逊和 AliExpress 都是按照5为倍数来做间距增量

2. 确认间距弹性

大家都买过衣服或者鞋子,一般鞋子尺码,只会有固定几个(36,37,38,39,40,41,42,43)如果你需要的鞋子特别大,可能需要订制,包括衣服也是同样(XS,S.M.L.XL)。

在定义间距上同理,以往做设计规范的经验,在上一步定义好最小单位就完啦,然后设计师按照增量去设计就 ok,这样只是完成一半,如果按照4的增量(4,8,12,16,20,24,28,32,36,40….)这种带来问题就是任何间距都不可预测,提供的选择过于接近了,在什么情况下使用24,什么情况下使用28,我们很难去决策,如何去做。

之前在团队做过一个调研,我们问了设计师,也看了很多设计源文件,包括国外也有一个类似调查,就是在用4作为设计原子间距做设计时候,设计师使用最多的间距有哪些?结果很有意思,使用16的占一半,8和32的占一半,所以定义太多间距其实毫无意义,只会带来设计时候的不确定元素。

3. 根据业务场景,定义间距

正如前面所说,过多间距规则,只会带来设计师困惑,徒增界面复杂性,对开发,对设计师都是一种负担,所以我们在定义间距时候,一定要少,要让我们间距原则覆盖到绝大多数场景。可以从 XS,S,M,L,XL 为参考,小,中,大为纬度。

△ Airbnb 的间距规则 XS,S,M,L,XL 是最小为8,常用8,16,24,48,64,Airbnb 则更加克制,给设计师选择更少,反而更能保持设计次序。

△ quickbooks 的间距规则 XS,S,M,L,XL 是最小为4,常用8,16,20,40,60能很好满足各种业务场景,包括各种的间距场景都是在此基础上去拓展。

△ 那么界面中所有的间距地方,全部运用8,16,20,40,60这几个原则来做设计,保证页面统一性。

△ 包括页面中的元素高度,比如 banner 高度也是按照间距增量去设计高度,那么整个页面就更加有系统性和科学性。

△ 这也是我们在做系统设计时候经常用到的,通过增量来做设计。

△ 同理,在国外很多优秀产品中,我们不难发现这种规律的使用,更好的提升了设计效率。

总结

统一简化间距规则,通过这些规则,构建一致性界面,所有边距,元素空间都遵循规则时候,对于视觉设计和开发人员来说,都能很好解决一致性和效率问题。

在我们刚开始设计时候,可能会觉得没有真正的好处,但是当项目越来越复杂时候,团队规模越来越大,每天处理各种设计原子和设计分子时候,你会发现,当你使用固定的间距,它会比之前随意的间距规则有更好的效果。

欢迎关注作者的微信公众号:我们的设计日记,每周分享最新设计趋势和设计经验,科学设计方法。

图片素材作者:Laura Reen

「组件化设计好文推荐」

www.looksinfo.com大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:/spacing-adjustment

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

www.looksinfo.com启用更安全省心的 微信扫码登录

微信扫码

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

把好文章收藏到微信

打开微信,扫码分享
学设计 www.looksinfo.com网 在这里

首页百度一下360搜索 搜狗搜索 神马搜索"