优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
之前一直觉得色彩，图形，字体是 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
「组件化设计好文推荐」
视觉设计师如何做竞品分析？来看这份超全面的指南！
作为用户体验设计师，竞品分析也是必备技能之一，通过分析市场上的竞品，能够让设计师在短时间内快速了解自己所做产品在整个市场中的定位，...
评论还可以输入字
验证码加载中....
评论就这些咯，让大家也知道你的独特见解
以上留言仅代表用户个人观点，不代表优设立场
阅读 14750一、当前背景 今天聊些设计基础部分。 设计工作中，我们总会接到不同场景、不同目标用户的业务需求，需要不同风格的设计方案支持，但无论是什么风格的设计，用户都会...阅读 6531本文以聊天界面为例，分析QQ和微信这两大国民IM软件的不同。 好友在线状态 在QQ聊天界面，顶部标题栏里展示了好友的昵称，同时在好友昵称的下方，展示了好友的...阅读 11683为什么一个简单的界面，你做出来后总觉得不够精致，很可能是因为你遗漏了一些容易忽略的设计细节。本文作者通过一个案例，细致入微的教你如何改良你的设计，一起学习起...阅读 8282@菜心设计铺 ：很多新人朋友由于工作经验少，常常会心理没底，因为对一些工作上的设计细节并不了解，不过没关系，以后菜心会多分享一些关于工作上的细节经验，希望对...阅读 15842@橙子的橙子Mandy ：写这篇的动机是因为，有一个朋友拿了他自己做的界面，问我觉得哪里需要球盖，他总觉得哪里不对劲，但是又不知道要怎么改。 欢迎关注作者的...阅读 8704Fufu ：今年腾讯ISUX官网进行了全站响应式，在项目过程中有技术沉淀，也有不少的思考，也就有了今天这篇文章，内容围绕四个方面，响应式的概念，实践方法，一...阅读 12669@爆裂的墨水瓶 ：产品视觉设计中，线是重要的组成部分。起到分隔、分割、占位、细化等作用。然而，当前的设计趋势是趋于简化、强调内容，过多的线会造成视觉负担。如...阅读 5323Z Yuhan：用户界面（UI，User Interface）设计是设计软件产品所涉及到的几个交叉学科之一。不论是用户体验（UX，User Experien...编者按：随着亚马逊、小米、阿里巴巴等大公司都推出了智能语音产品，如何为这类以语音交互为核心的智能产品做设计也成了一个值得探索的领域。今天这篇总结非常全面，建...
我们的团队
大家在关注
一扫"掌"握！
上周热门文章
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里