评判国内商城网站的导航条设计

2016-02-17 04:02 2 1 收藏

今天图老师小编要跟大家分享评判国内商城网站的导航条设计,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - 平面设计 】

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

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

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

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

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

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

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

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

评判国内商城网站的导航条设计,PS教程,图老师教程网

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

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

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

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

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

评判国内商城网站的导航条设计,PS教程,图老师教程网

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

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

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

OK,案例观摩完毕,分析一下为什么会出现上面的问题?

很简单,我觉得就是没有把一个东西做到极致,随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些(洗衣机、平板电视)其实并不是标签,但是,他们在展现上跟标签一模一样(京东使用了灰色字体,说明他们意识到了这不是标签,但是我觉得还不够)。

解决方案?

请参见Amazon的做法。

把那些长得像标签的家伙砍掉,使之不具备标签的属性,换成文字描述就OK了。

最后,几句题外话:

1)不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的?我仔细看了一下,似乎是程序直接调用而不是经过人工编辑的?如果是让程序来调用这个黄金地段的内容,那就真太可惜了。

2)京东商城在首页左侧主导航里的一级分类都是可以点击的(如数码手机),但是在全部分类页面却变成了不可点击的,Why?

3)QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的,但是这种标签式的展示让我很挫败,比如我想买个棒球帽,结果找了半天只发现个类似的运动帽.

4)最后, 大熊哥主导的淘宝商城在此次主导航比拼中最终胜出!

来源:https://www.tulaoshi.com/n/20160217/1578313.html

延伸阅读
标签: flash教程
  效果如下: 准备工作: 1.新建一个名为item_BG的影片剪辑~ 在item_BG中添加一个矩形块,大小大概就和按钮的大小差不多,具体自己调~ 然后将item_BG该影片剪辑的链接名称命名为'mblock' 2.新建一个名为item_EN的影片剪辑~() 在item_EN中添加一个动态文本框,将实例名称命名为'itext...
标签: Web开发
    创建导航条     如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用。按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:(导航条在页面顶部)     “鼠标经过图像”是当访问者用鼠标指针指向该图像时,该图像发生变化。   ...
photoshop设计导航条:黑色蓝色光影效果,提示,简单入门,适合新手练习 最终效果 第一步:基本要领 创建新的psd文档,宽度700px,高度160px,背景色以黑灰色(#2b2b2b)填充。 新建图层,图层属性为“导航条”,选择圆角矩形工具,设置前景色为黑色(#000000)如下图一样画一矩形条(长度和宽度可自行处理)。 第二步:设置tulaoshi.c...
让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,而另一个能对用户起到很好引导作用的就是网站的导航功能,所以这篇文章主要分析用户对网站导航功能的使用情况,并在此基础上合理地优化网站的导航设计。 之前已经介绍过为了让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,而另...

经验教程

616

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部