恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
一文搞定UI设计间距那点事!【进阶篇】
6.3°
2022-07-18 | 原创文章 / 经验/观点 / | 举报 | 877 20 13 2

分享间距规则、文字间距、间距方法论

前言

UI设计由三大元素组成,即色彩、图形、文字,其中图形与文字的排版方式是建立视觉层级的重要元素。


两者结合的媒介就是间距,合理的间距能给用户带来,具有美感且舒适的视觉体验,本期我们就聊一聊UI设计中间距那点事。


文字与间距


文字是UI设计中最重要的信息传递元素,文字的排版看似容易其实并不简单,因为文字的属性众多,比如字号、字间距、行高、段落等等。


很多设计师对文字属性很了解,也能够合理运用,但总会卡在开发环节,花费很长时间验收,最终还是得不到理想效果。


下面我们从根上去认识文字,对文字中能够影响排版间距的属性,一一解析,并且了解开发逻辑,正确与他们对接。


1、文字-行高

字体设计师,为了能满足文字行间距的合理展示,通常会给字体设定一定的行高。


行高就是在设计软件中选中文字后,上下外边框高度,字体的行高没有标准,不同的字体一般默认行高也不一样。

图片也就是因为字体的行高,让UI设计师对文字与其他元素的间距设定,有不同的见解。

上图都是30px的间距,但因为字体行高不同,A、B两个方案的实际视觉间距不同。

认同A方案合理的设计师,理由是文字最好设置一定的行高,不然折行时视觉上没有行间距,很拥挤,不得不再设置行高,最终30px的间距还是有间隙。

图片

认同B方案的设计师,理由是UI设计本身对几个像素的差距就很敏感,视觉上做不到统一,就是不合理。

两者的表述都对,但也确实都有一定的弊端,下面给大家介绍两个解决方案。

可以确定的是,为了满足文字折行后的阅读性体验,最好带有一定的行高,这样也会利于与开发对接。

第一种:

首先说一下UI设计中,间距设定的一个理念,间距设定一般要设定一个最小栅格基数,如4、5、6、8为间距设定的起始数值。

然后页面中,接下来所有的间距设定,都得是这个数值的倍数。(这点后面会详细讲解)

‍在一个带有文字的设计组件中,若设计思路上要呈现视觉统一的间距,那可以算出字号与行高的间隙,然后减去相对应的栅格数值,使其视觉上接近统一的间距。

下图所示,设计思路上想呈现一个30px的统一间距,那就可以减去一个最小栅格数值。

若最小栅格数值是6px,最终给出的间距就是24px,视觉距离呈现的就是接近30px的距离。

图片

这种方式也是我一直以来用的方法,好处就是没有打破间距设定的原则。

设计的间距与开发看到的间距,都是有规律的栅格系统间距。

唯一有点不完美的地方就是,实际距离有时还会有一点小误差,但其实在视觉上也完全可以忽略掉了。

第二种:

第二种方式就是精益求精,不考虑间距的栅格系统原则,算出字号与行高的间隙,间距上准确减去,保证没有一丁点的误差。

我找了一下这样的产品,发现iOS端的滴滴APP中,有个模块是这样的设计理念。

图片

上图案例中,字号36px,行高44px,文字上下的间隙就是4px。

所以设置距离26px,加上行高间隙正好是30px,得到统一的间距效果。

这种方式有一个小小的弊端,就是开发感受不到间距的规则,最终设计验收时可能会耗费更多的时间。

特殊情况:

另外有一种情况,就不能刻意去追求文字的视觉对齐,除非是平面设计,因为开发的逻辑也不会去支持这样做。

图片

上图中错误的方式是因为,开发写这个卡片,会写成一个容积俗称盒子,内容都会放在盒子里面,就算内容过多,也是向下进行扩展适配。

图片


2、开发对接-关于行高(重点内容)

字体行高的间隙有了解决方法,接下来是与开发的对接,这也是最关键的一个环节,设计的再好,最终不能很好的落地,也是白搭。

UI设计师在设计验收iOS端时,可能会遇到这样的问题,设计与开发都用了同样的间距参数,但最终呈现的间距还是不一样。

原因就是,同样的苹方字体,iOS端开发的默认字体行高,与设计软件中的字体默认行高不一样。

比如在Sketch软件中42号字的苹方字体默认行高是59,但是iOS开发软件中默认是52。

图片

如果开发不手动调整字的行高,就会出现与设计的偏差。

根据我的调研,iOS开发工程师,若不是特殊情况,基本不会去改默认行高参数。

下面我们列举一下,设计常用苹方字号的默认行高,与iOS开发默认行高的数值对比,从中找一下规律。

图片

上图中可以得出,字号越大,设计默认行高与iOS开发默认行高差距越大。

所以设计上最好把默认行高改成与开发一样的默认行高,这样才能保障,开发不手动调整行高下,是一致的。

iOS开发字号默认行高有一定的规律,随着字号的增加,行高会在字号基础上+4、+6、+8、+10以偶数递增。

图片

虽有规律但也不容易形成记忆,推荐一个公式。

用字号除10后乘以2,再加上字号,就是iOS开发的默认行高,公式如下:

图片

有公式可能还不够便捷,再给大家推荐一款Sketch行高修复插件,Auto Fix iOS Text Line Height for Mac 。

这款插件是专门针对iOS字体行高修复,使其与开发默认行高保持一致。(文章附件中可下载)

关于安卓

安卓系统 Material Design 使用的字体,中文是思源黑体,英文是Roboto。

因为安卓系统开源,不同的安卓手机厂商大多会更换字体。

比如小米手机MIUI系统中英文都使用Misans字体,所以安卓文字行高没有一个标准。

安卓开发与iOS开发还有个不同点是,安卓开发使用什么字体,行高就是字体本身的默认行高。

思源黑体行高默认和字号大小一样,Roboto行高接近苹方字体行高。

如果设计稿按安卓规范设计,那思源黑体最好设置成与苹方字体一样的行高,然后安卓工程师手动去调整,iOS开发工程师所见即所得。

字体修复后使用经验

关于修复后字体的使用方式,分享一些经验,UI设计中使用文字的频率很高,有标题、副标题、正文、辅助文字等,字号都有所不同。

当在设计中,确定这些文字字号后,做一次行高的修复,然后把这些文字创建成字符样式,每次用时从字符样式库里面选择即可。

图片

最后说一下,特殊情况结合自身产品风格,去定义文字行高是完全没有问题的,开发可以根据设计的定义的行高进行调整。


3、文字-段落

在有段落的文案中,很多设计师为了方便,直接给一个回车键的段落间距,这样是万万不可取的。

图片

一个回车键的间距,就是一行字的行高,通常这个间距都比较大,就算设计风格需要这么大的间距,那一定也要手动去设置段落。

图片

段落数值的设定,一般情况要大于文字行高的一半,比如文字行高为42,那段落最好大于21,这样段落间距加上文字行高,整体就是≥1.5倍。

为什么是≥1.5倍?原因是文字的行间距,一般大于1.5倍视觉上是比较舒适,例如字号是30,那行高设置为45,形成1.5倍的间距。


4、文字-字间距

字间距是字与字之间的间距,默认一般为0不做设定,特殊设计风格以外。

有一种情况,当一段左对齐文字中存在标点或数字英文字母时,那末尾可能不够一个字符的空间,就会出现末尾留白的情况。

图片

出现这种参差不齐的情况,确实不那么美观,但在UI设计中实属正常。

不用刻意去设置成左右水平对齐,这样虽整齐,但因为不同的字间距会影响阅读体验。

图片

5、文字-字号

不同字号间距设定有一个原则,当字号越大时,字与其他元素间距也就需要相对越大。

字号越大说明级别越高,级别越高从信息层级上来讲,就需要较大的间距来呈现。

图片

这是客观上的一个原则,文字越大,就需要更多的留白去承托,就像文字的行高,字号越大文字的行高增加的倍数也就越大。


如何定义间距?

间距是UI设计中建立信息层级、提升阅读体验、表达元素之间的关系、表现重要信息的重要方式。

定义合理的间距其实非常有学问,打开京东、淘宝你会发现元素之间的间距非常紧凑,打开爱彼迎、蔚来又会发现元素之间较为宽松,这是为什么?

其实就是他们的设计语言不同,致使展示出的形态也就各异,而间距就是表现设计语言的其中一种方式。

在UI设计中,间距的设定一般会选择一个最小栅格基数,如4、5、6、8等数值,之后页面中,所有的间距都要以,最小栅格基数的倍数呈现。

谷歌推出的设计语言 Material Design 推荐栅格系统的最小基数是8dp,一切间距、尺寸都应该是8dp的倍数。

淘宝的设计,据我所知用的是5的基数,爱彼迎用的是8的基数,从这点来看,基本可以得出一个结论,使用越小的数值基数,设计呈现通常就会越紧凑。

一个最小栅格基数的倍数值有很多,但其实通常有6个左右常用间距,就能满足绝大多数的场景。

我目前负责的产品最小栅格基数是6,设计上常用间距大概有6个,完全能够满足大多数设计场景所需。

图片

这些间距其实并不用刻意去选择,当你使用最小栅格倍数值时间长了,就能自然得出几个常用的间距,字号的选择使用基本也适用这个逻辑。

另外,一个产品中模块众多,难免会出现一些特殊情况,所以肯定不能限定死只可以用那几个间距。

除了上图中列举的常用间距之外,12、36、90、120等一些间距数值也会用到,只是用的频率不会很高。

案例解析

接下来,根据最小栅格基数为6的设计规范,通过一个商品卡片案例,分析一下间距设定的几个原则。

图片

上图中,首先要给各个元素分类,比如主标题和副标题是一类内容;标签是一类内容;价格是一类内容;“找相似”按钮又是一类内容。

图片

根据亲密关系原则,同类内容的间距应该更近,这样有利于建立信息层级关系,提升用户的可读性。

具体多近呢?可以根据商品卡片在页面中的外边距,来进行分析定义。

看一个产品的外边距基本能判断,是宽松型排版,还是紧凑型排版。

图片

产品的外边距是根据设计语言,产品定位,产品内容多少等来定义,常见的边距有20、24、30、36、48、60等。(大概就是这个范围内)

使用较大外边距,内容区域的间距要小于外边距,小到可以直观分辨即可,这样可以体现出页面中,内容的亲密关系。

图片

使用常规外边距,比如我们的案例中,使用30px就是常规外边距,内容区域要适当小于或等于外边距,这样视觉上体现的是统一性。

图片

主标题与副标题属于同类项,它们之间的间距一定要小于,卡片的内边距,这样整体看上去才能体现信息层级。

间距小到多少,还是那个理念,可以直观感受到比内边距小即可为止,不能过小。

一般来说,视觉上的间距大概是内边距(同模块中的大间距)的一半,就会表现的不错。

图片

案例中设置的是一个栅格单位6px,再加上文字的行间隙,视觉上大概就是15px的间距,就是内边距的一半。

接下来,给案例加标签,标签与文字不是同类信息,所以要适当与主副标题拉开间距。

通常第一选择就是,视觉距离与内边距30px,保证统一。

案例中设置的是24px,再加上文字的行间距,就非常接近30px。

图片

接下来是价格,对于一个商品卡片设计,价格是需要着重突出体现的。

一般设计上要突出一个元素,大概3种方式:一是改变颜色;二是放大;三是加大留白;也就是加大间距。

案例的商品卡片,设计风格价格颜色规范是黑色,所以颜色不能改变。

只能放大或加大留白,放大和留白得在合理的范围内,不然就会破坏卡片的整体结构性。

间距上与标签设置30px的间距,加上文字的行高,视觉上的间距,会成为卡片中最大的间距留白,从而起到突出的作用。

图片

这种设计方法,在一个设计组件中,最好只出现一个,不然整体结构就会有一定程度上的破坏。

另外强调一下,统一性固然重要,但设计的核心是为需求目标服务,所以,这时候统一性的优先级是次于需求目标的。

就像淘宝首页的瓷片区,间距非常紧凑,失去了一定的美感,但这样做确实展示了更多的内容,满足了需求目标。


最后

最后做个总结:

1、关于文字的间距,要考虑文字的行高,尽可能保持视觉统一性;

2、iOS设计稿,设计软件中默认的文字行高,与开发软件中的默认行高不一致,最好修复行高,与开发保持一致;

3、文字段落不要用回车键去定义,要用段落参数,段落间距通常要大于文字行高1.5倍;

4、多行文字出现这种参差不齐的情况,不要设置为左右水平对齐;

5、一般字号越大,字与其他元素间距也需要越大;

6、UI设计要结合产品定位等,制定最小栅格基数,然后任何间距要以最小栅格基数的倍数呈现;

7、一个产品中,通常设置6个左右的间距数值,能满足大多数设计的场景;

8、善于使用亲密关系、留白理念、统一性等设计原则,设计前理解需求目标。


文章对你有收获,点个赞再走!

Powered by Froala Editor

微信公众号:互联网设计帮

创建于:2022-07-18

下载
收藏

20人已收藏

  • 38

    作品

  • 670

    粉丝

  • 0

    关注

  • 【案例解析】数据可视化设计的底层逻辑!图表如何扩展设计!
  • 小米商城门店闪送设计案例优化,如何结合场景做设计!
  • 小米商城APPUI优化案例
  • 浅谈OPPO商城UI升级与小米商城高度相似之处!

    猜你喜欢

      2022-07-18 | 原创文章 / 经验/观点 / | 举报 | 877 20 13 2

      一文搞定UI设计间距那点事!【进阶篇】

      6.3°

      你确定要举报一文搞定UI设计间距那点事!【进阶篇】

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年07月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      13
      20
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录