IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

网易用户体验设计中心博客 2011-09-04 22:45:21 累计浏览 2,686 次
本机暂存

    原图已失效

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

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

     下面,结合一些例子,谈谈我对空白设计的一些简单理解。

    例子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的做法也许你会说这样排版太浪费空间了。的确这样的做法的确是浪费空间,但是这样做的好处在于:这两列加右侧留白空间,在视觉上给了用户足够的引导――-非常明显的从上到下的浏览方向,可用性相对较高。

    空白其实也就是图形和背景的关系,但是和图形设计中阴形阳形的使用有所不同的是,图形设计中图底之间的关系更为复杂,形成的美感更富变化,图底可能分别都作为视觉的主题在进行设计,从而形成非常暧昧互相变化的复杂图形,如:下图。

    原图已失效

    但这种做法在网页的设计中要慎用,这样很容易造成图形的底形分不清,造成视觉上的困扰。

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,499)
  2. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  3. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
  4. 看看各个网站的404错误处理 (累计阅读 10,208)
  5. 为什么现在那么多人应聘产品经理岗位? (累计阅读 8,354)
  6. 30个超棒的404错误页面 (累计阅读 7,301)
  7. 可用性测试的权衡之道(二) (累计阅读 5,845)
  8. 简单的全系列浏览器css hack (累计阅读 5,680)
  9. “预注册”是一把金钥匙 (累计阅读 5,677)
  10. 如何创建一个简洁、光滑的web2.0网站页脚 (累计阅读 4,978)