加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_宿迁站长网 (https://www.0527zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 策划 > 正文

由浅入深学留白!教你如何在网页设计中运用负空间

发布时间:2016-09-27 12:49:57 所属栏目:策划 来源:人人都是产品经理
导读:副标题#e# 推荐:留白的意义是为了实现产品的目标,而大空间和小空间的区别也让留白更加细致,细致的结果也变成高品质的极简主义。 由于屏幕是有限的,因此网页设计也是有限的。可以这么说,在屏幕这个小小的盒子中,每个像素都是一块不动产。 就算是菜鸟,

没有足够的留白,一个网站将会变得无法阅读而失去方向,所有的精力都被用于对抗视觉的混乱。被动的留白就是用空白区域去试着让网站易于理解。

由浅入深学留白!教你如何在网页设计中运用负空间

请看上面的例子,导航里的每个链接间的距离,再看看下面这行文字,行距,字间距等。你能看出什么不同寻常的吗?……答案是你一定找不出。没错!这些空间和距离都是如此微不足道,根本不会引起你的注意。这就是所谓的被动留白。

对于大元素的留白,被动空间意味着足够多的border和margin的空间去强调元素之间的不同,避免混淆。举例来说,就像导航和注册都在网页顶部,但彼此间间隔了一定的距离。

对于小元素的留白,被动空间就包括了字符,文字,段落的最大可读性,以及当出现列表或下拉框菜单时,每行文字或每个选项间的独立性。

被动空间的应用应该是自然而然的。实际上,被动留白的主要目的甚至可以说就是不被注意。当你试着营造一块被动空间,那么你要让它看起来不那么引人注意,就简简单单的视之正常为最佳。

当安置好所有的被动空间,接下来才涉及到主动的部分。

2、主动空间

由浅入深学留白!教你如何在网页设计中运用负空间

在上面的这个网页中页面里有好几个元素:菜单栏按钮、下拉箭头、下拉提示等,然而,屏幕中占据主导地位的是中间的黑色文字,这让其他的元素都放在了周围,设计师放大了中间的留白区域,然后把最重要的信息放在这里,让用户的注意力完全集中于此。

同时,减少两行元素间的距离,这一过程也许可称得上是一种“隐藏”的方式。就像你常常在网站上见到的法律申明和版权信息一样。请看如下的例子,“FiberSensing is an HBM Brand”的展示效果很容易让人忽略。

由浅入深学留白!教你如何在网页设计中运用负空间

大元素的留白通常是用于创造首要的注意力,或是将一堆重要信息分散开来。

然而,有时候小元素的留白也可以采用主动的方式,有的设计师就使用主动的空间将重要的引言或者段落等形成一段文字独立出来而吸引注意。这的确是一个强调重点内容的好办法。

极简主义

留白越多,也可以说你的页面就越趋向极简风格,你通过删减很多元素来避免凌乱。

极简风格是一种设计的哲学,可以说它不好但也不坏。它祛除了所有能带给用户视觉干扰的杂碎,而让用户关注到你所展示的重要内容。没有了噪音,剩下的精华内容就呈现在一片优雅的留白中。

极简风格在两个方面影响你的网站:现存的元素数量,高品位的氛围。

1、元素数量

你的页面存在的元素越少,那么页面剩下的元素就显得越重要。

如果页面只有一个元素,即使它蜷缩在角落里,仍然是你的用户关注的焦点。如果你的页面有成千上万的小元素,你的用户也许会随机地寻找他们的兴趣点,或者由于选择太多而放弃。

这样一种相关性,让我们深知,在你的设计中要增加留白,最简单的方式就是减少页面元素数量。但我们知道说起来容易做起来难。极简主义可以说适用于任何网站,你绝不会想要把用户不需要的也填充到网页上。然而,作为视觉审美来说,极简风未必适合所有的网站,尤其是对于内容丰富的网站来说,就不会愿意这样光秃秃的一览无余的画面。

当提到极简主义,请大家记得,我们不是仅仅在谈论审美方面,它也不是我们的目标。恰如其分达到极简风格的水平是去精简页面元素,直到不能使用。这需要在用户中进行大量测试,然后在你减少的最多时停止。

由浅入深学留白!教你如何在网页设计中运用负空间

就像上面的例子中,整个页面只有两个可点击元素:菜单栏图标和下拉箭头。信息已经被极简化处理放在了屏幕右侧。元素少之又少,因而用户注意力就放在了中间的那张极富感染力的图片上,同时视线也会引导至下拉箭头。

你怎样去平衡元素的重要性完全由自己决定。有些页面就只设置一个可点击的链接,这样确保了用户去到设计师想要他们去的地方。而有的页面给了多个下拉选项供用户选择。你可以考虑去掉标语,突出内容,简化导航,当然这全取决于你的品牌和产品。

2、高品位的氛围

极简风现在变成了高品位的同义词,它能魔法般地营造出一种精细、时尚和优雅的氛围。时尚行业的网站在数字设计方面都是倾向极简的,但是对于一些零售行业的企业来说,还很少看到有类似的设计。

高品位的氛围是与留白有着直接的联系的:

重度留白:可以见到一些奢华、高端的品牌中使用。

中度留白:比较平衡但仍是有品质的。

低度留白:可见于一些廉价的、质低的、凌乱的展示效果中

由浅入深学留白!教你如何在网页设计中运用负空间

(编辑:云计算网_宿迁站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读