一点儿网页空白空间设计的想法
空白,在网页上主要是指除图形&文字内容之外的空间。网页中的空白虽没有像山水画中“计白当黑”的那么浪漫,但他在引导用户视觉和创造流畅的视觉感受方面却是至关重要的。
施乐公司在推出《施乐出版标准》中,他们这样描述他们设计的原则:”页面设计的主要目标是视觉认知和清楚易读。这些目标必须通过和谐的排印、有效地利用图画和空白空间,有节制的利用(字行)来完成… …多次重复,在视觉上形成必然联系可以引导视线和帮助读者快速浏览。设计中,留出大量空白空间作为空白表现领域,使标题”突出”,大的图画得到视觉上的延伸。”
下面,结合一些例子,谈谈我对空白设计的一些简单理解。
例子1:
A: http://ssq.cpdyj.com/
B: http://trade.500wan.com/ssq/
这是两个彩票投注的页面,从整个网页的功能来说几乎是一样的,但是A网站的设计空白使用的比较散乱再加之内容过多,会产生不知从哪里开始也不明白到哪里结束的视觉感觉,对于用户来说会花费更多时间精力去分辨和判断什么是什么;B网站页面的空白使用相对合理,在用户会花时间最多的操作区域内保留了更多的空白空间,这样不单可以起到强调操作区的作用,同时为眼睛找到一点点休息的区域,这相对拥挤的页面更能帮助用户再操作的过程中不容易着急。空白在这里首先是页面看上去更清爽一些了,同时也提高了网页的可用性。
例子2:
A: http://www.baidu.com/more/
B: http://www.soso.com/more.shtml
C: http://www.google.com.hk/intl/zh-CN/options/
先看soso和百度的,很明显两个页面使用了同样的排版的手法,产生的效果也是类似的。这样横纵像表格一样的排版,在每一个项目周围会产生一些暧昧的空白空间,请试着体验一下眼睛在需找其中一项的时候是如何在这些并不明确的空白空间中游走的,这样做的结果很明显的导致了页面实用性的下降,用户很可能在寻找的过程中产生很难找到东西的心理感受,但是soso的内容较少所以可用性还是不错的。再看看google的做法,google的做法也许你会说这样排版太浪费空间了。的确这样的做法的确是浪费空间,但是这样做的好处在于:这两列加右侧留白空间,在视觉上给了用户足够的引导——-非常明显的从上到下的浏览方向,可用性相对较高。
空白其实也就是图形和背景的关系,但是和图形设计中阴形阳形的使用有所不同的是,图形设计中图底之间的关系更为复杂,形成的美感更富变化,图底可能分别都作为视觉的主题在进行设计,从而形成非常暧昧互相变化的复杂图形,如:下图。
但这种做法在网页的设计中要慎用,这样很容易造成图形的底形分不清,造成视觉上的困扰。
以上举得只是很小的空白应用的例子,在这里也是抱着学习交流的态度在写一些平时收集的小设计心得。希望大家多多支持~~ 更希望高手指正交流~~
来源:http://uedc.163.com/7206.html
-
微信创始人张小龙首次公开演讲(官方无删减版)
微信创始人张小龙首次公开演讲(官方无删减版) -
如何通过APP看到产品战略层面
产品经理拿到一款产品的时候,不能只能看到表面信息,而是要能看到产品背后的信息。 -
基于用户的“真需求”创新产品
产品创新是保证企业在竞争激烈的市场上长久生存的关键,今天,我们就围绕产品创新和用户研究分享一些看法。 -
有一种交互设计研究验证叫“设计走查”
如何在最短的时间内对自己的产品做出检验,确保其在定位、设计、营销计划等多个环节,在可视范围内是正确的,需要一套比较科学、完善的方法去做出检测。 -
你为什么离不开微信?
张小龙说用完即走,你却爱不释手; 到底是什么让你离不开微信? -
移动互联时代APP的发展方向
现在我们已经走上了移动互联网时代,无论是企业还是公司,都会经过网络竞争中争取有利的优势,较为传统的产品竞争逐渐向互联网竞争转型,出现了很多数据云大数据等等 -
AI 时代产品经理的机遇和挑战
AI 时代产品经理的机遇和挑战 -
前1%与前10%的产品经理差距在哪?
前1%与前10%的产品经理差距在哪? -
你有哪些策略应对不断的需求变更?
你有哪些策略应对不断的需求变更? -
如何运营天猫【十亿俱乐部】商家页面?
如何运营天猫【十亿俱乐部】商家页面?