任务一 电子商务网站设计基础知识

任务概述

当今，网购已经成为人们生活中一种重要的消费渠道，电子商务网站中海量的商品信息和便捷的购物方式吸引着越来越多的消费者。那么，在众多的电子商务网站中，它们是如何进行页面设计和布局来吸引消费者注意力的呢？本任务将学习电子商务网站的设计基础知识。

任务实施

一、初识电子商务网站

在学习相关知识前，首先要了解电子商务网站的定义、网页与网页设计、网页构成要素等知识。

1. 电子商务网站的定义

电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务企业通过网站建设与推广营销，能够全面展示企业产品和服务项目，实现网上交易与支付、网络客户服务，管理客户信息和销售业务信息。

随着电子商务市场的不断扩大，电子商务网站的竞争也更加激烈。电子商务网站的经营模式也随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要可以分为B2B、B2C、C2C、O2O、B2Q、F2C等，其中淘宝、天猫、京东商城、亚马逊等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。图1-1所示即为京东商城首页。

2. 网页与网页设计

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页是一个文件，通常是HTML格式（文件扩展名为.html或.htm），网页经由网址（URL）来识别与存取。在浏览器中输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到计算机，然后通过浏览器解释网页的内容，再展示到我们的眼前。

网页设计（Web Design）是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化等），进行网站功能策划，然后进行的页面设计美化工作。其工作目标是通过运用更合理的颜色、字体、图片和样式等进行页面设计美化，在功能限定的情况下尽可能给予用户完美的视觉体验。

网页设计软件主要以Adobe产品为主，常见的工具软件有Dreamweaver、Photoshop、Flash、Fireworks、CorelDRAW、Illustrator等，其中Dreamweaver是代码工具，其他软件是图形图像或动画工具。此外，常用的网页设计工具还有最近几年Adobe推出的EdgeReflow、EdgeCode、Muse等。

3. 网页构成要素

文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成要素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等。

（1）文本

一般情况下，网页中最多的内容是文本。设计者可以根据需要对其字体、大小、颜色、底纹和边框等属性进行设置。一般建议用于网页正文的文字不要太大，也不要使用过多的字体，中文文字一般使用宋体，大小一般设置为9磅或12像素左右即可。

（2）图像

丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG或GIF格式。网页中的图像主要用于点缀标题的小图片、介绍性的图片、代表企业形象或栏目内容的标志性图片、用于宣传广告等多种形式。

（3）动画

动画是网页中最活跃的元素。创意出众、制作精致的动画是吸引浏览者眼球的有效方式之一，但是物极必反，如果网页中的动画太多，会使人眼花缭乱，进而产生视觉疲劳。

（4）超链接

超链接是网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置，一个下载的文件，一幅图片，一个电子邮箱地址等。超链接可以是文本、按钮或图片。当鼠标指针指向超链接位置时，就会变成小手形状。

（5）网站Logo

Logo是企业的标志、标识。网站中的Logo主要是各个网站用于与其他网站链接的图形标志，代表一个网站或网站的一个版块。Logo能够起到对其拥有企业的识别和推广的作用，形象的Logo可以让消费者记住企业主体和品牌文化。

企业网站常常使用企业的标志或注册商标作为网站的Logo，一般放在网站首页的左上角或其他醒目的位置。图1-2所示为淘宝网和亚马逊网的Logo。

（6）导航栏

导航栏是网页设计中不可或缺的基本元素之一。它链接着各个页面，只要单击其中的超链接，就能进入相应的页面。

导航栏的形式多种多样，其中包括文本导航栏、图像导航栏和动画导航栏等。导航栏一般放置在页面中醒目的位置（常用的位置有4个：页面的顶部、左侧、右侧和底部），让浏览者能够在第一时间看到它。

图1-3所示为导航栏位于页面顶部的网页。

（7）表格

表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观。通过表格可以精确地控制各个网页元素在网页中的位置。

（8）框架

框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。例如，在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变。

（9）表单

表单是用于收集访问者信息或实现一些交互作用的网页。浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。

（10）横幅广告

横幅广告又称旗帜（Banner）广告，是横跨于网页上的矩形公告牌，当用户点击这些横幅时，通常可以链接到广告主的网页。在网页布局中，大部分网页将横幅广告放置在与导航栏相邻处或其他醒目的位置，以吸引浏览者，如图1-4所示。

在网页中除了上述这些基本的构成元素外，还包括版尾或版权块、字幕、悬停按钮、日戳、计算器、音频、视频和Java Applet等元素，在此不再赘述。

二、电子商务网站设计准则

无论是大型的电商平台网站，还是中小型的电子商务类网站，在网站设计初始，都应考虑网站的美观性、界面的友好性，以及访问的便捷性。因此，网站设计必须遵循一定的准则，才能准确表达和有效传递企业组织的商务诉求。具体而言，电子商务网站建设至少应该遵循以下设计准则。

1. 明确网站建设目的和用户需求

网站类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性和用户需求的直接影响，所以企业必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划。

首先，要明确建立网站的目的。例如，建设网站主要是向用户宣传自己的企业，进而扩大知名度和影响力，还是宣传企业所拥有的技术或产品，进而促进销售，还是建立以交易为主的电子商务网站。如果目的不唯一，还应该清晰地列出不同目的的主次关系。

其次，需要根据用户的需求、市场的状况、企业自身的情况等进行综合分析，以“用户”为中心。现在很多网站并没有起到预想的效果，主要原因就是在设计前期对网站的最终目的和用户的需求理解有偏差，缺少对网站对行业作用和用户需求的分析。

2. 总体设计主题鲜明

在明确了网站的总体方案设计以后，需要对网站的整体风格和特色进行恰当的定位，细致规划网站组织结构是设计制作的前提。网站的形式应该针对所服务对象的不同而有所不同。有些网站只提供简洁的文本信息即可，有些网站需要提供精美的图像、动听的音乐以及进行错综复杂的页面布局等。

设计者应该根据网站的目的和用户的特点规划出最终的表现手法和表现形式，但必须做到主题鲜明突出、要点明确，页面整体形式要能体现出网站的主题。

3. 设计人性化的交互界面

用户访问电子商务网站是为了获取需要的商品或服务，所以用户除了按照设计者的设计思路来浏览页面外，更多的是想通过自己的主观性合理、有机地选择要浏览的内容，或希望与其他浏览者互相交流信息、解答疑惑等。因此，电子商务网站需要设计人性化的交互界面。

首先，电子商务网站应该具有良好的导航设计，通过简单的搜索就可以到达各种商品的页面；其次，在内容编排上必须简洁明了，提供有效的产品描述，使潜在客户能够在没有实物的情况下通过网站就能很方便地了解产品。网站提供的详情细节看起来越真实，获得的客户成交转化率就越高。此外，在电子商务网页设计中有时还需要考虑残疾人、病人等特殊群体的需要。

4. 网页形式与内容相统一

网页的内容虽然各不相同，但作为一个完整的网站，要力求做到网页形式与内容的完美统一。要将页面中的丰富意义和多元化的形式相统一，形式语言必须符合页面的内容，体现丰富的内涵。

设计者可以运用对比调和、对称与平衡以及留白等手段，通过文字、表格与图形相互之间的关系建立整体的均衡状态，从而产生和谐的美感。例如，合理地应用对称原则，页面就不会显得呆板。加入一些富有动感的文字、图片、动画等，或采用一些非常规的夸张手法来表现，可能也会达到较好的效果。

在网站的品牌标识方面，要确保字体、品牌特定的调色板、产品照片的色调、描述性文字、口号用语、按钮以及设计中使用的每种元素和风格都严格遵循品牌风格，这也能帮助企业与客户建立强大的品牌客户关系。

5. 准确无误的链接

互联网实际上就是一个巨大的信息空间，并且各个节点之间的链接关系错综复杂，用户在上网浏览网页时有可能会“迷路”。例如，用户在浏览网页的过程中可能会出现以下情况：不知道下一步该去哪里；知道该去哪里，但不知道该如何去；不知道当前处于整个网站的哪个位置等。这些都与用户不熟悉网站结构有直接关系。

为了减少和避免出现浏览者“迷路”现象，通常可以采用以下策略：一是改变用户界面，如采用导航地图、多窗口显示等技术；二是对文本进行分析，更换超文本的结构及链接设计；三是注意网站的层次性和一致性，复杂的网站必须注意版块划分的层次性，通常以不超过5层为佳，较常用的信息内容、功能服务应尽量放到更浅的层次，以减少用户的点击次数，信息内容的获取和功能服务的过程都应该尽量将所需进行的步骤控制在3～5步。

6. 网站信息的时效性

电子商务网站要根据市场行情的波动随时更新网页上的价格信息，经常提供新的商品或服务，并通过促销等活动来刺激客户的购买欲。在进行网站设计时，要考虑到内容更新的快捷与简便。在更新内容的同时，还要注意保持网页在结构上的相对一致性，以便于老客户能够既方便又快速地找到所需要的各类信息。

7. 合理利用多媒体功能

多媒体现在已经成为网站设计的基本要素。为了吸引浏览者的注意力，在页面内容中可以适当添加一些具有冲击力的Flash动画、三维动画等元素。但在设计多媒体效果时必须考虑网络带宽的限制，考虑多媒体效果的应用会不会直接影响用户浏览页面的下载速度。如果网站下载信息的速度太慢，很容易让用户失去浏览的兴趣，进而关闭网页。

8. 努力提高网站的性能

网站用户的满意度与其对系统的控制感有着密切的关系，而控制感在很大程度上取决于系统的响应速度。一般情况下，用户对当前网页上的内容能持续保持注意的时间长度约为10秒，若系统响应时间超过10秒，用户会在等待计算机完成当前操作时转向其他的任务。常用的解决办法是：尽量减少网页上的图片与多媒体的使用，或者网站服务器本身要保证有足够的运行速度和传输带宽。

互联网具有巨大的商务潜能，没有人可以确切地预计系统的最终访问量和最佳的商务运行模式。因此，随着企业网上平台业务量的扩展和平台访问量的增长，系统应该能够具有很强的扩展能力，以适应新业务的发展。

另外，网站的稳定性、安全性、防攻击能力、对异常灾害的恢复能力也是衡量网站性能的重要标志。