赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.7K 0 0

之前一直觉得色彩,图形,字体是 UI设计的大构成,任何设计都是从这大元素开始的,有的 UI设计都是由这些构成的,但是却忽略了界面中空间的,就是我们说的间距。今天我想分享几年前从 Google 的 Material Design 及 8 pt grid 中到的于间距相的程,这篇分享有助于我们处好界面间距一致性问题,让设加统一,同时义规范里面的原子设方法,能完融合。

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

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

距处不在,界边距,距离上边,左边,右边,顶部等各属性。此作为名设计师,我们需要很好掌握各距规律,过距规律很好组织好内容。

一、为什么要统一间距?

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

是否大家和其计在作过程中,经常开一个计源文件候,发现各种间距大,各种不一致地方,同一个页面,已经定义好规范,但是每个人使用的间距大不一致。可能你规范已经定义好了,最位是5,按照5的倍数去做计,但是还是会出现各种奇葩的间距,10,12,18等等。或者说有的计是按照5来说的,间距会出现10,15,20,25,30,难解释清楚哪种景下用什间距规则。

不止是设计师,估计研发打开我们标注稿都是崩溃。所以我们需要去统距规则,它优是能很好让设计师合理了解我们距系统规则,时开发在做设计开发时候,不需要都复开发不距,导致个 APP 风格混乱,那么我们如何去做呢?

二、它的价值是什么?

于设计师:效率上,减少决策和思考,我做个需求时候,我不需要考虑到底用多大距,时能保持元素节奏。

对于团队:设师发之间沟通加简单,发人员能很好的按照小单按照增递增去写间距,不必每次都行测。

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

三、站在巨人肩膀上思考

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

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

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

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

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

△ 同在 iPad端,间距规则也是有序的,克制的间距弹性,而不会出现日常计中经常间距随任选的使用,毫无规则乱用。

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

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

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

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

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

这些原则除了在元素和元素中,实在按钮中,在按钮里面字和上左右的距离,都是有序的,我特别一句话,设计语言只有在有序的遵循和重复使才有。

四、怎么做?

1. 小原子单

这小间距规则可以3的倍数,蘑菇街、豆瓣一样,如果希望产品留白比较多,也可以5的倍数,例如 pinterest、亚马逊,这绝对的,一切根据们产品内丰富程度决。

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

△ 亚马逊 AliExpress 都按照5倍数间距增

2. 确认间距弹性

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

大家都买过衣服或者鞋子,般鞋子尺码,会有固定几个(36,37,38,39,40,41,42,43)如你需要鞋子特大,可能需要订制,括衣服也是样(XS,S.M.L.XL)。

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

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

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

前在团队做过个调研,我们问了设计师,也看了很多设计文件,括国也有个类似调查,是在用4作为设计原子距做设计时候,设计师使用最多距有哪些?结很有意思,使用16占半,8和32占半,所以定义太多距其实毫意义,会带来设计时候不确定元素。

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

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

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

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

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

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

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

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

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

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

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

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

△ 这也是在做系统计候经常用的,通过增量来做计。

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

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

△ 同理,在国外很优产品中,我们不难现种规律的使用,更的提升设计效率。

总结

统一简化间距规则,通规则,构建一致界面,所有边距,元素空间遵循规则时,对视设计和开人来说,能很决一致和效率问题。

在刚开始计候,可能会觉得没有真正的好,但是当项目越来越复杂候,队规模越来越大,每理各种计和计候,你会发现,当你使用固定的间距,它会比之前随的间距规则有更好的效果。

欢迎关注作者微信公众号:我们设计日记,分享最新设计趋势和设计经验,学设计法。

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

图片素材作者:Laura Reen

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@橙子的橙子Mandy :写这篇的动机是因为,有一个朋友拿了他自己做的界面,问我觉得哪里需要球盖,他总觉得哪里不对劲,但是又...
APP
作为一名在互联网行业摸爬滚打好多年的一位 UI 设计师,也在团队里带过众多 UI 设计师和实习生,所以深刻认识到无论于团队还...
UI
数字是金服业务中最为重要的设计要素之一,这是因为在金服业务中,有大量的诸如电商、支付、财富管理等场景需要数字来直接表...
功能设计
最近跟一线大厂设计师交流,他们给我的反馈是做设计的时候不单单只是视觉上的美感,更需要方法论来支撑,这样才更具有说服力...
版式布局
前言 工欲善其事必先利其器,器即工具。选择一种工具的本质是选择一种方式。个人的选择或许是基于喜好习惯,行业的选择则伴随...
Figma
我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于...
UI配色
字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情...
信息层级
最近仔细研读了苹果官网最新的设计规范。网上没有找到很满意的翻译版本,于是自己老老实实的啃了几遍官方文档,顺便把学习笔...
Bars