美文网首页
如何在网页设计中运用留白

如何在网页设计中运用留白

作者: Hello_Lisa | 来源:发表于2017-04-01 11:09 被阅读225次

    原文:Medium点击这里

    作者:Jakub Paniączyk

    标注:2017.03.28 - 6 min read

    译者:Lisa - lisapeng1996@gmail.com 侵删

    如何在网页设计中运用留白

    设计师角色便是创造用户想要使用的吸引人的布局。留白是一个能够帮助你制造出一个美观,易读网站的概念。

    我们生活在一个注意力总是被分散的时代。我们周围总是有各种各样的信息,有印刷的,数字媒体,户外的广告和在线的广告。网站,电子商务,移动app——他们都充斥着各种各样的内容。

    我们应该创造出用户喜欢访问的网站。所有的布局需要很容易理解,这样才能拥有一个可浏览,阅读性好的内容。

    “臃肿的”网站真的很难阅读。复杂性通常会让用户感觉不舒服。如果我们将大量各种各样的信息覆盖网站,这样将会打扰用户的视觉焦点,他们将会离开或者不会采取我们想让他做的行为。这个行为可能是在电子商务网站购买某些东西或者在博客上读某篇文章。

    然而,有一个概念能够帮助平面设计师创造出好的网页体验,让内容可以很好的展示并且阅读。

    是留白——给你的布局更多的空间,有时仅仅是去掉不必要的杂乱并且在它们的重要元素中间放置空白。

    什么是留白

    留白的最好解释应该是简单的,就像它自己的名称一样简单:

    白色空间,或者负型空间,是网站上的空白区域。

    这个一个没有被标记的空间,它不仅仅使布局变得更加有可读性,也强化了内容。用户可能会更好的把焦点注意到更少更有代表性的元素上。

    COS在线商城是一个优质服装品牌的网站,它用了大量的留白来增强它的高品质感。

    空间概念的发展

    我们能够追溯留白的历史一直到“New Typography”运动。它由Jan Tschichold提出在1920年代萌芽。

    这个运动倡导了以下这些原则:

    1. 元素的非对称平衡

    2. 有层次的内容设计

    3. 有目的的留白运用

    4. sans serif的字体

    Beatrice Warde的高脚酒杯

    早期在字体中的留白概念例子是1930年Beatrice Warde的一篇文章,“The Crystal Goblet”。

    Warde描述了两种高脚酒杯:第一个是“实心的,有精致的花纹”,第二个是“干净的水晶玻璃,和气泡一样薄一样透明”。对它们其中一个的选择将会体现人是否是一个真正的红酒鉴赏家。

    水晶的高脚酒杯揭示了人们对红酒的喜欢,“因为里面的所有都是可以展现出来的,而不是藏在好看的东西里面”。

    Warde认为这个象征着在印刷和排版领域需要更多的干净。她明白对空间的合理使用将会使内容更丰富。

    你能够对负型空间做什么

    Tschichold和Warde发表在它们的工作中的文章可以解释当前的认知科学。

    留白,或者负型区域,是你构图元素中间的空间。然而,它不用是真的白或者空。它是一个没有给用户带来认知负担的背景,所以他们能够关注到主要元素上去。

    当谈到平面设计,在不同的UI元素中建造一个视觉层次很重要。它会引导用户走向交互的战略点。

    甚至,留白能够帮助减少信息杂乱,给内容更多的呼吸感。

    有这些在脑海里,让我们概括一下我们在网页设计中能够用留白做什么吧:

    1. 网站更易浏览

    一个空白区域的平衡安排能够增强浏览网页的舒适感。用户能够很轻易的浏览内容,所以对于他们来说找到他们想找的东西也变得更加简单了。

    2. 提升内容的可读性

    在元素之间保持一个更舒适的距离能够让内容更易阅读。它帮助用户能够更快更容易的浏览网页内容。

    3. 提升艺术美感

    应用更多的空白区域并且减少不必要的元素能够大大的增加你的网站视觉效果。

    4. 高质量的印象

    视觉元素的丰富会降低质量的感官。用留白方法,在另一方面来说,恰恰相反。

    你能用的几种留白

    现在你已经了解了留白的好处,让我们开始练习一下吧。这里有几种你能够运用到的负型空间:

    1. 大留白

    这是在不同的元素之间的空间。它帮助区分层次感并且保证网站的正确视觉流。

    2. 小留白

    小留白是元素之间一些小的空白区域。我们能够运用它来使用它增加布局的清晰度和透明感。

    3. 积极留白

    在物体周围放置一些留白让用户的注意力向它们集中。增加它们的可视性和用户的注意力。

    4. 消极留白

    这是在元素周围放置一些小的留白,制造一些合适的负型区域,指出界面的活跃元素,并且保证内容有很好的可读性。

    留白应用很好的例子

    为了在你的设计中得到怎么运用留白很好的想法,你必须要看看它是如何的强大。让我们看看把留白应用的很好的品牌吧。

    Ocilus的加载页是如何不用很多信息就销售一个产品的很好的例子。它所需要的就是一张吸引人的图片,干净的排版,注意力的吸引,和元素间的足够留白。

    服装电子商务品牌ETQ就证明了简单也能有很好的销售量。减少冗杂和不必要的信息能够将用户的注意力集中在商品上。

    同时,品牌的质感能够通过设计很好的展示出来。

    Invision的博客也是正确运用排版,摄影,留白的很好例子。这能够吸引鼓励访问者读博客。

    可能在这些设计中看不到很大改革的东西,但是,与此同时,你能够感觉到它们和那些充斥着大量内容的网站的区别。

    不要尽可能的填充更多信息。虽然有时候你的客户可能会让你那样做。没关系,设计师的角色需要关注最重要的元素,创建一个有清晰信息和合适视觉流的网站。

    用留白创建一个UI元素的视觉层次,这样你的网站才能传达给用户一个好的用户体验。

    相关文章

      网友评论

          本文标题:如何在网页设计中运用留白

          本文链接:https://www.haomeiwen.com/subject/iaabottx.html