前言：无声的设计，让人们懂得声音的珍贵。无色的设计，让人们深刻体会到色彩的魅力。而留白的使用， 则让设计师们轻松认清真正需要填入的页面内容。从而，帮助他们创建更加引人入胜的网页或App设计。由此可见，留白对于网页和app设计也是不容忽视的。
设计师们时常认为无声、无色，甚至留白泛滥的设计往往不好。然而他们却未意识到，这一看似理所当然的认识，实则忽略了一个重要的事实：正是这些不可或缺的设计元素，帮助他们打造出更加鲜明强烈的对比设计。
无声的设计，让人们懂得声音的珍贵。无色的设计，让人们深刻体会到色彩的魅力。而留白的使用， 则让设计师们轻松认清真正需要填入的页面内容。从而，帮助他们创建更加引人入胜的网页或App设计。由此可见，留白对于网页和app设计也是不容忽视的。
所以，下面，我们就一起来探讨UI设计中，留白的设计奥秘～
一、UI设计中，留白究竟是什么?
一般而言，留白(white space), 又称 "负空间(negative space)"，是指界面布局设计中的空白区域。当然，这里的空白区域，不仅包含各个组件周围的空白区域，还囊括了各组件内部，以及组件之间的空白空间。它是确保所有页面组件之间保有最基本张力的重要区域。它不仅仅能够帮助设计师定义界面元素之间的区域界限，还能够帮助设计师们，根据格式塔原理，在各个页面元素之间建立无形的纽带，保持一定的张力，从而打造高效、实用的视觉设计。
总之，留白设计是能够有效提升用户体验的重要设计元素。正如来自Interaction Design Foundation的Mads Soegaard所说的那样："界面设计中的留白就像画布：充当背景的同时，将界面的各种元素巧妙的联系在一起，不失张力的同时，帮助它们轻松脱颖而出。"
平面设计中的留白，通常出现在logo、插画、海报以及创意文字中，用以加强其视觉效果和视觉表现力。例如，在下图的博客插图中，我们可以清楚的看到其背景(即图中的明月)，是如何利用留白，打造出鲜明的对比的同时，突出图中的宇航员，使其更加生动而极赋活
而在网页或app界面设计中，留白则是影响其可用性和引导性的一个重要因素。而且，进一步细分，围绕布局元素的空白区域，常被称作"宏空间"。而它们(包括界面文字和单个笔画元素)之间和内部的空白区域，则常被称做"微空间"。
总之，留白，无论在平面设计，还是网页或app设计中都是极其重要的设计元素。
二、留白为何如此重要?
想象一下，当你走进一个房间，房间内却挤满工作人员。各类物品，例如书架、箱子、袋子、书以及衣物等，也都毫无规律的随意摆放，一片狼藉。你还能轻易地注意并找到其中的某个物品吗?所有这些物品真的都是需要的吗?找到真正需要的物品，又需要花费多长时间呢?
同理，这与用户打开网页时的感受一样，没有留白设计帮助优化界面布局，用户找到需要的界面信息，也会非常困难。由此可见，留白设计对于设计师打造清晰直观的界面布局和分类也尤为重要。
诚然，很多客户和设计师都希望页面能够尽可能容纳更多的功能和组件。因为在他们看来，如此就可以节省更多产品设计和研发时间，并且对用户而言，也非常实用，一举两得，何乐而不为!但事实却并非如此。因为，这一想法本身就是个错误：在实际使用过程中，用户并不会同时需要界面上的所有组件或功能。更重要的是：没有足够留白的UI设计，由于囊括过多设计元素，反而会大幅增加界面噪音，分散用户注意力。
换句话说，当界面挤满各类无关紧要的内容和交互时，用户必然需要花费更多时间和精力，才能找到他们需要的信息。正如，Aarron Walte说所的那样："如果界面的所有元素都在试图吸引用户注意，那么用户可能什么都注意不到"。
此外，在网页或App界面设计中，极具创意的留白设计，往往也具有很多的优点：
提升界面可读性
增强界面视觉层次感
轻松自然地展现界面元素之间的联系，无需借助其它部件或手段(比如通过添加表格、框架布局、箭头等)
帮助预留足够的空间，有效避免杂乱无章等类似情况的出现
突出页面核心内容，降低界面噪音
打造更加简洁优雅，风格独特的UI设计
三、留白设计对用户体验的影响有哪些?
留白的准确应用，同时也会影响到用户体验：
1、提升界面可读性
如若界面元素之间未留有足够空间，用户浏览阅读起来就会非常困难。这可能就是导致用户在浏览网页时，时常会眼睛疲劳和大脑不自觉紧张的一个重要的原因。尽管许多用户可能并未意识到这一问题。而适当的留白, 特别是适当添加微空间设计, 能够有效地解决这一问题, 使整个浏览阅读过程更加自然，从而提升用户体验。
所以，由此可见，留白直接影响着整个页面的排版效率。就如同在乐曲中，停顿和音符的作用同等重要一样。用户浏览阅读网页的过程也是如此：优秀的设计留白能够有效提升界面可读性。
2、优化品牌设计
查看logo设计规范或指南时，不难发现：设计师们也会预先为logo设计定义适当的留白， 以确保logo本身能够被用户准确地感知。如若违背这些规范准则，则会极大地影响整款设计的视觉效应，这一点不容小视。
3、影响界面整体设计基调
此外，留白还会影响到界面的整体设计基调。例如，新闻类网站留白往往相对于博客类网站要少一些。以奠定网页设计基调，让用户明白，界面平台上动态展示了非常丰富的内容和信息。
4、提升界面内容关注度
足够的留白能够增强界面的视觉层次感，轻松引导用户集中于界面的重要信息
而且，留白会在以下几个方面对UI的视觉效应产生影响：
文本内容
图形内容
界面导航
界面辨识度
四、留白设计过程中需要注意什么?
1.注意解释相关术语
当为不太熟悉设计术语的客户解释类似术语时，请务必在讲解设计方案之前，准确解释negative space的真正含义。尽管，对于一些非设计师的人来说，要弄清为什么"界面设计需要更多留白空间"并非易事。因为在他们看来，全黑的背景以及留白设计，可能与不好的事情相关，或者可能会带来不好的反应。但事实并非如此，不是吗?所以，切勿忘记事先将此类术语解释清楚。
2.注意不要无谓的减少留白，以增加界面内容
在实际设计中，很多客户和设计师，都希望尽可能减少留白，增加页面内容。事实上，这样的想法，不仅仅发生在UI设计中。你也可能从室内设计师的口中听到，建议为用户预留更多的空间，在一个房间里摆放4个，而非2个书架。亦或听到建筑工程师解释，为什么建筑周围需要更多的空间，让它看起来更加舒适，更具实用性。更重要的是，有时更好地利用留白，重新规划元素，会帮助设计师打造一种空间感，搭建比实际空间更大的空间设计。
同理，这样的原理也同样适用于移动界面设计。如此，利用空间留白，展现出什么是最重要的，什么是次要的，什么是可以完全去除的。从而，更加直观地引导用户。而且，留白设计，还能够有效的打造和谐统一的外观，尽管整款界面设计布满各种信息和功能设计。
3.注意UI设计的优先级
留白设计并非万能。尤其是当经过深思熟虑设计的信息构架，并不适合某一软件界面时，留白设计或许就会带来不好的效果。所以，在开始界面主题设计之前，必须首先弄清用户一般查找和实现目的的方式如何，然后通过网页或app设计，帮助解决他们的问题。在进行界面外观设计之前，首先需要弄清用户流程。否则，即使通过应用包括留白在内的视觉元素，打造出了最佳外观设计，也不能发挥其应有的作用。
文章出自：http://qh.itpxw.cn/peixun/ui/201946601.html
文章标题：探讨UI设计中留白的设计奥秘
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
