规 则 和 禁 忌 — Web页 面 设 计

作 者 : 澄 心

首 先 ， 你 为 什 么 要 创 建 一 个 站 点 ？ 如 果 你 仅 仅 觉 得 是 为 了 好 玩 ， 那 么 别 往 下 读 了 。 出 去 游 游 泳 ， 打 打 球 什 么 的 会 更 好 。 :)

你 可 以 按 你 的 意 愿 来 设 计 你 的 站 点 ， 无 论 是 保 守 的 还 是 疯 狂 的 ， 而 不 用 关 心 别 人 如 何 评 价 。 如 果 你 的 目 的 仅 仅 是 你 自 己 觉 得 好 玩 ， 那 么 只 有 你 觉 得 不 好 时 它 才 是 不 好 的 。

然 而 对 我 们 大 多 数 人 来 说 ， 我 们 不 能 仅 为 了 自 己 的 爱 好 而 承 受 这 样 的 负 担 。 它 可 能 用 来 向 人 们 介 绍 你 的 公 司 ， 共 享 信 息 ， 销 售 产 品 或 服 务 ， 进 行 娱 乐 。 任 何 对 你 的 工 作 有 帮 助 的 设 计 元 素 都 是 好 的 ， 而 不 论 这 些 元 素 对 别 的 站 点 来 说 是 有 害 的 。 不 论 一 个 元 素 多 么 的 酷 ， 如 果 在 现 阶 段 做 起 来 非 常 费 劲 ， 那 就 现 不 要 做 它 。 如 对 新 的 浏 览 器 的 插 件 的 应 用 ， 可 能 做 起 来 非 常 费 劲 ， 但 又 没 有 多 少 用 户 可 以 看 它 ( 没 有 此 插 件 ) 。


规 则 二 ： 用 户 的 要 求 和 需 要 永 远 你 的 要 求 和 需 要 之 前 。

    你 的 观 众 是 你 的 站 点 是 成 功 的 决 定 者 。 你 有 没 有 准 备 地 方 让 用 户 表 达 意 见 ？ 他 们 在 这 停 留 多 长 时 间 来 浏 览 信 息 ， 了 解 你 的 公 司 并 得 到 娱 乐 ？ 同 只 有 演 员 欣 赏 而 没 有 观 众 的 电 影 一 样 ， 如 果 你 的 站 点 只 有 你 欣 赏 而 没 有 人 来 访 问 ， 它 们 都 是 没 有 价 值 的 。

请 紧 记 ， 弄 清 你 的 用 户 是 谁 并 不 断 努 力 工 作 来 吸 引 他 们 而 不 是 别 的 什 么 人 。 你 的 站 点 可 能 获 得 庞 大 的 访 问 量 ， 但 这 些 访 问 量 仅 仅 是 12 岁 以 下 的 儿 童 由 于 喜 欢 你 的 图 形 而 造 成 的 ， 那 么 显 而 易 见 你 的 站 点 想 销 售 空 间 设 备 的 梦 想 破 灭 了 。


* 全 局 设 计 。

有 了 这 两 个 基 本 的 规 则 后 ， 下 面 我 们 来 详 细 地 讨 论 一 下 WEB 页 面 的 设 计 。

下 面 这 些 准 则 应 成 为 你 设 计 页 面 的 指 导 。 但 请 记 住 ， 凡 事 总 有 例 外 。

1 。 每 个 页 面 上 都 应 放 有 价 值 的 东 西 。 设 想 一 下 ， 你 正 在 浏 览 一 个 有 关 设 计 的 节 点 。 第 一 页 是 标 题 的 列 表 。 你 点 了 “ 关 于 颜 色 ” 的 链 接 ， 然 后 等 待 下 一 个 页 面 的 出 现 。 然 而 当 它 出 现 在 屏 幕 上 时 ， 又 是 一 个 各 种 颜 色 的 列 表 ： 红 ， 橙 ， 黄 ， 绿 ， 蓝 ， 深 蓝 ， 灰 ， 黑 ， 白 等 等 。 你 点 了 绿 ， 然 后 接 着 等 。 :( 最 后 ， 另 一 个 选 择 ： 绿 色 是 做 为 页 面 的 前 景 色 还 是 背 景 色 ？ 接 着 等 。 做 为 主 色 还 是 渐 进 色 ？ 最 后 你 费 了 九 牛 二 虎 之 力 到 了 最 后 一 页 ， 看 完 后 就 永 远 再 也 不 会 回 来 了 。 太 烦 人 了 。

每 次 你 访 问 一 个 页 面 ， 你 都 希 望 获 得 你 感 兴 趣 的 资 料 。 页 面 上 必 须 有 内 容 ， 必 须 物 有 所 值 。 不 能 让 你 的 观 众 点 过 三 层 或 更 多 的 页 面 后 才 得 到 他 们 想 要 的 内 容 。 你 最 好 通 过 简 单 明 了 的 目 录 将 你 的 多 层 信 息 组 织 起 来 。

2 。 不 要 让 页 面 过 载 。 是 的 ， 你 想 让 你 的 观 众 从 你 的 首 页 或 得 所 有 的 信 息 。 但 你 的 站 点 是 比 较 大 的 ， 你 不 可 能 简 单 地 将 所 有 的 内 容 放 到 一 页 中 。 一 大 堆 得 链 接 和 按 钮 将 迷 惑 你 的 用 户 ， 你 的 屏 幕 越 长 ， 你 的 观 众 需 要 滚 动 的 次 数 越 多 ， 来 访 问 的 观 众 就 越 少 。

如 果 你 的 站 点 提 供 一 个 可 供 快 速 下 载 的 (text-only) 文 本 选 项 ， 在 此 页 面 上 你 提 供 你 站 点 所 有 信 息 的 索 引 ， 那 么 虽 然 它 可 能 长 些 ， 但 用 户 也 将 乐 于 访 问 。 但 如 果 你 是 一 个 更 大 的 公 司 ， 组 织 或 信 息 机 构 想 引 起 观 众 的 注 意 ， 滚 动 一 次 可 能 足 够 了 ， 如 果 能 够 不 滚 动 则 更 好 了 。

这 意 味 着 你 必 须 在 如 何 组 织 你 的 节 点 上 花 大 心 思 。 如 果 一 个 用 户 要 走 两 层 才 能 到 达 他 想 要 得 页 面 ， 你 觉 得 这 是 用 户 最 先 想 来 的 站 点 吗 ？

3 。 有 一 个 (text-only) 仅 用 文 本 选 项 。 尽 管 有 些 用 户 有 很 快 的 连 接 通 向 互 联 网 ， 他 们 也 经 常 选 择 关 掉 图 形 开 关 ， 因 为 他 们 就 想 要 信 息 并 且 要 快 。 大 量 的 用 户 可 能 使 用 较 旧 的 电 脑 并 只 有 较 慢 的 连 接 。 你 应 将 你 的 站 点 做 成 对 这 些 用 户 也 易 于 访 问 。

有 一 个 低 速 连 接 选 项 将 用 户 引 导 到 另 一 批 只 有 少 量 图 形 的 页 面 是 一 个 非 常 好 的 方 法 。 如 果 你 不 能 做 到 另 做 一 批 页 面 ， 你 至 少 提 供 文 本 链 接 让 那 些 选 择 关 掉 图 形 开 关 的 用 户 也 能 浏 览 你 的 节 点 。

4 。 用 不 同 的 方 法 检 查 你 的 设 计 。 你 的 页 面 对 不 同 的 用 户 可 能 看 起 来 不 一 样 ， 例 如 IE 与 Netscape Navigator 。 在 14 英 寸 的 和 17 英 寸 的 显 示 器 上 看 起 来 也 不 一 样 。 颜 色 也 将 由 于 用 户 的 不 同 的 显 示 卡 而 显 示 有 不 同 的 偏 移 。 如 果 你 拥 有 一 个 专 业 站 点 ， 那 么 你 一 定 要 用 不 同 的 系 统 来 一 而 再 ， 再 而 三 地 检 查 页 面 ， 确 保 它 们 对 所 有 平 台 都 很 漂 亮 。



* 布 局
　

你 的 页 面 的 布 局 是 非 常 重 要 的 。 以 下 是 一 些 小 技 巧 。

1 。 要 保 持 统 一 。 页 面 间 要 保 持 统 一 的 格 式 。 公 司 的 徽 标 和 导 航 工 具 条 的 图 形 和 位 置 在 整 个 站 点 中 应 保 持 一 致 。 这 样 你 就 将 你 的 节 点 包 装 成 一 个 统 一 的 包 而 且 不 会 使 你 的 用 户 感 到 困 惑 。

2 。 越 大 越 好 。 当 使 用 图 形 时 ， 首 先 尽 量 修 整 图 形 的 边 界 使 图 形 更 小 ， 更 精 致 。 然 后 再 根 据 你 的 需 要 来 调 整 图 形 ， 放 大 或 加 工 。 对 文 本 做 同 样 的 工 作 。 不 要 使 你 的 文 本 过 大 ， 使 你 的 页 面 看 起 来 乱 七 八 糟 ， 并 尽 量 使 它 们 对 齐 。

3 。 使 用 不 同 大 小 的 材 质 。 一 个 有 一 个 主 要 大 图 配 合 一 些 小 图 的 页 面 在 视 觉 效 果 上 比 仅 有 大 量 相 同 小 图 的 页 面 好 。 4 。 使 用 表 格 来 组 织 页 面 。 HTML 语 言 的 表 格 (table) 让 你 对 你 的 格 式 有 更 多 的 控 制 。 它 能 让 你 指 定 字 串 的 长 度 ， 在 你 的 页 面 上 放 置 边 线 和 对 齐 你 的 元 素 等 。 学 习 如 何 很 好 地 使 用 他 们 。

5 。 使 用 FRAME 时 要 小 心 。 Frame 能 使 一 个 站 点 看 起 来 变 得 相 当 复 杂 ， 可 能 使 一 些 用 户 不 愿 来 。 最 好 在 你 非 常 确 信 使 用 Frame 比 不 用 Frame 好 的 多 的 情 况 下 才 用 FRAME ， 当 同 时 最 好 有 一 个 非 FRAME 版 本 ， 让 那 些 不 喜 欢 或 浏 览 器 不 支 持 FRAME 的 用 户 可 以 来 访 问 。



* 图 形


你 使 用 的 图 形 的 种 类 会 极 大 地 影 响 你 的 页 面 的 效 果 和 下 载 的 速 度 。

1 。 保 持 你 的 图 形 大 小 小 于 30k 。 大 于 30k 的 图 片 或 图 像 经 常 会 导 致 用 户 没 有 耐 心 去 等 待 页 面 的 下 载 。 将 图 做 得 小 一 些 ， 或 你 可 以 少 用 些 颜 色 。但 如 果 是 用 户 自 己 想 看 大 图 就 没 关 系 。 例 如 ： 你 有 一 个 小 图 指 示 点 击 后 有 全 图 ， 用 户 将 不 会 介 意 较 长 时 间 的 等 待 下 载 时 间 ， 因 为 是 他 们 自 己 决 定 要 的 。

如 果 你 觉 得 确 实 需 要 一 个 大 的 下 载 较 慢 的 图 ， 那 么 最 好 将 它 们 打 碎 再 在 页 面 里 将 它 们 拼 起 来 。 因 为 你 至 少 让 你 的 用 户 看 见 在 屏 幕 有 变 化 ， 不 要 是 一 片 空 白 。

2 。 不 要 使 用 渐 进 图 形 做 为 背 景 。 渐 进 图 形 是 那 种 很 快 弹 出 再 慢 慢 调 整 ， 逐 渐 清 晰 的 图 形 。 当 用 大 量 的 这 样 的 小 图 拼 起 来 作 背 景 ， 它 们 将 使 显 示 速 度 变 慢 甚 至 使 你 的 浏 览 器 停 滞 。

3 。 在 图 形 中 使 用 尽 量 少 的 颜 色 。 在 任 何 图 形 中 使 用 尽 可 能 少 的 颜 色 。 图 的 颜 色 越 少 ， 文 件 尺 寸 越 小 ， 下 载 速 度 越 快 。



* 颜 色 。
　 　
小 心 挑 选 你 想 使 用 的 颜 色 ; 没 有 比 在 页 面 上 满 是 俗 气 的 颜 色 更 糟 的 事 了 。

1 。 不 要 错 误 地 使 用 白 色 ， 黑 色 或 红 色 。 在 使 用 不 是 白 色 的 背 景 时 要 注 意 。 白 底 黑 字 是 最 活 泼 和 容 易 阅 读 的 。 红 色 是 最 抢 眼 的 颜 色 。

2 。 检 查 你 的 对 比 度 。 如 果 你 倾 向 于 使 用 有 颜 色 的 背 景 ， 要 有 足 够 的 对 比 度 来 保 证 页 面 要 容 易 阅 读 。 用 那 些 你 不 太 熟 悉 的 字 来 测 试 一 下 阅 读 的 容 易 程 度 。 快 速 地 调 出 页 面 来 看 你 是 否 可 以 读 懂 那 些 字 。 如 果 你 不 能 看 清 楚 ， 那 么 你 可 能 就 要 做 一 些 修 改 了 。 并 且 最 好 在 任 何 地 方 都 要 有 充 分 的 对 比 。

记 住 ， 任 何 人 都 没 有 完 美 的 颜 色 喜 好 。 如 果 访 问 者 是 个 红 绿 色 盲 的 话 ， 他 至 少 能 看 出 明 暗 对 比 。

3 。 使 用 调 色 板 。 调 色 板 让 你 知 道 哪 些 颜 色 可 以 很 好 地 用 在 一 起 。 你 可 以 从 艺 术 用 品 店 买 或 一 些 关 于 设 计 的 书 中 就 带 有 。

* 文 本 。

和 其 它 媒 质 一 样 ， 文 字 和 它 们 的 表 达 将 是 表 达 你 的 内 容 的 主 要 工 具 。

1 。 文 字 要 严 密 。 保 持 你 的 文 字 的 简 明 扼 要 。 抓 住 主 题 ， 用 尽 可 能 少 的 文 字 表 达 你 的 信 息 并 使 用 令 人 感 兴 趣 的 方 式 。 用 户 只 关 心 他 们 想 要 的 信 息 ， 而 不 会 对 不 相 关 的 信 息 感 兴 趣 。

2 。 保 持 你 的 排 版 格 式 尽 量 简 单 。 WEB 的 排 版 控 制 还 是 非 常 有 限 并 相 当 程 度 上 依 靠 用 户 机 器 上 可 用 得 字 体 。 如 果 你 使 用 字 体 控 制 ， 记 住 不 是 每 个 人 都 会 看 到 你 想 要 得 效 果 。 最 好 仅 使 用 随 你 的 系 统 来 的 字 体 ， 如 Windows 95 。 这 样 有 Windows 95 的 人 都 会 看 到 这 些 字 体 。 并 最 好 只 用 一 、 二 种 字 体 。

3 。 不 用 闪 动 的 文 字 。 闪 动 的 文 字 看 起 来 很 好 玩 ， 但 它 可 能 使 用 户 分 心 。 最 好 避 免 使 用 它 。

4 。 使 用 大 写 和 小 写 。 一 些 人 认 为 将 所 有 文 字 写 成 大 写 的 会 很 醒 目 。 可 能 有 些 WEBMASTER 仅 仅 为 了 不 用 顾 虑 到 SHIFT 键 而 全 部 打 成 大 写 。 这 是 不 对 的 。 全 部 都 是 大 写 的 字 不 易 读 懂 。 我 们 阅 读 时 是 由 于 我 们 认 识 这 个 字 的 形 状 , 而 不 是 单 个 字 母 的 形 状 。 你 可 以 读 懂 它 们 ， 但 不 如 小 写 读 的 快 和 容 易 。 将 你 的 页 面 做 成 易 阅 读 的 ， 这 样 人 们 就 会 读 得 更 多 。 反 之 ， 读 的 人 就 少 。



* 一 些 通 用 的 提 示 。

这 是 你 设 计 页 面 时 也 应 记 住 的 。

1 。 谨 慎 地 使 用 浏 览 器 插 件 和 JAVA 小 程 序 。 动 画 、 音 乐 和 其 它 一 些 很 “ 酷 ” 的 东 西 会 很 好 玩 ， 但 它 们 需 要 更 长 的 时 间 来 下 载 ， 会 使 用 户 感 到 不 耐 烦 。 使 用 它 们 作 为 工 具 ， 而 不 是 玩 具 。 如 果 它 们 能 帮 你 的 站 点 达 到 一 定 的 目 的 ， 你 才 使 用 它 们 。 同 时 ， 不 要 在 一 页 上 使 用 大 量 的 多 媒 体 元 素 。

2 。 让 用 户 选 择 。 可 能 有 非 常 好 的 原 因 在 你 的 站 点 上 放 大 动 画 和 声 音 文 件 。 但 请 给 你 的 用 户 机 会 来 选 择 ---- 不 用 强 迫 他 们 花 钱 上 网 而 进 行 长 时 间 的 等 待 。

3 。 不 同 的 用 户 有 不 同 的 需 求 。 我 们 已 经 讨 论 了 不 同 的 系 统 会 影 响 不 同 用 户 浏 览 你 的 节 点 的 效 果 。 但 他 们 也 是 有 所 不 同 的 ， 象 我 们 提 过 的 色 盲 。 也 有 那 些 对 图 形 页 面 比 对 文 本 页 面 更 感 兴 趣 的 用 户 。 或 那 些 听 力 有 问 题 的 用 户 听 你 那 些 非 常 复 杂 的 声 音 ？ 如 果 你 满 足 这 些 用 户 的 需 求 ， 那 么 你 可 能 就 违 反 了 WEB 设 计 的 原 则 ： 让 尽 可 能 多 的 用 户 可 以 看 到 你 的 内 容 。