火星网校
UI设计中正确运用留白的技巧，让你的设计更高级更清晰
发布时间：2024-05-16 18:53:45 浏览量：178次
Less is more是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话，意思是“少即多”。这是一种提倡简单、反对过度装饰的设计理念，简单的事物往往能带来更多的享受。
同样，少即是多也是一种高级的简约的UI设计风格，这种思想指导下的界面设计，不会要求设计师堆积元素，而是考虑如何恰当地加入空白的应用。
学会正确地使用留白，可以获得一个和谐、清晰易读的界面。更重要的是，通过正确的留白，通常能得到有效且易于使用的界面。
通过日常的教学，UXD老师为同学们总结了7个有用的设计留白技巧，包含：
01.遵循邻近法则
02.确定留白基线
03.集中特定设计元素
04.统一的测量空间方法
05.使用间距系统
06.避免相似间距值
07.适当调整行距
下面我们就逐一带大家了解每个技巧的具体使用方法，帮助同学们找到界面设计过程中的节奏感。
#01 遵循邻近法则
UI中元素之间的空白量指示元素之间如何关联，相关元素应相距较近，不相关的元素应隔开，相同“类型”的元素应均匀间隔。请遵循这些基本规则，以帮助用户轻松组织和感知UI中的逻辑分组。
空白与文本的大小、粗细和颜色紧密配合，以传达界面中元素的层次结构。
#02 确定留白基线
基线可以让你的设计保持疏松和呼吸感，改善界面可用性的可靠方法是，确保所有元素之间都有足够的留白空间。
此处的控件间隔适当，因此效果更舒适。对于大多数UI来说，拥有正确的留白通常比没有留白要美观、工整很多。
#03 集中特定设计元素
页面上较少的信息和元素可以让界面清楚和突出重点，并让用户注意到显示在页面上的信息和元素。留白也是一种强调文本的有效方法，它可以与提高文本大小或更改文本的颜色、大小写或粗细结合使用，甚至可以替代。这句话被空白包围着，就是一个很好的例子。
#04 统一测量空间方法
相邻文本元素之间的间距，可以通过在相邻的“边界框”之间或在相邻文本高度之间进行测量。在设计和实现中使用相同的空间测量方法，可以确保将设计准确地转换为代码。
在间距系统中只需要几个值。上图案例中使用四个不同的间距值，即12、16、32和56，构建了间距系统。间距系统会迫使你从一组受约束的选项中做出UI设计决策，使设计迭代更快，更系统。
#05 使用间距系统
间距系统指定要在设计中使用的一组视觉观感较好的间距值，使用间距系统可以帮助给UI带来一致性和和谐感。
当间距值在数学上不同，但在视觉上过于相似时，用户在UI中感知逻辑分组的方式可能会变得模棱两可。对比很重要！
这是一个非线性间隔系统，具有从一个间隔值到下一个间隔值的逐渐增大的增量。
#06 避免相似间距值
当间距值在数学上不同，但在视觉上过于相似时，用户在UI中感知逻辑分组的方式可能会变得模棱两可。对比很重要！如果你要使两个间距值不同，则需要很明显地看出它们实际上是不同的。
每个“动作行”下方都有足够的空间，有助于阐明每个视频及其相关动作之间的关系。考虑使间距系统中的值“散布”区域更宽，这可以使得相邻间距值之间在视觉上有明显的差异。
当使用较小的行高时，两行文本被视为一个视觉组。
#07 适当调整行距
UI设计中，不需要可以保持相同的比例行高，因为增加文本大小将导致字号较大的每行文本之间有太多空白。在实际操作中遵循字号越大，比例行高越小的原则，比如大标题的比例行高通常应小于正文的行高。
这两行文字彼此相距太远。
#08 适元素关联
在信息密集的UI中，除了空白以外，还需要依靠其他技术来传达界面中的元素如何相互关联，例如：在一组相关元素周围添加填充或边框；使用一条线将垂直排列紧密的相邻元素分开，或者使用（“·”）分隔水平排列的相邻元素；更改文本的大小、大小写、粗细或颜色，以关联或区分UI元素。
通过减少空格、减小文本大小以及添加细微的水平线来确保相邻行在视觉上彼此不同，提高信息密度。使信息更加密集可以提高其使用效率，信息密集的界面只要通过合理的信息分层，不一定会令人感到混乱或不堪重负。
了解空白的一种有效方法是临摹练习：从你喜欢的设计中选择一个或多个界面，然后完整地重新创建它。通过这种练习，你将深入了解许多设计中容易忽视的小细节，并了解空白技巧如何在精心设计的UI中发挥作用。
为什么界面“看起来正确”背后一定是有原因的，通过经验和实践，可以磨练如何在设计中应用留白的视觉感和直觉。
火星时代教育，致力于数字艺术教育领域，提供游戏设计、动画培训、影视后期等课程。想了解更多？点击咨询
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
