网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

网页设计留白技巧教程:学会在网页设计中运用负空间(3)

时间:2015-05-25 09:33 来源:教程资料 作者:网页设计 阅读:

大多数用户首先都会注意到页面标题,也就是“Digital art&Experiments”这句话,而在它外围的则是大面积的留白,这样就使得用户的注意力完全集中于此。

尽管页面的顶部和底部只有一侧留白,但它们也同样可以引起注意。总而言之,在此,留白的区域很好发挥了吸引注意力的作用,而设计也就似乎看上去不可思议的简洁起来。

设计师实际上是采用留白区域作为一个空白幕布,以便给观众留下惊喜,好让我们可以看到他的作品的丰富细节。一旦鼠标移动到底部导航的任一栏目时,幕布上就会出现作品的图片作为背景全屏展示。这种效果创造出类似年幼时的一种探索和发现的乐趣:无意间闯入一片空白的场所,发现了每个抽屉都藏匿着丰富多彩的视觉盛宴。

你可以试试鼠标滑过时屏幕上发生的戏剧性效果。

网页设计留白技巧教程:学会在网页设计中运用负空间

通过留白区域作为工具来诱导用户注意到他的作品,设计师创造出了一种新鲜奇特的体验。在第一个作品出现后,我们就很想看看他还有哪些佳作。这感觉蛮吸引的,因为你将会抑制不住地想要找到最为重要的内容。但这都要建立在一个完美的点燃你好奇的切入点基础上。

2、小元素的留白

另一方面来说,当设计师们谈到小元素留白,他们通常是指的较小的元素或是较大元素中的次级元素的留白。他们包括:

字体、行距、段落、列表、按钮、图标

小元素的留白最多被用在强调网站整体的清晰度上面,尤其是在排版的清晰度上。当你试图利用文字间的留白打破平衡,保持清晰易读的同时又能不至于太过而让它偏离了重要的内容。我在这里,仅仅是一个提议,建议将英文行距设置为1.5px最为完美。(译者按:这里的作者没有考虑中文字体的行距)

就像格式塔规律中谈到的,让距离较近的元素视觉上更为接近,这将暗示它们具有相同的功能。小元素的留白将会让用户知道按钮与链接之间的关系,而同样的留白将强化这种机制,这在用户使用过程中进一步增强认知度。

尽管留白被分为了大元素和小元素两种类型,每一种类型也有主动与被动两种用法。

被动留白与主动留白

留白的应用其实都是取决于内容。

就像此前谈到的,留白越多,内容的吸引力就越强。但是,你不会想要页面的每个元素都具有最大吸引力,更别提有限的屏幕空间了。

那就让我们看看被动和主动的留白是如何帮助负空间达到视觉平衡的。

1、被动空间

我们把被动的留白视为空的最小化。

没有足够的留白,一个网站将会变得无法阅读而失去方向,所有的精力都被用于对抗视觉的混乱。被动的留白就是用空白区域去试着让网站易于理解。

网页设计留白技巧教程:学会在网页设计中运用负空间

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程