网站多维度导航条的设计思路

2016-02-17 03:59 53 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享网站多维度导航条的设计思路吧。

【 tulaoshi.com - 平面设计 】

我们所说的多维度导航是指能够引导用户通过不同纬度:运营维度、商品自然属性维度、搜索等维度,快速浏览目标商品的导航,我们称之为多维度导航。

本次薯片会一改以往低调、沉稳之作风,先瑜伽团美女show上阵,再是以臭为首的吃喝团上阵,两轮下来大家情绪Hight到了极点,自然讨论的时候思维也是相当的敏捷,O(∩_∩)O!

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

本次薯片会以QQ商城网站为例,对多维度导航进行了深入探讨

我们所说的多维度导航

主要是指:能够引导用户通过不同纬度:运营维度、商品自然属性维度、搜索等维度,快速浏览目标商品的导航,我们称之为多维度导航。

以QQ商城为例:QQ商城的多维度导航主要分为2个维度:

网站多维度导航条的设计思路,PS教程,图老师教程网

1、运营维度:引导用户参与不同运营主题(每日抢购、当季新品等),从而关注商品,主题可根据需要定期更换;

2、商品自然属性维度:通过商品自然属性(分类、品牌等)引导用户浏览和购买;

为什么网站会使用多维度导航

A、让用户第一时间看到最新内容(每日特价、热销新品)

B、 希望用户通过不同主题参与网站活动(当季热卖、新店促销)

C、 利用商品或内容的相关性引导用户浏览(分类和品牌)

D、 让新手用户更加方便的找到目标

多维度导航的优缺点分析

目前多维度导航在很多B2C型电子商务网站中被使用,如:amazon.com、shop.qq.com、mall.taobao.com等等,多维度,其优点很明显:最新内容展示,多主题引导,快速定位商品,满足长期运营需求。但是也有其不足之处:

单一维度的导航,比较适合向新用户传递整个网站的信息架构,而多维度导航很难做到这一点.

网站多维度导航条的设计思路,PS教程,图老师教程网

网站多维度导航条的设计思路,PS教程,图老师教程网

多维度导航和面包屑一起使用时,在某些维度场景下会导致面包屑无法表意清楚商品的信息结构.

QQ商城多维度浏览_面包屑示意图

网站多维度导航条的设计思路,PS教程,图老师教程网

上图中我们可以发现,商品的信息结构是唯一的:即:【QQ商城 运动服饰/配件/包袋 运动包袋 双肩包 商品详情】,分析三个浏览维度的面包屑表意:

1. 从品牌维度浏览时,面包屑【QQ商城 李宁 运动服饰/配件/包袋 运动包袋】

其中李宁这个面包屑节点并不是商品信息结构中的节点,故此面包屑表意会有歧义;

2. 从分类维度浏览时,面包屑完整的表意了该商品的信息结构,表意很清晰;

3. 从运营维度浏览时,中间过程无面包屑。

针对上述第1点的问题,经过大家讨论后提出了优化方案:经过大家讨论后提出了优化方案:

QQ商城多维度浏览_面包屑示意图_优化后

网站多维度导航条的设计思路,PS教程,图老师教程网

1. 只有按分类维度浏览时,面包屑才时时完整表意商品信息结构

2. 按其他维度浏览时,一般不出现面包屑。除非用户选择了商品分类,此时才会出现商品信息结构面包屑:

网站多维度导航条的设计思路,PS教程,图老师教程网

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

总结

信息多维度的集中展示,必然带来用户认知的负担。既要降低用户的认知负担,又要能方便用户多维度快速找到目标商品,在设计多维度导航时需要我们去平衡。

另外多维度导航与面包屑混合使用时,也特别需要注意到面包屑的表意是否会造成用户对商品信息结构的错误认知,面包屑运要慎用。

来源:http://www.tulaoshi.com/n/20160217/1578284.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...

经验教程

209

收藏

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

如果您有什么好的建议或者疑问,可以联系我们。 商务合作QQ:3272218541;3282258740。商务合作微信:13319608704;13319603564。

加好友请备注机构名称。让我们一起学习、一起进步tulaoshi.com 版权所有 © 2019 All Rights Reserved. 湘ICP备19009391号-3

微信公众号