关于导航的探讨(2)_网页设计教程

推荐：网站设计的原理
ToneandTexture色调与结构Thisspecificallyappliestodrawingsmorethanphotography,buttoneandtextureareveryimportant.Tonereferstoshad

4）Amazon首页

看看它和谁最像？

5） 购物列表页面

单一维度 和 多维度的导航结构 （Amazon购物导航）

我们通常认为面包屑导航为单一维度的导航结构，如上图红色实线框所示，即它是一种线性的导航方式。不过在网页的应用中，“面包屑”导航的应用有两种：

• “追溯来路”即跟踪用户行为，记录的用户在网站的活动足迹的一种“线性导航”，
• 用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的层级归属关系.

而改网页左侧的导航却提供多种维度的导航，且这多种维度可以组合成不同层级的面包屑结构
如，我想买一台LCD平板电视，进到了：
Electronics ? Audio & Video ? TVs & HDTVs ? Flat-Panel TVs ? Flat-Panel LCD TVs
在这个页面上，左侧导航给我提供了品牌、供货商、价格、显示屏尺寸……等多种选择。

我可以先选品牌再选尺寸，如：

也可以先先尺寸再选品牌，如：

因此这种方式为用户提供了多种维度的导航，运行用户如在电器超市随意逛逛挑选商品，而不必考虑该先问导购员有什么品牌还是问有什么尺寸好。这一点符合用户的心理模型，值得设计中借鉴。

网站导航设计需要注重的问题及基本原则：

我们就网站组日常需求中，有关导航的交互设计工作进行了交流，总结出在网站导航设计中需要注重的几点问题，及基本的原则。

1. 导航条的位置。主导航条的位置应该在接近顶部或网页左侧的位置，假如因为内容过多需要子导航时，要让用户轻易地分辨出哪个是主导航条，哪个是某主题的子导航条。
2. 导航使用的简单性。导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航，假如没办法一定得用，那么菜单的层次不要超过两层。
3. 面包屑导航。应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么，例如通过辅助导航“首页 > 新闻频道 >新闻全名”里的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。
4. 导航内容明显的区别。导航的目录或主题种类必须得清楚，不要让用户困惑，而且假如有需要突出主要网页的区域，则应该与一般网页在视觉上有所区别。
5. 导航和排序的区别。导航和排序轻易混淆，需要留意（看图指出问题）

这里的tab是导航还是排序？

Google Reader上的处理

6. 准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。

分享：何时用按钮，何时用链接
同事MM问了我这个问题，感觉忽然问了我一个简单的用脚趾头都能答出来的问题，因为这两个东西太常见，太普通了。但，我竟然不知道该如何回答。想了一下，给了一