商城手机版底部菜单栏设计浅谈

随着WebApp的流行,越来越多的网站开始设计自己的手机端适配界面,甚至有些项目一开始就是手机端适配Web界面。商城的目标就是卖出东西,因此如何设计,是产品设计师们应该思考的问题。本文通过几个典型的案例,来看看一些知名的商城手机端和手机版web是怎么设计的。

工具栏式的菜单栏导航

最早的工具栏式菜单来自于手机APP,2009年微博火了之后,使用触屏手机操作软件界面大大解放了软件界面设计中的局限,微博最初在屏幕底端用一条黑色的导航菜单来切换微博列表、好友、搜索功能等,随后大部分有这种切换需要的软件都这样设计,例如最初的QQ和微信。而这种方式一直被沿用至现在的几款重要的商城APP。

Screenshot_2014-08-23-22-43-36

京东手机客户端的底部菜单导航

京东手机客户端采用传统的底部切换模式,在它的5个菜单项中有一个“故事”的菜单项,类似于导购,通过故事来引导用户购买。

Screenshot_2014-08-23-22-43-54

天猫手机客户端底部菜单按钮

天猫则更冲动,同样5个菜单项,“关注”“范儿”两项社会化菜单。

底部菜单项非常合理的解决了软件内部不同功能或模块之间的切换,但是问题是,这样就占用了屏幕的空间,如果是web界面,屏幕还可能为浏览器留出位置,例如微博、微信内置浏览器,这样子留给真正展示商品的空间就很少。有人为了解决这个问题,对菜单进行了改进。

抽屉式菜单栏导航

抽屉式就是菜单可以通过一个开关按钮显示和隐藏,类似抽屉的拉出与关拢。最早的抽屉应该是人人网客户端发明的,通过点击左上角的一个菜单按钮,整个屏幕的左侧划出一列菜单,主体部分顺势右滑,效果还不错。不过这种左侧抽屉菜单很快被淘汰,人人网也改用了微博一样的底部菜单。抽屉菜单进化后变成了淘宝手机版的形式(如下图):

Screenshot_2014-08-23-22-47-39

淘宝的抽屉菜单(关闭状态)

Screenshot_2014-08-23-22-47-54

淘宝抽屉菜单(展开效果)

这一菜单形式在多款应用中被使用,特别是国外的一些APP,当然了,发明者肯定不是淘宝,但这种菜单真的很酷炫。除了这种酷炫的展开方式之外,还有一些道理差不多,但方式不同的。

Screenshot_2014-08-23-22-59-52

当当网的菜单(展开效果)

Screenshot_2014-08-23-22-42-35

Screenshot_2014-08-23-22-42-48

上图的菜单在收起时只在左下角漏出一个按钮,展开时和前面的底部工具栏式的菜单相同,也是我所见到的一种折中方式。这种菜单的有点自然是节省屏幕空间,但缺点也很明显,就是用户无法从被收起的抽屉开关按钮判断有哪些功能菜单,从操作上讲,也需要进行两步操作——展开菜单、点击菜单——才能完成页面切换,较为复杂。

不需要菜单栏

随着商城概念的进一步发展,一些公司竟然选择在web上不需要导航菜单。道理很简单,用户来这个页面,目标就是让他买东西,下单走人,没有必要让他花更多的时间来切换菜单。如果做得好,用户自己会想尽办法去探索商城中的各个角落,找到自己喜欢的商品。而且对于公司来说,只需要把最具有吸引力的排在首页即可,因为他们希望这些放在首页的商品就可以形成最终的盈利点。

Screenshot_2014-08-23-22-50-46

聚美优品的手机版web

Screenshot_2014-08-23-23-23-42

京东商城手机web界面

亚马逊中国也没有做类似的菜单导航,聚美是这里面唯一一个让UC浏览器进入应用模式的,也就是说进入聚美优品的网站就会占据整个手机屏幕,没有导航菜单,让整个界面表达了更多的内容。从聚美优品的布局来看,它甚至有一点导购的味道,通过通栏的图片展示,让用户对某些商品的认知更加深刻。

小结

从上面的这些案例中来看,我们很难判定到底哪一个更好,哪一个不好,因为他们都是非常出色的商城,我们目前根本还没有资格去指点。即便是京东,它的客户端和web的界面几乎是一摸一样,唯一的不同就是web没有底部的导航菜单用来切换。如果说web版可以完全满足用户,而且用户大部分人都去用,那么底部的菜单看上去根本就没有必要了。但是京东在自己的客户端中又加入了导航,明显自有其目的。

在自己的项目设计中,有的时候我们追求酷炫,有的时候追求一种我们自以为是的“实际上用户更喜欢。。。”,我想说的是,实用才是根本。对于用户而言,只需要他们能用最短的时间明白自己应该怎么操作,在这个基础上,设计者才有空间去思考如何表达的更丰满。

2014-08-24