留白这种设计手段的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

相关推荐

  • 【交互设计】选择时间设计

    作者:Mufly 对于不少手机应用来说,都有一个选择时间的功能,那么从交互体验的角度来看,这个时间选择表格应该如何去设计比较理论呢?   时间选择,常见的一般分: 1、具体时间点选择,这种类型侧重于具体的…

    2015-09-07
  • 情感化设计对互联网产品的启发

      “产品具有好的功能是重要的;产品让人易学会用也是重要的;但更重要的是,这个产品要能使人感到愉悦。”       美国认知心理学家Donald Norman在2002年提出产品设计的”情感化“理念,随着“体验经济时代”来临,…

    2014-11-05
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09
  • UI 设计师如何让设计稿100%还原(上)

    大部分新手设计师可能都会遇到一个问题,设计效果很赞,为何还原效果那么差?是开发不行?然后就吐槽开发傻X,可很少有人想过是否是自自身的原因,在开发过程中就不断和开发撕逼。今天我介绍一些关键点,通过这套系统的方法来解决你的视觉还原度,希望这篇文章能帮助到你。

    2017-04-28
  • 我花了五个小时,完成了iOS 11新版App Store的交互探索

    WWDC 2017 上发布了全新的 iOS 11 ,系统本身在设计上就有了诸多变化和更新:信息更扁平的控制中心、WP 风格的大标题、截图编辑功能、相机直扫二维码等等。不过,作为一名电商设计师和 App 爱好者,此次更新最让我感兴趣的莫过于 App Store 的“改头换面”了。

    2017-06-12
  • 干货时间|交互设计线上讲座内容回顾总结

    学艺术的大表姐带你走上艺术留学的不归路Hello~Everybody~上礼拜元宵节的结束宣告着新的一年的真的要开始了!这下我们也再没有借口偷懒了小伙伴们要用新的节奏开始奋斗啦~2018,告别懒惰,发愤图强吧!!最怕的就是:“比你优秀的人还比你努力!”当然为了给大家缓冲的时间大表姐特意送上年前的交互设计分享讲座的干货回顾总结对交互设计感兴趣的同学,可千万不能错过接下来的内容了~并且还能拓宽自己的艺术设计领域想了解更多关于英美交互院校、专业...

    2018-03-09
  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27
  • 【每周开眼】这一周你应该看到的交互设计圈最棒的设计作品

    Duang Duang Duang!【五一免费体验营】“五一”3天假 出去玩? 还是提升专业能力? 来新易,将两者结合!小长假结束了!考研党又纷纷开始了图书馆的占座活动又开始了肖秀荣英语I英语II工业设计史世界现代设计史画手绘呀,搞透视,搞线条,搞设计辛苦了一天就这么结束了哦不是该来一波优秀的设计作品洗洗眼睛了小新给大家准备了晚间夜宵【洗眼睛必备】交互圈国内外大神的优秀作品从中我们不但审美可以得到提升最重要的我们可以学到很多设计的创意方...

    2018-04-08