关于Webapp导航设计的思考

一、马蜂窝 http://m.mafengwo.com

首页导航栏左边(A)放LOGO，右边(B)放常用功能搜索、消息、打卡

进入二级页面，导航栏有返回按钮(A)，中间(B)放页面的title，右边(C)放常用功能消息、打卡

优点：

首页LOGO有利于品牌塑造(但仅在首页出现，品牌塑造功能有限)

第二级以下页面左上角有返回按钮，不影响添加到桌面形成一个单独WebApp的使用体验

缺点：

回到首页的路径长

缺少方便的全局导航

 

二、亚马逊 http://m.amazon.cn

导航栏没有返回按钮，最左（A）处一直是Amazon的logo，最右(C)处一直是购物车，购物车左边（B）处在一级页面是登陆按钮，二三级页面是搜索按钮

Amazon的全局导航跟其他网站放在顶部不同，是以一个list的形式放在页面最下面的，出现在所有页面。第一次使用时不好寻找，但之后使用起来挺方便的。

优点：

logo一直在左上方，有利于品牌塑造

点击做放上logo可以回到首页

很适合在手机浏览器里浏览

右上方的常用功能（搜索、购物车）的位置合理

每个页面下方的全局导航很方便

缺点：

顶部导航栏没有返回按钮，只能借助浏览器的前进、后退功能，影响了它作为一个独立Webapp的使用，必须在浏览器里面浏览体验才较好。

 

其他关于Webapp导航的思考：

1、如果页面内容区域没有该页面的标题，应该在导航栏上体现该页面的标题，否则会让用户在浏览时迷失自己的位置

2、全局导航不宜藏得过深，解决方案通常有以下几种：

①左上方放网站logo，点击logo回到首页，首页提供全局导航。适用于首页板块划分清晰且包含所有版块的的网站。

或者点击导航按钮跳到一个专门的导航页面。适用于资讯、门户类版块繁杂的网站。

②顶部导航栏放一个下拉式导航菜单，默认隐藏，点击导航按钮时弹出

③侧边栏导航。这种形式现在应用很多，但是用户习惯还在培养当中。

④悬浮导航按钮，如淘宝的触屏版。优点是灵活，缺点是影响浏览体验。