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

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

为什么要统一间距?

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

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

它的价值是什么?

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

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

站在巨人肩膀上思考

▲MaterialDesign在他的布局中有讲过,他们的间距,所有间距规则都是在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高度也是按照间距增量去设计高度,那么整个页面就更加有系统性和科学性。

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

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

总结

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

THE END
1.设计稿间距如何设定?UI设计过程中每个设计师或多或少会有一些经验数值,设计不仅仅是理性的,也是感性的,灵活点,切不可生搬硬套。在实际使用8为系数,某些情况下我们会发现间距过大,我们也会采用2px/4px网格去进行设计。基数越小,元素之间距离越小;基数越大,页面的留白越多。在设计时,我们按照间距规范合理设定即可。 https://zhuanlan.zhihu.com/p/446755980
2.UI设计进阶干货!盒模型间距设计指南优设网然而尽管拿到这些优秀的设计指导和组件库,依然不一定能够输出非常有品质的设计,仔细研究发现,其中非常重要的一个原因,我们认为是:不同 level 的设计师对“间距”的把握程度不同,拼凑组件输出的界面信息层次和整体性不好。 PART 1:UI 间距基本原理 资深UI 设计师凭借经验和感觉能快速的搭建高质量的模块和页面,而https://www.uisdc.com/box-model-spacing
3.杭州UI设计学习间距的属性腾讯云开发者社区1.间距是多少? 间距是指界面元素之间的距离,可以是文本本身、图片、组件、模块之间的间距,也可以是界面两边的安全距离(比如网页宽度为1920px,内容区域为1400px,那么两边的安全距离为260px)。 作为UI设计师,设计界面中的每一个元素都需要兼顾上、下、左、右、相邻元素的属性来合理调整间距,利用间距的规则来组织界面https://cloud.tencent.com/developer/news/994120
4.关于间距的知识点分享视觉设计日志DTOP什么是间距? 间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。 作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间https://dtop.powereasy.net/rz/sjsj/content_23695
5.UI设计:网格ui间距比例UI设计:网格 一般来说,网格分为4倍网格和8倍网格。而这两种规范在实际设计中是可以混合使用的。在这里,我们以8倍网格作为示例,来对下图进行规范操作。 使用的软件为Figma 我们可以看到,这是一个占了四个栅格的大盒子。其中又包含了两个按钮。我们查看按钮的间距。https://blog.csdn.net/weixin_62428841/article/details/123319104
6.图片网页设计常用的字体大小行距间距规范ui设计师吧现在很多设计师最开始做的是APP设计,最后应工作需要会做些网页相关的页面,直接采用APP图文的排版规则套用在网站上,因为终端设备,使用场景发生变化,会显得很不合适。其实这里面就是几个规则的事,今天就给大家分享,记住这几个规则,即使你从来没做过网页设计,也会做出符合业界规范,排版好看的网站了。行间距1倍 1.2倍https://tieba.baidu.com/p/6330683442
7.网页UI设计规范超全整理网页UI 设计是指针对网页界面的视觉设计和交互设计的整体规划和实现,通过有效的设计来提高网站的用户体验和用户满意度。网页 UI 设计如今得到了越来越多的重视,也逐渐形成了约定俗成的网页设计规范。在网页 UI 设计中,遵循一定的规范能够让网页界面更加清晰且易于理解,本文为大家整理了一些常见的网页设计规范,希望能够https://js.design/special/article/design-specification.html
8.设计师要掌握的UI设计技巧(二):排版篇大家好,我是Clippp,今天为大家分享的是「UI基础系列2-排版篇」。在第一篇中,我们拆解了标题的字号、样式、行高、粗细应该如何设计 最近有读者催更?还想看「UI基础系列」,接下来我们开始分享第二部分:页面排版。 排版中很重要的两个因素是对齐和间距。对齐让页面内容有序且合理,间距有助于拉开页面中各个元素的空https://www.niaogebiji.com/article-98929-1.html
9.UI界面设计网页设计的版式设计法则注意段落右侧的起伏形状,在一个句子中标点符号之间使用单个空格,以避免形状和角度不美观。 间距的重要性。越是间距接近的元素,读者就会假设在不同的信息块之间存在这一种关系。 最后推荐 优秀设计师的作品排版 : 如下图:来自国际化设计师MIKE的设计作品 UI界面设计、网页设计的版式设计法则https://www.cdcxhl.com/news/216442.html
10.网页设计规范怎么做?记住这4点就够了网页设计也属于UI设计范畴,是近几年的大热门。随着互联网时代的到来,网页UI设计也开始被越来越多的企业重视,正是如此,UI设计也可以说是目前设计界中薪资最高的存在。 那么对于目前学习网页设计的小伙伴而言,如何才能做好网页设计,拿到这份高薪呢?关于这一点,墨刀认为做好UI设计的核心是明确网页设计规范,今天就来和https://modao.cc/design/web-design-standards.html
11.2024网页UI设计规范,新手科普!在网页UI设计规范中,布局是一个非常重要的方面。一个良好的布局可以使用户轻松地找到所需的信息,并且有助于页面的整体美观。规范中通常会规定网页的整体结构,如顶部导航栏、侧边栏、内容区域等的位置和大小,以及它们之间的间距和比例。 另外,颜色也是网页UI设计规范中需要考虑的重要因素之一。规范中会规定网页的主题色https://pixso.cn/designskills/2024-website-ui-specification/
12.七个网页界面ui设计细节你掌握了吗(案例图文讲解)素马主张任何高大上的产品概念设计最终落地都化解为版式与图片。随着用户对产品使用的体验要求越来越高,新锐的版式加上精美的图片,还需要加上独特的动效设计(前端制作工艺)才行。那么,除了网页设计三大块版式、图片、动效外,我们这些看似搬砖,每天做细节设计的ui设计师,是否有大的研究和作为呢。今天分享的这篇文章,主https://www.sumaarts.com/share/676.html