1.3 Web设计基础

1.3.1 Web设计原则

Web设计师需要研究如何布局、处理字体和颜色，以及空白的应用，并围绕要表达的信息把这些元素融为一体，构成一个网页乃至网站，从而形成自己的风格。

Web站点所要实现的目标是设计的最终方向，而页面的制作仅仅是设计的具体实现。Web站点的设计并不是通常认为的网页制作，而是一个融合了多种设计原则和设计过程的系统工程。

1. 明确站点类型

在开始设计工作之前，确定网站的类型（如销售类产品或形象宣传）是首要目标。从一个网站的内容和特性来看，网站的类型包括新闻或信息、企业、商业、政府、个人、社交、搜索网站等。一个成功的网站必须有自己明确的用户群、内容、功能，以及视觉和体验的独特性，才能在浩如烟海的站点中脱颖而出。

1）新闻资讯类站点，如新浪、搜狐等大型门户网站，主要向访问者提供大量的信息，涉及经济、政治、人文和生活等方面的内容，网站日访问量巨大，访问群体范围较广，其设计更注重信息覆盖的范围及受众的广泛性。因此需注意页面的分割、结构的合理、页面的优化及界面的亲和等问题。如新浪网的设计特别注重了信息的分类合理，导航清晰，使用户能迅速在众多信息中找到自己感兴趣的内容。同时，色彩选择较为平淡的基色调，以减少对用户的视觉刺激，增长用户浏览网页的时间。

2）资讯和形象相结合的网站，如政府网等，主要用于发布政策规章制度等信息，提供各种在线政务服务。因此，在布局设计上要求简单合理，使用户能够迅速找到所需信息。常用的功能应给予用户明确、快捷的链接，重要的功能应给予用户醒目的提示。在色彩的选择上，应使用中性、温和的色彩，颜色使用不宜过多和跳跃。整体色彩应给用户传递严谨、权威、庄重的心理感觉。

3）形象类网站，比如商业企业的对外宣传网站，是企业产品和形象宣传的重要窗口，主要为了让外界了解企业自身，树立良好企业形象，并适当提供一定的产品服务。因此，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。同时，设计方法也不拘一格，重点在于新颖、有特色，能够传递出强烈的企业文化信息。

除了上述网站类型外，还有一些网站具有更多的专业化设计。比如瑞丽女性网是为都市女性提供分享时尚与优质生活的多元化资讯及多样化服务的综合性网站。由于女性具有较高的审美需求和高敏感的颜色感应，所以在设计方面尽量以柔和、明快的暖色作为主色调，给女性浏览者以热情、柔美的感觉。在页面构成上，要选用大量清晰度高的图片给用户以视觉上的冲击。

2. 保持站点简洁明确

对于今天的许多企业而言，网站极有可能是他们和目标客户之间的第一联系方式。因此使客户能够清楚地认识网站所要表达的信息或提供的服务是至关重要的。一个好的网站设计应该做到主题鲜明突出，布局清晰简洁，能够以简单明确的语言和画面告诉访问者站点的主题，使用户能够容易地找到他所需的内容。

1）界面简洁：对内容文本进行精炼化，保留关键信息；使用一个醒目的标题，常常采用简洁的图形来表示；限制所用的字体和颜色的数目。

2）内容明确：使用清晰的消息标识，确保用户了解此页面的上下文；使导航元素保持一致，并且对访问率最高的区域进行明显的标记，使它们易于被用户找到；界面上的所有元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来；还要确保界面上的每一个元素都能让浏览者看到。

此外，为保持简单明确，设计网页时尽量减少浏览层次。

3. 网页设计的一致性

一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。例如，在不同的页面中使用同样的布局、字体、色彩和导航结构等表现元素，使得页面之间既能够保证协调，又不会因页面风格过于一致而产生视觉疲劳。对优秀的Web站点进行分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页面之间的一致性。

要保持一致性，可以从页面的结构排版入手。

● 通过定义一致的页面模板，各个页面使用相同的页边距。

● 文本和图形之间保持相同的间距。

● 主要图形、标题或符号旁边留下相同的空白。

● 如果在第一页的顶部放置了公司标志，那么在其他各页面中都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标来营造出一种熟悉感。

图1-2所示为当当网的二级栏目，图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系的，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。

除了保持布局的最大相似外，在界面元素的设计上，每个元素与整个页面及站点都应当具有相同的设计风格。有了结构和视觉的一致性，在用户的使用模式上保持站点的一致性对于改善用户的使用体验也是非常重要的。

4. 注重用户体验

用户体验是用户访问网站时的一种感觉。注重用户体验是Web站点设计时应考虑的一个重要方面，它要求把用户放在第一位，设计时既要考虑用户的共性，也要考虑他们的差异性。

（1）研究用户

可以通过分析用户的群体特征，了解主要用户为什么使用网站，以及如何使用网站。例如，虽然在考虑用户阅读习惯设计时，大多数遵循Z字形设计或F形结构，但一些特殊文化，如阿拉伯语类的网站可能刚好相反。

（2）有效的导航和位置设计

合理的导航可以对网站内容进行分类，每个网页除了应用同样的导航设计之外，还应当包括当前的位置提示设计及一些特殊位置的快速返回链接，如在导航或页面中设计从任何页面直接跳转到“首页”的链接。

（3）保持整个网站一致性的设计

例如，统一的色彩方案、相似的页面模板，对于同样的操作、专业术语等前后保持一致的定义等。

（4）清晰准确的内容设计

清晰准确的内容设计便于用户快速获得所需的信息。例如，通过对比设计使得文字内容突出、避免一页有太多的内容、对内容进行准确的分类和布局，以及使得重要的信息总在用户视觉最集中的地方、保持内容间的交叉连接并建立索引等。

这些最基本的准则虽然并不能解决所有问题，但注意它们并积累个人的设计经验有助于设计出好的网站，达到吸引用户多次访问的目的。

1.3.2 网站结构规划

Web站点由一组Web页面组成，而且这些Web页面具有一定的分层设计和组织。在规划设计Web界面时，第一个步骤就是明确网站的目标和用途（如产品销售），Web设计的布局、风格和内容等都要以这个目标为中心。所谓结构设计，就是考虑如何将内容划分为清晰合理的层次体系，建立组成Web站点的各个页面间的关联关系，构建一个组织优良的网站整体。

1. 网站栏目规划

明确划分信息群，不让读者产生迷惑，使之迅速找到所需要的信息，是栏目规划最重要的任务。栏目的整理决定了网页的可读性。事实上，网站栏目的规划对于网站来说是决定其成败的重要因素。栏目的实质是一个网站的大纲索引，其作用就如同一本书的目录一样，因此索引应该将网站的主体明确显示出来。

在制定栏目时，要仔细考虑，合理安排。好的栏目规划结构是网站内容的总体概述，它利用导航的形式予以表现，指引浏览者在页面间访问和跳转。

不同类型的网站其定位和功能也不同，具体问题具体分析，但通常遵循一些通行的准则。

1）栏目内容一定要紧扣主题。可以将网站的主题按照一定的方法分类作为网站的主栏目。同时要明确，主栏目的个数在整个栏目中应占有较大比重。

2）栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理。不管网站的内容有多精彩，如果缺乏对内容的准确提炼和总结，不能清晰地告诉访问者所需的信息在哪里，则最终难以引起浏览者的关注。

3）栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。而对于其他的辅助内容，如关于本站、版权信息等可以不放在主栏目中，以免冲淡主题。尽可能删除与主题无关的栏目，尽可能将网站最有价值的内容列在栏目上。

4）为方便用户使用，一般情况下访问者应能够在单击3～5次后可查询到相关问题。因此应对栏目级数进行控制，网站的页面级数最多控制在三级，同时链接应当是清晰而准确的。

在基于通行准则的指导下，可以针对网站特点和性质具体确定栏目设计。栏目设计的基线应该是以用户为中心，以一种访问者容易、直观、可预期的方式来设计网站的结构。一般应该从网站的类型、希望表达的内容、信息的分类及同类网站的设计等方面考虑。

为了更好地进行栏目设计，需要收集大量的相关资料，并对其进行整理。整理以后再找出重点，根据重点及网站的侧重点，结合网站定位确定网站的分栏目需要有哪几项，可以参考其他类似网站的栏目，然后反复比较，最后确定网站相关的栏目，形成网站栏目的树状列表，用以清晰地表达站点结构。

2. 目录结构规划

网站目录是指建立网站时创建的目录。目录结构主要指网站包含的文件所存储的真实位置所表现出来的结构。目录结构往往是设计者容易忽略的问题。大多数初学者进行站点设计时都是未经规划随意创建子目录。事实上，目录结构的好坏对于网站的维护、内容的扩充和移植、搜索引擎的访问等都有重要的影响。

（1）建立目录的建议

● 不要将所有文件都存放在根目录下。

● 按栏目内容建立子目录。

● 建立一些特定目录用于存放公共信息。例如，把图片文件存放在images目录中。

（2）目录规划原则

● 目录的层次不要太深，建议不要超过3层。

● 不要使用中文目录，否则会影响对网址的正确显示。

● 不要使用过长的目录。

● 尽量使用意义明确的目录，如可以使用images、css、js和bbs等。

● 通常将首页命名为index，放在根目录下，每个栏目的首页也命名为index。