如何在UI设计合理运用留白？想把你抱进身体里面
日期：2023-10-09
作者：Clippp 浏览：
36 评论：0 核心提示：大家好，我是Clippp。今天为大家带来的文章是「留白」的使用。留白赋予页面呼吸感，在UI设计中有着不可替代的作用。第47篇文章分享看完大概需要这首歌的时间1/遵循邻近法则UI中元素间的空白反映出元素
大家好，我是Clippp。今天为大家带来的文章是「留白」的使用。留白赋予页面呼吸感，在UI设计中有着不可替代的作用。
第47篇文章分享
看完大概需要这首歌的时间
1/遵循邻近法则UI中元素间的空白反映出元素之间的关系。邻近法则表明：- 相关元素间距小，不相关元素间隔远；
同类型元素的间距应均匀分布。
下图中文本的大小、粗细和颜色相互配合，突出界面中的层级结构。
2/保持适当的间距让界面保持呼吸，避免元素排版过于紧密。对于大多数UI来说，拥有充足的留白通常比留白太少要好。
3/利用留白将注意力集中在特定元素上空格是一种强调文本的有效方法。它可以与改变文本大、颜色或粗细结合使用。使元素更大或更亮并不是引起用户注意的唯一方法。想想看，当一切都变得更大、更亮时，实际上并没有意义。
4/在设计和开发中使用相同的方法测量间距可以用以下两种方法之一来测量相邻文本之间的间距。相邻文本框
这种方法是大多数UI测量间距的方式。但这种方法不是特别精确，因为每个文本框的顶部和底部都存在多余的空间。相邻边界框
这种方法更精确，但实现起来更复杂。两种方法都是合理的，使用时要权衡取舍。
5/使用间距系统间距系统指在设计中使用成比例关系的间距值，使用间距系统能给带来和谐感和一致性。
同调色板一样，间距系统要求设计师从一组受限的选项中做出决策，这使设计迭代更快、更系统。
6/避免使用看起来过于相似的间距值对比很重要。当上下两组元素的间距过于接近时，会导致用户认知逻辑的混乱。如果要使两个间距值不同，那么就留有足够的间距加强对比。
相邻间距值之间在视觉上应保持明显的差异。
7/随着文本大小的增加，降低行高在保持相同比例行高的同时增加文本大小会导致每行文本间距过大，标题与文本的关系拉不开。
通常标题的行高比例通常小于正文的行高，标题作为独立的部分存在。
8/留白之外在信息密集的界面中，还需要利用其他方法来传达元素间的关联：- 在元素周围添加细微的填充或描边；
用细线将紧密排列的元素分隔开。
总结界面看起来很合理是有原因的。通过经验和实践，可以磨练关于如何在设计中应用留白的视觉感和直觉。
Tips：Clip设计夹的视频号也开始更新创意设计作品啦，一起来提升灵感，期待你的关注！
nceid="1423912259826826099" data-type="video">
以上就是如何在UI设计合理运用留白？想把你抱进身体里面的全部内容了，希望大家喜欢。
