快好知 kuaihz订阅观点

 

说说那些商城的导航

本文主要想表达的内容是:如果某个组件具有某个属性,那就把这个属性发挥到极致;如果某个组件不具备某个属性,那么就不要把它伪装成具备这个属性,并用这个属性来诱奸用户。

简单说,设计就是要解决问题,这是设计的本质与落脚点。

电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是,告诉用户如何快速准确的到达他想要去的任何地方。

在所有电子商务网站中,Amazon(注意,不是卓越亚马逊)的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧,从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航,相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度,在第一屏的时候就能把所有商品大类全部暴露出来,降低了用户的寻找成本。因此,这种模式的导航被越来越多的电子商务网站所接受。

大约在1年前,QQ商城改版,借鉴了Amazon的这种导航模式,同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目,同时还展示了品牌,这使得整个主导航从纵向上进一步缩短同时往横向上扩张。

随后而来的京东商城和淘宝商城(扩展有分类推荐与品牌推荐)以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。

不过,我觉得这种创新在某些交互细节上有待改进,我们先来看一下QQ商城的主导航截图:

QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。

从这个表现形式上看,“运动鞋”、“棒球帽”是2个标签,我这么认为是没问题的吧?

我们假设这样的一个场景:你来到QQ商城,很明确的就是想购买“棒球帽”,你肯定是会直接奔去点击“棒球帽”(注意,是点击)。因为这个“棒球帽”长的跟一个标签一模一样,我们之前的Web使用经验告诉我们,标签就意味着是带超链接的,是可以点击的。可是,当你把鼠标移到“棒球帽”这个标签上的时候,你发现,他是个伪娘!

你点击了半天,发现没有反应,你再仔细一看,他引导你打开了整个“运动户外”下的二级分类….这个时候,你的鼠标需要在做一次长途奔袭,去弹出来的弹层里寻找“棒球帽”,当然,你还得小心点别奔袭到界外,不然整个弹层就关闭了,你需要再来一次(图中虚线)。

这个场景里,我们经过几个动作:1、准备点击;2、无数次点击后觉醒;3、鼠标小心翼翼的滑过弹层去寻找;4、点击。

P.s:其实,图中这个例子我们在弹层里也找不到“棒球帽”,因为它被变异成了“运动帽”?

我们再来看京东商城和淘宝电器城(注意,不是淘宝商城)。

其实跟QQ商城差不多,只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候,鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时,“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。

这个场景里我们经过的动作:1、准备点击;2、发现要点的家伙没了,开始寻找;3、点击

从这个意义上讲,我认为,京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路:点击,拼命的点击、鼠标奔袭到弹层;而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙,我只有一个道路:鼠标奔袭。

有的时候,给用户越少的选择更能让用户集中起来完成目标任务。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:说说那些商城的导航  说说  说说词条  那些  那些词条  导航  导航词条  商城  商城词条  
设计

 地图产品:如何提高搜索效率?

在用户的认知模型中,“用地图搜索地点”是一个简单到无感知的操作,总共分两步:输入关键字,找到目标地点(比关大象还简单)。就是这简单的两步背后,地图做了很多设计,...(展开)

设计

 手机客户端交互适配设计之我见

简摘:本文从手机平台、机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则。手机客户端软件虽只是手机中一个功能,但它却要比设...(展开)