极简UI界面的15个白色空间设计技巧

Sponsor

拥有一个有吸引力和用户友好的网站是每个网站所有者的目标，而对于企业来说，网站的外观和感觉至关重要。这就是访问者给人留下第一印象的地方——在那短短的几秒钟里，用户可能会接受或拒绝。网站设计还负责吸引访问者的注意力，并引导他们浏览内容。接下来，我们来看看使用留白设计的技巧，以及一些成功案例。

使用空白的提示

元素的位置对设计师和营销人员来说非常重要，因为访问者对网络资源的印象取决于他们的进一步行动。让我们来看看在设计网站时如何使用白色空间。

Call to action (简称CTA，一般指按钮)

用户关注按钮只是因为旁边什么都没有。因此，空间可以作为一个独立的工具来增加按钮的重要性。

空白用于跟繁杂隔开

如何吸引用户对产品的注意力？将其放置在中心，远离其他图元。除了吸引眼球之外，留白还可以从各个方面评估产品，而不会被其他因素分散注意力。

简单而不是单调

白色空间不一定要单调。比如你可以使用产品照片作为背景图像，并在中心放置标题和按钮。

建立要素之间的关系

任何页面都被访问者视为元素的组合。这是因为如果对象组彼此靠近，我们能够将它们连接在一起。由于相同的缩进，我们在心理上对对象进行分组，并理解它们属于不同的类别。

简化页面结构

Web设计人员经常使用分隔线将元素分开。然而，这往往会打乱布局。可以使用空白来代替线条进行分隔。

用户很欣赏与界面交互的便捷性。空白使人们能够流畅而一致地感知信息，并消除了丰富的装饰元素：额外的线条、块、框架等。

空白设计案例

让我们来看看使用空白的一些案例。

#1

如果你正在设计一个网站，那么在构建线框时划定空白区域是有意义的。

DESIGNED BY RAFAL CYRNEK

#2

你也可以注意这个选项，它非常适合移动版的网站。

DESIGNED BY DMITRY LAURETSKY

#3

只要看看这部动画中显示的带有空白的作品。同时，网站本身由结构明确的元素组成。

DESIGNED BY DANIEL MONTGOMERY

#4

在这里，我们可以清楚地跟踪定义页面内容的网格。此外，当使用空白时，考虑不同屏幕的响应性很重要，让内容在不同的设备上看起来都很好。

DESIGNED BY HRVOJE GRUBISIC

#5

在这个例子中，白色空间的有效利用在景观方向上尤其明显。看看这个解决方案有多么出色。

DESIGNED BY PAULA ŠOBAT

#6

如果你正在寻找一种能有效适应任何屏幕尺寸的响应式设计解决方案，强烈建议看看这个设计。

DESIGNED BY HAPPY TRI MILLIARTA

#7

这里是另一个很酷的例子，它使用了分布良好的白色空间。

DESIGNED BY TARAS MIGULKO

#8

如果界面假设没有用户将来制作的内容，请注意此设计。只要注意空白区在这里是如何正确实现的。

DESIGNED BY ADRIEN ROCHET

#9

在下面的示例中，你可以看到白色空间如何与放置文本的UI元素无缝融合。

DESIGNED BY LAURENT NDG

#10

如果你打算使用多色界面元素，请注意极简主义和简洁性，就像下图。

DESIGNED BY VICE RUKAVINA

#11

如果未来的应用程序或网站涉及从亮主题切换到暗主题，我们建议分析两种模式下的设计效果。下面的例子演示了白色空间在明暗主题中的正确使用。

DESIGNED BY ADRIEN ROCHET

#12

这里是另一个处理黑暗主题的不平凡的例子。尽管有大量的白色空间，但这个设计看起来并没有空洞和未完成的感觉。

DESIGNED BY HRVOJE GRUBISIC

#13

如果项目涉及某种类型的用户入职，那么确保您所使用的设计尽可能简单直观是很重要的。这可以使用空白来完成，如下图。

DESIGNED BY EMMANUELLE BORIES

#14

此外，不要忘记界面的所有元素都必须相互协调。看看以下设计的作者是如何专业地完成这一点的。

DESIGNED BY DANIEL MONTGOMERY

最后

在设计中，白色空间是负空间（留白）。这不是一个空的地方，因为它有自己的目标。特别是，它平衡了设计的其余部分，突出显示了页面（或屏幕）上的内容。白色空间有助于集中用户的视觉注意力。希望这篇文章对你有帮助！

原文链接：https://medium.com/@FlowMapp/clean-ui-guide-15-white-space-design-tips-c5320e248a26
原作者：FlowMapp
译者：lauren来源：彩虹BOOK （ID：a3020180906）

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。