留白这种设计手段的4大必要功效

留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
“留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
“作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
让产品自身为自己说话。


留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。

留白这种设计手段的4大必要功效

留白是指在页面元素之间或是包围页面元素的空白空间。虽然这种手法可能会被认为是浪费空间,但是留白在设计上是一个必须的元素:

“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold

“留白不单单是一个被动的背景,而是一个活跃的元素。”

今天,这篇文章将会告诉你如何运用留白这种设计手段,把你的设计提升并给用户一种整洁感觉。

留白与空白的空间

”空白的空间“ 这个名词是来自传统艺术,主要的功效是用来更准确的抓取物件的形状。事实上,空间不用一定涂成白色才叫留白,任何空白的空间/并没有和主要内容比拼层次的空间都可以界定为”留白“。由于留白和白色并没有真正的关联,所以留白与空白的空间是一样的意思。

留白这种设计手段的4大必要功效

在用户界面上的留白

和传统艺术一样,在用户界面上的物件也需要留白空间。文字,按钮,图标和其他物件都需要呼吸。所有好的用户界面都会从上到下的,规划好页面元素之间的留白,做到合适合理。

在用户界面上的留白可以分为:

  1. 边缘的空间
  2. 包围图片和影像的空间­­
  3. 行距,字符之间的空间,表格之间的空间

在一个页面上每一个留白空间和其他UI元素一样重要,因为这些留白空间都有它们存在的意义和帮助保持布局上的视觉完整性。

留白主要有4大必要功效

1. 改善理解力

留白能令用户在速读或是阅读时,更容易理解和预见文章的内容。

可读性和是否容易被理解之间取舍

文字之间的空间是很重要的,因为它能帮助页面去区分自身的内容。你应该尽可能有效的使你的内容同时具备容易被理解(如何理解字句意思)和可读性(速读时能理解多少内容)。

Wichita State University举办的一个实验测试中证实-虽然留白会减慢阅读的速度,增加留白能有效增强阅读理解能力。Dmitry Fadeyev 曾指出:

Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%

适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.

在优化文字内容时,切记两个重要的因素 – 段落与段落之间的距离和行距。行距能大大的优化主要内容的理解性。虽然过多的空间会打破整体性以及使设计没有关联,但是一般越大的间距,用户在阅读过程中的体验就会更好。可是在这得再次声明一下,这是需要找到一个完美的平衡的。

留白这种设计手段的4大必要功效

2. 说明关系

布局是由一个个部件叠加构成,内容间的关系是由周围的留白空间所界定的。我们可以理解为留白的地方形成视觉上的暗示。

相关的元素组合在一起。

格式塔心理学家透过观察人如何去组织视觉元素,发明了近接定律,当一件物件很贴近其他物件时,它们会在视觉上很相近。

留白这种设计手段的4大必要功效

在用户界面的角度来说,物件距离特别近的会被视为一个单位。例如,在网页设计中,把标签放在相对应的输入框附近从而创造一个单位。

留白这种设计手段的4大必要功效

3. 吸引注意力

现在有很多的APP和网站都是塞满太多的元素和资料而缺乏呼吸的地方。

留白这种设计手段的4大必要功效

如果资料塞满的用户界面会为你的用户带来过负荷,那减少元素就会变相增强理解力。清除了干扰,你的用户就会强行的专注在那些“立刻可见”的部分。

(1)带领用户的眼睛去看你想让他看的内容

距离和专注力是有关系的-大一点的距离会大大增强注意力。没有其他元素只会令原本已经存在的元素更突出。留白的空间对于吸引目光集中在某个元素上起了正面的影响。因为在屏幕上已经没有其他东西干扰注意力,额外的空间包围着某个元素会吸引用户的目光集中在那边。

The more whitespace around an object, the more the eye is drawn to it

越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。

留白这种设计手段的4大必要功效

(2)创造视觉层次

当留白使用恰当,它会令一个页面产生整体的流程和平衡,并帮助用户去了解设计中的含义。

As designers, it’s our responsibility to create usable communication vehicles.

“作为设计师,我们职责就是去创造“沟通手段””

留白空间可以支撑整个页面的层次。它可以制造对称或是不对称。对称创造记忆和和谐;反观,不对称吸引注意力。不对称是很好的带领注意力去到页面上某一个位置或是元素。当一个元素使用了不对称的间距,它会在这些围绕着它的元素之中显的非常突出。

留白这种设计手段的4大必要功效

4. 制造豪华的感觉

虽然留白时常用作为一种手段去提升用户体验,但是它也可以单纯的用在美学目的上。除了印刷和摄影外,在奢侈品市场还能看到大量的留白,设计师利用留白为奢侈品品牌去创造高雅的感觉。空白增添成熟和豪华的感觉,产品在页面中的展示显得好像价值比房子还要贵的感觉。

Let the products speak for themselves

让产品自身为自己说话。

留白这种设计手段的4大必要功效

总结

留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。

 

原文作者:Nick Babich

原文地址:https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b

译者:@许嘉智  xujz@ctrip.com

译文来源:携程设计委员会

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21345/

(0)
CatherineCatherine
上一篇 2017-04-28 04:52
下一篇 2017-04-28 06:49

相关推荐

  • AxureUX电商平台WEB端交互原型模板正式发布

    01作品信息作品名称:AxureUX电商平台WEB端交互原型模板作品类型:模板类发布日期:2018-02-25最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:13MB作品编号:TEM006作品售价:¥169.00详细介绍及演示:http://www.axureux.com/home/templateswebec.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品...

    2018-03-04
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 交互设计中的心理学

    整理认知心理学中对交互设计(用户研究)有所启发的一些知识点(参考《认知与设计——理解UI设计准则》)包括:中央凹与边界视野——如何呈现信息以获取注意力格式塔原理——如何处理不同界面元素的关系时间感知——如何让…

  • 一篇文章读懂用户体验(上)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。

    2017-06-01
  • 12个线框图示例,来自Dribbble的UX设计师分享。

    在设计过程的最初阶段,我们知道很有可能直接选择word或邮件原始需求。但是,用线框技术解决问题有很多好处,它可以节省时间,更易于发现可用性问题,并让设计人员专注于创造可靠的用户体验

    2017-12-26
  • 线上与线下零售体验设计分析

    本文作者将结合自己对线上与线下零售的实际体验,与你交流用户体验设计策略相同之处,提升融通思维的洞察力。本文行文思路如下:
    1、用户流量
    2、停留时间
    3、回访频次
    4、客单价
    5、盈利模式
    6、总结

    2017-04-29
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 视觉设计-文字编排的易读性

    在视觉设计工作中,大家总习惯将重点放在图标和色彩上。但实际上,作为一个阅读类app,思考如何让文章更易于阅读是和图形、色彩处理同等甚至更为重要。 在设计工作中,如果有100个人就会有100种设计理论,我认为并…

    2014-09-08
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 最浓缩的概念:一句话明确UI本质,区别真伪UI

    我同意一种观点,成人的知识学习体系最好的其实是慨念性的。因为,我们面对的社会不再是以前学校里老师给方向,让我们去找方法。而是方向我们自己思考自己找,然后针对自己的思考出的方向再去找寻相应的方法。所以,在现实工作生活中,别人的一个方法看似有效,其实未必可行。这也是很多人的成功其实并不可复制是一样的道理。

    2017-05-25