像素范儿吧 关注:250贴子:485
  • 0回复贴,共1

UI设计中留白的力量和规则

只看楼主收藏回复

留白,是页面布局中元素和元素的留白,这些元素都是重复的图像,卡片,按钮,图标等。当留白用的恰当,留白可以使布局视觉清晰。留白就像一缕新鲜的空气。正如人们需要空气呼吸一样,设计需要留白的空间来提升呼吸感。
是如何处理页面间的留白的?
遵循留白规则,确保页面的一致性和易于维护。我们以一个上线产品的规则来说,每个设计元素之间的间距应该是8像素的倍数,这意味着间距可以是8、16、24、32、40像素等等。该规则为视觉留白区域带来了方便,并在网站体验中创建了视觉一致性。

适当的留白如何改善用户体验?
留白是一个有助于提升用户体验的工具。使用空白区域为我们的用户创造焦点,吸引他们注意某些元素。页面上特定元素周围的留白越大,对该元素的关注度就越大。在下面的示例中,通过留白清楚地制造了焦点。

并不能总是可以留白这么多,往往不被理解。在典型的电子商务页面上,设计师面临着平衡多个交互的考虑。下面的例子展示了产品详细信息页面(PDP),这是一个物品详情页面。策略性放置的留白空间有助于用户浏览此页面上的视觉噪音,并可能增加转换。

留白提高了块状的视觉感
留白不仅在页面中突出重点部分,同时在整个页面中起着巨大的作用。留白对于阐明组件之间的关系和隔开部分段落是至关重要的;它也是格式塔原理背后的推动力,格式塔原理是:人们总是先看到整体,然后再去关注局部,人们对事物的整体感受不等于局部感受的加法,视觉系统总是在不断的试图在感官上将图形闭合。明确页面的不同部分会增加用户对网站体验的好感。
在一个混乱的排版中,如上图1没有具体的间距大小对比,不能让用户形成块状的局部,让用户抓不到重点,这种方式是每一个设计师应该避免的。以下示例展示主页,如果没有正确的使用留白,页面很可能会出现令人不知所措的局面。

留白提高可读性
为了增加页面元素的跳跃性,形成视觉块面,也就是格式塔原理的运用,因此要注意行和列的间距,并且固定,重复运用,这样形成的页面将更能让用于接受,在阅读时更有节奏感。行间距稍微大一些会更好,但是距离太大可能会导致用户再看这一块的时候不能连接上,就像格式塔心理学的案例一条一条的线段组成的圆,会让人自动识别出这个圆,而不仅仅是线条。中等(是的,这个网站)在复制设置中考虑到空白空间很好。
留白最常见的问题有哪些呢?
“留白就是浪费空间!”这是一个虚构的。当界面中的一些元素不必要出现的时候,可以用更多的留白填充。大家都听过少即是多的理论,这是可以在任何页面中都适用的,让没有必要出现的元素不出现,正如下图对比,减少干扰视觉的元素能增加用户体验感。

总结
设计师都希望设计出体验最佳的界面,留白可以实现这一点。它应该大量合理的应用到设计中。认为现在的设计排版太拥挤吗?可以适当添加六百尝试一下,或许有不一样的收获。


1楼2017-11-03 11:13回复