狠狠撸

狠狠撸Share a Scribd company logo

网页控件规范

?
?
Kainy
Kainy

网页控件规范是由大脸撰写对于网页控件交互规范的一系列文章，此规范能够帮助设计师快速的生成设计稿，提高工作效率，帮助网站达到标准化和一致性，有效的提高用户体验。 由于原发布与google doc被墙，镜像一份于此， 源地址：http://www.userkon.com/labs/web_widget_guildline 。

1 of 12
控件名称：导航 Navigation 定义 导航的出现是因为在一个页面中无法同时展现那么多的内容。 他提供给用户方便的页面与页面之间跳转的链接；他表现着页面与页面，页面和内容的关系；是多个链接 （Link）的集合。链接之间保持结构、排序、样式的一致性。 导航的呈现方式有：横排，纵列，下拉菜单以及标签。 目标 ? 告诉用户他们在哪里。 ? 告诉用户可以去哪里，并提供路径前往。 ? 告诉用户已经去过哪里。 ? 告诉用户目标是远还是近。 ? 当用户需要寻找信息时，导航应提供最有效的帮助。 任务 ? 体现站点的层级和权重关系。 ? 站点入口的集中整合呈现。 ? 站点信息分类的精简体现。 分类 根据导航的具体功能和对信息分类方法，我们把导航分为以下几类，这种区分影响着导航的信息，排列， 位置和样式。 导航有以下分类： 全局导航 Global navigation 表现整个站点最基本的权重结构，几乎出现在站点内所有页面中的元素（除一些独立页面外）。 用户使用它可到达站点主要分类地点。 全局导航不一定要尊重站点的结构树。全局导航深度不能超过 2 级。 控件规范：导航 Navigation 1 / 12
图 1 全局导航结构树指示 图 2 亚马逊全局导航 局部导航 Partial navigation 局部导航是对上级导航的补充；提供上级导航某个分类的兄、子级别的路径，用户使用它可到达 目前位置附近地点的路径。 因为全局导航的浅度要求,局部导航承载着更多的导航任务,导航的体验的优秀很大程度由局部 导航决定。 控件规范：导航 Navigation 2 / 12
图 3 局部导航结构树指示 图 4 苹果商城左侧局部导航 辅助导航 Assistant navigation 提供用户在不同页面的直接跳转，用户使用它可到达任意页面（理论上），辅助导航无需关注结 构，排序等，其样式要求比较宽松。 控件规范：导航 Navigation 3 / 12
图 5 辅助导航结构树指示 图 6 苹果站点内热销榜单的辅助导航 上下文导航 Context navigation 上下文导航是提示用户当前地点同级附近地点的元素。用户使用它到达当前页面的同级页面。它 包含着信息的排序和优先级。我们常见的页面导航（Page navigation）也属于上下文导航。 控件规范：导航 Navigation 4 / 12
图 7 兄弟导航结构示意图 图 8 网页中常见的兄弟导航链接 产物导航 Product navigation 产物导航帮助用户到达站点的其他 web 应用或者服务，他出现的原因是用户需求增长以及产物整 合的需要。 因为大部分 web 应用需登录使用，它常与用户账号操作区域出现在相近的位置。 图 9 Google 基于办公的产物导航 控件规范：导航 Navigation 5 / 12
图 10 Google 基于搜索的产物导航 异类导航 X-navigation 为了突出站点的某种分类，同时保持导航的浅度，会把该分类以另外一种方式呈现出来。 图 11 异类导航在结构树的体现 图 12 土豆网右侧的“频道”导航1 1 确切来说这条导航应该属于左侧的主导航的“频道”分类。 控件规范：导航 Navigation 6 / 12
交互规范 概述 ? 导航用于站点页面之间的跳转，如果是页内的跳转，请使用描点或者 tab。 ? 因为内容，所以导航。先确定内容，后产生导航。 内容 分类方法 导航 图 13 导航是内容按照分类方法梳理的体现 1 ? 导航只适用于需要对信息进行分类的站点。不适合单页面站点以及不要跳跃阅读站点。 2 ? 导航表现站点结构树，但不必完全相同，导航必须保持浅度结构。 3 ? 导航的分类应是保持固定，能得到普遍任何且包含一定逻辑性与相关性。 ? 信息类站点，禁止用户自定义导航。应用类站点，用户自定义的分类建议采用树状图。 4 ? 无论在任何页面，全局导航都应提供返回最初页面的路径 。 5 ? 导航为文字链接的集合，列表排列，不可采用按钮，图片 ，或者纯图标方式。 表现 ? 导航只存在横排和纵列两种排列方式。导航不可夹杂于内容信息当中。 ? 横排导航权重关系从左到右依次降低，但用户并不像阅读段落那样从左到右的视线移动，往 6 往会产生跳跃，这就意味着导航最后一个项目权重会出现跃升。 图 14 横排段落：权重由左到右依次降低 1 指的是单独的宣传页面，或者是需要用户一步步操作或者阅读完毕的页面。 2 最大 2 级，不可超过 3 级。如果是 3 级，建议直接显示。 3 比如采用国际化标准分类或得到大众普遍认可的分类。不可以自定义。 4 这种路径指的是“首页”链接。 5 在某些对视觉要求较高的情况下，会使用图片模式，但在 DOM 中依然保留标准化结构，方便搜索引擎收录。 6 对于最后一个项目的权重跃升，这个项目在很多情况下并不属于左侧的分类。如： “个人信息” “设置” 控件规范：导航 Navigation 7 / 12
图 15 横排导航：权重由左到右依次降低，最后出现跃升 ? 对于纵列导航，因为用户的横扫习惯，由上至下保持了一个简单的权重递减，顶部的权重最 高，底部权重最低。 图 16 纵列导航：权重从上至下依次降低 ? 越浅的导航越有效，用户能够方便的最快找到想要的信息。为了保持导航的浅度，有时候需 1 打破网站栏目之间明确的从属逻辑，压扁导航。 图 17 一个二级导航被压扁，成为浅度导航 1 因此，在现有的网站结构当中，导航并不是对网站从属逻辑的最优体现。 控件规范：导航 Navigation 8 / 12
1 ? 对于全局和局部导航而言，它们需通过改变具体的某个链接样式来表示用户当前的位置 。 图 18 导航处“经销商与加盟”应该是凹陷状态 ? 页面的主导航一般深度为二级，一个页面内不能同时存在两个或两个以上的二级导航。 ? 导航的文字应是精简而易于理解的短语。勿使用疑问，否定语气。不超过 6 个汉字，实在无 法精简可使用自创名词或缩写。 ? 分类 5 个以下建议采用标签式，5-15 个建议采用横向列表，超过 15 个建议采用纵向列表。 ? 如果需要强调逻辑性和从属关系，可以使用下拉菜单和标签。 ? 当信息的分类较深时，建议取消导航，或只保留浅度导航，采用树状图。 ? 当信息的分类宽而深时，建议取消导航，或只保留浅度导航，重点突出搜索，同时建议采用 分面搜索。 ? 导航上同等级别的链接必须采用统一的样式，需要突出的某个链接与其他应保持较大的一致。 ? 导航上的文字应为链接或者块状样式，不可采用按钮，或者纯图标方式。 ? 导航上链接的激活方式应为“点击”，而不是“划过（Hover），导航上的链接除一些其他站 ” 点外链之外，都必须是在当前页面打开。 ? 对于全局导航而言，他必须是一个通栏或者封闭式设计。以此将它与页面内其他元素区分开 1 这个位置无需像面包屑那样表示如此清晰，至少应该体验当前位置的顶级位置或者是父级位置。 控件规范：导航 Navigation 9 / 12
来。 DOM ? 导航一般为文字链接（Link）的形式，与链接的区别是，导航上的文字不需要默认下划线 （text-decoration:underline;） ，无需写 title，感应区域为大小相同的块状。 ? 导航使用<ul><li><a></li></ul>结构，如果需要圆角背景等效果,可在 li 标签内使用行内 元素 span,strong,em 等。 1 ? 导航不能含有自身链接 。 ? 文字链接导航无需默认设置 underline，但需要定义 hover 或者 actived 效果。 ? 除一些全动画站点之外，禁止使用纯 Flash 导航。 ? 所有导航，禁止使用 hover 激活方式。 ? 导航链接感应区域应设置为 block，而不是只感应文字区域。 2 ? 在 CSS Naked 模式下，导航须保持好的身材 。 对比 导航与站点结构树的关系？ 从信息结构上来讲，按照严谨的分类，每个网站结构都可以用一个结构树来表示。 在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让 逻辑清晰，但是这个结构树可能非常的宽而且深。在这种情况下，如果导航依然保持与结构树的 对应显示，显然会与其浅度要求产生冲突。 一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。 事实上无论横排导航还是纵列导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以。 这种好处是用户更快找到自己想要的内容，但也打破了导航的结构树体现。 无论从那种角度上来说，用户并不需要了解网站具体的结构树，导航也不必完全照着结构树来体 现，以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。 上下文导 树状图 面包屑 全局导航 局部导航 辅助导航 航 图 19 对于信息分类体现度的示意图 1 自身链接，指的是链接到当前页面的链接。点击之后与重新刷新（F5）当前页面相同。 2 好的身材，指的是好的结构，在 css Naked 下也能清晰且包含逻辑关系。 控件规范：导航 Navigation 10 / 12
导航与面包屑的区别？ 导航是告诉用户可以去哪，面包屑是告诉用户现在在哪。 面包屑比导航更注重信息的分类以及从属关系，面包屑可以告诉用户当前页面的父级元素以及进 入路径，导航则不可以。导航只能大致体现用户的当前位置。 全局导航和局部导航在大部分情况下依然还是遵从站点结构树，因此，不少站点选择了将到会与 面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。 导航与面包屑如何结合？ 导航与面包屑的最有效结合就如 Vista 内路径条一样。但是所有的这些结合，都是建立在信息架 构足够清晰、足够稳固同时又足够灵活的基础之上的。 图 20 Vista 系统的路径条 如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋，导 航与面包屑的集合也变得毫无作用；这方面的典型就是门户网站。 如果你的网站结构够清晰，内容也够稳定，那么极有可能是公司或个人网站，对于这种站点，这 种结合则显得非常的高效和优秀。 导航与其他相关元素的结合于区别？ ? 实用工具（Utility） 实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素：用 户登录，帮助信息，对于我们等。实用工具能够有效的帮助我们怎么使用站点；通常，全局 导航附近会出现 4-5 个实用工具。 ? 网站标志（Logo） 网站标志，导航，面包屑都能够告诉用户当前在什么位置，仅仅只是详细的区别。通常，网 站标志与全局导航共同存在，并且会出现在其右侧。网站标志同样提供一个和全局导航相同 控件规范：导航 Navigation 11 / 12
的路径：回到首页。但这不意味着，导航可以取消此路径。 ? 搜索栏（search Bar） 海量的信息将会使导航不堪重负，搜索似乎是现有的最佳解决办法。对于超大型站点而言， 导航很大程度上已经失去作用，搜索成为最重要的路径提供工具。导航仅仅只会按照信息的 物理属性而对其进行辅助。 搜索栏与导航同样都告诉用户可以去哪里，为用户提供进入站点路径；搜索栏因此会出现在 导航附近区域。如，全局导航右侧。 如何导航用户生产的信息？ Web 应用当中，对于用户生产出来的信息，除了提供简单的默认分类之外，大部分应用是提供用 户自定义分类的。当用户选择自定义分类时，导航条则不属于这种应用场景1。更多的采用的是标 签云（Tags Cloud），树状图（Tree）或者链接列表（link list）样式。 如何看待“三次点击“原则? 谓的“三次点击”原则，是站内的链接的一个指导原则，让网站“链接结构”扁平化。从首页开始， 网站内的内容经 3 次点击即可到达。 如公司站：首页 -> 产物列表 -> 产物页(2 次) 如资讯站：首页 -> 频道 -> 栏目 -> 内容 (3 次) “三次点击”原则要求必须将信息架构尽量压扁，当遇到海量信息，问题出现了：扁平的信息架 构造成了冗长的内容列表，对于导航而言，这有可能导致链接列表项目非常的多，反而不利于用 户检索信息。 我们可以看到，“三次点击”原则提供了网站设计的一个重要的参照规范，他的不适用只限于超 大型信息站点（如 163.com），如果恪守原则的话，用户往往需要进行“内容-列表-内容-列表-”的拨 浪鼓式操作。要缩短浏览路径，就必须要建立“内容-内容”的信息关联，建立信息闭环2。 1 对于系统默认的分类依然可以使用导航条。 2 可参考 http://www.hozin.com/Point/200908/Information-Closed-Loop.html 控件规范：导航 Navigation 12 / 12

More Related Content

网页控件规范

  • 1. 控件名称：导航 Navigation 定义 导航的出现是因为在一个页面中无法同时展现那么多的内容。 他提供给用户方便的页面与页面之间跳转的链接；他表现着页面与页面，页面和内容的关系；是多个链接 （Link）的集合。链接之间保持结构、排序、样式的一致性。 导航的呈现方式有：横排，纵列，下拉菜单以及标签。 目标 ? 告诉用户他们在哪里。 ? 告诉用户可以去哪里，并提供路径前往。 ? 告诉用户已经去过哪里。 ? 告诉用户目标是远还是近。 ? 当用户需要寻找信息时，导航应提供最有效的帮助。 任务 ? 体现站点的层级和权重关系。 ? 站点入口的集中整合呈现。 ? 站点信息分类的精简体现。 分类 根据导航的具体功能和对信息分类方法，我们把导航分为以下几类，这种区分影响着导航的信息，排列， 位置和样式。 导航有以下分类： 全局导航 Global navigation 表现整个站点最基本的权重结构，几乎出现在站点内所有页面中的元素（除一些独立页面外）。 用户使用它可到达站点主要分类地点。 全局导航不一定要尊重站点的结构树。全局导航深度不能超过 2 级。 控件规范：导航 Navigation 1 / 12
  • 2. 图 1 全局导航结构树指示 图 2 亚马逊全局导航 局部导航 Partial navigation 局部导航是对上级导航的补充；提供上级导航某个分类的兄、子级别的路径，用户使用它可到达 目前位置附近地点的路径。 因为全局导航的浅度要求,局部导航承载着更多的导航任务,导航的体验的优秀很大程度由局部 导航决定。 控件规范：导航 Navigation 2 / 12
  • 3. 图 3 局部导航结构树指示 图 4 苹果商城左侧局部导航 辅助导航 Assistant navigation 提供用户在不同页面的直接跳转，用户使用它可到达任意页面（理论上），辅助导航无需关注结 构，排序等，其样式要求比较宽松。 控件规范：导航 Navigation 3 / 12
  • 4. 图 5 辅助导航结构树指示 图 6 苹果站点内热销榜单的辅助导航 上下文导航 Context navigation 上下文导航是提示用户当前地点同级附近地点的元素。用户使用它到达当前页面的同级页面。它 包含着信息的排序和优先级。我们常见的页面导航（Page navigation）也属于上下文导航。 控件规范：导航 Navigation 4 / 12
  • 5. 图 7 兄弟导航结构示意图 图 8 网页中常见的兄弟导航链接 产物导航 Product navigation 产物导航帮助用户到达站点的其他 web 应用或者服务，他出现的原因是用户需求增长以及产物整 合的需要。 因为大部分 web 应用需登录使用，它常与用户账号操作区域出现在相近的位置。 图 9 Google 基于办公的产物导航 控件规范：导航 Navigation 5 / 12
  • 6. 图 10 Google 基于搜索的产物导航 异类导航 X-navigation 为了突出站点的某种分类，同时保持导航的浅度，会把该分类以另外一种方式呈现出来。 图 11 异类导航在结构树的体现 图 12 土豆网右侧的“频道”导航1 1 确切来说这条导航应该属于左侧的主导航的“频道”分类。 控件规范：导航 Navigation 6 / 12
  • 7. 交互规范 概述 ? 导航用于站点页面之间的跳转，如果是页内的跳转，请使用描点或者 tab。 ? 因为内容，所以导航。先确定内容，后产生导航。 内容 分类方法 导航 图 13 导航是内容按照分类方法梳理的体现 1 ? 导航只适用于需要对信息进行分类的站点。不适合单页面站点以及不要跳跃阅读站点。 2 ? 导航表现站点结构树，但不必完全相同，导航必须保持浅度结构。 3 ? 导航的分类应是保持固定，能得到普遍任何且包含一定逻辑性与相关性。 ? 信息类站点，禁止用户自定义导航。应用类站点，用户自定义的分类建议采用树状图。 4 ? 无论在任何页面，全局导航都应提供返回最初页面的路径 。 5 ? 导航为文字链接的集合，列表排列，不可采用按钮，图片 ，或者纯图标方式。 表现 ? 导航只存在横排和纵列两种排列方式。导航不可夹杂于内容信息当中。 ? 横排导航权重关系从左到右依次降低，但用户并不像阅读段落那样从左到右的视线移动，往 6 往会产生跳跃，这就意味着导航最后一个项目权重会出现跃升。 图 14 横排段落：权重由左到右依次降低 1 指的是单独的宣传页面，或者是需要用户一步步操作或者阅读完毕的页面。 2 最大 2 级，不可超过 3 级。如果是 3 级，建议直接显示。 3 比如采用国际化标准分类或得到大众普遍认可的分类。不可以自定义。 4 这种路径指的是“首页”链接。 5 在某些对视觉要求较高的情况下，会使用图片模式，但在 DOM 中依然保留标准化结构，方便搜索引擎收录。 6 对于最后一个项目的权重跃升，这个项目在很多情况下并不属于左侧的分类。如： “个人信息” “设置” 控件规范：导航 Navigation 7 / 12
  • 8. 图 15 横排导航：权重由左到右依次降低，最后出现跃升 ? 对于纵列导航，因为用户的横扫习惯，由上至下保持了一个简单的权重递减，顶部的权重最 高，底部权重最低。 图 16 纵列导航：权重从上至下依次降低 ? 越浅的导航越有效，用户能够方便的最快找到想要的信息。为了保持导航的浅度，有时候需 1 打破网站栏目之间明确的从属逻辑，压扁导航。 图 17 一个二级导航被压扁，成为浅度导航 1 因此，在现有的网站结构当中，导航并不是对网站从属逻辑的最优体现。 控件规范：导航 Navigation 8 / 12
  • 9. 1 ? 对于全局和局部导航而言，它们需通过改变具体的某个链接样式来表示用户当前的位置 。 图 18 导航处“经销商与加盟”应该是凹陷状态 ? 页面的主导航一般深度为二级，一个页面内不能同时存在两个或两个以上的二级导航。 ? 导航的文字应是精简而易于理解的短语。勿使用疑问，否定语气。不超过 6 个汉字，实在无 法精简可使用自创名词或缩写。 ? 分类 5 个以下建议采用标签式，5-15 个建议采用横向列表，超过 15 个建议采用纵向列表。 ? 如果需要强调逻辑性和从属关系，可以使用下拉菜单和标签。 ? 当信息的分类较深时，建议取消导航，或只保留浅度导航，采用树状图。 ? 当信息的分类宽而深时，建议取消导航，或只保留浅度导航，重点突出搜索，同时建议采用 分面搜索。 ? 导航上同等级别的链接必须采用统一的样式，需要突出的某个链接与其他应保持较大的一致。 ? 导航上的文字应为链接或者块状样式，不可采用按钮，或者纯图标方式。 ? 导航上链接的激活方式应为“点击”，而不是“划过（Hover），导航上的链接除一些其他站 ” 点外链之外，都必须是在当前页面打开。 ? 对于全局导航而言，他必须是一个通栏或者封闭式设计。以此将它与页面内其他元素区分开 1 这个位置无需像面包屑那样表示如此清晰，至少应该体验当前位置的顶级位置或者是父级位置。 控件规范：导航 Navigation 9 / 12
  • 10. 来。 DOM ? 导航一般为文字链接（Link）的形式，与链接的区别是，导航上的文字不需要默认下划线 （text-decoration:underline;） ，无需写 title，感应区域为大小相同的块状。 ? 导航使用<ul><li><a></li></ul>结构，如果需要圆角背景等效果,可在 li 标签内使用行内 元素 span,strong,em 等。 1 ? 导航不能含有自身链接 。 ? 文字链接导航无需默认设置 underline，但需要定义 hover 或者 actived 效果。 ? 除一些全动画站点之外，禁止使用纯 Flash 导航。 ? 所有导航，禁止使用 hover 激活方式。 ? 导航链接感应区域应设置为 block，而不是只感应文字区域。 2 ? 在 CSS Naked 模式下，导航须保持好的身材 。 对比 导航与站点结构树的关系？ 从信息结构上来讲，按照严谨的分类，每个网站结构都可以用一个结构树来表示。 在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让 逻辑清晰，但是这个结构树可能非常的宽而且深。在这种情况下，如果导航依然保持与结构树的 对应显示，显然会与其浅度要求产生冲突。 一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。 事实上无论横排导航还是纵列导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以。 这种好处是用户更快找到自己想要的内容，但也打破了导航的结构树体现。 无论从那种角度上来说，用户并不需要了解网站具体的结构树，导航也不必完全照着结构树来体 现，以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。 上下文导 树状图 面包屑 全局导航 局部导航 辅助导航 航 图 19 对于信息分类体现度的示意图 1 自身链接，指的是链接到当前页面的链接。点击之后与重新刷新（F5）当前页面相同。 2 好的身材，指的是好的结构，在 css Naked 下也能清晰且包含逻辑关系。 控件规范：导航 Navigation 10 / 12
  • 11. 导航与面包屑的区别？ 导航是告诉用户可以去哪，面包屑是告诉用户现在在哪。 面包屑比导航更注重信息的分类以及从属关系，面包屑可以告诉用户当前页面的父级元素以及进 入路径，导航则不可以。导航只能大致体现用户的当前位置。 全局导航和局部导航在大部分情况下依然还是遵从站点结构树，因此，不少站点选择了将到会与 面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。 导航与面包屑如何结合？ 导航与面包屑的最有效结合就如 Vista 内路径条一样。但是所有的这些结合，都是建立在信息架 构足够清晰、足够稳固同时又足够灵活的基础之上的。 图 20 Vista 系统的路径条 如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋，导 航与面包屑的集合也变得毫无作用；这方面的典型就是门户网站。 如果你的网站结构够清晰，内容也够稳定，那么极有可能是公司或个人网站，对于这种站点，这 种结合则显得非常的高效和优秀。 导航与其他相关元素的结合于区别？ ? 实用工具（Utility） 实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素：用 户登录，帮助信息，对于我们等。实用工具能够有效的帮助我们怎么使用站点；通常，全局 导航附近会出现 4-5 个实用工具。 ? 网站标志（Logo） 网站标志，导航，面包屑都能够告诉用户当前在什么位置，仅仅只是详细的区别。通常，网 站标志与全局导航共同存在，并且会出现在其右侧。网站标志同样提供一个和全局导航相同 控件规范：导航 Navigation 11 / 12
  • 12. 的路径：回到首页。但这不意味着，导航可以取消此路径。 ? 搜索栏（search Bar） 海量的信息将会使导航不堪重负，搜索似乎是现有的最佳解决办法。对于超大型站点而言， 导航很大程度上已经失去作用，搜索成为最重要的路径提供工具。导航仅仅只会按照信息的 物理属性而对其进行辅助。 搜索栏与导航同样都告诉用户可以去哪里，为用户提供进入站点路径；搜索栏因此会出现在 导航附近区域。如，全局导航右侧。 如何导航用户生产的信息？ Web 应用当中，对于用户生产出来的信息，除了提供简单的默认分类之外，大部分应用是提供用 户自定义分类的。当用户选择自定义分类时，导航条则不属于这种应用场景1。更多的采用的是标 签云（Tags Cloud），树状图（Tree）或者链接列表（link list）样式。 如何看待“三次点击“原则? 谓的“三次点击”原则，是站内的链接的一个指导原则，让网站“链接结构”扁平化。从首页开始， 网站内的内容经 3 次点击即可到达。 如公司站：首页 -> 产物列表 -> 产物页(2 次) 如资讯站：首页 -> 频道 -> 栏目 -> 内容 (3 次) “三次点击”原则要求必须将信息架构尽量压扁，当遇到海量信息，问题出现了：扁平的信息架 构造成了冗长的内容列表，对于导航而言，这有可能导致链接列表项目非常的多，反而不利于用 户检索信息。 我们可以看到，“三次点击”原则提供了网站设计的一个重要的参照规范，他的不适用只限于超 大型信息站点（如 163.com），如果恪守原则的话，用户往往需要进行“内容-列表-内容-列表-”的拨 浪鼓式操作。要缩短浏览路径，就必须要建立“内容-内容”的信息关联，建立信息闭环2。 1 对于系统默认的分类依然可以使用导航条。 2 可参考 http://www.hozin.com/Point/200908/Information-Closed-Loop.html 控件规范：导航 Navigation 12 / 12