赞助商
立即赞助

设计稿怎么改都觉得很乱?那是你还没学会调间距!

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

笔者最近在参与组件库的设计工中,现一个很有趣的现象:诸设计师以8像素为基数设立间距规范,将其运用在界面和元素中去。

设计稿怎么改都觉得很乱?那是你还没学会调间距!

引我的思考:有时精心设计的品看着却乱乱的,究其原因其是字、图形等元素的间距没有设定合理的规范。

间距设中极易被遗漏,但又不可缺少的基础部分。

间距是什?它为何如此重要?实际案例中是如何运用间距的呢?

本我们就来探究一于间距的两事。

一、间距是什么?

谓间距,即彼此相隔的距离。在界面中,间距指元素间的距离,例如按钮与按钮字间的边距、字的字间距与行间距等。

二、为什么要使用间距?

来看面这个例子,左右两图最大的同在哪里呢?

设计稿怎么改都觉得很乱?那是你还没学会调间距!

△ 图一

笔者将两图文与图片距标注出来,起看下异:

设计稿怎么改都觉得很乱?那是你还没学会调间距!

△ 图

揭晓答案:左图的描述文字与下一模块图之间的间距是最大的。果把所有元素之间的距离排为均等(右图),我们就看不出内容的级关系。

用户很可能会误以后一排文字下一幅图片的信息,真让人困惑。

设计稿怎么改都觉得很乱?那是你还没学会调间距!

△ 图三

如图三的标注可以出,间距将界面中的息划出不同的层,极大地增了界面的可读性。这就是间距这一细节对整个界面带来的变化。

三、实际案例

来实际计中,如何规范和运用间距?

在 Material Design 的规范中,栅格系统的最小单位是8dp,有距离、尺寸都是8dp的整数倍,如图示,屏幕左右间距为16dp,字距左侧屏幕为72dp。

设计稿怎么改都觉得很乱?那是你还没学会调间距!

△ Material Design规范(图片来自络)

如不熟悉Material Design,看这篇:《如你不熟悉Material Design,请口吃下这篇干货!》

四、为什么要统一间距?

展开这个问题前,先来聊聊我们为何做设计规范?

设计规范是建立一种规矩,无论项目何更替,视风依能够持一致,不仅提升设计师的产出效率,使设计与研间的沟通变得更加简单高效,也让用户通一致的视风来识别品牌。

同理,间距作设规范中小的单元,稍小的偏差或不规律的间距都会影响到整体界面的排版布局,可见间距的统一多么重。

五、如何定间距

如何间距其实取决于间距规范的小单,统一间距并不意所间距都遵循8的倍数。如文提到,这数一绝对的标准。

一页面会使用2px/4px/8px作为最位,甚至还有以5px为位的。这个要根据身的产品定位和内容组织形式来定,如 iOS 的界面边距是30px,并非为8的倍数。

设计稿怎么改都觉得很乱?那是你还没学会调间距!

△ iOS规范(图片来网络)

基数越小,页面越细碎;基数越大,页面的留白越多。在实际设计时,我们按照间距规范合设定即可。

六、间距越大越好吗?

虽然大间距可清楚地区分信息层级,但依然要谨慎使。因为大量留白会户觉得页面太空、太长。

所以,设计师在考虑界美感时要兼顾用户体验。

七、结语

在做设计规范时,除了颜色、体、图标等常见设计元素以,大家定要谨记距这个元素,常它决定了界规与否、信息晰与否。

果改来改去还得乱乱的?就细致地看一遍间距吧。

同时,我们制规范虽于项目的高效运转,但它不限制设师思考发挥的紧箍咒。间距也好、元素也好,设师依然从用户场景实际况出发,多去考所设的规范否恰当、合理。

欢迎关注顺丰科用户体验计部公众号:「SFUED」

设计稿怎么改都觉得很乱?那是你还没学会调间距!

图片素材作者:Pank

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

相关文章

前言 随着直播的发展,秀场直播出现了各种形式,在直播间里衍生出了越来越丰富多样的玩法,多人连麦直播则是近年来衍生出的另...
企鹅电竞
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点...
App设计
读者提问: 最近领导要求对直播间送礼面板做改版,我去找了一些竞品做了分析,发现很多直播间开始支持横屏模式。在横屏模式下...
B站设计
QQ-自习室是一款以学习为特色,基于手机QQ平台的陪伴型多人直播产品,简单来说就是一个线上的自习室。作为疫情期间诞生的创新...
QQ自习室
越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。 在设计的过...
ui设计
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品