优秀网页设计的注意事项

一旦遵循，本指南将被证明是非常有价值的网页设计资源，特别是如果您打算使用 网站开发软件 将来。从缺乏经验的人到经验丰富的人，本指南适合每个人。

优秀网页设计的过程 为了确保我们都在同一页面上，让我们从“网页设计”的基本定义开始。根据维基百科，网页设计是：

“以适合网络浏览器解释并显示为图形用户界面的标记语言形式，通过互联网进行电子媒体传输的概念化、规划、建模和执行的过程” .

网页设计的过程可以与撰写研究论文的过程进行比较。在概念化/规划阶段，将创建流程图（大纲）来说明网站的导航结构。在建模阶段，创建静态线框（草稿），说明网站每个部分的骨架布局。创建线框后，将使用图形、颜色和文本根据线框的布局创建网页的设计。在执行阶段，您的设计将被转换为网络浏览器支持的格式，添加文本和内容，最后，您的网站将实时发布到互联网上供全世界查看（最终草案）。

设计过程的所有三个阶段都同样重要。许多网页设计师为了节省时间或因为他们认为没有必要而跳过一个阶段。然而，如果您的目标是创建一个成功的设计和受人尊敬的网站，那么这三个阶段都是必要的。即使使用了这三个阶段，网页设计师也可能会犯很多错误，从而导致网站质量低劣、不友好。是时候清理橱柜中不良的网页设计实践并重新添加好的网页设计实践了。

第一阶段：概念化和规划
与其他两个阶段相比，此阶段被跳过的频率更高。大多数作家不喜欢为研究论文创建大纲，大多数网页设计师也不喜欢创建流程图。不要偷懒。如果您付出努力并规划您的网站，那么您会发现网页设计过程会顺利进行，并且一路上犯的错误也会减少。

为了有效地概念化和规划您的网站，您需要一些东西：

• 一个大脑
• 笔和纸
• （可选）流程图软件
• 对网站不同部分的总体了解

首先，拿起笔和纸或启动您最喜欢的流程图软件。我们使用适用于 Mac OS X 的 OmniGraffle Professiona，每个许可证的费用为 150 美元，但如果您定期创建网站，则非常值得。如果您使用的是 PC，那么 SmartDraw 是您可以使用的一款很棒的免费流程图软件。不过，一支笔和一张纸就可以了。

创建流程图的方法有很多种。由于时间和本文篇幅的原因，我们将向您展示最基本的方法。如果您想了解有关流程图的更多信息，请在 Google 或 Yahoo 上搜索流程图。

查看我们在概念化彩色站点时创建的流程图。 (1) 在流程图的顶部，我们列出了我们网站的名称。 (2) 接下来，我们包括网站的每个主要部分：主页、关于和服务。这些部分是您网站的主要导航。每个部分的名称完全取决于您网站的内容。尝试使用尽可能少的部分，以便访问者在浏览您的网站时不会不知所措。

(3) 接下来，添加将在每个主页上列出的所有次级页面（小节）。对于家庭，我们包括专业网页设计、网页开发和搜索引擎优化。辅助导航需要比主导航更具描述性。网站的导航层次结构越深，每个标签的描述性就应该越强。

Dos

• 少即是多;将主要部分的数量保持在最低限度。我们网站上使用了 6 个部分，这已经足够了
• 无论您使用笔和纸还是流程图软件，请尽可能保持内容整洁有序。尽管您（以及与您一起工作的任何人）是唯一会使用流程图的人，但它仍然需要有意义 - 您的主要部分应使用更广泛的术语，而次要和第三级术语应更具描述性

不要
创建流程图非常简单；然而，有一些很容易犯的错误：

• 不要在主导航中使用描述性很强的术语，除非您的整个网站都集中在​​一个狭窄的主题上 - 不要尝试将多个主题集中在同一页面上。为这些主题创建一个常规部分，并从该部分创建小节。这将使分段（描述性）网页更有可能在搜索引擎（Google、Yahoo、MSN、Ask）中获得更好的排名。一旦创建了简洁且描述性的流程图，就可以进入第二阶段网页设计流程：

第二阶段：建模
在建模阶段，创建静态“线框”模型。每个模型都展示了将包含在您的网站中的每个网页的布局的基本框架。这个阶段很重要，因为它让我们了解不同的元素将放置在设计中的何处。其中一些要素是：

• 商标
• 导航菜单
• 内容
• 图片、视频

要创建这些模型，您可以使用笔和纸或您喜欢的模型软件。过去我们使用Photoshop，但最近我们使用OmniGraffle Professional。 OmniGraffle 不像 Photoshop 那样资源密集，它使我们能够更快地组装线框模型。

此外，请确保您附近有您创建的流程图，因为您需要不时引用这些流程图，以确保您正在模拟将出现在您的网站上的所有页面。

这是我们的线框模型外观示例。正如您所看到的，其中不包含任何颜色或图形。这正是线框模型应有的样子——设计的骨架布局。目的是能够大致了解每个网页元素的放置位置。

我们通常从左上角开始，一直向下到底部。线框的外观没有特定的方式。动用你的想象力。但是，请确保在创建线框图时不要忘记包含网站最重要的元素（徽标、导航菜单、内容放置、图像/视频放置）。

如果您的某些页面将使用相同的布局，则无需模拟所有这些页面（尽管您当然可以）。请务必模拟您的网站将具有的任何独特布局。以后你会感谢自己的。

该做的

• 模拟所有独特的页面
• 包括重要元素（徽标、导航、内容放置、图像/视频放置） - 从顶部开始并向下工作 - 参考在第 1 阶段创建的流程图，让您不会忘记模拟任何页面 - 保存、保存、保存 – 就像计算机上的任何内容一样，每 10 分钟左右保存一次模型
• 专注于干净、用户友好的布局 - 标记你的元素，这样当你在第 3 阶段执行时引用它们时，就不会忘记它们是什么 - 使用其他网站作为灵感；从其他网站获取元素并将其制作为自己的元素并没有什么问题（请参阅“不要做的事情”）

不要的

• 不要包含图形或颜色（这是下一阶段的内容）-不要让你的模型太“忙碌”；专注于干净、组织良好、用户友好的布局——不要跳过这个阶段；它与第一个和最后一个一样重要 - 如果您从其他网站获取元素，请确保没有抄袭；受到另一个网站的启发来创建设计的某些元素与公然抄袭其布局和颜色之间是有区别的

第三阶段：执行
在第三个也是最后一个阶段，即执行阶段，阶段 1 和阶段 2 的规划相结合，以协助创建一个实时的交互式网站。
第三阶段是迄今为止最耗时的，因为您将 1) 创建图形 2) 创建内容，最后 3) 将网页设计从图像转换为网页浏览器用来向世界展示您的网站的代码。

当你到达第三阶段时，你应该清楚地了解：

• 您的访问者将如何从一个地方到达另一个地方（第 1 阶段，流程图） - 您的网页将如何布局（第 2 阶段，线框模型）

如果你对这两件事还没有清楚的认识，就回到第一、二阶段继续发展。当您为设计网站构建了清晰、简洁的作战计划时，您会发现第三阶段是最简单的。

扔掉笔和纸
在第 3 阶段，您需要使用 Photoshop 或其他图像编辑程序，因为您将使用颜色和图形来创建网站的布局。

我们通常首先开始创建“主页”页面（索引）。使用您在第 2 阶段创建的线框作为您创建的每个页面的模板。但是，不要使用实心框，而是使用图形、颜色和文本。每个页面的外观都必须与您希望它们在互联网上的外观完全相同，因为这是设计过程的最后阶段。

请务必包含导航背景（但实际上不要将文本添加到图像中）。当使用CSS（级联样式表）进行转换时，您的导航应该采用文本而不是图像的形式。搜索引擎无法抓取图像（导航中使用的关键字不会在搜索引擎结果页面中编制索引，这意味着能够找到您网站的人会更少）。

当您对自己的设计感到满意并认为它们已准备好发布到 Internet 上时，就可以分解设计以便创建基于 CSS 的布局。有关将布局转换为 CSS 或使用 CSS 标记网站的更多信息，请访问 w3schools.com。在浏览了互联网之后，我们找不到像样的图像到 CSS 教程 - 所以期待我们在未来几周内提供一个教程。将您的设计转换为 CSS 非常重要，因为表格布局已成为过去。

这是我们在第二阶段模拟的布局的一个即将完成的网站示例。这是直接从我们的网络浏览器中获取的，正如您所看到的，现在有一个徽标、颜色、一个漂亮的导航系统、一个页脚，最重要的是，干净、有组织的布局。
由于第一阶段和第二阶段的规划，我们的布局组织良好且易于使用。

Dos

• 引用在第 2 阶段创建的模板；虽然偏离原来的布局是可以的，但你不需要这样做
• 在创建实际设计之前做一些研究；从其他网站获取想法并将其变成你自己的（不抄袭）
• 包括颜色和图形来创建网页的最终外观 - 使用 CSS（级联样式表）将您的设计从图像转换为 Web 浏览器可以理解的标记 - 使用超链接对页面进行编码时参考第一阶段的流程图；最好使用下拉菜单，其中包含网站每个页面上的所有（或大部分）链接；这将允许更轻松的导航，并且当搜索引擎蜘蛛停下来时，也使您的页面更容易爬行； DynamicDrive.com 是获取 CSS 下拉菜单的好地方 - 在 Photoshop 或您使用的任何图像编辑软件中工作时完成您的设计；一旦将设计转换为标记（代码），对其进行更改可能会很痛苦

不要

• 转换为 CSS 时，不要在导航菜单中包含文本；不要使用图像文本，而使用搜索引擎蜘蛛可读的常规文本
• 转换时不要使用表格；即使你需要买一本关于 CSS 的书，也是值得的；桌子死了
• 不要为了节省时间而跳过前两个阶段；如果您从网页设计过程的开始（而不是最后）开始，您的网站会更好
• 当为 CSS 分割图像时，不要忘记压缩图像；没有什么比由于大图像文件而导致网站加载缓慢更糟糕的了； Photoshop 有一个“保存为 Web 优化”选项（CS3 –“保存为 Web 和设备”）

流程造就完美
通过遵循本文中所示的网页设计流程，您可以增加创建组织良好、易于导航且非常用户友好的网站的机会。让我们面对现实吧——如果访问者在尝试浏览您的网站时迷路或感到困惑，他们可能会点击后退按钮并寻找更用户友好的网站。人们在浏览网站时不喜欢思考。别让他们思考。您通过从第一阶段到第三阶段规划您的网站来进行思考，您会发现更多的人会喜欢访问您的网站。