通过留白打造简洁有效的设计
[p=21, 2, left][size=12px][color=#000]有时最有效的设计技巧,就是什么也没有。而且它的目的性非常强。
留白是最有力的设计素材之一。它使得文字清晰易读,将注意力吸引至某部分,并且有助于打造整体氛围。
本文中,我们来看看一些优秀的留白使用案例,看看它们如何创造简洁的同时,有效地为不同网站定义了设计风格。
[size=16px][b]留白的基本要素[/b][/size]
[/color][/size][/p][align=center][font=arial, helvetica, clean, sans-serif][img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2393dfae9bfbc000001.JPEG[/img]
[/font][/align]
[align=center][font=arial, helvetica, clean, sans-serif][img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2373dfae9b2c0000001.JPEG[/img]
[/font][/align]
[align=center][font=arial, helvetica, clean, sans-serif][img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b23b3dfae90ff4000001.JPEG[/img]
[/font][/align]
[font=arial, helvetica, clean, sans-serif]留白和负空间的术语近年来被交替使用,它们指画布(或数码设备屏幕)上不包含任何内容的空间。简而言之,留白就是空白。[/font]
[font=arial, helvetica, clean, sans-serif]但是留白空间不一定要是白色的。这个术语指的是任何与背景相同的空间。所以它可以是白色、黑色,甚至包含微妙的纹理。[/font]
[font=arial, helvetica, clean, sans-serif]空间是所有设计的重要组成。字间距和行间距决定了文字的易读性。如果文字靠的太近或太松散,就很难阅读。关键是找到平衡点。[/font]
[font=arial, helvetica, clean, sans-serif]留白也能把图片和其他元素区分开。回想一下你见到过的杂乱无章的网站。通常问题就在于元素间没有足够的空间。记得在元素和文字间留下足够的边距,为了更加专业的外观,应该进一步使用统一的边距。在设计多列网站时也是同样的道理(即使只有主栏和边栏),在垂直元素间加入适当的空隙,就创造出了明显的划分。[/font]
[font=arial, helvetica, clean, sans-serif]留白还有助于引导视线,为设计建立层次,区分什么是重点和关键点。视线会立即移动到被留白包围的元素上。留白为其中的元素增添了冲击力。[/font]
[font=arial, helvetica, clean, sans-serif]留白是创造平衡、协调的工具,也是组织网站内容的基础。没有留白,如何为元素分组?如何找到导航?你又怎么知道滚动有更多内容,或是应该从左上往右下浏览?所有这些视觉线索,都来自于设计中留白的合理运用。[/font]
[font=arial, helvetica, clean, sans-serif][size=18px][b]重点使用留白的地方[/b][/size][/font]
[font=arial, helvetica, clean, sans-serif]虽然有效使用留白是任何设计的重要部分,还是有些地方值得注意。[/font]
[b]请看以下清单:[/b]
[font=arial, helvetica, clean, sans-serif][b] logo周围
每个导航按钮或图标周围,并围绕这些元素的“容器”
在两列文字间,在主体部分与边栏之间
当你使用视觉差效果时,在每页“滚屏”之间
在所有不同的元素之间,比如照片和文字之间,或是主体内容与页尾之间[/b][/font]
[font=arial, helvetica, clean, sans-serif][size=16px][b]
12例留白的有效运用[/b][/size][/font][align=center][font=arial, helvetica, clean, sans-serif][img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2323dfae98c01000001.JPEG[/img]
Adhara:看看左侧的边栏和主体内容的距离。此处的留白确实在元素之间创造了很棒的区分,并使彼此通过自己独有的方式突出展示。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2b53dfae952ff000001.JPEG[/img]
BeoPlay A9:背景与中央物体形成简洁的对比,创造了独特的视觉焦点。与优秀的对齐排布结合时,留白还有助于将注意力从图片引导至文字段落。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b22f3dfae97f3a000001.JPEG[/img]
Fixate:在一个像这样丰富的设计中,留白告诉你的眼睛应该看哪里(还有点击哪里)。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2343dfae99f26000001.JPEG[/img]
Google:这个搜索引擎已经使用留白很长时间了,白色的海洋中,它只有一个简单的数据入口和一个logo在。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2353dfae9a5d9000001.JPEG[/img]
Jac in a Box:留白在此处的运用是如此抢眼,因为它真的很大面积。将的视线从logo(本身的留白就运用非常完美)吸引到另一个角落的主体文字上。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2383dfae9b936000001.JPEG[/img]
Lapka:这家公司用了一种独具创意的方式,通过阴阳式的留白,将视线吸引到这些小物件上。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2363dfae9ac5c000001.JPEG[/img]
Leah Haggar:白色字体在黑色空间上很突出。精妙的底纹为整体效果增色不少。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2333dfae998a3000001.JPEG[/img]
Medium:这是一个使用非白色留白的绝佳案例。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2303dfae985bc000001.JPEG[/img]
Metta Skincare:通过对图片进行设计,留白为文字提供了绝佳的展现位置。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b23a3dfae90772000001.JPEG[/img]
PandaWeb:留白直接将注意力转移至这家公司的业务上。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b2333dfae992a7000001.JPEG[/img]
Square:这个网站将元素间的留白运用得很棒,作为图片和按钮的视觉焦点,也作为分栏的间隙。每个细节处的留白都精心处理过,创造了视觉冲击。
[img]http://hd.shijue.cvidea.cn/tf/140113/2316009/52d3b23c3dfae9164f000001.JPEG[/img]
[b]The Mealings:简洁、美观、舒适。留白——在设计与logo中——成就了这些特点,看起来简洁得不可思议[/b][/font][/align]
[align=center][p=30, 2, left][color=black][font=宋体][size=9pt]晨立宣扬是一家专注于创意设计与商业摄影的专业型平面设计公司。主要以企业形象设计、[/size][/font][/color][color=black][font=arial, helvetica, clean, sans-serif][size=9pt]VI[/size][/font][/color][color=black][font=宋体][size=9pt]设计、台历设计、挂历设计、[/size][/font][/color][url=http://www.bj-cl.com]标志设计[/url][color=black][font=宋体][size=9pt]、企业画册设计、宣传册设计、海报设计、包装设计等平面设计及[/size][/font][/color][url=http://www.bj-cl.com]服装摄影[/url][color=black][font=宋体][size=9pt]为焦点的创意研究和执行团队。作为一家专业的北京设计公司,我们关注企业各种平面设计的要求、创意、定位、推广、应用等项目,为客户提供最优秀的[/size][/font][/color][url=http://www.bj-cl.com]画册设计[/url][color=black][font=宋体][size=9pt]等全方位的平面设计服务。[/size][/font][/color][color=black][font=arial, helvetica, clean, sans-serif][size=9pt] [/size][/font][/color][/p][p=21, 2, left][font=宋体][size=9pt]网址:[/size][/font][url=http://www.bj-cl.com/][size=9pt]http://www.bj-cl.com[/size][/url][size=9.0pt][/size][/p][/align]
页:
[1]