您的位置:网站首页 > 新闻原创 > 安乡网页设计

网页设计中如何巧妙使用留白

日期:2017-4-6 9:09:24 人气: 标签:
分享到:
创造用户爱用的引人注目的布局是设计师的职责。留白有助于让界面更美观,更容易阅读。

我们生活在一个持续分散人注意力的时代。从印刷品到数字媒体,户外广告,在线广告,所有的这些信息都包围在我们身边。网站,电子商务,移动app,他们都是内容。

我们要创建用户喜欢访问的网站。所有的布局都需要易于理解,具备可读和可扫描的内容。

拥挤的网站是很难阅读的。复杂通常让用户感到不舒适。如果我们用很多不同信息去压迫他们,所有的信息都争着去吸引用户注意力,用户将会离开或者不做我们想要他们做的事。可能会购买电子商务网站上的一些东西或者阅读博客上的文章。

可是,有一个概念能帮助图形设计师去创造好的体验,让能容更吸引人,更容易被关注。那就是留白——一种给你布局空白空间的方法,能避免不必要的杂乱,在元素间使用留白来突出它们的优势。

留白是什么

对留白最好的描述应该是一种简单的东西,它本身预示着简洁。

留白或者说负形空间,就是网站上的空白处。它是一个空间标志,不仅仅让布局可读性更强;也加强了内容本身。用户可能会专注在更少,更好的被展示的元素上。COS online store是一个高端服装品牌,使用了留白来提高它高品质的印象。

留白理念的发展

我们可以追溯到“新文字”运动,它于19世纪20年代由Jan Tschichold发起。该运动宣告了这些理念:

元素的不对称平衡;

依靠层级来设计内容;

有意识的利用留白;

无衬线字体。

Beatrice Warde的高脚杯

另一个留白早期理念的例子就是Beatrice Warde于19世界30年代发表的一篇论文“The Crystal Goblet”。


Warde描述了两个高脚杯:第一个是纯金的,以最精致的工艺制成,第二个是水晶玻璃的,像泡泡一样轻薄透明。选择其中一个会展示你是否是一个真正的品酒家。

水晶的高脚杯显示了这个人对葡萄酒的欣赏。“因为关于它的一切都是用来展示本应该被包含的美好事物,而不是隐藏”。

Warde把这比喻为为提高印刷和排版清晰度打开了一扇门。她明白合理利用空间能丰富内容。

通过负形空间能达到什么目的

Tschichold和Warde在他们工作中运用的,我们今天能用负形解释。



留白或者说负形空间,就是你的组成元素之间的空白处。没有必要从字母上理解就是白色或者空白。它是一种对用户而言没有负重的背景,这样用户能专注在主要的内容上。

说到图形设计,在不同UI元素见建立起一个视觉层次是至关重要的。这有助于引导用户到交互的决策点上。

而且,留白能减少页面信息的杂乱感,让内容更加透气。

记住这些,我们一起来回顾下在网页设计中使用留白能达到什么目的:

1.网站更易被浏览

留白的平衡使用能提高浏览网站的舒适感。用户很容易就可以看到内容,所以他们更加容易找到他们在搜索的信息。

2.提高了内容的可读性

在元素之间保持适当的距离让内容更容易阅读。有助于用户更快速地阅读网页信息。

3.提升了美感

运用更多的空白,减少不必要的元素,能大幅度提高网站的视觉吸引力。

问自己一个问题:你是想浏览一个充满弹层、banner和不必要的视觉效果的杂乱页面,还是一个更简单,容易浏览和阅读的网站,哪个能达到重点?

4. 高品质印象

大量视觉元素的运用会降低品质。使用留白,从另一个方面来说,则会提高品质感。

留白使得网站看起来更轻,更优雅。缺乏元素竞相吸引用户的注意力,提高了用户体验。

你可以用的留白形式

既然你已经了解了留白的优点,那我们来做些实践。有好几种你可以使用的留白类型。

1. 大面积空白

这是不同元素之间的留白。有助于建立层次,保证网站适合的流程。



2. 微小空白

微小的留白是元素间很小的空白。我们能用它提高布局的清晰性和通透感。


3. 活动空白

包围在物体周围的留白会引导用户注意它们,提高它们的可见性和用户的关注。

4.非活动空白

这是指元素之间最小空白,对保持适当的导航,突出界面中活跃的元素,确保内容的可读性很有必要。

留白运用案例

为了更好地在你的设计中运用留白,让我们来看一些巧妙运用留白的例子。



Oculus的页面登陆页就是一个关于使用商量信息销售产品的的好例子。所有的信息就是一张吸引人的照片、清晰的文案、预定按钮和元素之间的留白。



衣服销售品牌ETQ证明了简洁销售减少了混乱,避免促使用户关注产品的不必要信息。

与此同时,通过设计,产品的品质得到了诠释。



Invision 的博客也是一个很好的例子,很好地组合使用了文案、图片和召唤按钮,鼓励访问者阅读博文。

看起来这些设计可能并没有什么革命性的变化。但是,与此同时,你能感受到它们和那些有很多信息的网站之间的差别。

尽可能多地收集信息是有必要的,有时你的客户想要你那样做。无论哪种方式,设计师最需要做的是展示最重要的信息,创建信息清晰、流程合理的网站。

使用空白建立起UI元素的视觉层次,你的网站才会传达更好的用户体验。
0
0
0
0
0
0
0
0
网友评论 Comments
下一篇:没有资料