留白的力量

留白(也叫负形)是指页面内元素的空间。尽管有人认为留白是在浪费屏幕,但是留白在设计中是非常重要的。

留白是积极元素,而不是反面教材。

今天我们来讨论下如何使用留白让你的设计变得干净整洁。

留白和负形空间

“负形”这种说法是源于传统艺术,通常用于准确的掌握物体的形状。实际上,空间不一定非得是白色的,任何形式的留白都不如分层留白。由于留白和负形跟实际的白色不太相关,所以可以相互替换。

在图形用户界面的留白

正如传统的设计,在图形用户界面中也需要负形,文本、按钮、logo或者其他物体都需要呼吸空间。所有优秀的人机交互界面从头到底贯穿整个界面的元素间会保留一个适当的留白。在GUI中可以被当作留白的元素:

a.外间距(margins)、内间(padding )和水沟(gutters)
b.图形和图像之间的距离
c.文本内容的字间距和行间距

留白和其他元素所占的空间一样重要,即使是空间也可以达到某些目的并且支持整个视觉布局。留白主要有四个目的:

1.提高理解

留白应该让阅读和浏览内容变得更加简单,更加可以预知。

优先考清晰度和可读性

文本间的空间非常重要,有助于定义文本内容。优化内容的清晰度(是否能分辨出文字和单词)和可读性(是否能浏览内容)。

由Wichita State University的实验研究证明增大空间实际会提高对阅读的理解,尽管这可能会降低阅读速度。正如Dmitry Fadeyev指出:

正确的的使用段落的留白以及左右的间距能够将辨识度提高20%

当优化文本内容时,脑袋里记住两件重要的事情,段落间距和行间距。行间距可以很大程度提高文本的易读性。通常,空间值越大,用户的阅读体验就越好。尽管,太大的空间会破坏统一性,使设计不相关。再强调下,最好能找到平衡点。

2.明确关系

整个布局是部分布局的综合。文本之间的关系由周围的留白决定的。留白实际上是视觉层次。

组织相关的元素

当你观察用户如何组织视觉信息,格式塔心理学建立接近性原则,并指出接近的物体具有相似性。

在文本的GUI里意味着接近的物体是一个整体。比如,在网页形式的文本中,将标签放在相关的文本框里从而构建单独的单元。

3.吸引注意力

许多应用和网页都将太多的元素和信息一起塞进去,然而并没有足够的呼吸空间。

过于杂乱的界面会让用户接触到过多的信息,降低杂乱干会提高用户的理解:避免干扰,让你的用户只关注于那些立即可见的信息。

引导用户到相关内容

在距离和注意之间的关系:更长的距离更聚焦的注意力。减少部分元素会突出一些元素。使用留白突出重点,将用户的视线聚焦在页面内的某些元素。围绕在某些特定内容的额外的内间距聚焦用户的注意力,因为在这周围没有什么吸引用户注意力。

物体周围留白越多,视线越容易聚焦在物体上。

创建视线

如果留白使用合适的话,会让页面产生视觉流和平衡,同时有助于交流设计意图。

作为设计师,我们有责任创建可用的交流手段

留白可以产生全局的视线,既要对称又要不对称。对称便于记忆和统一,不对称会产生视觉吸引力。对称将注意力吸引到页面某些区域,或者页面中某个特殊元素。元素使用对称空间,会在周围的元素中跳脱出来。

4.打造奢侈的感觉

尽管留白被认为是提高用户体验的技巧,当然也可以用于美学目的。设计师使用留白为高端品牌创建优雅的感觉。同时使用用户文本和图片的敏感度,大量的留白在一些奢侈品牌中常见。留白能够增加普通页面的老练和奢侈感觉,从而创建产品比实际的更重要的感觉。

结论

留白不是空白的画板,他是有力的设计工具。留白可能很难掌握:留白的应用既是艺术也是科学。讲真,合理使用留白可以创建良好的布局需要练习。你设计越多,你会学得越多。


原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 作者最大原文链接 如果你常听到产品设计师和工程师之间的设计QA会话,你可能会听到产品设计师的看法如下: “你可以在...
    Doria2016阅读 5,608评论 0 16
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,694评论 1 92
  • 掌握空白的力量 Mastering the Power of Nothing 如何在界面设计中使用空 空白是界面设...
    Woody_Wu阅读 4,003评论 0 2
  • 当下的今天如果你觉得你活得很幸福,那是因为有许多人在你背后默默的付出!如果你觉得你活得很痛苦,那是你的要求和标准过...
    王语星阅读 1,148评论 0 1
  • 给血友病吧友带去诚挚的问候,昨夜凌晨醒来,百度了一下试题君,除了右边出现些沙子,其他一切链接还是正常的,才敢放心睡...
    冯恩君阅读 1,751评论 0 0

友情链接更多精彩内容