认识达内从这里开始

认真做教育专心促就业

太原达内UI设计培训字间距与行间距的用法分析

发布：太原达内教育官网
来源：互联网
时间：2022-08-24 08:33

间距的应用在网页设计中是UI设计师经常到的一种设计技术，下面我们就通过案例分析来简单了解一下，字间距与行间距的用法分析。

太原达内UI设计培训字间距与行间距的用法分析

一、字间距

1、图文单行结合

先要说的这种情况在我们平时使用的产品中是经常见的，大字号搭配小字号。

这种彼此对比明显，能够更好的进行信息的主次传递，那么在大字号与小字号之间的间距使用多大比较合适呢?

文字与文字之间的间隔大多在16-20px之间，至于选择16px还是20px，个人认为是通过图片的高度决定的，同时不论右边的文字是两行或者是三行，也都以图片的高度居中。除了文字和图是左右搭配的，还有一种常见的情况是上下结构的。

这类卡片式的设计，在我们的设计中经常用到，但行间距依然是一个难以让界面看起来精致的点，标题文字的大小是不一样的，但行间距却都是大概率的重合，因此个人认为我们可以参考这种类型的行间距数值：16-20px，而文字的部分有各自产品的设计规范。

2、图文多行结合

图文多行在设计里面算是比较复杂的情况。这种类型要考虑到的因素很多，标题是否换行、多行的间距、字体大小这些都是我们在设计的时候需要处理的细节。

虽然不存在折行的情况，但是因为展示的信息很多，所以页面设计的时候也会比较复杂，这种结构大多出现在电商产品中，因为外露的信息比较多，想要尽量在列表页展示更多的信息来吸引用户点击。而这里需要遵循的方法有两个，一个是亲密性原则，将你认为是同组的信息做亲密处理，其中有三个产品的行间距都是16px，饿了么的行间距是20px。因此16px是在图文设计时展示亲密信息比较好的选择。另一个原则是4的倍数定律，这跟我们在设计页面定间距是的道理是一样的。

二、行间距

行间距也是我们平时要特别注意的小细节，因为不知道大家发现一个问题没有，行间距没有处理好，一旦界面的信息有点多，整体视觉上就会显得很拥挤，不如我们先来看看线上的作品是如何解决这些问题的。这个问问题一般会有2种，我们现在就都来看看吧!

1、标题行间距

这种情况一般出现在标题会有折行的情况下，但是下面的内容却都是单行。

2、正文行间距

这种情况是出现在标题只有一行，但是正文都是折行的情况。

关于行间距目前大部分的做法都是字体的大小乘以1.2~1.5倍，得出来的结果就是文字的行间距，但这种算法仅限于行间距，不适用于其他的间距。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：太原达内Java培训机构大数据数据挖掘常用方法都有哪些

下一篇：太原达内Java培训软件开发复杂性分析 >