火星网校
学习UI设计如何巧妙运用留白技巧
发布时间：2024-04-09 13:04:23 浏览量：171次
优秀的UI设计是在界面的所有尺度上，包括从组件到页面，从微观到宏观，都要深思熟虑地使用留白。如果留白运用得当，能够让界面和谐、清晰，更重要的是有效和易用。
1.遵循相近法则
UI 中元素之间的留白量表明了元素之间的关系。根据邻近法则：
1. 相关的元素之间的距离应该更近。反之，不相关的元素应该间隔较远。
2. 同一 "类型 "的元素应该均匀地分开。
遵循这些基本规则，可以帮助用户在你的 UI 中轻松地组织和感知逻辑分组。
白色空间与文本的大小、重量和颜色携手合作，以表达界面中元素的层次结构。
2.从增加页面中的留白开始
让你的设计有呼吸感。提高界面可用性的一个可靠方法是确保所有元素之间有适当的空白。
这里的表格控件间距太近
这里的表单控件间距适当，因此在视觉上更舒适。
当然，也有例外，但对于大多数用户界面来说，使用大量的空白通常比没什么空白要好。
3.使用空白将注意力集中在特定的设计元素上
减少页面上的信息和元素，能够让页面更清晰，并且让用户的注意力集中到页面上的信息和元素上。
空白是一种能够有效强调页面中文本内容的方式。它可以与调整文字大小，改变文字颜色和字重等结合使用，甚至替代以上方法。
这句被空白包围的句子就是一个例子。
让一个元素变大或变亮并不是吸引注意力的唯一方法。考虑到当所有的东西都更大、更亮、更重要时，其实所有内容反而变得不重要了。
4.在设计和实现中使用相同的方法来测量空间
相邻文本元素之间的空间可以用以下两种方法之一进行测量。
- 相邻 "边界框"之间
这种方法是大多数 UI 渲染引擎（例如网页上的文档对象模型）测量空间的方法。然而，这种方法并不是特别精确，因为在每个边界框的顶部和底部都有多余的空间 "未被计算"。
- 测量相邻 "界框 "之间的空间
相邻“字母高度”之间
这种方法比较精确，但操作起来可能比较复杂。
测量相邻“字母高度”之间的空间。
这两种方法都是合理的，但有不同的取舍。重要的是，在设计和实现中都要使用相同的测量空间的方法。这是为了确保设计能够准确地转化为代码。
5.使用间距系统
间距系统规定了设计中可能使用的一组间距值。使用间距系统有助于为 UI 带来一致性和和谐感。
在间距系统中，你只需要少量的数值。这里使用了四种不同的间距值，分别是12、16、32 和 56 。
间距系统对空白作用就像调色板对颜色的作用一样。间距系统迫使你从一组有限的选项中做出 UI 设计决定。有了间距系统，在 UI 设计过程中，你只需要考虑系统中的少量间距值。这使得设计迭代更快、更系统。
6.避免使用视觉上过于相似的间距值
当间距值在数字上不同，但在视觉上过于相似时，用户对 UI 中逻辑分组的感知方式可能会变得模糊不清。对比很重要。如果你的意图是让两个间距值不同，那么就要让人很容易看出它们实际上是不同的。
每个操作，距离上下内容的空间太过相似，不清楚每个动作行应该与哪个视频相关联。
在每个操作下面有足够的空间，有助于明确每个视频及其相关动作之间的关系。
考虑在你的间距系统中，有更宽的数值 "分布"，相邻间距值之间有明显的视觉差异。
这是一个非线性间距系统，从一个间距值到下一个间距值的增量越来越大。
7.随着文字大小的增加，降低行高
在保持相同比例的行高的同时增加文字大小，会导致每行文字之间有太多的白色空间。相对于文字大小，标题的行高比例一般应小于正文的行高。
两行文字相隔太远
当使用较小的行高时，两行文字会被认为是一个单一的视觉组。
8.在信息密集型的 UI 中，除了空白之外，还要依靠其他技术来表达 UI 中的元素之间的关系
比如说：
- 在一组相关元素周围添加一个微妙的填充或边框。
- 使用一条线来分隔垂直方向紧密堆积的相邻元素。或者，使用一个穿插字符（"-"）来分隔水平排列的相邻元素。
- 改变文本的大小、大小写、重量或颜色，以此来关联或区分 UI 元素。
通过减少空白、缩小文字大小和增加一条微妙的水平线来增加信息密度，以确保相邻的行在视觉上被认为是彼此不同的。
使界面的信息密度更高，可以帮助提高界面的使用效率。请记住，一个信息密集的界面并不一定会让人感觉到杂乱无章或不知所措。
学习空白的一个有效方法是创建一个 "母版"：从任何应用或网站中挑选一个或多个你所欣赏的界面，从头开始重新制作它的全部内容。你将深入了解许多小的设计细节，发现有趣的模式，并看到上述关于空白的提示如何在精心设计的用户界面中实际发挥作用。
一个界面 "看起来是对的 "是有原因的。通过经验和实践，你可以磨练你的视觉感受和直觉，了解如何在你的设计中应用空白。你的用户会为此而感动的。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
