Tinkle's Blog

You may ask yourself
What is that beautiful house?
You may ask yourself
Where does that highway GO to?
You may ask yourself
Am I right?…Am I wrong?
You may say to yourself
MY GOD!…WHAT HAVE I DONE?
 

引用了《Don’t Make Me Think》讲述导航设计的一段话作为开始，也是想以布奇乐乐园产品介绍页面的导航为案例，说说自己的想法。布奇乐乐园网站已经改版上线，可惜的是时间比较紧迫，原本想好好的改一下网站的导航设计，却也只能等到下一期改版了。

导航设计是网站设计的一部分，这里不得不先说一下布奇乐乐园网站的性质。布奇乐乐园网站应该算一个电子商务网站，她主要承载着产品展示和在线订购的功能。相比目前国内汗牛充栋的电子商务网站来说，她的产品更专一（产品就是“布奇乐乐园早教套餐”），产品展示的目的更多一些。她不需要有一级分类、二级分类，也不需要用tag来实现用户的需求引导和匹配。她的导航，完全是需要以产品的内容介绍为主导，需要更简洁更适应用户的理解逻辑。

上图就是布奇乐乐园某年龄段产品介绍的详情页。回头来看，最大的一个问题就是缺少到其它年龄段产品介绍详情的入口。下面将以这个页面为例，从页头到导航栏再到整个页面的导航设计做一个反思。

 页头&导航栏设计

1. Logo旁边应该增加一条容易让人理解和记忆的标语，体现产品特色或者告诉用户这个网站的用途；
2. 除了首页的Logo，其它页面的Logo都需要有一个返回首页的指示，比如当鼠标放上去的时候，Logo图片发生变化，变化后的图片上有“返回首页”提示；
3. 原来导航栏“首页”这一栏，可以根据导航条的空间调整，若空间不够可以考虑在导航栏去掉“首页”的标签；
4. 当前也所属栏目的标签需要重点标识，同时和导航栏下面正文内容的过渡要自然；
5. 当鼠标划过导航栏的时候，鼠标所在的标签需要重点标识提示；
6. 布奇乐乐园除了“产品介绍”一栏下会有较多的分类，其它一级类目下都没有二级分类，可以考虑整站的风格统一，通过其它形式展现“产品介绍”的二级、三级分类（见下分析）。

产品介绍首页的导航设计

1. 正文左上角的为各个产品的简介图片（幻灯轮换），并通过图片作为各个年龄段的入口；
2. 因为布奇乐乐园的产品是根据宝宝出生年月有对应年龄段的产品推荐，所以右上角的年月日选择是作为另一种方式的入口；
3. 产品介绍首页的主要内容，就是对这个产品做一个全局的描述，在页面的下面，还可以将各个年龄段的产品平铺开作为更直观的入口；
4. 产品除了按照年龄段分之外，还有根据内容划分的“音乐”、“电子书”、“英语”3个部分，这个可以放在侧边栏，在作为入口的同时，还可以作为精彩内容的推荐；

产品详情页的导航设计

1. “您所在的位置”通过正文左上角的大图提示，所以大图里面年龄段的说明文字需要醒目；
2. 右侧是所有年龄段的罗列，左侧大图对当前页内容的指示已经非常明显，所以右侧不需要再做当前页的提示；
3. 每个年龄段下面展示最近2个月的产品。原来的页面中，每个月的内容是分为2部分来展示的，可以合并为一个部分，这样每页占用1个tab标签，每个标签标示一个月份；
4. “音乐”、“电子书”、“英语”3个部分可以继承产品首页的设计，继续放在侧边栏；
5. 如果正文的内容是“音乐”、“电子书”或者“英语”，在左上角部分，通过文字或者图片对当前页的内容做一个标题和概要的描述即可；
6. 如果需要返回产品介绍首页，点击导航栏即可。

网络购物网站根据买家和卖家的不同形态，主要分为三类商业模式：B2B  B2C  C2C ，这三种商业模式在传统的线下也有相对应的典型形态：  B2B 对应专业的批发市场  B2C 对应购物超市  C2C对应个体摊位组成的市场。所以说网络购物网站并不是完全意义上模式创新，它只是利用了新的媒介和新的平台来承载卖家和买家的商业活动，因此其网络购物购物流程和传统的是一样的，还是有借鉴意义的。

我们可以画出下面这个用户网络购物的基本流程图

这几个步骤是用户网络购物的基础环节，每个网站根据不同的需要增加相应的其它环节。

对于用户注册登录这样一个小流程，在目前的电子商务网站主要有以下三种方式：

一、把用户注册登录流程放在基本流程的最前端；

二、把用户注册登录流程放在基本流程的中间部分；

三、不把用户注册登录流程放在基本流程中，不作为用户在网站购物的充分必要条件。用户不需要注册登录就可以完成购买；

对于购买者来说：
        第一种方式显得不是很友好，需要进行注册。其优点是一旦注册完成就可以很顺畅的完成一次购买过程;
        第二种方式相对而言显得比较很友好，但是因为在购买过程中的某一个环节还是需要进行注册，这样会打断用户购买产品的完整过程，出现注册这样的分支过程也会产生不好的用户体验;
        第三种是比较理想的符合用户购物行为的购买流程，最符合用户购物的行为模型;

但是从商业角度来说，第三种方式却不是最好流程，因为这样的流程有以下几个商业弊端：
       1.无法提高用户对网站品牌的认知度;
       2.无法得到完整的用户资料，对以后的数据挖掘和网站运营推广产生影响;
       3.不能提高网站对用户粘性，对用户的二次激活等不利;

所以对于网站来说，可以把注册登录流程和购买流程变为并行的两个互不影响的流程，通过产品价格、网站操作使用成本等方式，体现出用户不注册登录和注册登录购买产品的差异，用这样的方式来引导用户使其积极主动的进行注册登录。这才是我们想要的结果。

转载自兔子的博客