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

原文: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元素的视觉层次,这样你的网站才能传达给用户一个好的用户体验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • 早在小编上大学就喜欢日本简约的设计风格,从田中一光到现在的原研哉,他们一点点的将日本设计带向了全世界。现在大家说的...
    郑乔尹在旅游阅读 1,089评论 0 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,888评论 25 707
  • 因为朋友,倍感温暖。 中午和婷婷吃了速冻饺子,虽然简单,但她从学校的一角为了友谊奔向另一角的我这里,足矣满足。 出...
    小乌龟慢慢爬_阅读 62评论 0 0
  • 昨日为他人唏嘘不已 今日幻化他人 时间是最棒的魔术师 致力改变一切 还制造出 一切都未曾改变的假象 蒙骗你我 Wh...
    不入流echo阅读 88评论 0 0