
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
间距的应用在网页设计中是UI设计师经常到的一种设计技术,下面我们就通过案例分析来简单了解一下,字间距与行间距的用法分析。
一、字间距
1、图文单行结合
先要说的这种情况在我们平时使用的产品中是经常见的,大字号搭配小字号。
这种彼此对比明显,能够更好的进行信息的主次传递,那么在大字号与小字号之间的间距使用多大比较合适呢?
文字与文字之间的间隔大多在16-20px之间,至于选择16px还是20px,个人认为是通过图片的高度决定的,同时不论右边的文字是两行或者是三行,也都以图片的高度居中。除了文字和图是左右搭配的,还有一种常见的情况是上下结构的。
这类卡片式的设计,在我们的设计中经常用到,但行间距依然是一个难以让界面看起来精致的点,标题文字的大小是不一样的,但行间距却都是大概率的重合,因此个人认为我们可以参考这种类型的行间距数值:16-20px,而文字的部分有各自产品的设计规范。
2、图文多行结合
图文多行在设计里面算是比较复杂的情况。这种类型要考虑到的因素很多,标题是否换行、多行的间距、字体大小这些都是我们在设计的时候需要处理的细节。
虽然不存在折行的情况,但是因为展示的信息很多,所以页面设计的时候也会比较复杂,这种结构大多出现在电商产品中,因为外露的信息比较多,想要尽量在列表页展示更多的信息来吸引用户点击。而这里需要遵循的方法有两个,一个是亲密性原则,将你认为是同组的信息做亲密处理,其中有三个产品的行间距都是16px,饿了么的行间距是20px。因此16px是在图文设计时展示亲密信息比较好的选择。另一个原则是4的倍数定律,这跟我们在设计页面定间距是的道理是一样的。
二、行间距
行间距也是我们平时要特别注意的小细节,因为不知道大家发现一个问题没有,行间距没有处理好,一旦界面的信息有点多,整体视觉上就会显得很拥挤,不如我们先来看看线上的作品是如何解决这些问题的。这个问问题一般会有2种,我们现在就都来看看吧!
1、标题行间距
这种情况一般出现在标题会有折行的情况下,但是下面的内容却都是单行。
2、正文行间距
这种情况是出现在标题只有一行,但是正文都是折行的情况。
关于行间距目前大部分的做法都是字体的大小乘以1.2~1.5倍,得出来的结果就是文字的行间距,但这种算法仅限于行间距,不适用于其他的间距。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销,赚更多好礼。