论网站页面设计的一致性原则

1、论网站页面设计的一致性原则华晓清（中国人民大学 信息管理与信息系统系 ，北 京 100872）摘 要 ：随着网络技术与电子商务的发展 ，网站页面设计也越来越受重视 ，优秀的网页虽然各有特色 ，但都遵守最基本的原则即保证 页 面 的 一 致 性 。 通过从页面结构 、色 彩 、导 航 栏以及页面标准元素功能四个角度分析应如何设计网站页面 ，既保证页面之间的一致 性 ，又使得读者不会因页面风格过于一致而产生视觉疲劳 ，并在此基础上提出了一个基本的保证页面一致性的设计方法 。关 键 词 ：页 面 设 计 ；一 致 性 原 则 ；页 面 布 局 ；导 航 栏 ；留 白中 图 分 类 号 ：TP37文

2、献 标 识 码 ：A文 章 编 号 ：1009-3044(2009)21-5627-03Principle of the United Webpage DesignHUA Xiao-qing(Department of Information Management and Information System, Renmin University of China, Beijing 100872, China)Abstract: With the development of IT and e-commerce, the webpage design is becoming more and

3、more important. Several issues may be concerned with a good webpage design, while one of the most fundamental principles is to create united pages. Four aspects including page layout design, color design, guidance design and the design of the function of some standard elements on the page, are consi

4、dered for a united but also varied webpage design. Consistent pages are not always good because visual fatigue may happen. From the above discus- sions, essential understandings to the importance of united webpage principle are strengthened and lead to a united webpage design process.Key words: webp

5、age design; united webpage design principle; page layout; navigation bar; active white space近 些 年 ，随着网络技术的发展 ，电子商务的日趋成熟 ，网 站 作为信息传播不可或缺的强大载体 ，已经被各大企业与高校充分利 用 起 来 。 网站的页面设计也不断发生变化 ，其功能从局限于展示网站发布方所要表达的信息 ，到体现网站发布方的文化 、风 格 ，进 而 为用户提供良好的 ，舒适的访问体验 ，从满足基本功能的需求到追求较高层次的需要 ，形成了一个循序渐进的过程 。随着网站页面设计水平的提高 ，访 问 者

6、 对 于网站页面的要求也越来越高 ，他们并不关心具体的理论评价标准 ，而是凭借直观印 象及使用情况做出判断 ，如 图 1、图 2 所 示 ：图 1纽 曼 产 品 页 面图 2苹 果 产 品 页 面图 1 是纽曼公司网站下的两类类产品页面 ，图 2 是苹果公司网站下的两类产品页面 ，就其页面目标而言 ，都是为了展示产品信 息 ；就其结构层次而言 ，都是属于具体的内容页面 ，层 次 一 致 。 但 在 访 问 者 眼 中 ，左侧页面风格混乱 ，形 象 差 异 过 大 ，给 浏 览 带 来 障 碍 ，而且会产生是否还在同一网站中的疑问 ，而右侧页面结构清晰 ，层 次 分 明 ，内 容 完 整 ，给浏

7、览带来方便与顺畅 。 孰 优 孰 劣 ，一 目 了然 。 对于网站的设计者而言 ，遵循相关页面设计原则 ，保证网站页面一致性 ，将有助于访问者浏览网站内容并获得愉悦的体验 。1 文献回顾保持页面的一致性 ，既能强化风格定位所 带 来 的 作 用 ，又能在浏览体验上给浏览者带来方便和顺畅 。 如果页面不一致 ，既 会 给 网站的形象带来混乱 ，又会给浏览者带来不便 。 举 个 例 子 来 说 ，假如每个网页上的导航排列或者颜色不同 ，那么浏览者进入不同页 面之后就会无所适从 ，难以找到他要找的信息 。在之前的研究中 ，关于如何设计页面以保证页面一致性原则 ，有 过 许 多 陈 述 ，如 ：收 稿

8、 日 期 ：2009-03-10作 者 简 介 ：华 晓 清 （1989-），女 ，湖 北 松 滋 人 ，主要研究方向为网站设计与开发 。Computer Knowledge and Technology 电脑知识与技术第 5 卷 第 21 期 (2009 年 7 月)设 计 网 站 时 ，规划一个统一的主题与风格 可以使所有的页面紧紧联系在一起 。 对于网页上颜色 、字 体 、图片以及页面布局的选 择用该像访问者传递一个一致的视觉上的主题 ，而这个主题也应与网站发布方所要表达的内容相一致 。在网站的各个页面中 ，涉及到的文字的字型 、字 号 ，前后翻转用到的按钮 ，以及装饰用的点 、线 、面

9、 等 的 图 形 ，都应该有比较统一 的 样 式 。 让浏览者在浏览你的网站时 ，不至于感觉是进入了许多不同的网站 。结构的一致性在网站营销中占重要地位 ，具体包括网站布局 、文 字 排 版 、装 饰 性元素出现的位置 、导 航 的 统 一 、图 片 的 位 置 等 等 。制 作 网 站 之 前 ，对每个网页的结构布局 、色 彩 基 调 、字 体 字 号 、图片运用都要有统一的构思与规划 。但是当网站页面过于 一 致 时 ，访问者会因其页面缺少变化而 感 到 厌 烦 ，重 复 性 的 、类 似 的 页 面 容易使访问者疲劳 ，进 而 失 去 对 网站的兴趣而离开 。 对于如何权衡网页一致性与网

10、页之间的变化 两 个 因 素 ，使得页面既和谐统一 ，又 同 中 有 变 ，将是我们下面所要 具体讨论的问题 。下文首先介绍了如何 通过页面元素的控制来实现页面的一 致 性 ，继而详细介绍了如何利用一致性原则及表格 、 留 白 等 方 法 来具体实现网站的设计 ，并对一致性原则的局限性进行解释 。2 页面一致性原则一个网站之内各页面风格统一 ， 设 计 一 致 ， 会给浏览者带来 极高的视觉享受 。 保证页面一致性主要可从结构 、色 彩 、导 航 栏 的设计以及页面元素功能四个角度出发 ，从 整 体 到 局 部 ，进一步细化保证页面一致性的设计方法 。2.1 结 构 一 致 性页面结构包括页面

11、布局 、文字排版以及标志性元素的位置等 ，页面结构设计是保证页面一致性的重要手段 。2.1.1 页 面 布 局页面布局大致可分为 “国 ”字 型 、拐 角 型 、标 题 正 文 型 、左 右 框 架 型 等 。 不同的网站根据其内容及面向的对象选择不同的布局 ，例 如 “国 ”字型页面布局多用于大型网站 ，而 左 右 框架型多用于大型论坛 ，因其结构非常清晰 。 一 般 而 言 ，一个网站内所有页面均采取 同一种页面布局以保证页面一致性 ，但是对于特殊的页面也可采取些变化 ，避免页面结构单一 ，影响访问者浏览 。 具 体 说 来 ，譬 如 对于 采 用 “国 ”字形的大型商业网站页面 ，其注册

12、页面就可以采用标题正文型 ，如 图 4 所 示 。2.1.2 文 字 排 版页面版面由于面积大 ，字 数 多 ，会给读者带来视觉疲劳 ，所 以 页 面 文 字 将 分 栏 、分 块 展 现 ，正文通常以宋体 、新 宋 体 居 多 .有时也根据不同的读 者和设计需要换用其他字体 ，字体字号选择以文章整体统一为原则 ，字 体种类少的页面设计比较文静 ，雅 致 ，字体种类多的页面设计会给人丰 富 的 视 觉 效 果 ，但同一页面上字体的种类最好不要超过三种 ，字 体 太 多 会 显 得 杂 乱 ，无法形成统一风格 。 页 面 设 计 中 ，标准字体即用于标志 、标 题 、主 菜 单 的 特 有 字

13、体 ，是体现页面一致性的重要元素 ，不同页面选用相同的 标 准 字体给访问者以和谐统一的感觉 ，为了体现页面的特有风格 ，也 可 以 根 据 需要选择一些特别字体 ，例 如 ，为 了体现专业可以使用粗仿宋体 ，体 现 设计精美可以用广告体 ，体现亲切随意可以用手写体等等 。2.1.3 标致性元素的位置 强调页面标志性元素 ，即 网 站 或 公 司 名 称 、网 站 或 企 业 Logo、导 航 及 辅助导航的形式及位置 、公司联系信息等的一致性 ，这是目前网站普 遍 采用 的 结 构, 一方面减少设计 、 开 发 的 工 作 量, 同时更有利于以后的网站维 护 与 更 新 。图 3如何实现一致

14、性的网站设计 图 4 标 题 正 文 型(淘 宝 注 册 页 面)2.2 色 彩 一 致 性网站页面给人的第一印象来至视觉冲击 ，页面的标准色彩设计是相当重要的一个影响因素 ，不同的色彩搭配产生不同的效果 ，并可能影响到访问者的情绪 。 例 如 IBM 的 深 蓝 色 ，肯德基的红色条形 ，Windows 视窗标志上的红蓝黄绿色块 ，都使我们觉得很贴切 ， 很 和 谐 。 标准色彩主要用于网站的标志 ，标 题 ，主菜单和主色块 ，来保证页面的一致性 。 标准色彩确定后, 还可以选择一到两种辅助 色 配 合 使 用, 整个网页的色彩最好控制在三色以内 。 如果整个网页采用单色调, 即只用一种色相

15、, 可以调节其明度或纯度, 也 就 是 说 将色彩变深或变淡, 产 生 新 的 色 彩 。2.3 导航栏的一致性 网 站 的 导 航 ，包 括 顶 部 、底部和侧面的导航栏都应该尽可能地对 访 问 者 友 好 、易 用 ，保 证 访 问 者 “想 ”看到的在尽可能的显眼位 置 ，导航栏里的各要素应该反映出各个目录和子目录 ，以及各个主题之间的逻辑性 、相 关 性 ，帮助访问者找到主要相关内容 。在屏幕上的一个网页实际上可以有五个基本区域来放置导航元素 ：顶 部 、底 部 、左 侧 、右 侧 和 中 央 。 各个位置都有其优缺点 。 一般 而 言 ，主导航栏的位置应该在接近顶部或网 页 左 侧

16、的 位 置 ，如果因为内容过多需要辅助导航时 ，要让访问者容易地分辨出哪个是 主 导 航 栏 ，哪个是辅助导航栏 。不管为导航栏选择了哪种位置 ，即 便 是 几 乎所有的位置都使用了 ，对不同页面而言 ，各页面间的导航栏也必须保持一致性 。 如 果主导航栏在上部 ，辅助导航栏在左部 ，就 仍 保 持 原 样 。 在标志页和其他页间 ，导航栏的变换是可能的 ，但一般来讲仍应充分考虑稳 计算机网络与信息安全本栏目责任编辑：冯蕾5628第 5 卷 第 21 期 (2009 年 7 月)Computer Knowledge and Technology 电脑知识与技术定 性 和 一 致 性 ，不能有太

17、大的跳跃 。2.4 面元素功能的一致性 一个网站内各个页面间 ，完成同样的功能应该尽量使用相同的元素 。 例如在某一页面中 ，用标题来建立链接 ，想要了解详细的 ， 深层次的内容直接点击标题即可 ；那么在这一网站下的所有页面 ，如 要建立关于详细内容的链接 ，都需通过标题来做 ，而 不 是 其 他 方 法 ，例 如 建 立 More 的 链 接 。3 遵循页面一致性原则的设计方法3.1 设计一个统一的主题与结构 一个统一的主题与结构可以将单个的页面 整合成一个有序的网站 ，对 于 色 彩 、文 字 排 版 、图像以及页面布局的选择传递给访问 者一个视觉上的主题 ，而这个主题所传递的 正是网站发

18、布方所要表达的内容 。 根据网站的性质与使命选择设计一个统一的主题与 结 构 ，在此基础上逐步展开 ，添 加 页 面 内 容 ，构建一个个单独的页面 。3.2 网站层次规划与一致性页面设计 一个页面虽是一个单独的实体 ，但 也 是 一 个网站的组成部分 ，其设计既有独特之处 ，又必须符合整个网站的风格 。 各 个 页 面 之 间的跳转链接要结构清晰 ，内 容 过 渡 平 稳 ，避免格式上突然的随机的变化 。 对网站的结构进行分析 ，划 分 层 次 ，并依次链接其各个页 面 ，形成一个统一的网站 。3.3 运用表格划分页面板块 通过表格将页面内容分块 ，规范化页面结构 ，但也可以打破此类格局以显

19、多样性 ，并着重强调重要信息 。 浏览者对于页面的不 同位置的关注程度是不一样的 ，运用表格划分区域 ，并根据其重要性安排内容 ，是页面设计的一个重要方法 。3.4 利用留白增加页面可读性 留 白 或 是 Active White Space 即页面的空白区域 ，在页面中尤其是个分块的内容间适当运用留白可使页面结构更加明晰 ，有 助 于访问者的浏览 。 此留白并不一定是白色 ，而是与背景色融合在一起 。4 局限性网站页面是典型的人机交互平台 ，网 站页面设计也是人机界面设计的典型应用 。 自美国的认知心理学界在 20 世 纪 80 年 代 中 期 首 先 提 出 了 “对 用 户 友 好 ”的

20、 设 计 观 念 ，人们的设计价值观念也在 一 直 改 变 ，使计算机在人机界面上适应人的思维特性和行动特 性 ，即 “以 人 为 本 ”的人机界面设计思想 ，网站页面设计也要遵循这一理念 ，以 人 为 本 ，面 向 用 户 。网站的使命及目标用户决定了页面的基本风格 ，面 向 少 数人的个人网站 、面向消费者的电子商务网站以及面向学生的电子教 务 网 站 ，他们的风格是完全不同的 ；网站建设者所关心的内容 ，与 用 户所关心的内容也是有差异的 ，譬如说网站建设者可能更关心 图片的质量与动画的使用 ，而用户所强调的是多久他们才能从页面中找到所需要的信息 。之前所讨论的页面一致性原则虽然应用广泛 ，但也有其局限性 ，不能生硬的套用 ，应该在充分考虑分析用户需求的情况下加以 改 进 与 调 整 ，才能使它更好的发挥作用 。5 结束语综 上 所