有效地简化导航-Part 2：导航系统.pdfVIP

有效地简化导航-Part 2 ：导航系统 小编导读 ：怎么才能做出一个既简洁而又具有预见性的导航 ？ Part 1里面说 ，前两步分 别是 ：组织内容 ，简化导航选项 ；解释这些选择 ，降低用户的认知障碍。 然而 ，我们还需要多做两步——选择正确的导航菜单形式 ，并设计出来。本系列 Part 2 将展示第三 步和讨论哪种导航菜单适应哪些内容。 界面上的导航菜单都为了给用户提供浏览内容的导航选项。这不包括 ，文章或商品页面里面的超 链接 ，因为它们的主要作用是流量 ，而不是导航。 主 （传统的 ）导航和次级 （备用的 ）导航之间是有区别的 ，但很难精确界定。有人说主导航主要是 通过点击、悬停来选择或浏览元素据类型 ，而次级导航 其中某方面有缺失。 传统的导航菜单 传统的导航菜单有以下5种类型 ，从简单到复杂排序 1. 菜单栏 2. 常规下拉菜单 3. 多栏下拉菜单 (Mega-menu) 4 . 分页 5. 动态过滤器 当然还存 更复杂的混合型方案 ，但是所有混合型导航都能拆解成以上5个类型。现 问题是什么 时候该选择哪种类型。 就像 Part 1说的 ，设计师用3种方式来解释导航选项 ：标签 ；标签+图 ；标签+图+描述。为了降低用 户的认知障碍 ，设计师应为目标用户提供提供足够的信息来让他们理解这些选项。 下面这条经验法则 (rule of t humb) 可以帮你决定什么时候选用哪条规则 ：越少的选项 ，需要解释的 就越少 ，所以导航应该尽可能简洁。 为什么有些 w idget 更易用 ，什么时候应该选择这个而不是那个…… 首先仔细看下这5种导航菜单。 菜单栏 几乎每个网站一个横向或竖直的栏来容纳顶级类别。 最基本的导航——一个横向或竖直的栏 建议 最重要或最频繁被访问的栏目或类别应该放到这个导航栏里面。 解释 一个导航栏是最简单的导航形式。这个导航栏里面的栏目或类别都是全局性的 ，可以直接被看见及 访问。相比之下 ，用回会悬停 一个下拉菜单或等待分页加载要访问的选项。 问题 导航栏 （横向或竖直 ）只能放下一小撮栏目 ，而且还受限于屏幕宽度和方向 ，它会占据本应该显示 主要内容的空间。 下面的截图中 ，会看到横向的导航也是很好用 ，它只占据一行空间。为了把它放到更小尺寸的屏幕 里面 ，设计师把导航堆砌 行里面 ，然而这样就会把主要内容压下去 ，用户就需要多滚动几次。 多列的导航就会变得很难用。 宽屏中 ，竖直的导航适用于更多的菜单栏目 ，但它有另一个缺点。它占据的竖直空间本可以更高 效地展示主要内容 ，文章、视频、商品信息……下面我展示并对比它们的效果。 竖直导航会束缚内容 宽屏中的展示效果。 这就是为什么下拉、浮动菜单更适合多栏目。它们可以根据需要来显示额外的栏目 ，把舞台让给 内容。 常规下拉菜单 下拉、浮动菜单 ，被触发的时候 ，就会出现 内容上面。它的条目都是竖直堆砌 一列里面 ，由文 字或文字+图标组成。 下拉菜单把所有条目竖直堆砌 一列里面。 建议 如果栏目可以很好地用文字表达 ，并且不会太长 ，一个常规下拉菜单是最简单而又有效的方案。 解释 与多栏下拉菜单相比 ，常规下拉菜单有如下优点 ： 快速加载 多栏下拉菜单需要更多的空间 ，而常规下拉菜单只需要少量文字。多栏下拉菜单还会干扰用户 ，至 少也会降低他们的浏览速度 ，因为他们需要花费时间来搞清楚这个布局。相比之下 ，一个简短的竖 直列表就很适合快速阅读和理解。 问题 如果菜单太长 ，整件事就会变得很奇葩。一个长的竖直下拉列表会被浏览器窗口切掉一部分 ，这就 需要用户不断滚动。有两个方法可以处理这个问题。 把表弄成子类别。但这个方法 ，如果交互设计得不恰当的话 ，从一个子菜单到另一个子菜单的导航 会让人沮丧。这个问题会 本系列的 Part 3 中说到。 第二个方法就是使用适合屏幕方向的多列下拉菜单。 如果屏幕空间是决定性因素 ，让菜单适应屏幕方向不错的变通方案。 多栏下拉菜单 (M GA- M NUS) 有一种很特别的下拉菜单叫做多栏下拉菜单。多栏下拉菜单就是下拉或浮动菜单 ，但它并不是用一 列条目堆砌起来 ，而是用图片、印刷上的层级、不同的图层来显示选项。 多栏下拉菜单就是一个更大、更复杂的下拉菜单。 建议 如果选项需要文字+图片 ，那多