8实用网页设计.ppt

第8章 实用网页设计 学习目标 设计适于扫描的网页 设计导航 设计版式 设计首页。 设计适于扫描的网页 在信息爆炸的今天，已经没有人会去“阅读”网页了，几乎所有人都是在“扫描”网页。因此网页设计者需要为扫描而设计，而不是为阅读而设计。 为扫描而设计需要遵循以下原则： ?在每个页面上建立清楚的视觉层次 ?尽量利用习惯用法 ?把页面划分成明确定义的区域 ?最大限度降低干扰 设计适于扫描的网页——建立清楚的视觉层次 如果想让页面快速让人理解，最好的方法就是让页面上所有内容的外观都清清楚楚，而且能准确地表述页面内容之间的关系，包括：哪些内容是相关的，哪些内容是其他内容的组成部分。换句话说，每个页面都应该有清楚的视觉层次。 设计适于扫描的网页——建立清楚的视觉层次 一个视觉层次清楚的页面有三个特点： （1）越重要的部分越突出。在图 10.1 中，位于页面中间的财经新闻标题就明显与周围内容不同，因此更突出。 （2）逻辑上相关的部分在视觉上也相关。在图 10.2 中，各种NBA数据都被很好的分了组，放在不同的框子里。 （3）逻辑上的包含关系在视觉上应进行嵌套。例如，在图 10.2 中，每个视觉分块都隐含了相应的包含关系，比如“得分”、“篮板”和“助攻”都在标题“数据排名”之下，而标题“分类查询”也用清楚的色块表达了包含关系。 设计适于扫描的网页——使用习惯用法 在我们阅读报纸的时候，会发现每张报纸都用突出、分组和嵌套的方式为读者提供关于报纸内容的有用信息。比如说，这张图片和这个新闻内容是一起的，因为它们位于同一个标题的覆盖范围之下；而那条新闻的内容最重要，因为它采用了最大的标题，最宽的栏 目，并占用页面上最突出的位置。日久天长，这些东西都形成了惯例，成为我们生活中自然而然的一部分。 例如，图 10.3 就是一个纸质报纸的版式，我们可以很清楚地体会到各种视觉要素的组织原则。 设计适于扫描的网页——使用习惯用法 我们知道，了解报纸版面的布局和格式的不同用法能让我们更快、更容易地扫描报纸，找到我们感兴趣的新闻故事。还有，当我们在别的城市旅行时，我们知道所有报纸都是采用差不多的习惯用法，因此，了解这些习惯用法可以很容易地阅读任何报纸。 实际上，每一种出版媒体都在发展自己的习惯用法，并不断改进这些用法，形成新的习惯用法。Web上已经有很多的习惯用法，大部分是从报纸和杂志中延续过来的，而新的习惯用法也在不断涌现。 设计适于扫描的网页——使用习惯用法 比如说，图 10.4 是在线版的“New York Times”，它的版式与图 10.5 有多少区别？图 10.5 是一个门户网站，它又是怎么使用习惯用法的？ 设计适于扫描的网页——使用习惯用法 所有的习惯用法都是从某个人灵光一现的想法开始的，如果这个想法相当不错，其他站点就会效仿，最终，会有足够多的人在足够多的地方见到它，让它变得不言而喻。这个采用过程需要时间，但是和其他事物一样，放在因特网上，它会发展得非常快。例如，现在很多人都很熟悉电子商务站点上的购物车及其使用方法，因此，设计师们可以放心地使用一个购物车图标，而不必加上“购物车”的文字说明。 设计适于扫描的网页——使用习惯用法 关于Web 上的习惯用法，有两点非常重要： 它们非常有用。通常，习惯用法因为有用才会成为习惯用法。适当应用习惯用法会使用户在网站之间的访问更容易，不需要花费额外的努力来得到背后的工作原理。这样保证了一种熟悉感，例如，在看到页面左边直达底部彩色背景区域上，有着网站分类清单的链接时，哪怕有时这种熟悉感也会让你感觉到某种似曾相识的单调乏味。 设计师通常不愿意利用它们。和使用习惯用法相比，设计师们都面临着很大的诱惑，想要打破习惯用法很大程度上是因为他们觉得网站是请他们来做一些崭新的、与众不同的设计，而不是使用那些原有的东西。 设计适于扫描的网页——使用习惯用法 如果不打算使用一种已有的 Web 习惯用法，设计者必须确认以下两点： 这种方法同样清楚，同样的不言而喻，不需要多少学习代价——这样就跟习惯用法一样好了。 带来很大的价值，因此值得用户付出一点努力来学习这种新方法。如果打算创新，那么必须理解准备换用的方法的价值，而很多设计师都低估了习惯用法提供的价值。 一般的建议是，在清楚自己有一个更好的想法（每个人都会叫好）时进行创新，否则请尽量利用习惯用法。 设计适于扫描的网页——划分明确的页面区域 任何一个设计良好的网页都应该能做到这一点：在网页上四处扫视之后，浏览者应该能指着页面上的不同区域说出：“这是我在网站能进行的活动”，“这是到今日头条的链接”，“这是这个公司销售的产品”，“他们正在向我们推销的东西”，“到网站其它部分的导航”，等。 把页面划分成明确的区域很重要，因为这可以让用户很快决定关注