在UI设计中使用空格的最佳方法
浏览:302 时间:2022-3-7

在交互设计中,空白或“负空间”是指设计或页面布局元素之间的差距,即网页中段落,图像,按钮,图标和其他项目之间的差距。它经常被忽视和忽视。虽然它的名字中有“白色”,但它不仅仅是白色。它可以是任何颜色,纹理,图案甚至背景图像。

设计师,客户和经理之间的纠纷

设计师喜欢它,网站所有者想填补它。空白似乎是设计中最具争议的方面之一。 —保罗博格

设计师认为优雅的白色空间确保了用户体验的质量。不幸的是,许多客户和经理认为消隐是浪费空间。本文将讨论如何巧妙地使用空白区域,并教您如何在与设计团队合作时养成白色习惯。

在第一个屏幕中使用空白区域的最佳设计方法事实上,白色空间的概念在不同的需求中是不同的。例如,着陆页上可能存在大量空白区域以突出显示指南按钮(“下载”或“了解更多”等)或其他关键信息。

Apple的官方网站就是最好的例子

另一方面,由于仍有许多内容需要简化,因此电子商务网站可以留空的地方并不多。虽然不像其他情况那样频繁,但这些网站仍然需要留空。

电子商务网站Bill Blass的截图不仅仅是Bill Blass等时尚电子商务网站。像沃尔玛这样的大型电子商务网站也需要使用白色空间来保持它们的美观,使产品信息更清晰,更易于阅读和吸引人。

总之,我们可以理解联系的上下文,对应用程序没有固定的规则。但是我们可以记住一些提示:

1.为页面分配不超过15个注释

设计师Paul Boag建议您可以将页面的注意力限制在15以下。他说:每次向页面添加元素时,都会引起关注。如果屏幕中的元素比另一个元素更重要,则需要额外注意它,使其出现。提供有限注意力的唯一结果是:很明显,您不能说必须将所有内容都放在页面上,并且不需要将空白排除在等式之外。

我们以MailChimp网站为例(让我告诉你为什么我个人喜欢他们的网站!)

这就是如何在页面上放置14个用户关注点,添加的任何其他元素应该只替换不太重要的内容。这是确保您不会在页面中放入太多内容的一种方法。

2.优先考虑可读性和可读性

在开始设计之前,请创建一个接口元素库,它是接口片段和元素的集合。这不仅为声音设计系统奠定了基础,促进了一致性,而且还向设计者通知了内容的范围。

下一步是创建一个粗略的内容框架,评估易读性的空间要求(用户如何识别字母和单词)和可读性(如何使用户扫描内容)。

在优化文本内容的段落边距和行间距时,请记住两件事。调整行间距可以大大提高文本正文的易读性。通常,行间距越大,用户在阅读时就会有更好的阅读体验,但行间距会破坏页面的均匀性并破坏设计。同样,调整间距只是寻找完美的平衡。

媒体是这方面最好的例子

3.打破差距

使用对比色,不同字体大小和不对称白色空间为设计添加额外样式。空白是一种灵活的设计元素,会影响用户对所有周围元素的感知。

图片版权所有来自https://www.awwwards.com/sites/rev-studio

如果有疑问,我总会看看其他设计师如何在他们的设计中使用白色空间。 Awwwards是我个人最喜欢的灵感来源。

4.确认空白区域符合要求

美丽只是白色空间的一个方面,更重要的是,主要内容和指南按钮都突出显示。设计是否这样做只能通过用户测试来验证。 CanvasFlip是一个工具,可以帮助设计师验证他们的设计是否达到了预期的效果!对于设计师来说,高度互动的热图显然是A +成绩单:)。

由https://bouguessa.com设计|使用CanvasFlip进行测试

结论消隐并不意味着空白画布,它是一种强大的设计工具。空白可能难以掌握:它是科学与艺术的同步应用。真的了解如何在设计和实践中更好地使用空白区域。你设计的越多,你就会学得越多。