1.1 网页设计基础知识

网页设计是艺术与技术的结晶。它不仅仅包含了“美”，同时也拥有了“功能”，是能够完成人与机器之间交流的界面。短短十几年里，网页设计已经产生了广泛的影响，也称得上是一门很具有挑战性的热门设计。

1.1.1 网页设计的概念

网页是网站中的一页，是构成网站的基本元素。它能够起到人与人之间信息沟通的作用，也可以是企业向用户和网民提供信息（包括产品和服务）的一种方式（如图1-1～图1-3所示）。

如今网络已经成为很普遍的工具之一，无论是查阅资料还是人与人之间的交流都可以用到它。网页的内容很多，我们要根据主题内容的需要对其界面进行设计，在网页设计的时候，要考虑到用户的需求，减少用户的记忆负担，保持界面的一致性。设计的时候可以从以下两点出发。

1．用户界面设计

用户界面设计分为结构设计、交互设计、视觉设计3个部分（如图1-4～图1-7所示）。

（1）结构设计：是网页界面设计中的骨架，通过对网页内容及用户群的分析与研究，制作出整体结构。设计时要以用户为中心，设计内容及构思要以便于用户理解和操作为前提。这样，用户在使用界面的时候才能够得心应手。

（2）交互设计：交互顾名思义就是互相交流，网页设计是人与机器之间的交互工具，网页能够给人们提供产品或服务等信息。因此，交互式设计的目的是简单易懂，便于用户使用。交互设计有几个注意事项，这里简要地说明一下。

① 语言易懂，便于理解。

② 查阅信息和阅读信息要方便简洁。

③ 界面中有清楚的“登录”“完成”“下一步”这样的选择性提示。

④ 便于退出，无论是手机中的网页界面还是电脑上的网页界面都应该提供多种退出方法，以便于用户选择。

⑤ 提供快速反馈，这样可以降低用户在使用的时候出现焦虑情绪。

⑥ 导航中的内容可以简单快速地进行切换。

（3）视觉设计：视觉设计的主要目的是为了吸引用户，起到美观的作用。在完成视觉设计的过程中，颜色、字体、布局是必不可少的因素。另外，在设计的同时，也要考虑到网页所针对的人群是否能够接受这样的视觉效果，要参照目标群体的心理模式进行视觉设计。

●界面的用色通常不要超过5个色系，否则画面会显得凌乱；内容要与颜色挂钩，近似的颜色应表达相同层次的意思。

●界面给人感觉要清晰明了，文字与图片及布局要条理清晰，内容表达要明确。

●在引导用户视觉的时候，可以尽量使用图形而非文字，因为图形比文字更容易使人记住。

●界面协调统一，阅读指示符号要根据人们的阅读习惯设计。

2．网页界面的设计

网页界面设计是由色彩、文字、图像、符号等视觉元素及多媒体元素构成的，是可以向人传达出特定信息的一种媒介。网页设计一般以功能性为主要原则，其次考虑到实用性与美观性等等（如图1-8和图1-9所示）。

在网页界面设计中图文是必不可少的，这些视觉元素不仅包括：背景、文本、按钮、图标、照片、颜色、导航等，而且现在网页中还添加了音频、视频等视听觉元素，所以在网页设计中要考虑到如何合理而巧妙地利用视听元素，从而达到吸引人群、传播信息的效果。

在网页的版面布局中，首先要考虑内容的摆放是否合理，如何才能让用户浏览到更多的内容。在布局时，版面不能太过拥挤，要有适度的留白。版式的布局与其他设计一样，都是在有限的空间中将信息最有效地传播出去，在传播信息的同时给人产生视觉与精神上的享受（如图1-10～图1-13所示）。

1.1.2 网页设计界面的基本构成元素

网站界面中的基本构成要素包括文本、静态图像、动画、表单。下面简单介绍一下每个要素。

1．文本

网页中的内容主要以文本的形式展现给读者，文本的形式由字号、颜色、底纹、边框等方式来区分。网页中大标题、小标题及正文、图注的字号要有区别。一般正文使用9号字体，最大不超过12号，因为过小或过大的字体会导致用户在阅读文字时产生视觉疲劳。在颜色上，则不宜使用过多的色彩，否则界面会显得较为凌乱，也不利于用户阅读。另外在底纹与边框的使用上，也应该稍加注意，只对需要强调的文字加上底纹或者边框就可以，过多便容易分不出主次，还会影响界面的美观（如图1-14～图1-17所示）。

2．静态图像

网页中，图像可以美化和丰富页面，一幅好的图片直接影响到界面的美观。在选择图片的时候要选择色调与界面相符的图片，网页中图片也不能太多，否则会影响网页的打开速度，降低浏览者查阅信息的效率。一般网站中的图片会用以下几种。

（1）标志

标志代表着一个企业、品牌的形象，标志图片可以放在引人注目的地方，比如左上角。这样用户会首先注意到标志，从而对这个品牌、企业加深印象。另外标志的图形设计一定要个性突出、简单明了。

（2）横幅图像

横幅图像大多数是用来做宣传的，宣传某个内容的专题或者是某个活动的广告。这样的画面具有很好的宣传效果。

（3）背景图像

页面中还会用到背景图，但是背景图不是很好掌握，添加得好会给页面带来不错的效果，反之会影响网站整体的画面风格（如图1-18～图1-21所示）。

3．动画

动画的应用很广泛，虽然动画的制作比较复杂、预算也会比较高，但是效果较好，相对于文字与图片来说，更容易抓住用户的眼球。

4．表单

表单是用来收集访问者信息的域集。访问者填表单的方式包括输入文本、单击单选按钮与复选框等。在填好表单后，站点访问便会发送出所输入的数据，该数据会被网站所设置的表单程序以各种不同的方式处理。

1.1.3 网页的信息表现类型

1．检索型

检索型的网页，以文字信息为主体，图片比较少，一般只使用按钮和图标就可以了。文字居多会增加网页的新闻性，但会影响网页的阅读效率，也需要考验访问者的耐心（如图1-22所示）。

2．均衡型

均衡型的网页，一般网页增加了一些图形要素。文字与图片的比例为2：1，这样的页面在视觉上不会给人压迫感，反倒看起来轻松愉快（如图1-23所示）。

3．印象型

印象型的网页以照片为主，减少了文字信息，传递信息较为直接。这样的网站会给人比较安静、独特、自我的视觉印象，个性比较突出（如图1-24所示）。

4．超印象型

超印象型的网页，一般文字内容会比较少，最大限度地展现出网页给人的魅力印象。以图片、颜色和空白作为页面的主题，画面的视觉性最强。这样的网页对页面的布局要求会比较高，页面中的图像信息要尽量传递出网页的主题（如图1-25所示）。