Amazon购物列表页引申:单一维度和多维度的导航结构(组图)
优采云 发布时间: 2021-05-16 21:23Amazon购物列表页引申:单一维度和多维度的导航结构(组图)
可以说亚马逊是在线产品导航的发起者。让我们看一下亚马逊导航风格的特征。
看看谁最像?
5)亚马逊购物清单页面
从亚马逊购物清单页面扩展讨论:
一维和多维导航结构
我们通常将面包屑导航视为一维导航结构,如上方的红色实线框所示,即它是一种线性导航方法。但是,在Web应用程序中,有两种“面包屑”导航应用程序:
a)“追溯”是指跟踪用户的行为,这是一种“线性导航”,可在网站中记录用户的活动足迹,
b)用于表示内容归因关系的界面元素,即我们经常看到的“主要类别>第一类别>第二类别>第三类别>……>最终内容页面”的分层归因关系。
网页左侧的导航已更改,以提供多个导航维度,并且这些多个维度可以组合为不同级别的面包屑结构
例如,我想购买一台液晶平板电视,我进来了:
电子产品›音频和视频›电视和高清电视›平板电视›平板液晶电视
在此页面上,左侧导航为我提供了多种选择,例如品牌,供应商,价格,显示尺寸...等。
我可以先选择品牌,然后再选择尺寸,例如:
您还可以先选择尺寸,然后再选择品牌,例如:
因此,此方法为用户提供了多维导航。例如,用户可以在电器超市中选择产品,而不必考虑是否向购物指南询问什么品牌或大小合适。这符合用户的心理模型,值得在设计中学习。
网站导航设计中需要注意的问题和基本原理
我们讨论了网站小组日常需求中的导航交互设计,并总结了网站导航设计中需要注意的几个问题和基本原理。
1.导航栏的位置。主导航栏的位置应靠近网页的顶部或左侧。如果由于内容过多而需要进行子导航,则用户必须轻松地区分哪个主题的主导航栏和子导航栏。
2.导航的简便性。导航的使用必须尽可能简单,避免使用下拉菜单或弹出菜单导航,如果无法使用,则菜单级别不应超过两个级别。
3.面包屑导航。用户应该知道当前正在浏览的网页是什么,以及与当前正在浏览的网页相关的网页,例如,通过辅助导航“首页>新闻频道>新闻全名”,可以找到其所在位置的文字描述网页,同时与导航配合突出显示颜色,可以达到可视化教学的效果。
4.导航内容明显不同。导航或主题的类别必须明确,以免引起用户混淆,并且如果存在需要突出显示主要网页的区域,则其视觉上应与一般网页有所不同。
5.导航和排序之间的区别。导航和排序很容易混淆,您需要注意(请参阅图片指出问题)
此处的标签是用于导航还是排序?
在Google Reader上处理
6.准确的导航文本描述。用户在单击导航链接之前已经对他们要查找的内容有一个大致的了解,并且链接上的文字必须准确地描述该链接所到达的网页的内容。