起航学习网

- 让每个人都能学到最前沿新知识、新技能!
起航学习网
当前位置: 起航学习网 > 短期培训 > 设计培训 > UI设计师该如何合理运用留白

UI设计师该如何合理运用留白

时间:2021-07-16 14:59:44来源:UI培训机构 作者:UI培训网 已有: 名学员访问该课程

  快捷搜索:如何合理运用留白


机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.itpxw.cn

前言: 今天为大家带来的文章是UI设计师该如何合理运用留白。留白赋予页面呼吸感,在UI设计中有着不可替代的作用。来和

今天为大家带来的文章是UI设计师该如何合理运用留白。留白赋予页面呼吸感,在UI设计中有着不可替代的作用。来和小T一起看一看,希望本篇文章能够对大家有所帮助。

1、遵循邻近法则

UI中元素间的空白反映出元素之间的关系。邻近法则表明:

相关元素间距小,不相关元素间隔远;

同类型元素的间距应均匀分布。

下图中文本的大小、粗细和颜色相互配合,突出界面中的层级结构。

2、保持适当的间距

让界面保持呼吸,避免元素排版过于紧密。对于大多数UI来说,拥有充足的留白通常比留白太少要好。

3、利用留白将注意力集中在特定元素上

空格是一种强调文本的有效方法。它可以与改变文本大、颜色或粗细结合使用。

使元素更大或更亮并不是引起用户注意的唯一方法。想想看,当一切都变得更大、更亮时,实际上并没有意义。

4、在设计和开发中使用相同的方法测量间距

可以用以下两种方法之一来测量相邻文本之间的间距。

相邻文本框

这种方法是大多数UI测量间距的方式。但这种方法不是特别精确,因为每个文本框的顶部和底部都存在多余的空间。

相邻边界框

这种方法更精确,但实现起来更复杂。两种方法都是合理的,使用时要权衡取舍。

5、使用间距系统

间距系统指在设计中使用成比例关系的间距值,使用间距系统能给带来和谐感和一致性。

同调色板一样,间距系统要求设计师从一组受限的选项中做出决策,这使设计迭代更快、更系统。

6、避免使用看起来过于相似的间距值

对比很重要。当上下两组元素的间距过于接近时,会导致用户认知逻辑的混乱。

如果要使两个间距值不同,那么就留有足够的间距加强对比。

相邻间距值之间在视觉上应保持明显的差异。

7、随着文本大小的增加,降低行高

在保持相同比例行高的同时增加文本大小会导致每行文本间距过大,标题与文本的关系拉不开。

通常标题的行高比例通常小于正文的行高,标题作为独立的部分存在。

8、留白之外

在信息密集的界面中,还需要利用其他方法来传达元素间的关联:

在元素周围添加细微的填充或描边;

用细线将紧密排列的元素分隔开。

总结

界面看起来很合理是有原因的。通过经验和实践,可以磨练关于如何在设计中应用留白的视觉感和直觉。

以上就是小T今天为大家分享的关于UI设计师该如何合理运用留白的文章,希望本篇文章能够对正在从事UI设计工作的小伙伴们有所帮助,想要了解更多UI设计知识的小伙伴们记得关注IT培训网官网,最后祝愿小伙伴们工作顺利。

文章来源于Clip设计夹 ,作者Clippp

【免责声明:本文图片及文字信息均由小T转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

文章出自:http://qh.itpxw.cn/peixun/ui/202187490.html

文章标题:UI设计师该如何合理运用留白



免责声明:本站文章均由入驻起航学习网的会员所发或者网络转载,所述观点仅代表作者本人,不代表起航学习网立场。如有侵权或者其他问题,请联系举报,必删。侵权投诉

你也许会喜欢如下的文章?

机构名称:IT培训网 联系手机:13783581536 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 网站域名:http://www.itpxw.cn

(责任编辑:深圳学历教育网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------