1.1了解电子商务网站

在具体学习电子商务网页设计与制作前，需要了解电子商务网站基础知识，为以后的学习打好基础。

1.1.1　网页的基本构成元素

对于不同性质的网站而言，构成网页的基本元素是不同的。下面介绍常见的网页的基本构成元素。

1.网站Logo

网站Logo（见图1-1）也称为网站标志，它是一个站点的象征，也是判断一个站点是否正规的条件之一。网站Logo应体现网站的特色、主题及其文化内涵和理念。成功的网站Logo有着独特的形象标识，在网站的推广和宣传中达到事半功倍的效果。网站Logo一般位于网站左上角，访问者一眼就能看到它。网站Logo通常有3种尺寸：88像素×31像素、120像素×60像素和120像素×90像素。

2.网站Banner

网站Banner（见图1-2）又称页旗，常作为横幅广告，是互联网广告中最基本的广告形式之一。网站Banner可以位于网页顶部、中部或底部的任意位置，一般为横向贯穿整个或者大半个页面的广告条。网站Banner可以使用GIF图像文件、静态图像，也可以使用动态图像。除普通GIF图像文件外，采用动画能赋予网站Banner更强的表现力和交互性。

网站Banner首先要美观，如果这个小区域设计得非常令人愉悦，即使网页没有浏览者要看的内容，或者网页呈现的是一些他们不感兴趣的内容，他们也会被吸引。其次网站Banner还要与整个网页协调，同时要突出、醒目，用色要同页面的主色相搭配，如页面主色是浅黄色，广告条就可以用一些浅的其他颜色，切忌使用对比色。

3.导航栏

导航栏（见图1-3）是网页的重要组成元素，它的任务是帮助浏览者在站点内快速查找信息。好的导航栏应该能引导浏览者浏览网页而不迷失方向。导航栏的形式多样，可以是简单的文字链接，也可以是设计精美的图片或丰富多彩的按钮，还可以是下拉菜单。

一般来说，网站的导航栏在各个页面中出现的位置是比较固定的，而且风格也比较一致。导航栏的位置一般有4种：页面左侧、右侧、顶部和底部。

当然并不是导航栏在页面中出现得越多越好，要合理运用导航栏，达到页面整体上协调一致的效果。

4.文本

网页内容是网站的灵魂，网页中的信息以文本为主。文本是网页中最基本的、必不可少的元素。文字虽然不如图片那样易于吸引浏览者的注意，但能准确表达信息的内容和含义。

一个内容充实的网站必然会使用大量的文本。良好的文本格式可以创建出别具特色的网页，激发浏览者的阅读兴趣。为了解决文本的问题，人们赋予了文本更多的属性，如字体、字号、颜色等，通过设置不同的格式，突出显示重要的内容。

此外，还可以在网页中设置各种各样的文字列表，来明确表达一系列项目。图1-4所示为运用了大量文本的网页。

5.图片

图片在网页中具有提供信息、展示形象、装饰网页、表现风格的作用。图片是文本的说明和解释，在网页中的适当位置放置一些图片，不仅可以使文本清晰易读，而且可以使网页更加有吸引力。现在几乎所有的网站都使用图片来提高吸引力，有了图片，网站才能吸引更多的浏览者。

可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用最广泛的是GIF和JPEG两种格式。插入图像以生动形象地展示信息的网页如图1-5所示。

6.视频

在当今社会，视频营销已经成为企业宣传和品牌推广的重要手段，视频可以帮助企业全方位地宣传，它代替了传统的图文表达形式，能让用户非常直观地了解企业的基本信息，多角度感受企业文化。

视频以影音结合的方式，用最小的篇幅和最短的时间将商品的重要信息完美地呈现出来，通过增强视听感受来激发买家的购买欲。

例如，一款蓝牙耳机原本并不是买家的备选购买商品，但感染力很强的商品视频（见图1-6）激发了买家的购买欲，促使其购买该商品。

如果视频制作精美、具有新意，能引起人们的注意，那么其传播的速度、广泛性与带来的经济收益是其他传播信息的方式难以比拟的。

通过视频来展示商品，可以真实地再现商品的外观、使用方法和使用效果等，能够多方位、多角度地展示商品的细节特征，比单纯的图片和文字说明更加令人信服。图1-7所示为某网站的一则面包视频，该视频通过完整的面包制作流程和细节展示，使消费者更充分地了解商品材料和细节。

1.1.2　电子商务网站的概念

电子商务网站是指一个企业或机构在互联网上建立的站点，是企业开展电子商务的基础设备和信息平台，是实施电子商务的公司与服务对象之间的交互界面，是电子商务系统运转的承担者和表现者。在软硬件条件的支持下，电子商务网站由网页、程序和后台数据库组成，具备相应的电子商务应用所需的功能，可以达到宣传企业形象、发布和销售商品、提供商业服务等目的。

电子商务网站为浏览者搭建起一个网络平台，浏览者和潜在客户在这个平台上可以进行整个交易/交流过程。电子商务网站业务更依赖于互联网，是公开的信息仓库。从广义上来说，电子商务还包括企业内部的商务活动，如生产、管理、财务等，以及企业间的商务活动。

通过电子商务网站，可实现如下目标。

（1）使商家通过网络将产品销售到全世界，使消费者足不出户便买到全世界的商品。

（2）实现在线销售、在线购物、在线支付，使商家和企业及时跟踪消费者的购物趋势。

（3）商家和企业可以利用电子商务在网上推广自己的独特形象。

（4）商家和企业可以利用电子商务与合作伙伴保持密切的联系，改善合作关系。

（5）商家可以为消费者提供及时的技术支持和技术服务，降低服务成本。

（6）促进商家和企业之间的信息交流，使双方及时得到各种信息，保证决策的科学性和及时性。

1.1.3　电子商务网站的视觉营销

视觉营销顾名思义，就是在用户的视觉感官上下功夫，以引起用户的共鸣，让用户对产品产生深刻的认同感，从而达到营销的目的。视觉营销通过塑造有别于竞争对手的独特的网站形象，吸引用户浏览网站，增加页面的访问量和提高页面的点击率，最终实现商品的销售或品牌文化的有效传播。要想让电子商务网站具有好的视觉营销效果，需要遵守以下几个原则。

1.突出行业特征

在进行电子商务网站视觉设计前，一定要了解商品的属性及对应行业的特征，然后在此基础上为电子商务网站选择相应的色彩和图片，如护肤品可以用绿色和粉红色来表现。

2.网站让人感觉美观、舒适

电子商务网站应该给人以美观、舒适的感觉，电子商务页面结构布局应该符合人们的浏览习惯。因为大多数人都是按照从左至右、从上至下的顺序浏览页面的，所以在设计电子商务网站页面布局时，把主推商品、导航栏和促销信息等重要内容放在页面左侧更能引起消费者的注意。

3.突出主题

电子商务网站需要有明确的主题，表达一定的意图和要求，并按照视觉心理规律和形式将主题主动传递给浏览者，使主题在适当的环境中被人们及时理解和接受，从而满足其需求。这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力来突出设计主题，以引起用户对网页的注意，增进用户对网页内容的理解。

4.依据网站的视觉识别系统设计

根据网站的视觉识别系统来进行电子商务页面设计，网站会具有较高的辨识度，消费者在浏览后，一般都可以留下深刻的印象。在设计电子商务页面时，一定要不断强化企业和商品的品牌元素，如企业标准颜色、企业标志等。

5.整体风格统一

网站的整体风格统一包括内容和形式的整体性。设计时强调网页的整体性，可以使用户更快捷、更准确、更全面地认识网站、掌握网站信息，并给人一种内部联系紧密、外部和谐完整的美感。提升整体性也是体现网站独特风格的重要手段。

电子商务网站视觉设计中容易出现设计风格不统一的错误，如网店形象和商品定位不统一、不同模块的风格不统一、图片的尺寸不统一、字体和颜色随意使用等，这样会让页面看起来杂乱无章。图1-8所示为整体风格统一的电子商务网站。

6.提高易用性

提高易用性的核心是充分考虑消费者的浏览习惯，在设计页面布局时需要从消费者的角度来思考，让页面易懂、易用。如果页面布局（如功能按钮的位置）与消费者的浏览习惯不符，那么消费者可能会感觉不适应，还可能会因为找不到需要的模块或商品类别而离开。只有用户认可的、令人感觉舒适的电子商务网站，才会创造更好的浏览轨迹，增加页面停留时长、访问深度，降低跳失率，提高转化率。

1.1.4　电子商务网站的主要内容

电子商务网站是网站的一种，由于电子商务有其独有的特点和功能需求，因此，不同功能的电子商务网站的主要内容不同，下面分别进行介绍。

（1）用于宣传和推广的电子商务网站主要包括：关于我们、公司快讯、公司产品、招商加盟、技术中心、销售网络、诚聘人才等内容。图1-9所示为某个用于宣传和推广的电子商务网站。

（2）用于网上销售的电子商务网站主要包括：商品分类、商品展示与报价、客户注册与登录、客户订单、网上支付和客户购物信息查询等内容。图1-10所示为某个用于网上销售的电子商务网站。

（3）用于与客户交流并为其提供服务的电子商务网站主要包括：客户留言、网上论坛、邮件列表、售后服务和网上查询等内容。图1-11所示为某个用于与客户交流并为其提供服务的电子商务网站的在线留言功能。