首页 > 网页教程 > 设计分享 > 留白设计:设计中的留白要如何做?

留白设计:设计中的留白要如何做?

时间:2018-06-05    来源:优设网

留白对于设计的价值,已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显,有了留白才有强调,它们从来都是一体两面,焦不离孟。今天的文章,我们来聊一下留白的使用技巧和最佳实践。

设计中的留白

留白本身通常还被称为负空间,它们可以在网页布局中各个元素之间,还可以在特定 UI元素的内部。留白赋予了页面呼吸感,而它本身并不一定非得是白色的空白区域。留白界定了 UI元素本身的空间边界,而借助格式塔原理,它还可以创造视觉上的联系。

因此,留白是一种重要的、功能强大的设计元素,它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的:“留白就像一块画布,它是将不同设计元素融合到一起的背景,又让这些元素通过对比衬托脱颖而出。”

在诸多的平面设计领域当中,负空间都发挥着无法替代的作用。无论是设计LOGO、平面插画还是字体的时候,留白的使用关系着整个设计的表现力。就像下面的博客插图,负空间的运用让整个画面显得更加生动。

无论是在网站设计还是 UI设计当中,设计师都需要借助留白来提升界面和导航的可用性。布局元素周围的留白或者负空间通常被称为宏空间,而它们之间的留白和内部的负空间,则被称为微空间。

理清概念

留白和负空间虽然是两个不同的说法,但是两者表述的是同一个东西。之所以有两个不同的说法,是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域,因为页面的背景通常是白色的,而文本和图片周围的区域也多是白色的空白,因此有留白之说。而负空间这个说法是源自于摄影,吸引人注意的视觉主体被称为正空间,而相应的留白就成了负空间。

需要注意的是,留白并不一定非得是白色的,可以是其他的颜色,甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间,到处都是东西和人,找到特定的东西肯定是一个非常艰难的事情。相应的,在干净的地面上,摆放的唯一的物品肯定是非常醒目的,你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能,这样可以节省空间。但是,实际上这是一个最常见的错误的做法:用户并不需要在网页上一次完成全部的工作。更重要的是,太多的元素会分散用户的注意力,用户会难以找到真正想要的信息。正如同 Aarron Walter 所说:“你想让用户注意到所有事情的时候,他们会感知不到任何东西的。”

对于设计而言,负空间的价值是非常高的,我们随便总结一下,都有很多:

  • 它让页面的可阅读性得到了提升;

  • 它增强了视觉层次;

  • 它使得元素和元素之间的关系更加清晰,更容易被感知,而不需要借助表格、框架这样的附加手段;

  • 它为页面增加了呼吸感,而不至于导致混乱;

  • 它让用户更容易将注意力集中到核心元素上,减少分心;

  • 它提升了页面的风格,让设计更加优雅。

看看这个城市指南的着陆页吧,负空间在背景中扮演了非常重要的角色,更重要的是,图片中的元素和前景的文本标题之间有所互动,这也同样是借助负空间的方式来呈现,呈现出一种和谐而有趣的设计效果。

相关推荐
学习知名网站的网页设计留白技巧
留白是什么?来感受这21个小而美的留白网站
留白设计作用多 让你的作品充满了呼吸感
网页设计中的负空间 巧妙使用留白设计
Web优化:谈谈网页设计中的留白原理(2016版)
分享:设计法则之恐惧留白 Horror Vacui
分享:99%的人在做网站设计时都用错了留白!
网易频道页面的改版过程分享
网站导航设计、架构与信息的探讨
分享:创建高效优质的单页网站6个秘诀
网站频道改版如何避免误区及正确的流程经验分享
从网站可用性的角度深入分析苹果和微软官网设计的优劣
阿里巴巴国际站首页改版过程及思路分享
优秀网站设计之页面导航原则
19个简洁风格创意的网页侧边栏菜单设计欣赏
最新的七个WEB设计趋势及其生存技巧预测
设计师必收藏:超实用的网页设计应急小技巧分享
夺你眼球!哪些方法可突出网页的关键内容?
网站的参与感:如何让用户觉得自己是VIP?
四种方式可以让网站的登陆框变得更炫酷的方法分享
网站优化:优秀的用户体验需要遵守哪几大准则?
走心的技巧!如何为色盲用户提升网页的可用性?
移动站点优化:跟着建议走!这样的网站设计才对头
网站首页的幻灯片轮播图点击率低的原因分析
网页字体排版:这10种字体的运用方式值得参考!
如何设计氛围独特情绪深沉的深色系网站?
首页轮播图如何通过设计和交互细节提升用户体验?
7个原则让你的网页用户体验更优秀
如何让网站首页设计得极具吸引力?
移动终端全新界面设计语言“Metro”简析
淘宝品牌名店的BANNER广告设计评价及分析(2)
优秀排版设计的8条建议
版式设计:深入浅出学会网格系统的应用
如何学会版式设计中的主要元素提取?
文字排版设计:如何设计出吸引视线的标题?
如何用超大字体元素应用在设计作品集类的网站?

精彩推荐

热门教程