首页 > 网页教程 > 设计分享 > 电子商务网站如何设计高效易用的网站左侧导航树

电子商务网站如何设计高效易用的网站左侧导航树

时间:2011-09-27    作者:Jjacy   来源:四海商舟用户体验设计

无论是B2B网站还是B2C网站,左侧导航树使用的频率都比较高。当导航树中存在二级甚至三级分类时,往往在设计上就会开始变得复杂。因为不仅有可能需要一个按钮或符号来控制导航树的收缩与展开,也要考虑当前选中的分类状态、曾经浏览过的分类状态以及不同级别分类之间的区分。在这样一种情况下,设计师往往有可能忽略这些细节,从而导致错误的隐义。

首先来看导航树的收缩与展开,目前在我们的项目中经常能看到下面左图中的设计,收缩和展开的icon被放到了分类名称的后方,但是这样的设计往往会传递给用户错误的信号,他们会误以为这是一个外部链接,如下面右图CNN的导航标签所示。

为了照顾更多用户的理解和使用习惯,我寻找了几种主流PC操作系统中的左侧导航树的设计案例。首先是Windows XP,左侧导航的收缩与展开了采用了加号和减号的方法,icon放在分类名称左侧。其次是Mac OS,左侧导航的收缩与展开采用了小三角的表示方法,三角朝左表示分类收缩状态,三角朝下表示分类展开状态。Win7的左侧导航和Mac OS类似,只是分类展开时的小三角是斜向下的。最后是谷歌文档的左侧导航的设计案例,只是小三角的样式有所改变,其余状态均和Mac OS一致。

对以上案例总结后不难看出,不管采用什么icon来表示展开和收缩的符号,一般都以放在分类名称的左侧为宜,放在右侧会让用户误以为是外链。其次加号减号以及小三角都是常用的icon形式。最后要说明的是,分类名称在对齐上的缩进处理可以很好的体现出分类之间的层级关系,建议在设计的时候借鉴这种方式来表现不同分类间的层级关系。

相关推荐
网站导航设计、架构与信息的探讨
10个优美精致简约风格的导航菜单欣赏及点评
30款别出心裁颇具创意的网站导航设计案例欣赏
如何创建出色的web导航设计?
优秀网站设计之页面导航原则
25种漂亮而又具创意的酷站导航菜单赏析
10个国外创新的垂直网页菜单设计案例赏析
爱不释手的侧边栏!网站导航应该去一边玩儿
20个创意极佳设计独特的网站导航条赏析
网站导航设计指南:如何做有吸引力的网站?
50款漂亮有趣的导航菜单设计欣赏
19个简洁风格创意的网页侧边栏菜单设计欣赏
Android应用开发教程:最常见的十大导航设计错误!
移动应用导航设计如何用魅力来征服用户?
APP导航设计:不要在移动端菜单设计犯这些错误
最新创意网页导航设计趋势和案例大搜罗
底部导航设计、Box元素、竖线元素3种最新网页设计趋势
界面设计解读:UI导航设计不仅仅指的是导航栏
设计分享:利用「导航法则」,预知需求管理始末
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解

精彩推荐

热门教程