学会UI设计中的留白，还怕作品没有表现力？

“

静电说：留白对于设计的价值，已经得到相当广泛的认可了。尽管留白看起来不复杂，但是在复杂多变的设计环境之下，往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡，而要做到这一点，需要相当的实践和积累。 [本文来自：www.11jj.com]

留白的概念 [原创文章：www.11jj.com]

留白本身通常还被称为负空间，留白和负空间虽然是两个不同的说法，但是两者表述的是同一个东西。之所以有两个不同的说法，是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域，因为页面的背景通常是白色的，而文本和图片周围的区域也多是白色的空白，因此有留白之说。而负空间这个说法是源自于摄影，吸引人注意的视觉主体被称为正空间，而相应的留白就成了负空间。

需要注意的是，留白并不一定非得是白色的，可以是其他的颜色，甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间，到处都是东西和人，找到特定的东西肯定是一个非常艰难的事情。相应的，在干净的地面上，摆放的唯一的物品肯定是非常醒目的，你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能，这样可以节省空间。但是，实际上这是一个最常见的错误的做法：用户并不需要在网页上一次完成全部的工作。更重要的是，太多的元素会分散用户的注意力，用户会难以找到真正想要的信息。正如同 Aarron Walter 所说：“你想让用户注意到所有事情的时候，他们会感知不到任何东西的。”

UI设计中的留白

留白可以在网页布局中各个元素之间，还可以在特定 UI元素的内部。留白赋予了页面呼吸感，而它本身并不一定非得是白色的空白区域。

在UI交互设计中，留白不仅仅是出自审美的考量，它还能提供实际的作用：

因此，留白是一种重要的、功能强大的设计元素，它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的：“留白就像一块画布，它是将不同设计元素融合到一起的背景，又让这些元素通过对比衬托脱颖而出。”

在什么地方用留白

必须承认，并非每个设计都需要大量的留白。留白的使用一定是有范围，且有留白会对设计中下列因素产生影响：

留白划分为大小两种：

小留白是在较小的元素之间小间隙，比如下面的元素周围的留白就是小留白：

相反，在处理相对较大的元素的时候，周围的负空间是大留白。

正确使用留白能够为整个设计带来平衡感。对于文本内容，你会发现易读性的高低和其中的小留白的控制有着密切的关联，，这对于内容的呈现有着重要的影响。

使用留白的好处还有很多：

需要考虑的问题和隐患

1

和不熟悉设计术语的客户进行沟通的时候，应该尽量让他们明白负空间/留白的含义和功能。对于非设计从业者而言，很多时候确实不能很快接受「屏幕中需要留下更多的留白」这样的概念。对于黑色或者深色的背景，这类客户可能会有不好的联想，事实上并非如此。在进行足够深入的沟通之后，尽量将这些关键点灌输给客户，避免术语和概念上的误读。

2

其实这个是几乎所有的设计领域都会面临的问题。客户会希望室内设计师在一面墙摆满柜子而不是给两个剩余的地方留白，而建筑设计师也常常需要建筑周围有足够的留白，确保呼吸感，提供更好的服务。设计师需要和客户沟通，了解哪些部分更重要，哪些部分次重要，而哪些内容是可有可无的，分清层级，进行筛选。留白有助于营造更加协调的布局，让信息和功能的可用性更强。

3

如果深思熟虑的信息架构和界面并不匹配，留白并不是万能的解决方案。你需要在考虑界面设计之前，就确定用户获取信息的方式，然后再进行设计。在确定风格之前，先要梳理清楚用户流程，否则，再好的负空间设计也不足以发挥出它应有的功能。

具体案例分析

关于留白的设计，很难绕过苹果这么经典的案例。虽然他们不是先驱，但是苹果将这一技巧的运用在自家的产品设计和网站设计上，体现的淋漓尽致。

在他们的网站上，你会看到清晰的视觉脉络，页面的每个部分都有清晰的视觉焦点，主次分明，用户永远不会在这里迷失和分心。

在保证用户能够获取足够的信息的前提下，Squarespace 的设计师尽量限制了界面上使用 UI 元素的数量。搜索框让用户能够轻松找到他们想要的信息，而文案设计上的独特性使得品牌的调性得到了放大。文本的字体色彩选用了黑色，和浅色的背景构成了强烈的对比，让阅读和信息的获取都无比的轻松。

如何使用标点符号来传达复杂的情绪？Progressive Punctuation 这个网站将这些「全新」的标点符号都展示了出来。

和其他的页面不同的地方在于，页面需要承载多个不同的非标准标点符号，为了将信息准确的传达，设计师巧妙地使用留白来控制符号之间的间距，确保整体的优雅性，又保证了信息的传达。

回复“版式布局”，查看：

不止是划条线！移动端UI中的板式布局

回复“Kite”，查看：

比Principle和Flinto更厉害的动效工具？Kite了解一下

回复“618书单”，查看：

静design折上折..，618设计师必备剁手书单

回复“XD”，查看：

震惊！Photoshop被杀手级应用Adobe XD吊打！

回复“工具”，查看：

2018年，设计师最值得尝试的8款生产力工具

回复“懒”，查看：

为什么你做不好设计？因为……

回复“静电视频”，查看：

《静电的UI设计教室》到底讲的啥？

最最后

《静电的UI设计教室-11期》精品超小班课程

报名进行中！

报名送Wacom手绘板

来了解下呗 ~