任务二 电子商务网站结构设计

任务概述

对于电子商务网站而言，网站流量的多少在很大程度上取决于网站的结构设计。合理的网站结构设计有利于企业商务诉求的表达。不同类型的电子商务网站，其页面设计在内容呈现、版面处理等方面也会有所不同，这其中的结构设计非常有讲究。本任务将学习如何设计电子商务网站结构。

任务实施

一、网站的物理结构

网站的物理结构指的是网站目录及包含文件所存储的真实位置表现出来的结构。物理结构一般包含两种不同的表现形式：扁平式结构和树形结构。

1. 扁平式结构

网站将所有网页都存放在网站根目录下，这种结构就是扁平式结构，如图1-5所示。

扁平式结构的优点是结构层次短、蜘蛛效率高、URL短，对搜索引擎而言最为理想，因为搜索引擎在抓取网页时，在第一层就可以抓取到内页，有利于搜索引擎的收录与排名；缺点是URL语义不明显，随着数据量的增加会使网站变得难以组织，内部链接不好做，权重传递难以集中，查找和维护起来非常麻烦。因此，扁平式结构一般适用于只有少量页面的微型、小型站点。

2. 树形结构

网站的树形结构是指数据元素之间存在着“一对多”的树形关系的数据结构。简单来说，树形结构就是该目录下还分别有几个分类文件夹，页面放在这几个分类文件夹中。当然，分类文件夹中同时也可以有子分类文件夹，如图1-6所示。

树形结构的优点是结构清楚、URL语义明确、识别度高、搜索引擎处理内部链接的权值传递比较容易、后期管理比较方便；缺点是深层次将导致收录速度下降，而且过密的结构也会导致网站混乱、链接复杂、蜘蛛效率下降。所以，做好树形结构的栏目组织和链接优化至关重要。这种结构适合内容类别多、内容量大的网站。

二、网站的逻辑结构

网站的逻辑结构也称作链接结构，主要是指由网页内部链接所形成的逻辑结构。

在网站的逻辑结构中，通常采用“链接深度”来描述页面之间的逻辑关系。链接深度是指从源页面到达目标页面所经过的路径数量。例如，某网站的网页A中，存在一个指向目标页面B的链接，则从页面A到页面B的链接深度就是1。

与物理结构类似，网站的逻辑结构同样可以分为扁平式和树形两种。扁平式逻辑结构的网站，实际上就是网站中任意两个页面之间都可以相互链接，也就是说网站中任意一个页面都包含其他所有页面的链接，网页之间的链接深度都是1，很少有单纯采用扁平式逻辑结构作为整站结构的网站。树形逻辑结构是指使用分类、频道等页面，对同类属性的页面进行链接地址组织的网站结构。在树形逻辑结构网站中，链接深度大多大于1。

三、网站的构成

网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成的。一般来说，网站都至少有两种页面，即首页和内页。

网站首页是一个网站的入口网页，作用是引导用户浏览网站其他部分的内容，其重要性不言而喻。

首先，首页的基本职能是为访问网站的用户提供导航的作用。首页中可以有网站的简介、业务的分类等，也可以根据网站的类型进行更深层次的划分。通常网站会将最想展示的内容放置在首页中，以达到在第一时间直观地向用户展示的目的。

其次，首页有体现和突出网站主题的作用。根据网站的不同类型，要设置好网站的主题。例如，服务型企业会在首页展示自己的服务体系及相关内容，而生产型企业一般都会将自己的主打产品放置在首页中。

相较于首页的结构设置，内页的结构布局没有首页那么重要，但也有着重要的作用。无论哪种类型的网站，其中的内容都起着重要的作用。根据用户需求的不同，内页会有风格各异的设置，但都要遵循一点，那就是内容制胜。内页具体的结构设置需要根据实际情况具体分析，但必须要明确内容的关键性。

四、网页的空间结构

一个优秀的网页，除了素材和颜色的搭配之外，布局井井有条也是至关重要的。网页设计中的空间结构就是网页中各种构成要素（如文字、照片、图像、图表和菜单等）在网页浏览器中的位置分布。传统的经典网页可以分为顶部、主体、底部三个部分，各部分又分别可以细分。

1. 网页顶部

无论对电子商务网站而言，还是从用户体验而言，顶部都是网站最重要的位置。搜索引擎的抓取规则是从网页的顶部往下，从左往右，因此在进行网页设计时要重视网页的左上角位置。

一般在这个位置放的是网站Logo，网页的头部留上一行字的位置，以添加网站的关键字。在Logo中添加ALT标签（网站上图片的文字提示），不但可以提高网站的关键字密度，而且对网站的排名也很有好处。此外，登录条、页面横幅广告、菜单栏等内容都可以放在顶部。苏宁易购网站首页的顶部设计如图1-7所示。

2. 网页主体

网页主体是网页的内容部分，网站的中间位置也就是网站的重点位置，因为大多数企业信息、产品介绍、业务流程等一系列想要对用户表达的内容都在这个区域。

一般可以把网页主体分为2～3个竖列，包括侧栏、栏目等。在构架网站时，可以选择一个新闻版块放置在网站中间的左上角，这样方便搜索引擎收录网站，而且对网站的权重提升会起到关键性的作用。图片信息也要添加ALT标签，但不要全是关键字，合理地控制关键字的密度也是网站排名中很重要的一点。

小米网站首页的主体设计如图1-8所示。

3. 网页底部

网页底部大多用于放置友情链接、网站版权信息、使用协议等，也可以放一些导航链接。友情链接版块对网站的权重和排名都是很有利的，所以这一块尽量保留。在版权信息中可以添加一些关键字并且加粗、加链接，这对关键字的排名提升也会起到一定的作用。

淘宝网站首页的底部设计如图1-9所示。

五、网页的布局结构

创建网页结构实际上就是对网页内容的布局进行规划。网页布局结构的创建是页面优化的重要环节之一，会直接影响页面的用户体验及相关性，还在一定程度上影响网站的整体结构及页面被收录的数量。

网页常见的布局结构有“国”字形结构布局、“厂”字形结构布局、“回”字形结构布局、框架型结构布局和自由式结构布局等。

1. “国”字形结构布局

“国”字形结构也称为“同”字形结构，这种结构布局是电子商务网站中最常见的一种布局类型，即最上面是网站的标题及横幅广告条，接下来是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等，如图1-10所示。

这种布局的优点是页面结构清晰，主次分明，是适合初学者使用的布局方法；缺点是因为过于规矩而显得呆板，如果在细节、色彩上安排不得当，很容易让人产生视觉疲劳。

2. “厂”字形结构布局

这种结构布局与“国”字形结构布局其实只是形式上的区别，它去掉了“国”字形结构布局中最右侧的部分，给主内容区释放了更多的空间。这种布局上面是标题及横幅广告，接下来左侧是一窄列信息或链接等，右侧是很宽的内容区，下面也是一些网站的辅助信息，如图1-11所示。

3. “回”字形结构布局

“回”字形结构布局是“国”字形结构布局的一种变形，即在“国”字形结构布局的下方增加了一个横向通栏。这种结构的优点是将网页中不被重视的页脚利用起来，增加了主体内容，充分利用了页面的有限空间，如图1-12所示。但是，这种结构往往会使页面充斥着各种内容，可能会给人造成过于繁杂的感觉。

4. 框架型结构布局

常见的框架型结构布局主要分为左右框架型、上下框架型和综合框架型。左右框架型是一种左右分别为两页的框架结构，一般左侧是导航链接，有时最上面会有一个小的标题或标志，右侧是内容。上下框架型与左右框架型类似，区别仅仅在于它是一种上下分为两页的框架。综合框架型结合以上两种结构，是相对复杂的一种框架结构，较为常见的是类似于“拐角”的结构布局。

由于兼容性和美观等因素，这种布局目前专业设计人员采用的已经不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。

5. 自由式结构布局

自由式结构布局的随意性特别大，它改变了传统的以图文为主的表现形式，将图片、Flash动画或视频作为主体内容，导航栏、文字说明等都放在不太显眼的位置、通常化妆品类、时装类、科技类等网站会采用这种结构。精美的平面设计、富有创意的Flash动画、精彩的视频让表达的信息更丰富，如图1-13所示。但是，这种结构文字过少，难以让浏览者长时间关注，有时可能因为导航栏不太明显而给用户操作造成不便。