一点儿网页空白空间设计的想法

标签: 产品设计 设计思想 | 发表时间:2011-09-03 14:33 | 作者:P迪 纸条
出处:http://www.alibuybuy.com

空白,在网页上主要是指除图形&文字内容之外的空间。网页中的空白虽没有像山水画中“计白当黑”的那么浪漫,但他在引导用户视觉和创造流畅的视觉感受方面却是至关重要的。

施乐公司在推出《施乐出版标准》中,他们这样描述他们设计的原则:”页面设计的主要目标是视觉认知和清楚易读。这些目标必须通过和谐的排印、有效地利用图画和空白空间,有节制的利用(字行)来完成… …多次重复,在视觉上形成必然联系可以引导视线和帮助读者快速浏览。设计中,留出大量空白空间作为空白表现领域,使标题”突出”,大的图画得到视觉上的延伸。”
下面,结合一些例子,谈谈我对空白设计的一些简单理解。

例子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


© 推荐 for 互联网的那点事, 2011. | Permalink | 2 comments | Add to del.icio.us
Post tags:

你可能也喜欢:

FireWorks CS3 官方简体中文正式精简版 - Adobe 网页图片处理软件 (@iplaysoft)

ThinkingExpress(思想快车): 仅600KB的国产思维导图软件 (@xbeta)

从基本文本网页至移动网页设计,网页设计全历史

连续性的设计——改善产品的体验

设计矛盾说
无觅

Feed enhanced by Better Feed from Ozh

相关 [网页 空白 空间] 推荐:

一点儿网页空白空间设计的想法

- 纸条 - 互联网的那点事
空白,在网页上主要是指除图形&文字内容之外的空间. 网页中的空白虽没有像山水画中“计白当黑”的那么浪漫,但他在引导用户视觉和创造流畅的视觉感受方面却是至关重要的. 施乐公司在推出《施乐出版标准》中,他们这样描述他们设计的原则:”页面设计的主要目标是视觉认知和清楚易读. 这些目标必须通过和谐的排印、有效地利用图画和空白空间,有节制的利用(字行)来完成… …多次重复,在视觉上形成必然联系可以引导视线和帮助读者快速浏览.

黑白空间

- 电饭锅 - 设计|生活|发现新鲜
设计师Oki Sato带给我们的黑白空间设计,强烈的素描感. 让你置身平面又似立体空间之中,单看图片眼球就有较强的视觉冲击感,想必如果身处其中的话,一定会迷失. 「设计,生活,发现新鲜」在新浪微博,更即时地获读更新,更直接地交流沟通. © 设计|生活|发现新鲜 | 原文链接 | 投稿 ! | 新浪微博 | 逛逛我们的在线商店.

时间与空间

- 马都 - 博客李淼
(《Vision》文章,勿转). 时间与空间这两个概念是物理学的基石,也是我们人类甚至动物依靠直觉就具备的概念. 我们判断一个物体的位置,我们从一个地点走到另一个地点,涉及到空间这个概念. 在小学,我们就开始学习一些简单的几何概念,例如三角形,三角形中的三个角有锐角、钝角和直角. 到了中学,我们还学一点立体几何和解析几何.

Oracle表空间(tablespaces)

- - 博客园_首页
  我们知道oarcle数据库真正存放数据的是数据文件(data files),Oarcle表空间(tablespaces)实际上是一个逻辑的概念,他在物理上是并不存在的,那么把一组data files 捻在一起就成为一个表空间. 一个数据库可以包含多个表空间,一个表空间只能属于一个数据库. 一个表空间包含多个数据文件,一个数据文件只能属于一个表空间.

表空间传输

- - 数据库 - ITeye博客
Oracle 的可传输表空间特性通过将 元数据和数据文件 简单地从一个数据库移动到另一个数据库,提供 在数据库之间有效移动大数据的一种简易方法. 代替重新创建对象,可移植表空间可以让 毫不费力地移动大对象,而所花费的时间是你手动创建这些对象的时间. 可移植表空间包括将属于源数据库的所有数据文件拷贝到目标数据库,并将关于表空间 数据目录信息从源数据库拷贝到目标数据库.

纽约的极简空间

- wonder laura - 蘑菇爱生活
“少意味着更多”,这是极简主义的精髓. 这是建筑设计师elizabeth roberts位于纽约的家,由旧工厂改造而成的loft空间. 本着极简主义的设计思想,设计师将它刷白,铺上地板,布置好家具,于是呈现给我们一个带着古典主义,却又充满时尚感的空间. [上图]深色的木地板给空间铺上了古典主义的感觉,墙及天花刷白,使空间透亮.

假期与个人空间

- 枫 - 小步的漫画日记
啧啧...发上来才发现这次的字有点小...下不为例吧= =|||. 希望大家都能以愉快的心情去迎接假期后的学习和工作~ (^^)/. PS:上一篇微博...我稍微透露点...除了字面意思外,“差”字还是多音字.... MSN空间完美搬家到新浪博客!.

纽约的极简空间

- 4444554 - 蘑菇爱生活
家太素时间久了会让人很烦躁呆不住. “少意味着更多”,这是极简主义的精髓. 这是建筑设计师elizabeth roberts位于纽约的家,由旧工厂改造而成的loft空间. 本着极简主义的设计思想,设计师将它刷白,铺上地板,布置好家具,于是呈现给我们一个带着古典主义,却又充满时尚感的空间. [上图]深色的木地板给空间铺上了古典主义的感觉,墙及天花刷白,使空间透亮.

小空间的杰作

- JoeyFang - 疯狂的设计
小空间的杰作,thedesignerpad 收集整理:.

拓扑空间的紧性

- Sosi - Free Mind
参加暑期讨论班其中有一场是我讲,第一次这样子讲数学的东西,有点紧张,于是先在这里整理一下. 关于空间的紧性,我们在之前的分析中已经见过了:例如在实数轴上的有界闭区间就是典型的紧集,紧集具有很多优良的性质,比如我们知道在有界闭区间上的连续函数一定是一致连续的,并且能取到最大值和最小值. 所以,在将空间的概念推广到一般的拓扑空间之后,我们也希望将紧性这一优良性质也带到拓扑空间中来.