通过留白打造简洁有效的设计

标签: 设计理论 简洁风格 | 发表时间:2014-04-16 16:58 | 作者:wantfee
出处:http://startwmlife.com

有时最有效的设计技巧,就是什么也没有。而且它的目的性非常强。

留白是最有力的设计素材之一。它使得文字清晰易读,将注意力吸引至某部分,并且有助于打造整体氛围。

本文中,我们来看看一些优秀的留白使用案例,看看它们如何创造简洁的同时,有效地为不同网站定义了设计风格。

留白的基本要素

580-1.jpg

580-2.jpg

580-3.jpg

留白和负空间的术语近年来被交替使用,它们指画布(或数码设备屏幕)上不包含任何内容的空间。简而言之,留白就是空白。

但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色,甚至包含微妙的纹理。

空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散,就很难阅读。关键是找到平衡点。

留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距,为了更加专业的外观,应该进一步使用统一的边距。在设计多列网站时也是同样的道理(即使只有主栏和边栏),在垂直元素间加入适当的空隙,就创造出了明显的划分。

留白还有助于引导视线,为设计建立层次,区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。

留白是创造平衡、协调的工具,也是组织网站内容的基础。没有留白,如何为元素分组?如何找到导航?你又怎么知道滚动有更多内容,或是应该从左上往右下浏览?所有这些视觉线索,都来自于设计中留白的合理运用。

重点使用留白的地方

虽然有效使用留白是任何设计的重要部分,还是有些地方值得注意。请看以下清单:

  • logo周围
  • 每个导航按钮或图标周围,并围绕这些元素的”容器”
  • 在两列文字间,在主体部分与边栏之间
  • 当你使用视觉差效果时,在每页”滚屏”之间
  • 在所有不同的元素之间,比如照片和文字之间,或是主体内容与页尾之间

12例留白的有效运用

580-4.jpg

Adhara:看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分,并使彼此通过自己独有的方式突出展示。

580-5.jpg

BeoPlay A9:背景与中央物体形成简洁的对比,创造了独特的视觉焦点。与优秀的对齐排布结合时,留白还有助于将注意力从图片引导至文字段落。

580-6.jpg

Fixate:在一个像这样丰富的设计中,留白告诉你的眼睛应该看哪里(还有点击哪里)。

580-7.jpg

Google:这个搜索引擎已经使用留白很长时间了,白色的海洋中,它只有一个简单的数据入口和一个logo在。

580-8.jpg

Jac in a Box:留白在此处的运用是如此抢眼,因为它真的很大面积。将的视线从logo(本身的留白就运用非常完美)吸引到另一个角落的主体文字上。

580-9.jpg

Lapka:这家公司用了一种独具创意的方式,通过阴阳式的留白,将视线吸引到这些小物件上。

580-10.jpg

Leah Haggar:白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少

580-11.jpg

Medium:这是一个使用非白色留白的绝佳案例。

580-12.jpg

Metta Skincare:通过对图片进行设计,留白为文字提供了绝佳的展现位置。

580-13.jpg

PandaWeb:留白直接将注意力转移至这家公司的业务上。

580-14.jpg

Square:这个网站将元素间的留白运用得很棒,作为图片和按钮的视觉焦点,也作为分栏的间隙。每个细节处的留白都精心处理过,创造了视觉冲击。

580-15.jpg

The Mealings:简洁、美观、舒适。留白–在设计与logo中–成就了这些特点,看起来简洁得不可思议

相关 [白打 有效的 设计] 推荐:

通过留白打造简洁有效的设计

- - 飞鱼的声纳
有时最有效的设计技巧,就是什么也没有. 留白是最有力的设计素材之一. 它使得文字清晰易读,将注意力吸引至某部分,并且有助于打造整体氛围. 本文中,我们来看看一些优秀的留白使用案例,看看它们如何创造简洁的同时,有效地为不同网站定义了设计风格. 留白和负空间的术语近年来被交替使用,它们指画布(或数码设备屏幕)上不包含任何内容的空间.

为网页设计创建有效的配色方案

- longman - cnBeta.COM
或者说是网站的内容决定了网站的价值. 所有这些因素都会发挥其作用,但正是配色方案决定了设计是否出彩. 有经验的专业人士会告诉你很多诀窍,比如说,一种配色方案可能适合一种设计,但未必适合于另一种;配色方案选择应该在布局内容之前还是之后. 今天我们就要找到这些问题的答案,本文中,你也能找到很多免费资源供你选择配色方案.

做有效的设计:移动应用中如何实时指导用户

- - PingWest
Mobile First的作者,著名的用户体验专家Luke Wroblewski是一个十分乐于分享的人,尤其是在自己开发了投票应用 Polar之后,他就经常分享自己在产品改进上的经验,最近,LukeW在自己博客的一些文章中又讲到了自己在Polar上的一些改进,探讨了在用户引导和功能位置设置上的思考.

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

- - 博客园_首页
日期:2012/02/24  来源: GBin1.com. 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应.

学会有效的休息

- xiaohu - 战隼的学习探索
转一篇很经典的文章,不知道原始出处在哪里. 有知道的读者请告知,我特意搜索一下,没有找到出处,全部都是转载的. 整篇文章说的就是精力管理的理念,一定要学会休息,根据自己节奏给自己充电,管理好精力才能集中注意力. 对这篇文章有兴趣的朋友,可以进行扩展阅读《精力管理》或《全力以赴》. 《精力管理》读书笔记-1.

SEO如何做有效的外链

- Jacky - 月光博客
  国内做SEO的人可能会经常听到这样一句话“你可以不懂如何改META,但你必须知道如何做外链. ”可见外链作为SEO优化中的一个手段被许多SEO从业者推到了一个非常高的高度.   其实这样的看法是有一定的道理的,因为SEO的所有工作都是为了让搜索引擎对其网站页面产生友好,但是页面自身的优化对搜索引擎来说是有一个标准的,这个标准好比一个极值,无论你如何进行优化都是在无限接近这个极值,但是不可能会超过,然而外链则作为一个外部因素是一个无穷大的数值,所以外链会被人感觉到是一个见效快,稳定,且不容易犯错的最简单也最容易衡量的一个优化手段.

如何有效的报告Bug

- - 博客 - 伯乐在线
英文原文: Simon Tatham,编译: Dasn. 为公众写过软件的人,大概都收到过很拙劣的bug(计算机程序代码中的错误或程序运行时的瑕疵——译者注)报告,例如:. 在报告中用户没有提供足够的信息;. 在报告中提供了 错误信息;. 所报告的问题是由于用户的过失而产生的;. 所报告的问题是由于其他程序的错误而产生的;.

有效的MySQL备份与恢复

- - haohtml's blog
【TechTarget中国原创】如果您接手了一个 MySQL生产系统,但不确定它是否运行了MySQL备份策略,这时需要做哪些保障措施呢. 在实施备份策略之前,一定要明确数据规模和存储引擎使用等先决条件. 这会对系统在备份过程中的可用性产生直接影响. 在本文中,我们将介绍用于确定最小备份功能所需要的方法,其中包括:.