您的位置: 首页 >日志>视觉设计>详细内容

视觉设计

关于间距的知识点分享

来源:本站原创 发布时间:2022-10-08 14:02:42 浏览次数: 【字体:

什么是间距?

间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。

作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间距之间的规律来组织界面内容,确保信息的节奏性,给用户轻松、预约的浏览体验。

d91912a3eab14f3bb095eecff0ed9a22.png

213355a229bd4381a688992f68054569.png

▲ 从上图可以看出,间距不规范、信息就像一锅粥,而规范的使用间距就能将信息自动分组。

字符间距

字符间距一般都是设计工具的默认数值,无需调整。

另外,在设计卡片、瓷片区的标题时,有时需要通过调整字符间距来提升界面的舒适度,间距数值自行定义,但相同层级的内容标题字间距一定要保持一致。

be26ed54627b4cdf80e54b3ed5375cb4.png


文字行高

行高是指上边框+下边框+字号的高度之和,这里主要针对多行文本。

文字行高一般会设定为字号的1.2~1.5倍,具体值跟字号有很大关系,文字越小,行高就越大。例如,我们可以设定字号32px为中间值(非绝对),小于或等于32的字体、行高为字号的1.5倍,大于32的为1.2倍。另外,也可以直接将所有行高固定在字号的1.5倍,不难发现,字体越大其折行的概率就越低,试想一下,如果将48px的文字折成几行,界面还能剩下多少空间?

d3a23d30e8cd4da8a7bf7e347c1460f3.png


文字段落

文本段落间距的重要性在移动UI界面中并不明显,更多体现在网页设计中。需要着重纠正一点的是,部分设计师在设置段间距时习惯性的多敲一次回车键,这种方式并不可取,会造成间距过大、内容脱节。

如有需要,一定要手动设置段间距,这里没有固定的数值和规律,视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍,例如字号为30、段间距为15,字号为40、段间距为20,仅供参考。

569339eba2c74da8ba435c63f9c012e4.png

间距的使用技巧及原则

1.接近性原则

需要通过各元素的间距来体现出信息的关联性,格式塔原理中的“接近性”原则告诉我们,相互靠近的物体被认为比相互距离较远的物体更有关联性,因此,相关联的元素之间靠的越近,用户越能感知到信息的关联,同时更能了解整个界面中各模块信息的逻辑关系。

aa8438b7f26d49429a271cc8d28407ee.png

2.利用留白强调

很多时候,想让一个元素变的突出,可以用加大字号、修改色值或后加粗等方式进行强调,但这并不是突出信息的唯一方式,当所有元素都变的突出,那就等于什么都不突出了。如果想让界面中的元素不同程度的突出,留白也是一种强调信息的方式,它能引导用户将注意力集中在特定的内容上。

3.使用栅格系统

善用栅格系统(上述有详细说明),通过最小间距值进行递增,让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策,后续不管是迭代还是更换设计成员,都能保持统计的间距规范。

839c2190ed634a11a064ddf2ae86bab6.png


4.文字行高规则

这个问题在很多团队中都是硬伤,甚至在设计验收时还被直接忽略。在主流UI设计工具中,添加文本元素时,都会有默认行高,在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍,那么单行文字的行高到底是需要手动设置还是遵循默认,笔者认为都是可以的,但一定要与开发保持一致。

行高决定着文字边缘与定界框的间距,而开发只能看到定界框与其他元素的间距。

1)默认行高

默认行高值会随着字号的变化基于一定的倍数自动增减,需要将此规律或倍数告知开发,开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时,尤其是多组文字元素的上下间距,需要通过计算(文字边缘到定界框的间距+文字元素间距=实际间距)或手动测量才能达到精准状态,下图为例:

2)手动设置行高

手动设置即字号是多少、就将行高设置为多少,确保文字边缘紧贴定界框,在设计过程中调整间距时,无需计算,根据设计工具的智能提示调整即可。

5.间距值数量设定

在同一APP应用中,根据最小基数定义的间隔值数量不易过多,一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等,以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显,数量太少无法满足多元素、模块使用场景,也会导致间距跨度较大。

6.明显相邻间距值

设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时,用户很难感知到界面中信息之间的逻辑关系,我们需要根据栅格系统中间距值的增大、设置更大的区间值,让相邻间距值之间的视觉差异更加明显。

7.跳出间距的束缚

当界面中的信息较为密集、间距不足以满足信息的突出程度时,需跳出纯粹的间距规范束缚,换种方式或许更好。例如:给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等,需知「此消彼长」的道理。

结语

如果在处理界面信息层级时,改来改去还是觉得很乱,不防从间距角度出发,或许会有不一样的收获。虽然在刚开始的时候,规范间距带来的效果甚微,但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现,所有内容统一间距规范,不管是构建一致性界面视觉效果、还是对开发和设计师来说,既能提升用户体验、还能提高团队的工作效率。

间距是否规范使用,决定着界面是否规整、信息传达是否清晰,即便如此,间距也只是解决信息层级方式的其中之一,切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转,间距也好、色彩也罢,设计师依然需要从实际用户场景出发,通过不断的思考和经验总结,打磨出更合理、更符合项目需求的设计规范。


×

用户登录