在UI设计中有效利用空白区域

白色空间是设计中最被忽视的部分之一,通常是UX / UI设计人员最有效的解决方案。

在我的设计生涯开始时,我从未看到白色空间背后的真正价值以及它可以使我的设计看起来更美丽和更具吸引力的方式。然而,当出现挑战时期时,有效利用空白区域对于解决问题至关重要。

然而,正确使用白色空间是非常必要的,否则设计最终会看起来非专业和简单。

                                                                 
1.jpg


什么是白色空间?
白色空间是布局之间的空白区域,段落中的线条,多个设计元素之间的空白等。这些元素可以是图像,排版,插图,图标等。白色空间不是指空白色背景,也不一定是白色,它可以是任何颜色或图案,因此我们也将其称为负空间。
既然您已经了解了设计中的空白区域,那么让我们深入了解它将如何影响可用性和用户界面。
 
1、改善你的视觉层次结构

                                                                 
2.jpg


将可视化层次结构表单设置为UI设计者最关键的步骤之一。作为一个基本的经验法则,最重要的信息必须位于顶部,大胆且易于查看,而底部最不重要的信息,在较小的框中,不太集中。这很容易理解,甚至可以在您的设计中展示。
但是,在上面的例子中,左侧的图像使用较小的空白区域。这可能会破坏您的视觉层次结构,并导致用户混淆或不感兴趣以吸收给定的信息集。
因此,示例显示了白色空间如何使设计更易于扫描,从而更容易理解。
 
 2.帮助用户关注重要方面
 

                                                                   
3.jpg

 

负空间有助于用户专注于最相关的内容。这通常通过有效利用设计中的宏观和微观空间来完成。

在非专业术语中,宏观空间是指设计中较大的白色空间段(页眉,页脚和网站边距之间的空间),而微空间指的是不同UI元素之间的较小空间(行和段落之间的空间)

如果您希望将用户的注意力集中在说明图而不是文本上,则在其周围添加有效的空白区域可确保更加关注所需的设计元素。在上面的示例中,在左侧,插图与其他元素混合,禁止用户吸收适当的信息,而在右侧,插图享有白色空间,允许用户专注于相关插图,而后者又链接提供的信息。
 
3、找到合适的平衡点
                             
                                                                   
4.jpg

 
白色空间有多少白色空间?在设计领域经常提出的一个问题。对此的简单回答是,允许用户理解信息而不会压倒信息的设计是最平衡的白色空间设计。

在上面的例子中,右侧的图像爆炸,信息使其势不可挡。虽然右侧的图像是舒缓的,但能够在不压倒用户的情况下实现理解。
 
4、保持一致

                                                                 
5.jpg


一致性是白色空间的关键。设计中的每条信息都是一致的,白色空间也是如此。空间的逻辑利用为设计中的每个元素创建适当的空间。

利用率的不一致将导致突然的用户界面。

示例中,不一致的白色间距使得它看起来像两组照片,一组在顶部,另一组在底部。在右侧图像中,所有6张照片看起来都是一致的,并且是1套照片的一部分。
 
5、创造性地适应元素中的空白区域

                                                           
7.jpg


白色空间的创造性利用是一项技能,可以使元素看起来更加美观,并且仅仅使用负空间的标准原则来增加焦点和保留。人们可以将他们的创意果汁拿出来,而不是利用白色空间来改善视觉吸引力,而是描绘一些相关的东西并增强视觉效果。以上是创造性地使用白色空间来展示品牌使命和身份的某些示例。最常见的例子是FedEx,其中白色空间用于显示与品牌使命产生共鸣的箭头。

总之,白色空间就像艺术一样,你必须正确地做到让你的设计看起来更有效和专业。我们希望您喜欢阅读这篇文章,它帮助您重新思考用户界面设计中的白色间距原则。

                      
 
 
 

0 个评论

要回复文章请先登录注册