4. 前台规划和设计
4.1. 前台总体规划
前台的功能划分主要根据重要页面，包括：
? 主页：网站的主页，最重要的页面。展示导航、网站定位、最新产品、各个页面的
入口等。
? 一级目录主页：一级目录的主页，针对该一级目录的主页进行特定的设计。重点是
按各类促销类型呈现该目录下的产品。
? 产品列表页：列出该二级、三级...N级目录下面的产品。
? 产品详细页：某个产品的最终详细页面，在这个页面显示该产品所有信息，并提供
购买的入口。
? 购物车：产品到结账中间的暂存处。 ? 结账流程（多个页面）：有一页式结账，也有传统的多页结账，视同实际需求来选
择。
? 我的账号（多个页面）：订单查询、信息维护、地址维护等。
? 意愿清单Wish List：这个功能比较独立，所以会单独作为一小章讲解。
? 内容页（多个页面）等，还有其它信息等可以嵌入这些页面内作为子功能，不一一
列举。
4.2. 主页（Home Page） 4.2.1. 概述
主页的设计对电子商务网站而言至关重要，一个优秀的主页让网站加分不少，而一个设
《B2C电子商务系统规划与设计完全手册》 6 / 49 颜超敏：www.2ecommerce.cn（个人博客）
计差劲的主页则让网站未战先败。 那怎样才算一个优秀的主页呢？ 针对不同类型的站点有不同的设计，或华丽、或简约、或丰富、或朴素，不一而同。 首页的设计分为两部分：功能规划和风格设计。
先根据后台的功能支持和参考同类站点来初步确定主页的功能规划，然后画出线框图。项目组和客户可以基于这个线框图进行讨论来逐步完善。 风格设计，同样最好是先参考同类的优秀站点，然后根据销售产品的特点先确定网站的设计基调，如素雅还是奢华，确定好基调后，再进行选图和做图。
除广告和产品图片外，主页的颜色不要太多，3~4种比较合适。
4.2.2. 功能规划
主页要放置那些模块？怎么放？这些问题牵涉到网站的定位。 首先，考虑网站的经营范围和主要顾客群体。比如化妆品类站点，经营产品目录层次较浅，品牌较多，而且用户对品牌忠诚度比较高，主要为女性用户等。 针对这些分析，设计该化妆品站点时将以简约、素雅、易用为主，针对品牌的导航要做一定的优化。 那主页要有那些功能呢？
1. Logo
2. 顶部快速链接（登录/注册入口/Live Chat/MiniCart） 3. 网站促销广告。 4. 产品搜索
5. 产品目录及其他导航 6. 主广告
7. 推荐产品列表（热销/新到/特色/特价等），一般为橱窗式图文并茂式展现。 8. 帮助链接 9. 版权
10. 其他信息（如支持的支付类型、SEO优化内容、最新公告等） 分析出这么多功能，我们可以设计一个线框图来表达初步的设计：
《B2C电子商务系统规划与设计完全手册》 7 / 49
颜超敏：www.2ecommerce.cn（个人博客）
注：线框图是WEB页面的草图，展示了导航系统的骨架，或者每一页的内容的基本信息。线框图可以作为和项目成员、客户分析讨论的视觉工具，从页面设计的需求、概念到架构图的过程中，都可以使用。
项目组可以和客户一起就这个项目图逐步讨论细化，当达成相对的共识时，美工人员即可在这个线框图的基础上进行设计，线框图能简化沟通，并让项目组在功能和排版未确定时不至于立刻陷入到美工设计的细节中去。
下面是我发表在博客的一篇文章，可以作为主页设计的参考，读者可以看到，我设计的线框图也就是根据这个站点反向设计，其实在实际项目中，我们同样可以这样操作，选择几个同类的优秀站点，参考设计线框图，逐步剔除不需要的，增加更合适的等等来完善。
4.2.3. 化妆品网站SkinStore主页设计评析
Skinstore.com 是一个美国的专营化妆品的站点，经常搞促销活动，折扣比较吸引，做美国代购的或者喜欢国外购物的人士大多都熟悉她。
《B2C电子商务系统规划与设计完全手册》 8 / 49 颜超敏：www.2ecommerce.cn（个人博客）
由于她的主页比较长，所以我分为两屏分别截取和讲解，下面是上面一屏，图中打上数字标识的我在下面会一一讲解：
1. 顶部导航设计得很简约：
1）Shopping Cart独占一行，因为它的长度是动态的。 2）常用的链接在顶部，各个页面都能看到，很方便。
2. 搜索放在左侧，和一般放在右侧不太一样，但是为了突出右侧的重要优惠广告，也
就可以接受。
3. 将网站的两大全局优惠及其条件放置在最为显眼的顶部右侧，很吸引眼球。这点在
设计上可以参考。
4. “the daily special”栏目对新老顾客都很有吸引力，我想该图标的点击率一定很高。 5. 把导航全部放在左侧，而不像大多数站点占用顶部作为放置一级导航的首选。这种
做法对于本站点问题不是太大，
因为它的导航分类得非常清晰好用。如：
o Shop->First Time Shopper针对新用户设计。 o Shop By Brand针对品牌忠诚顾客。
o Special Offers针对喜欢折扣的顾客等等，总有一样适合你。
《B2C电子商务系统规划与设计完全手册》 9 / 49 颜超敏：www.2ecommerce.cn（个人博客）
6. 虽然很多站点都采用Tab作为主页产品的分类展示，但是我比较欣赏的是它的Tab
的名称，非常的人性化，
是从顾客思考的角度来设计Tab名称，我相信顾客使用时会比一般的Features Product、New Arrival更加有亲切感。
7. 每个产品以橱窗形式，底色用白底，体现出产品的高雅，白色的Add to Cart和整体
设计都很配。
1. 用一张横幅广告作为上面的主体部分和下面的文字内容的分隔，这点做得很巧妙，
对于大多数用户而言，只会
看到一屏之内的产品，甚至错觉以为该广告就是这页面的底部了。
2. 这部分表面上是一些皮肤保养、化妆技巧知识，但是实际上作为页面的功能，我认
为它更主要是为了SEO，而且
《B2C电子商务系统规划与设计完全手册》 10 / 49
颜超敏：www.2ecommerce.cn（个人博客）
B2C电子商务系统规划、业务研究与设计
