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

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

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

请看上面的例子,导航里的每个链接间的距离,再看看下面这行文字,行距,字间距等。你能看出什么不同寻常的吗?&helpp;&helpp;答案是你一定找不出。没错!这些空间和距离都是如此微不足道,根本不会引起你的注意。这就是所谓的被动留白。

对于大元素的留白,被动空间意味着足够多的border和margin的空间去强调元素之间的不同,避免混淆。举例来说,就像导航和注册都在网页顶部,但彼此间间隔了一定的距离。

对于小元素的留白,被动空间就包括了字符,文字,段落的最大可读性,以及当出现列表或下拉框菜单时,每行文字或每个选项间的独立性。

被动空间的应用应该是自然而然的。实际上,被动留白的主要目的甚至可以说就是不被注意。当你试着营造一块被动空间,那么你要让它看起来不那么引人注意,就简简单单的视之正常为最佳。

当安置好所有的被动空间,接下来才涉及到主动的部分。

2、主动空间

werkstatt

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

在上面的这个网页中页面里有好几个元素:菜单栏按钮、下拉箭头、下拉提示等,然而,屏幕中占据主导地位的是中间的黑色文字,这让其他的元素都放在了周围,设计师放大了中间的留白区域,然后把最重要的信息放在这里,让用户的注意力完全集中于此。

同时,减少两行元素间的距离,这一过程也许可称得上是一种“隐藏”的方式。就像你常常在网站上见到的法律申明和版权信息一样。请看如下的例子,“FiberSensing is an HBM Brand”的展示效果很容易让人忽略。

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

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