交互设计模式库

1. 导航
   1. 手风琴
      1. 问题：用户想通过导航找到某个项目
      2. 方案：将多个面板垂直或者水平叠加到一起，展开其中一个面板，缩起其他面板；
      3. 场景：
         1. 常做为主导航或者次级导航；
         2. 本质上类似标签导航；可做为导航树的替代方案；
         3. 经常有人在操作向导中使用手风琴，但其实并不合适；
         4. 用在FAQ非常合适；
         5. 如果设置项目不多的话（少于10个），用来管理设置项也不错；
      4. 方式
         1. 一次只展开一个面板（如果可以展开多个，则叫做导航树或可关闭面板）；
         2. 通过点击面板头部来切换不同的面板；
         3. 垂直手风琴展开后，一般展示次级项目；水平手风琴则可以放置大段内容；
         4. 几个注意事项
            1. 适当的动画效果，以便让用户知道发生了什么事情（动画时间少于250ms）
            2. 支持键盘上下方向键；
            3. 展开的面板应高亮显示，以便与缩起的面板进行区分；
            4. 确保面板尺寸能够根据内容自适应，因为如果高度固定，当内容项很少于，会导致面板很空；
      5. 原因
         1. 优点：可以将大量元素压缩在有限的空间内进行展示；元素包括：次级项目、问题、属性；
         2. 缺点：做为主导航时，大部分元素被隐藏，可见性较弱
         3. 其他：垂直式很常见，但动画效果经常做得不好；水平式很少见，但可以带来一些乐趣；
   2. 无标题菜单
      1. 问题：用户要能到达网站的主要页面
      2. 方案：使用垂直菜单栏，通过视觉元素对菜单项进行区隔
      3. 场景：
         1. 网站的信息架构由2个或者更多的部分组成
         2. 每个部分之间相对独立
         3. 重要的部分的项目比较多，水平菜单放置不下，需要垂直展示
         4. 用户需要优先进行重要的部分
      4. 方式
         1. 将主要的部分，置于垂直菜单的上部，并从视觉上视觉上强调突出
         2. 将次要的部分，置于垂直菜单的下部，视觉上中性展示，不做强调；
      5. 原因
         1. 主要部分使用垂直菜单，决定了次要部分也只能垂直展示
         2. 优点： 通过摆放的位置和视觉对二者进行区分，不需要使用单独的标题；
   3. 面包屑
      1. 问题：在层级结构中，用户需要知道他所处的位置，以及能够返回上一级
      2. 方案：展示出各个级别（从顶级到当前级），并允许对每一级进行点击跳转
      3. 场景：
         1. 网站有多层级结构（不少于3级）；
         2. 中型到大型的网站，如电商、产品目录、入口网站（如网址导航）、企业网站；
         3. 配合主导航，主导航允许用户跨越不同分支；
         4. 需要一次性回退多个层级，而非逐级回退；
         5. 用户不熟悉网站的层级；
      4. 方式：
         1. 路径显示当前页面所在的层级结构；每一层级使用一个标签，做成可点击的链接；
         2. 当面页面的标签要突出标注，并且不可点击（以便让用户知道所处的位置）；
         3. 不要用当前页的标签，做为本页面的唯一标题，需要单独再放置一个标题；
         4. 层级间使用/或>进行区隔；
         5. 如果路径很长，中间可以使用活力省略号…隐藏部分内容；
         6. 路径单独放置在一块区域中，占据整个内容页面的宽度
         7. 放置在靠近内容的区域，建议在内容之下，内容标题之下；
      5. 原因 ：
         1. 面包屑可以告诉用户所在的位置，并展示出网站的层级，方便用户认知；
         2. 占据空间小，能够留更多空间给内容；
         3. 使用链接式标签，使用户可以层级间跳跃浏览；
         4. 面包屑不做为主导航，需要配合主导航使用；
         5. 用户测试显示面包屑很少出现麻烦，总会有部分用户使用，因此可以说有益无害；
      6. 案例
         1. 创意做法：面包屑结合飞出菜单，用来展示标签下的次级导航；
   4. 目录导航
      1. 问题：用户想从一个集合中挑选某个项目
      2. 方案：将第一级和第二级放置一起显示出来
      3. 场景
         1. 有好几组项目
         2. 用户需要在同一组的项目间进行切换
         3. 用户想预览所有项目的全局概况
      4. 方式
         1. 第一级做为标题，第二级放置在标题下面
         2. 每个二级标题右侧，用括号显示内含的项目数量（非必须，尤其是数量很多的时候）
         3. 当用户选中某个二级标题时，突出显示（如粗体）；允许用户在同组的标题间进行切换；
         4. 当选中某二级标题后，总是有一组二级标题牌被选中的状态；
      5. 目的
         1. 对全局概览的同时，了解到项目的分类结构；
         2. 项目显示为可点击的链接，以便用户可以在同组项目间切换；
   5. 地垫导航（感觉类似胖菜单）
      1. 问题：用户需要被指引到网站的正确页面
      2. 方案：将主要大类及其子项显示在首页中部
      3. 场景：信息丰富的网站的首页，如企业网站，信息查询网站
      4. 方式：
         1. 将内容分为少数的几大类（3-4类最多）
         2. 在每一大类下，再显示一组小类（不宜超过8项）
      5. 原因
         1. 地垫导航允许用户快速预览所有入口；
         2. 所有重要信息的展示不容易遗漏；
         3. 用户可以通过点击链接快速进入；
   6. 双层标签栏
      1. 问题：用户需要在多层级的内容间进行浏览
      2. 方案：使用双层标签栏显示最高的两个层级
      3. 场景
         1. 网站内容多，多级结构
         2. 每级少于10个项目；
         3. 用户需要知道自己的位置
         4. 用户需要能快速回首页；
      4. 方式
         1. 用双层标签栏显示第一级和第二级项目，视觉上要有关联；
         2. 当前选中的项目，突出显示；
         3. 第一级的项目总是可见，第二级内容仅当父标签选中时才显示；
         4. 如果没有回首页的链接，则第一级标签的最左侧位置做为回首页的链接；
      5. 原因
         1. 标签栏用户非常熟悉，易于使用
         2. 通过两级导航，用户知道自己所处的位置，并且可以在项目间跳转；
   7. 多维目录
      1. 问题：一个事物有多个维度，每个维度都有可能成为用户的查看入口
      2. 方案：允许用户递进式的查看事物的多个维度（类似递进筛选）
      3. 场景：
         1. 用户需要从众多项目中挑选所想要的项目
         2. 事物存在多种分类方法，并且没有哪种是习惯性分法；
         3. 所有事物需使用相同的分类维度
         4. 可以做为高级筛选；
      4. 方式
         1. 展示出维度，用户可以先选择一种，然后再从余下的选项中，再选择一种；
         2. 注意让用户明白，基于选择的结果，选项逐步减少；至少要显示减少的数量，如果能列出结果就更好，以便用户可以点击查看；
         3. 变种1：结合面包屑导航，逐步递进，减少搜索结果（面包屑位置列出当前的筛选条件）；
         4. 变种2：结合高级搜索（列出各种可设定的搜索条件，减少搜索范围）
      5. 原因
         1. 不强迫使用单一的分类方式，允许用户按各人习惯查找事物
         2. 让用户看到信息结构，这样下次用户可能会尝试不同的搜索办法；
   8. 飞出菜单
      1. 问题：有两级导航结构，但空间有限
      2. 方案：鼠标悬停呼出二级导航
      3. 场景
         1. 用户有使用经验；
         2. 用大标题对项目进行分组，标题无链接；
         3. 屏幕空间有限（如果不考虑目录导航的话）
         4. 位置固定
         5. 点击次数尽量少；
         6. 不重新加载页面
      4. 方式
         1. 悬停飞出
         2. 飞出不能挡住其他标题
         3. 快速飞出，以可快速切换
         4. 建议配合面包屑
         5. 可纵向，可横向
         6. 常见问题
            1. 不易选（面积应够宽够大）
            2. 二级再飞出很难选
            3. 未暗示可飞出（可加个指标箭头）
            4. 隐藏缩起给250ms延迟
            5. 水平菜单配合垂直飞出，鼠标移动距离别太小，不然很难选
      5. 原因
         1. 好处：省空间
         2. 坏处：第一眼看不出导航结构；对熟练用户很好用，对一次性用户不友好；
   9. 主页链接
      1. 问题：用户需要返回起点，或者一个熟悉的安全的页面；
      2. 方案：给一个总是可见的元素，可以点击快速回首页
      3. 场景：网站一般都有一个首页，当用户在网站内部随意乱逛的时候，可以点击某个链接回到起点/首页
      4. 方式
         1. 用LOGO
         2. 用文字“首页”
         3. 每页展示，固定位置
      5. 原因
         1. 让用户可以安全快速的离开当前页面，回到熟悉的地方；
         2. LOGO可以做为网站的标识，使其随处可见；
   10. 图标
       1. 问题：菜单项不多
       2. 方案：用图标代表菜单项，在某个固定的位置显示图标标签；
       3. 场景：
          1. 空间有限；
          2. 图标能够有效传达意思；
       4. 做法
          1. 支持方向键移动焦点；支持鼠标悬停
          2. 获得焦点时突出显示图标及其标签（一般位于图标上方或者下方）；
          3. 九宫格布置、横向布置、纵向布置；
       5. 原因
          1. 有效强调图标且布局紧凑；当屏幕空间有限时，效果很好，如手机屏幕；
       6. 案例
          1. 功能机时代的九宫格
          2. 反例：做为产品图标，置于右下角（因为右下角一般视觉优先级较低，图标处于这个位置，容易被误为背景图片）
   11. 主导航
       1. 问题：每个网站都需要一个主导航，帮助用户使用网站
       2. 方案：在页面的固定位置，放置一组总是可见的菜单，并辅以一些导航工具；
       3. 场景：所有网站都需要
       4. 用法
          1. 常见：水平、垂直、倒L三种，及其变种如飞出菜单、无标题菜单
             1. 水平：
                1. 总是可见、高亮选中；如有二级，放在下方（即双层菜单栏）；
                2. 缺点：
                   1. 只能支持6-8项（取决于宽度、字体、屏宽），如果菜单栏未来会越来越多，则水平会放不下（如果发生，可能需要重组信息分类）
                   2. 只能支持2-3级；如果层级太多，会占用更多的屏幕纵向空间；如有3级，则需要预留空白位置（内容区域不能顶得太上来）
                3. 其他
                   1. 如有3级，需要特别小心视觉上显示清晰无歧义；
                   2. 如果有3级以上，一般配合面包屑使用；但此时非常建议考虑使用页面底部的空间，来展示信息架构
                4. 优点
                   1. 占用纵向空间少，使得内容栏可以更宽，尤其是内容拆分多栏（减少单栏宽度），可以增加易读性；
             2. 垂直
                1. 3种形式：
                   1. 单级：通常需要配合面包屑或其他方式来展示余下的层级（除非网站够简单）
                   2. 单级+选中显示二级（也可用飞出）
                   3. 双级+分组（即无标题菜单）
                2. 缺点
                   1. 如果项目多，当某级展开的时候，部分一级菜单项被挤到下方，需要滚动后才能选到；
                   2. 如果当前选中项被折叠了，从页面上看不出来当前选中的是什么，思考使用一些其他办法告诉用户所在的位置；
                3. 优点
                   1. 可扩展性强，可以容纳很多很多菜单项
                   2. 内容区域可以放到页面更高的位置（水平导航则会降低内容区域位置）
                   3. 页面标题比较容易展示；对于多级的水平导航，在左上角展示当前页面标题，会与选中的导航项重复；
             3. 倒L
                1. 如果信息有3级以上，则考虑使用倒L；第1级用水平，第2-3用垂直（当然，也可以反过来，但比较少见，因为一般第1级的菜单项较少，而第2-3级的菜单项较多，此时用水平不合适）
                2. 如果垂直导航展示的缺点会带来困惑，则可以进一步使用级联页面导航（将导航分成两页，配合面包屑以便用户可以回到上一级）
                3. 倒L对于母子网站也很合适（即网站有二级网站）；
          2. 不常见：旋转菜单、胖菜单、多维目录、扫雷图
          3. 辅助工具：网站地图、网站索引、网页搜索、在线客服、底部复现；
          4. 其他：水平导航，菜单项很多时，比如14个，可以考虑分成两行显示（中间还可以插入一些图片）
       5. 原因：网站需要使用主导航，让用户快速熟悉网站的信息架构，可以自在高效的浏览
   12. 地图导航
       1. 问题：用户想在地图上定位地点
       2. 方案：在地图上展示用户的兴趣项
       3. 场景
          1. 网站有可能需要搜索定位特定地点，例如公司网站会提供实体门店的地址；
          2. 网站可以让用户随兴搜索兴趣地点，并在地图上展示搜索结果的地点
       4. 做法
          1. 在地图上列出各个兴趣点；
          2. 不同兴趣点使用不同图例来标识；
          3. 提供图例的说明；
             1. 如果只有一个兴趣点，则展示详细的图例说明
             2. 如果有多个兴趣点，则可以使用扫雷模式（当鼠标悬停时显示详细信息）；
          4. 用户可能需要打印地图，如有，应提供打印的功能；
       5. 原因：我们熟悉使用实体地图，因此使用地图导航用户的认知成本低；
   13. 导航工具条
       1. 问题：用户想知道他们正在跟谁发生关系
       2. 方案：在页面的某个角落区域，放置二级菜单和联系方式；
       3. 场景
          1. 网站希望与访问者取得联系；
          2. 网站很大，需要搜索功能；
          3. 导航工具栏需要出现在每一个页面上；
          4. 工具栏上的功能项在不同页面可以相应变化
       4. 做法
          1. 一般由两部分组成：
             1. 导航：首页、搜索栏、网站地图、索引、链接；
             2. 联系：关于我们、联系方式、反馈（目的是用来向用户介绍组织）
          2. 一般放置在网站顶部，因此通常时时可见
       5. 原因
          1. 导航工具栏显示的功能一般与各页面相关联；
          2. 随时可用，显示不唐突，占用较少的屏幕空间；
   14. 扫雷导航
       1. 问题：需要刺激用户与元素进行交互；
       2. 方案：使用图表，当鼠标悬停时展示内容；
       3. 场景
          1. 用户想搜寻信息，方式有趣很重要；
          2. 非富信息网站，侧重视觉效果，或需要呈现某种主题；
          3. 吸引用户与元素进行交互并探索可能性，能够带来好处；
       4. 做法
          1. 元素需易发现，可适当突出显示；
          2. 当鼠标悬停时，显示内容，或者改变外观；
          3. 当用户点击后，效果类似普通的导航链接；
       5. 原因
          1. 虽然扫雷模式隐藏了信息，但好处是可能吸引用户进行交互；
          2. 对于年轻用户，交互是否有趣很重要
          3. 总之：需要谨慎使用此模式
   15. 平移缩放
       1. 问题：用户想浏览的区域比屏幕面积大；
       2. 方案：显示小图预览，然后标注出当前可视的阅读区域
       3. 场景：
          1. 查看大文档
          2. 查看地图或大图片
       4. 做法：用户通过拖动可视框或者放大镜来查看和浏览信息；
       5. 原因：让用户拥有全局感；
   16. 覆盖式菜单
       1. 问题：用户需要能找到网站的主导航
       2. 方案：将主导航放在用户点击的位置，在用户点击后再出现主导航
       3. 场景
          1. 网站不复杂，且使用全屏面积来展示内容很重要，需要隐藏主导航，一般来说在艺术类网站比较常见；导航必须很简单，且可发现性不是很重要；
       4. 做法：
          1. 隐藏主导航，只显示“菜单”字样或者只有图标；
          2. 当用户点击图标时，在点击处展现出主导航；
       5. 原因
          1. 导航不可见且位置不固定，确实容易产生困惑，尤其是信息类网站不适合使用此模式；
          2. 所幸网站存在主导航，且能够在需要的地方展现出来；
          3. 此模式是非常规做法，有些场景会特别适合，总之，需要谨慎使用；
   17. 双重导航
       1. 问题：让用户找到主导航
       2. 方案：主导航重复出现，例如置于底部
       3. 场景
          1. 此模式常配合底部水平菜单使用，很多网站内容较长，需要向下滚动以便查看整个页面；当用户向下滚动条，底部导航会不在视线内，此时如果底部再展示一次导航，可以使用用户操作（由于用户已经见过一次主导航，所以可以很容易认知底部导航的用法）
       4. 做法：可以设置一个导航条，内容与主导航相同，只是尺寸更小，使用文字链接；
       5. 原因：让用户想使用导航时，不必回到页面顶部；弱化的颜色和更小的字体，让用户明白这是一个辅助项，以示跟主导航区分；
   18. 抽屉导航
       1. 问题：用户需要使用导航，但也需要更大的屏幕空间；
       2. 方案：让导航可以缩起，也可以拉出；
       3. 场景：
          1. 屏幕空间有限，且主导航占用较大的面积；
          2. 替代方案：使用足迹导航+飞出菜单
       4. 做法：使用H5实现动画效果，以及自适应的布局；
       5. 原因：
          1. 节省屏幕空间的同时，仍然使用得导航可用；
          2. 与飞出菜单和叠加菜单不同，抽屉导航展示后，需要固定显示在屏幕上，不会自动隐藏；
   19. 旋转菜单
       1. 问题：用户需要在一组图片中挑选一张
       2. 方案：将图片做一个旋转菜单
       3. 场景
          1. 用户想寻找某张特定图片，并且用户凭缩略图即能够快速识别所需图片，因为屏幕空间及加载性能限制，不适宜展示大图；
          2. 图片大约有5-25张，数量控制在一次可显示的数量的3倍，因为再多就不便查找了；
          3. 用户花费尽可能少的操作即可找到所需图片；
          4. 用户需要能够找到所需图片；
          5. 用户能够快速的到达开头或结尾；
       4. 做法
          1. 菜单的中间做为选择区域；
          2. 当鼠标离开中间位置，菜单开始滚动；鼠标偏离中心位置越远，滚动越快；
          3. 左右两侧旋转箭头，以便用户可以知道能够滚动；
          4. 当鼠标回到中心位置，并选择某张图片时，高亮选中；
          5. 选中后，显示大图，旋转菜单仍保持在原位置；
          6. 当页面加载后，旋转菜单即开始自动旋转，保持恒定速度不变，直至鼠标进入旋转菜单区域；
          7. 询问增加滚动条暗示总体位置；
          8. 也可竖向展示
       5. 原因
          1. 适用于屏幕空间有限无法展示所有大图的场景；通过旋转菜单一次可以展示多张图片；
          2. 旋转的动画效果可以减少用户的操作路径，但有可能给部分用户造成选择困难；
          3. 会给部分用户带来一定的操作乐趣；
   20. 快捷方式菜单
       1. 问题：用户想直接进入某个功能；
       2. 方案：设置一个快速方式下拉菜单供用户选择；
       3. 场景
          1. 网站有基本的导航，但网站有几个页面会被用户频繁访问；
          2. 除了使用频繁外，它们之间并无太多关联；
          3. 这些功能点由于逻辑划分，可能处于2-3级菜单中，但却需要被快速简单的访问；
       4. 做法：在页面某个固定的位置放置一个快捷盒子，里面放上常用链接，用户可以通过这些链接快速到达所需地点；
       5. 原因：普通导航是面向全局网站的，但有少数功能由于访问频繁，需要能够让用户最快捷的到达；
   21. 分页菜单
       1. 问题：用户需要漫游在层级结构中
       2. 方案：将层级菜单分开在两个单独的页面；
       3. 场景
          1. 有4级以上导航，内容处于第2-3级；
          2. 分体菜单有点类似目录菜单；
          3. 在第3-4级菜单间切换很重要，基本不在1-2间菜单，第1级菜单无内容
       4. 做法
          1. 将菜单分为启动页和主题页；启动页包含1-2级菜单；主题页包含3-4级菜单；
          2. 所有文字内容显示在主题页面中；
          3. 用户通过索引链接在3-4级页面间切换；
          4. 通过面包屑导航告知用户位置，并使得用户能够返回上一级；
       5. 原因
          1. 通过双页导航，用户选择后，第一级菜单不再出现；
          2. 结果是用户能够流畅的在第3级菜单间浏览
          3. 同时通过面包屑返回上一级；
   22. 显示更多
       1. 问题：用户需要点击链接
       2. 方案：让部分菜单项可以展示
       3. 场景：菜单项很多，已有主导航，但仍然不够，需要显示更多的菜单项
       4. 做法：设置某个选项，用户点击可以查看更多，在当前页显示，或者新页面显示；
       5. 原因：不展示所有选项，但用户仍然可以有入口可以查看更多的选项，节省屏幕空间；
   23. 回到顶部链接
       1. 问题：用户需要返回到页面顶部；
       2. 方案：在内容区放置一个链接，点击回到顶部；
       3. 场景
          1. 页面很长，超过两屏，且用户有返回顶部的需要；
          2. 常用于长页面，如文章页面或者FAQ页面，用户在问题与答案之间跳跃；
          3. 长文本场景下，用户需要返回导航；
       4. 做法
          1. 在特定位置放置链接，标签“回顶部”，可带或可不带图标；
          2. 特定位置一般为段落底部，或者“块”底部；
          3. 链接会回到锚点位置如页面顶部；
          4. 一般用于两个场景：
             1. 回到导航；
             2. 回到页头；
          5. 如果是第一种，建议使用双重导航，在底部再放置一次导航会比回顶部的链接更加友好
       5. 原因：此模式可方便用户从任何滚动的位置回到导航，尤其是对于哪些使用滚动操作不方便的用户；
   24. 足迹菜单
       1. 问题：用户需要在层级结构中寻找信息
       2. 方案：在路径中显示菜单
       3. 场景：网站层级浅，但每级的项目多；
       4. 做法：类似面包屑，但结合了菜单项；可纵向或横向布置；每个项目可带用户回到上一级；
       5. 原因：面包屑与菜单的混合效果，消耗很少的空间，可显示当前级下面的很多菜单项；
2. 基础交互
   1. 操作按钮
      1. 缘起：
         1. 在当前查看页面的上下文中，用户需要进行相关的操作，用户需要被告知该操作的重要性，以及和页面上其他操作之间的关系；
      2. 解决方案
         1. 使用动词做为按钮的标签
         2. 使用可点击的按钮
      3. 适用场景
         1. 用户通过链接在网站内进行浏览，但并非所有链接在概念上都表示同样的事物；普通的链接用于浏览和导航，不会产生副作用，用于页面之间的跳转；其他一些链接则会创造特定效果，如开始或结束一个流程，或将信息添加到数据库中；例如，通过搜索框进行搜索，购买产品，提交转账申请等等；这种链接是一些重要的操作，它们会造成一些不容易撤销的结果，或者它们对于用户具备某种重要性；
         2. 操作按钮常出现于产品详情面、产品建议页或搜索结果页；它适用于用户对展示对象产生兴趣并想采取重要的行动；典型的操作有购买、报价、搜索，添加到购物车等；这些操作很重要，因为它们是页面上主要任务的组成部分；
      4. 使用方法
         1. 常用浮起按钮，易于跟文字链接区分开来；也因此比文字链接更吸引视觉注意力，由于其浮起的特点，暗示用户可点击；按钮可使用系统默认样式，但更经常是匹配整体页面样式；如果使用图标，立体更能突出可点击的效果，因此尽量避免使用扁平图标；按钮颜色应不同于页面的背景色，以便能突出显示；按钮不要太小，越大越容易点击；按钮的标签应该使用动词；
         2. 按钮应放置在操作的对象旁边；通常位于对象的右上角；此种形式，应该确保滚动时按钮时时可见；表单的按钮是个例外，它一般位于右下角；如果是列表的按钮，则通常同时放置在列表上部和下部；
      5. 分析
         1. 按钮的视觉外观使其能明显区别于文字链接；吸引更多注意力，刚好匹配它作为重要操作的特点；
   2. 新手指南
      1. 缘起：用户需要了解可以操作的内容，以及学习如何操作
      2. 解决方案：通过多个步骤向用户展示如何操作
      3. 适用场景
         1. 网站有一些不常见的功能；
         2. 展示一些非网站本身的事物（如仪器设备）的操作办法；
      4. 使用方法
         1. 操作指南是向导模式的一种；
         2. 将事情拆分为几个主要的步骤，然后罗列出来，易于用户理解；
         3. 用户可以选择其中一个步骤查看，或者查看所有的步骤；
         4. 为了让学习效果更好，用户可以在每个步骤中进行操作，以模拟真实的使用场景；
      5. 分析
         1. 此模式类似一个人在旁边讲解一个复杂的事情；
   3. 分页指示器
      1. 缘起：用户需要浏览很长的清单并找到最感兴趣的对象；
      2. 解决方案：将结果分页展示，每页显示固定数量，便于用户从某一页跳转到其他页
      3. 适用场景
         1. 常用于有大量项目需要展示的情况；
         2. 适用于单页区域展示不下内容时
         3. 项目一般按某种顺序排列，以便用户可以在起始点找到想要的结果；例如搜索场景经常使用此模式；
         4. 分页模式通常和表单生成器配合使用，例如邮箱应用；
         5. 单页的项目数量一般在10-200之间；
         6. 项目可以是任何东西，如邮件头、姓名、照片、电话号码等等；
      4. 使用方法
         1. 在清单下方显示分页导航
         2. 各具体页面有直接访问的链接，同时可以通过上一页和下一页来翻页
         3. 每页显示5-10个项目
         4. 显示总页数
         5. 通过标题提示页面内容；
         6. 典型的结构为：项目数，上一页，页码，下一页
         7. “上一页”和“下一页”仅在适用的情况下显示；
         8. 另外，可以添加首页和末页的链接；
         9. 页码一般字体较小，因此不易点击；因此可以将页码分成范围段，如11-20，21-30；此种方式的缺点是如果项目很多，空间可能不够；此时可以通过显示当前页再加上前后几页以及省略号…来解决；
      5. 分析
         1. 页码指示器告诉用户重要的信息，包括总项目数量、多少正在查看、如何看到余下的内容；
         2. 之所以放在下方，是因为当用户浏览完项目时，底部位置是其最需要页面指示器的地方；
         3. 分页很常见且普通接受，但Ajax的应用有可能免用分页指示器，当用户滚动的时候再显示结果；
   4. 折叠菜单
      1. 缘起：用户需要从一组项目中选择其中一项
      2. 解决方案：在常规的菜单中放置一组选项，一次可选一个；
      3. 适用场景：选项很多，但空间有限，只能放5-8项；列表不能太长，不然不方便选择，一般不超过3个；
      4. 使用方法：在常规的空间内放置菜单，两端放上箭头，展示菜单项时悬停高亮；
      5. 分析：优点是省空间
   5. 幻灯片
      1. 缘起：用户想查看一组图片
      2. 解决方案：每张照片显示几秒钟，提供播放控制，包括前进、后退、暂停、开始等；
      3. 适用场景：常用于图片分享网站，如Flickr，Picasaweb；
      4. 使用方法
         1. 通常最大化屏幕用以展示图片，同时用尽量小的空间展示必需的控制按钮；
         2. 控制按钮一般图片放在上方或者下方
         3. 注意事项
            1. 如果按钮覆盖在图片上方，则一段时间后自动隐去；
            2. 播放的时间间隔可调整；
            3. 允许用户随时退出播放
            4. 图片切换加上转场效果，看起来更漂亮；
            5. 给图片加上标题或说明文字；
         4. 有时可以考虑加上图片缩略图，这样用户对下一张的图片有预期，但缺点是减弱了沉浸式体验感；
      5. 分析
         1. 图片在日常生活中也非常普遍；用户不用操作即可轻松的观赏图片；当错过图片或者要暂停时才使用控制按钮；
   6. 分步模式
      1. 缘起：用户需要按顺序查看或操作
      2. 解决方案：允许用户通过链接跳转到上一步和下一步
      3. 适用场景：用户需要线性的查看或操作对象；对象可以图片、搜索结果、一系列任务、购物等；当对象数量比较大时，分步模式可以辅助导航，例如分页；在向导模式中，分步模式即是做为主导航；
      4. 使用方法
         1. 下一步链接到后续步骤，上一步返回前面的步骤；
         2. 将按钮放在要操作的对象旁边，一般放上面，避免出现需要滚动的情况；
         3. 确保按钮位置固定，以便用户不需要移动鼠标即可进行点击；
         4. 上一步放左侧，下一步放右侧；
         5. 在第1步没有上一步，在最后1步没有下一步；
         6. 如果需要的话，上一步和下一步就再补充文字描述，例如上一张图片、下一步图片；
         7. 使用分步模式浏览图片时，考虑使用缩略图；
         8. 当在任务处理中使用分步模式时，使用操作按钮模式，以吸引更多用户的注意力；
      5. 分析
         1. 分步模式是最基本的导航方式之一；
         2. 通过使用向前和向后的标签强调线性特性；
         3. 结合缩略图，让用户提前知道要去哪里；
         4. 更长的文字标题，或者缩略图，都可以增大点击区域，使其更容易选择；
   7. 向导模式
      1. 缘起：用户想达到某个目标，但完成目标前，需要做出几项可能用户未知的决策；
      2. 解决方案：带领用户一步一步的完成整个任务；向用户展示哪些步骤已经完成，哪些未完成；
      3. 适用场景
         1. 非熟练用户需要完成一个不经常处理的复杂任务；
         2. 该任务由几个子任务组成；
         3. 子任务数量不多，约在3-10个；
         4. 用户想完成最终目标，对需要完成的步骤不熟悉或者不感兴趣；
         5. 子任务有一定顺序，但也并总是相互独立，例如处理下一个任务前需要先完成某个子任务；
         6. 需要完成几个任务后才达到目的；由于每个子任务中决策不同，最后完成的任务数量会不一样；
      4. 使用方法
         1. 当开始复杂任务时，用户被告知需要完成几个步骤后可达到最终目的；
         2. 用户通过下一步的按钮可跳转到后续任务；
         3. 如果完成当前步骤前不允许进入下一步，则需要给出提示；
         4. 用户可通过上一步的按钮修改前面的结果；
         5. 用户被告知每个子任务的目的；用户可以实时清楚自己所处的位置；并知道总共由哪些步骤组成；
         6. 当任务最终完成时，给用户成功的提示；
         7. 如果可以的话，当用户熟悉默认选项时，允许用户使用快捷方式一键完成任务（例如亚马逊的一键下单）；
         8. 在任何时点都允许用户随时退出；
      5. 分析
         1. 导航按钮暗示用户处于分步模式中；
         2. 每个任务使用一致的样式，强化存在一系列步骤的概念；
         3. 任务序号告知用户有哪些步骤需要完成以及当前所处的位置；
         4. 优点：学习成本低，容易记忆；
         5. 缺点：任务处理时间长；
         6. 由于用户被强制按顺序完成任务，不容易出现遗漏；
3. 搜索
   1. 高级搜索
      1. 缘起：用户需要在数量众多的项目中，寻找所需要的项目；
      2. 解决方案：提供高级搜索功能，包括更多的匹配项、搜索范围、输出选项等；
      3. 适用场景：
         1. 由于信息类网站包含的信息太多，如电商、跨国公司、门户网站、图书馆等，简单的搜索框无法保证用户总是能搜索到想要的信息；
         2. 相对普通搜索，高级搜索增加更多的搜索项；高级搜索主要面向中高级用户，这些用户需要充分利用搜索引擎以便找到所需信息；该类用户对所要搜索的项目了解更多的信息；他们很可能知道项目的分类，并试图找到该项目；
      4. 使用方法
         1. 高级搜索一般搭配普通搜索框使用，主要在三方面进行加强：
            1. 条件：此功能控制搜索引擎如何处理关键字的组合；一般有与、或、非等三种；如果支持与和或搜索，显示“匹配所有项”和“匹配任意项”，而不是“与”和“或”，因为人们经常搞不清楚布尔值的意思，因此应避免使用；对于专家用户，可支持“与”和“或”的使用，但需要通过搜索建议，告知用户操作的可行性；
            2. 范围：指哪些项目可被搜索，哪一些不可以；通过设置查询条件，范围限制了搜索结果的可能性；例如，特定子网站的搜索结果、项目的类别（文章、视频、音频等）、项目的属性（标题、日期、地点、大小、作者）；查询范围让用户更便捷，因为它允许用户查询网站的特定元素；
            3. 输出控制：允许用户设置搜索结果的展示；例如排序、分页大小
         2. 可考虑允许用户针对搜索结果做进一步筛选，这样用户可以查得更深入；通过在搜索页中增加“在结果中搜索”的链接来实现，允许用户添加搜索关键字；
      5. 分析
         1. 此模式使得用户可以更全面的掌控搜索；同时要求用户对数据有深入了解，通常适用于专家用户；大多数对如何使用与和或有困难，因此建议用“所有项目”和“任何项目”来替代；
   2. 自动填充
      1. 缘起：用户想输入大集合下的一个标签
      2. 解决方案：展示与用户输入的标签相同名称的可能选项；
      3. 适用场景
         1. 自然地，自动填充常作为表单的组成部分；常用于搜索框，或者邮件地址栏；也用于航班目的地的输入；在所有场景中，列出有可能的选项有助于用户更快完成任务；
      4. 使用方法
         1. 当用户开始输入字符时，应用开始查询匹配的项目，并将结果显示在输入框的下方，用户通过移动光标或者输入关键字来选择所需的结果；
      5. 分析
         1. 减少用户的记忆负担，允许用户用更少的步骤定位到所要项目，而一般情况下则需要录入完整的标签名称；
   3. 帮助向导
      1. 缘起：用户需要帮助，或想到达某个具体的页面；
      2. 特点：专注于少数主题，通过上下步骤在树结构下引导查找；渐进缩小范围；
      3. 适用：用户不知道自己要找什么，或者缺少关键字，难以用搜索来定位；
   4. 搜索框
      1. 缘起：帮用户查找信息；
      2. 支持一些特殊字符的用法，包括+、-、and/or、空格等；
      3. 图标、输入区、按钮、下拉框（如需）、用法提示（如需）；
      4. 页面标题、描述、分类、结果数量、页数；
   5. 搜索区
      1. 某个特定区域放置搜索功能；
      2. 做为辅助，非主导航；
      3. 与网站地图、网站索引、高级搜索等功能使用；一个位置，集合各项功能；
   6. 搜索结果
      1. 排序、分页、具象展示、短描述、相关推荐、分类、特殊匹配项优先展示；
      2. 页面标题、二次筛选、结果数量、搜索建议、购物车、对比；
   7. 搜索提示
      1. 一些搜索小功能的提示说明，如符号的使用，针对新手；
      2. 说明旁边再放个示例；
      3. 好处：降低用户对技术细节的学习成本；
   8. 搜索索引
      1. 大型网站，页面很多；
      2. 针对新手，不知道关键字，不熟悉网站的信息架构；
      3. 页面主题按字母罗列排序，供用户查找；
      4. 做为主导航和搜索的辅助；
   9. 网站地图
      1. 中型网站适用；小的主导航就展示完了，大的地图展示不下，查找效率不高；
      2. 让用户知道有什么，可以去哪里，如何组织，自己位置；
      3. 树状，各页可达，快速到达想去的地方；
   10. 页脚地图
       1. 适用中型网站；
       2. 缩小版的网站地图，但可以不严格是地图，可以重新组织链接，当作快捷方式的集合使用；
   11. 标签云
       1. 突出显示流行、热点、常用的标签；
       2. 相比数字，更直观的展示方式；
   12. 主题页
       1. 适用于有大量未知文件的网站
       2. 通过主题分类快速定位，速度比数量重要；
       3. 好处：用户可以更快的找到信息（文件很多，但证明被调用的是少数）
4. 表单
   1. 密码强度条
      1. 缘起：为了确保用户设置的密码足够复杂，以免被恶意破解；
      2. 适用场景
         1. 让用户设置的账户密码不容易被破解或者被猜中；
         2. 提高用户密码的复杂度，以提高黑客的攻击门槛；
         3. 让用户知道什么样的密码是安全的，并按相关规则来设置
   2. 所见即所得
      1. 缘起：用户想生成富媒体和带格式的内容，但不知道如何使用HTML；
      2. 适用场景
         1. 用户想直接看到内容发布后的样式
         2. 用户不习惯使用HTML或者textile或者Markdown；
         3. 降低用户添加带格式内容的门槛；
         4. 提供将富媒体和格式内容上传网站的简易办法；
         5. 用户愿意花时间调整内容细节；所见即所得允许用户看到其编辑效果，增加其信心，带来快速和好看效果；
         6. 如果想保持HTML简洁则不适用；所见即所得会生成冗余的HTML代码；
         7. 如果需要兼容所有浏览器则不适用，所见即所得一般不能兼容所有浏览器，如果可以，也只是最新的浏览器版本；
   3. 验证码
      1. 缘起：识别数据提交者是人而非机器
   4. 输入反馈
      1. 缘起：用户录入数据到系统，期望得到录入结果的反馈
      2. 适用场景
         1. 当用户在网站上提交内容后，向用户提供反馈；
         2. 当用户提交表单时，向用户提示出现错误；
         3. 需要告知用户数据提交进行顺利；
      3. 解决方案
         1. 当用户使用表单提交数据时，经常会出现一些错误。本模式通过尽量减少错误的发生以提升用户体验。数据校验的方式很适用在提交表单时查出错误。告知数据格式要求的常用办法是将规则显示在输入框中；数据必须符合规则才能通过验证，这些规则包括
            1. 有录入内容：至少需要输入一些内容；
            2. 内容排除：一些非法的值，如使用admin作为用户名；
            3. 内容涵盖：数据必须包含某些值，或者在某个范围内；
            4. 内容接受：例如接受条款，通常使用复选框；
            5. 内容核对：两个输入框的值需要匹配，例如密码设置；
            6. 内容格式：例如邮件格式带@，年龄超过18岁等；
            7. 内容长度：例如密码不少于6个字符；
            8. 内容唯一性：例如用户名不可重复；
         2. 如果用户提交的内容验证通过，让用户知道一切顺利是很好的做法；甚至可以将用户引导到另一页面，让用户查看内容提交后的效果；如果验证未通过，则需给出错误提示，告知如何修复数据并要求重新提交；错误提示应包括：
            1. 出现错误了：在页面顶部浮窗提示（避免需滚动页面才能查看），建议使用红色暗示出现错误；
            2. 错误的位置：可以在提示中列出有错误的条目，并高亮（改变颜色）出现错误的输入框；
            3. 修复的方法：告知需要怎么做才能通过验证；可以在顶部显示，也可以在输入框旁边显示；
         3. 输入反馈的视觉效果应该与消息内容一致；正确使用绿色，中性使用黄色，错误使用红色；但注意，红色表示危险，用户是否正处于危险的状况？
      4. 原理
         1. 当用户在网页上提交表单时，他将头脑按某种方式组织的数据，转化成按另一种方式组织的书面形式。由于每个人思维方式不同，在各自个性化的数据，转成系统定义的共同形式时，我们的录入方式也会不同。用户录入数据时肯定会包含错误，设计时应纳入考虑，让用户知悉其输入的数据不符合要求的格式。使用直观的视觉提示，用户能够发现错误并加予纠正。
      5. 讨论
         1. 可以说你应该花更多精力在用户提交数据前防止出错，而不是在出错后出好的提示；可以使用选择框来限制输入；
         2. 考虑提示使用的措辞，因为它们会影响用户的情绪，什么样的语气对用户是合适的？
         3. 每个操作发生后给出明确的反馈。当用户及时得到系统的反馈时，会变得更加自信。反馈的类型包括通知、消息对话框、彩色可用或灰色不可用的按钮、加载动画、行内提示、工具提示、悬停效果等等。将用户的操作和系统对操作的反应之间变得更加无缝。
   5. 日期选择器
      1. 缘起：用户想基于日期或者日期范围查找或提交信息；
      2. 适用场景
         1. 用户想方便的选定日期或日期范围来提交、跟踪、排序、筛选数据；
         2. 如果用户习惯其他更高效的方式，则不适合使用；有些用户习惯手工录入；
         3. 如果文本输入的方式更方便，则不适合使用，例如生日，因为需要点击很多次，回退几十年；
      3. 使用方法
         1. 几种激活方式
            1. 点击链接；
            2. 选择输入框；
            3. 点击图标；
         2. 激活后，在当前页弹出日期浮窗供用户选择；通常显示一个月，但有些显示3个月，减少用户的点击负担；
   6. 特定格式
      1. 缘起：用户需要快速输入数据，但数据需要满足既定格式；
      2. 适用场景：
         1. 当使用常规控件如下拉框、单选按钮、多选按钮等，使得数据录入变得很复杂时；
         2. 完成任务的时间比目的重要；
         3. 需要收集的数据有固定格式；如邮编、日期、时间、手机号等；
         4. 当需要用户录入特定格式以便系统能够识别；
         5. 如果录入结果可以有多种解读方式，则不适用；
   7. 行内编辑
      1. 缘起：用户需要在页面上简单快速的编辑某个值
      2. 适用场景：
         1. 用户需要编辑的值不多，只有一个或少数几个，多则不合适；
         2. 适用于简单格式的字段，例如字符串，或者下拉框；
         3. 想让用户在当前页进行编辑，不用进入另外一个页面；
      3. 做法
         1. 悬停时显示可编辑的暗示；
         2. 输入框+确认+取消三件套；
   8. 完形填空
      1. 缘起：需要用户录入数据；
      2. 适用场景
         1. 输入框的标题无法解释待录入信息是关于什么内容；
         2. 输入框的标题太长太复杂，用户难以理解；
         3. 将输入框放入上下文中更易于理解；
         4. 输入框是必填信息，或者期待被填写；在句子中留空会触发用户不适，促使其完成信息录入；
         5. 只需要录入一个句子的少量信息；如果需要录入一个句子的大量信息，则会使用户厌烦；因为这样会迫使用户读完所有句子，并思考所录信息如何与上下文结合；
         6. 不适用于有大量字段需要录入的场景；
      3. 缺点：不适用于国际化多语言场景；
      4. 优点：有了上下文，更易于理解；
   9. 预览
      1. 缘起：用户想快速知道改变带来的效果；
      2. 适用场景
         1. 想让用户实时知道其生产的内容的展示效果；
         2. 如果没有预览，用户很难想象结果将呈现的样子；
         3. 如果输入明确，输出没有固定样式，则不适用；
      3. 优点：预览让用户在提交前可以看见结果，从而降低用户的不确定感，提高参与度和创造性，显得更加有趣，促进探索欲望，交互性更高；无需等待页面重新加载，结果实时呈现；
   10. 设置
       1. 缘起：用户需要在一个集中的位置，设置各项参数以控制应用的表现；
       2. 适用场景：
          1. 多数用户需要用到的参数
          2. 少数用户会用到的参数，但对满足其需求很重要；
          3. 常用的参数；
          4. 设置用户的偏好；
          5. 不适用于放置常用操作，此种场景更适合使用工具栏；
       3. 注意事项
          1. 有序组织设置项，可预期，作编号；
          2. 将不重要的设置项移动到单独的页面，例如“其他”；
          3. 规范命名，使用户能够快速明白设置项及当前值；
          4. 如果设置项很多，将用户感兴趣的优先放前面；
          5. 有效的默认值，多数用户会选择的值，保持中立，降低风险；
          6. 降低记忆负担，对设置项进行分组
             1. 7项以内：不分组；
             2. 9-16项：将同类别的分成多组；
             3. 超过16项：考虑分页，保持名称的延续性，子页面的标题与设置项相关联；
   11. 键盘快捷键
       1. 缘起：用户想快速的完成重复性的任务；
       2. 适用场景：
          1. 应用有重复性的任务，且涉及鼠标和键盘的切换；
   12. 可展开输入框
       1. 缘起：用户想进入更多面积和更少干扰的交互模式；
       2. 适用场景
          1. 需要将注意力聚焦在主交互中，而非输入控制中；
          2. 去除主交互的干扰元素；
       3. 做法
          1. 放大输入框，成为视觉中心；
          2. 可展开，可缩起；展开时，将其他不重要的元件下移，当需要它们的时候，再展示；
       4. 优点：将无关元素移出视线，界面更加整洁；适合场景如搜索、发帖、评论等；
   13. 拖放
       1. 缘起：用户需要将一个或者多个对象从一个位置移动到另外一个位置；
       2. 适用场景
          1. 让用户用更直观的操作完成复杂的任务
          2. 避免为了重新排版而强制用户进入另外一个页面；
       3. 优缺点：
          1. 很多用户在界面上有进行拖动操作的本能反应；很直观，隐喻模拟现实世界的操作；
          2. 尤其适用于移动列表中的条目；
          3. 拖动的可发现性不好，一般需提供备用方式；
   14. 兼容多种数据输入格式
       1. 缘起：用户想快速输入数据，系统能识别多种输入格式；
       2. 适用场景
          1. 当多选框、单选框、复选框会使得输入变复杂时；
          2. 输入速度的重要性超过达到目的；
          3. 适用于收集的数据有关某个主题，或者有明确的起始时间的事件；
          4. 适用于用户录入的数据容易被系统识别；
          5. 如果用户可能录入任何数据，则不适用；格式应限定于一个有限的小范围；
       3. 优点：降低用户与系统的交互门槛，节省空间；是否适用，取决于要求用户提供什么样的数据；
   15. 良好的默认值
       1. 缘起：用户需要录入数据，某些字段的默认值最大程度吻合待录入数据；
       2. 适用场景
          1. 用户需要从众多选项中进行选择，而其中一些选项有大概率匹配；
          2. 系统能够猜到用户想要录入的值；
          3. 适用于如果没有默认值，任务复杂度上升，输入项太多，把用户吓跑了；
          4. 如果选项需要用户仔细思考，则不适用，例如接受合同条款；
       3. 优点：节省用户的操作时间，让用户有时间去做其他任务；
   16. 输入提示
       1. 缘起：用户需要录入数据
       2. 适用场景
          1. 标题不能清楚说明，或者清楚说明时，太长了；
          2. 输入内容的示例
          3. 节省空间；
          4. 与标题配合，进一步阐释；
       3. 分析：适用于空间有限的场景，如果空间足够，则一般能放下长说明和长标题；
   17. 动态按钮
       1. 缘起：用户只需要呈现针对当前模态的操作；
       2. 适用场景
          1. 其他操作在当前状态下无需显示；
          2. 保持空间简洁，去除不相关或无必要的元素；
          3. 适用于多模态的场景，如开/关，播放/暂停；
       3. 注意事项
          1. 对称性设计，字体大小相同，外形相同，颜色可以不同；
          2. 常用于双态操作，如果开/关，喜欢/不喜欢，关注/取消关注；
   18. 自动保存
       1. 缘起：用户想确保数据安全并进行保存，避免专注于工作忘了了保存；
       2. 适用场景：帮助用户专注生产内容，无须担心数据是否安全及保存；
       3. 注意事项：
          1. 合适的频率；
          2. 触发的方式：常规为保存按钮，但失去焦点也不错；
          3. 保存按钮，当自动保存后，按钮显示为“已保存”；当出现变更时，变回“保存”按钮；
       4. 分析
          1. 可以让用户免于忘记保存的烦恼；完全去掉保存按钮会让用户恐慌，所以按钮仍然保留；保存操作记录，并提供撤销功能；
   19. 撤销
       1. 缘起：用户想撤回已执行的错误操作
       2. 适用场景
          1. 给用户增加信息，鼓励用户探索操作；
          2. 损失数据的代价越大，越需要提供撤销功能；
          3. 只要有可能失去数据，都应提供撤销功能；
          4. 撤销不要使用警告；
       3. 分析
          1. 人非圣贤，用户总是会出现操作失误；此模式可鼓励安全探索，并增加用户的信心和乐趣；
          2. 给用户试错的空间，则用户学习的越快；
   20. 操作向导
       1. 缘起：用户想要完成的目标，可以拆分几个独立的子任务；
       2. 适用场景
          1. 用户需要完成的任务不止只有一个步骤，例如上传图片，包括选择、修剪、上传等；
          2. 需要完成的任务比较复杂，由几个子任务组成；
          3. 需要输入复杂的数据，拆成几个步骤更加容易完成；
          4. 需要指导，因为用户不熟；
          5. 最终目标的完成，取决于在上一个步骤选择的选项；
          6. 用户缺失相关专业知识；
          7. 用户需要按某种特定顺序完成任务；
   21. 完成度指示器
       1. 缘起：用户想要完成一个目标，但需要被告知什么时候自算完成以及如何完成；
       2. 适用场景
          1. 想让用户保持专注，以完成某个具体目标；
          2. 通过一系列小任务的存在感，确保用户完成
          3. 当最终目标依赖于完成连续性的任务时，不适用；
          4. 不适用于重要任务，而适用于如果完成结果会不错的任务类型；这个模式的目的即是要让用户比正常状态下多完成一些任务（比如学习计划、减肥计划、健身计划等）；
       3. 做法
          1. 拆分任务
          2. 提供建议
          3. 设置奖励：如头衔、奖杯等，允许用户分享成就；
   22. 剩余步骤（感觉跟操作向导很类似）
       1. 缘起：用户需要经几个步骤完成表单填写，需要指导；
       2. 适用场景
          1. 可拆分，可分页显示；
          2. 步骤太多，永无止境；（明示终点）
          3. 不适用只有1-2步；
          4. 不适用简单可预见的步骤；
   23. 行内提示
       1. 缘起：在交互发生位置，辅助说明；
       2. 适用场景
          1. 非直觉、难自说明；
          2. 示例；
          3. 鼓励使用；
          4. 帮助使用；
          5. 引导使用；
          6. 柔和引导新用户；
          7. 高级用户可隐藏；
       3. 做法：
          1. 记得提供“不再提示”的入口；
       4. 分析
          1. 比FAQ和帮助文档更好用；
          2. 可隐藏性可以减少干扰；
   24. 点赞
       1. 缘起：用户要表达对内容的偏好
       2. 适用场景
          1. 给用户权利表达内容偏好；
          2. 让用户提交内容；
          3. 信任用户判断；
          4. 用户社区过小不适用；（样本不足价值小）
       3. 做法
          1. 不同用户不同权重
          2. 嵌入插件
       4. 分析
          1. 鼓励参与，减少投入
          2. 限制反对次数，防止恶意；
          3. 内容质量有别；
          4. 乌合之众；
   25. 付费点赞
       1. 缘起：用户想付费提升自己内容的排名，以获得更多关注；
       2. 适用场景
          1. 允许付费绕过常规点赞机制；
          2. 例子：相亲类网站，脸书；
       3. 分析
          1. 一种广告
          2. 区别：付费的内容会有ad提示；
   26. wiki
       1. 缘起：公共信息协同编辑
       2. 适用场景
          1. 想让用户参与；
          2. 需要实时更新的内容
          3. 不适用：
             1. 不可变更的内容，如合同条款；
             2. 会过时的内容，如新闻；
       3. 分析
          1. 版本控制，可回滚；
          2. 可用于企业内部的知识库管理；
   27. 标示&报告
       1. 缘起：让用户标示非法内容；
       2. 适用场景：UGC，数量大，难自控；
       3. 分析：对于UGC网站，此功能很重要；用户也乐于参与；
   28. 评级
       1. 缘起：用户想评级，以突出优质内容；
       2. 适用场景：
          1. 帮用户控风险，判断内容是否优质；
          2. 让用户帮助决定哪些是优质内容；
          3. 让一些人引导另一些人；
          4. 用户基数大；
          5. 用户值得信任；
          6. 用户基数小时，不适用
       3. 做法：
          1. 1-5级，可加评论；提交后给成功反馈；
          2. 显示平均分，有易判断；
          3. 提供评分说明；
          4. 展示高分项目；
          5. 搜索加权；
          6. 相关推荐；
       4. 分析
          1. 鼓励参与，辨别好坏，降低决策成本和风险，如购物；
          2. 思考：
             1. 谁来评：真实性与客观性；
             2. 评什么：目标物模糊，评分无价值；
             3. 要鼓励什么和不鼓励什么：防止恶意和滥用
          3. 可多维度拆分，评论将更有针对性，更有价值；
   29. 列表筛选
       1. 缘起：用户需要分类筛选表格数据；
       2. 适用场景
          1. 超过一页的大数据集；
          2. 筛选栏目可归类；
       3. 做法
          1. 下拉分类；
          2. 多分类组合与联动
          3. 如果有些筛选条件很常用，提供保存筛选参数的功能；
       4. 分析：
          1. 精准定位，缩小结果范围；
          2. 对于专家用户，复合筛选可达到报表或高级搜索的效果；
   30. 表格排序
       1. 缘起：列值排序
       2. 适用场景
          1. 有多列（大于10）
          2. 数据跨页
          3. 需对比列值；
          4. 列数少数据少不适用；
   31. 斑马行
       1. 缘起：区分不同行的值，一一对应；
       2. 适用场景
          1. 表格有多列，列间值接近，每列有多行；
          2. 行高不统一；
       3. 分析：便于阅读，但使得表格突出于页面；
   32. 仪表盘
       1. 缘起：多种数据快速扫视获取概要
       2. 适用场景：全局查看，发现趋势 ；
       3. 用法
          1. 实时查看几个关键数据
          2. 单一目标，围绕目标优先呈现相关数据；
          3. 三种
             1. 运营（每日）
             2. 管理（每月/周）
             3. 分析：更详细的审视数据
       4. 分析：
          1. 实时快速监控
          2. 重要指标在上，次要指标在底；
          3. 简单易懂，可视化呈现；
   33. FAQ
       1. 缘起：用户有疑问
       2. 适用场景
          1. 多数用户有相似问题；
          2. 收集问题答案（实施和售后部门）
          3. 电商类、社区类网站；
       3. 做法
          1. 答案与问题挨在一起，同页，别跳转或者浮窗；
          2. 超过10个，编号；
          3. 很长，分主题，回顶部按钮；
          4. 全局问题全局入口；局部问题局域入口；
          5. 别用简写FAQ，用全称；
5. 数据处理
   1. 可折叠面板
      1. 用户需要临时进一步查找详细信息或使用某些功能（但只是偶尔的）；
      2. 好处：页面更加整洁，常用于网页应用；
      3. 类似于手风琴，差别在于可以全部展开（如需）；
      4. 相对TAB，在使用空间上更加有效率；
      5. 缺点：部分用户可能不熟悉它的使用方式；
   2. 按需展开
      1. 隐藏一些过程信息，如果需要，可以点击展示完整显示；
   3. 收藏夹
      1. 浏览过程中将一些对象收集存放起来，以便后续进一步操作，常见的如购物车、收藏夹、待读清单、商品对比；
      2. 收藏夹的入口一般做成全局标签，以便可以在网站的各个地方快速访问；
   4. 嵌入覆盖
      1. 当用户只需要少量的进一步信息的时候使用，比如只有3-5行短信息，轻量级详情；此时用浮窗或者新页面过于麻烦；
   5. 列表操作
      1. 场景：用户需要对一组项目进行操作管理；
      2. 做法：显示整张列表，将操作按钮放置在旁边；
         1. 批量编辑：放上面（超过10个），放下面（少于10个）；
         2. 单个编辑：放在左侧或者右侧；
      3. 列表新增行时，高亮该行，以便让用户操作成功；
   6. 列表添加新项目
      1. 做法：在列表上方，按所需字段，放置一空行，旁边再放置一个“添加”按钮；可实现快速添加；
      2. 适用：需要手工大量添加项目，且项目信息很简单，少于4-5项；
      3. 缺点：如果需要输入的信息很多，则此模式不适用；
   7. 概览加详情
      1. 做法：有一个概览列表，点击出现一个详情页（面板）（可同页，或者不同页，如果屏幕面积足够，则同页比较好）
      2. 适用：用户主要通过概览视图浏览，当需要进一步查看详情时，再点击进入查看；
   8. 部件选择器
      1. 场景：用户需要选择一些部件，来完成某个项目的构建；
      2. 适用：部件超过10个；部件可分类；部件间相互独立；
      3. 按钮：移进，移出，结束；
   9. 标签
      1. 场景：将一个物体分成多个组，每组一个标签，用户通过切换标签浏览信息；
   10. 表格排序
       1. 允许用户表格的不同进行排序；
   11. 缩略图
       1. 允许用户从缩略图知悉概况，再决定是否做下一步动作，避免展示大图和下载视频耗费无谓的时间；
   12. 查看
       1. WEB应用常使用：查看、编辑、返回模式；
       2. 查看提供内容集合和操作按钮汇总的安全区域；
6. 个性化
   1. 窗口自定义
      1. 常用于提供个性化功能的场景，比如个人首页，通常需要用户注册和登录；
      2. 窗口模式，用户较熟悉，隐喻明显；
      3. 操作按钮：最小化、关闭、编辑等；
   2. 登录模式
      1. 一些信息需要存储，以便下次更方便的使用产品；
      2. 可允许先做为游客的身份使用，等必要时再要求用户注册；
      3. 用邮件注册的好处是可以使用邮箱找回密码；
      4. 如果登录频繁，允许将账号和密码存储在本地，避免每次重复输入；
      5. 提供忘记密码功能；
      6. 用户忘记是否注册，直接录入用户名和密码，此时可以跳转提示注册，而非简单的报错；
   3. 注册
      1. 尽量允许先使用再注册；
      2. 网站可以提供个性化服务时使用；
      3. 注册可以减少每次的重复信息录入时使用，比如常用地址薄；
      4. 不要问超过必要的信息，以免回答太多问题给用户带来挫败感，带来一些虚假数据；
      5. 提供查看和确认隐私政策的入口；
      6. 尽量不要强制注册；
7. 购物
   1. 预订
      1. 飞机、酒店、汽车等；
      2. 允许用户多维度的灵活搜索，比如按日期，按价格等；
      3. 用户行为模式
         1. 搜索
         2. 对比&决策
         3. 下单付款
      4. 系统流程：输入条件，搜索，展示结果，查看结果，下单；
   2. 产品对比
      1. 使用二维表格展示对比相同维度下各产品的参数；
         1. 不同的值
         2. 有或没有
   3. 产品顾问
      1. 将用户的决策拆分成多个考虑维度，做成选项，让用户逐项勾选偏好，最终生成建议；（有点类似向导模式）
      2. 适用于产品种类数目多，用户不专业，需要花费时间比较
   4. 产品定制
      1. 允许用户定制要购买的商品
      2. 用户更改参数，可以马上看到更改后的效果；
   5. 购买流程
      1. 步骤
         1. 识别客户
         2. 填写送货地址及勾选相关选项，如快递方式，送货时间等；
         3. 选择付款方式
         4. 预览
         5. 确认并下单
         6. 收到邮件确认
      2. 用户中途可随时退出；
      3. 常用向导模式，但如果一页可显示所有信息，则也可以不使用向导，更加简化；
      4. 减少页面其他元素的干扰（因为下单付款需要用户保持一定的注意力，避免被不相关的信息分散注意力，导致下单不成功）
      5. 常见注册才能下单，但这样不好，应该是先允许下单，下单成功后，再邀请注册；此时既保证了转化率，又能够利用下单信息减少注册输入；
      6. 进一步的邮件确认（貌似也不是很需要，除了亚马逊，国内的淘宝京东都没有这一步）
   6. 购物车
      1. 对于熟手，并不需要运费或物流，如虚拟产品，或者一般单项购买，非组合，则可以考虑一键下单；
      2. 全局可见，可看可删；
      3. 要素：名称，价格，库存，商品链接，总价，支付方式
      4. 可结算，可继续浏览
   7. 店铺位置
      1. 搜索名称或位置关键字，在地图上显示结果，对结果进行编号，与列表对应，或者悬停显示详细信息；
      2. 适用：有很多实体店；如果只有少数几个，则显示列表即可；
   8. 用户评论
      1. 适用：用户想知道其他用户的评价，以决定是否购买；适用网上购物，如果是线下，则用户可看实物；
      2. 方式：
         1. 允许用户添加评论；
         2. 文字，打分（星）；
      3. 注意事项
         1. 强制注册才能评论，避免恶意滥用
         2. 不干预，不审查；
         3. 利用抱怨处理展示服务
         4. 允许用户对评论打分，突出有用评论
         5. 可多维度打分；
   9. 虚拟商品展示
      1. 允许用户对商品的展示进行交互，模拟用户的体验试用感；
      2. 旋转，颜色，缩放，视频，细节图
      3. 制作成本高，但有效提高销售转化率
8. 选择
   1. 国家选择
      1. 如果选项很多，用下拉框；如果不多，展示清单；清单按字母排序；
      2. 别跟语言选择混淆了；
      3. 如果国家众多，且展示区域有限，可以考虑按大洲分组
   2. 日期
      1. 编辑框+选择器复合，前者给熟练用户使用；
      2. 注意提供行内格式提示；
      3. 允许多种间隔方式，如-，/和点；
      4. 支持2位数或4位数的年份；
      5. 需要对格式进行检验；
      6. 如果展示区域足够，可以直接展示日历，取代点击弹出的方式；
      7. 日期和月份/年可以分开成两个选择框（某些特殊的情况下）
   3. 语言
      1. 显示语言原本的文字；
      2. 不要使用图标，例如国旗，因为国旗代表国家，而非语言，会造成误会；
      3. 位置够的话，列出清单；不够的话，使用下拉框；
      4. 各页固定位置常驻展示，避免回到首页切换；
   4. 投票
      1. 展示选项，投完展示结果；
      2. 避免投前展示结果，以免用户的判断被影响
   5. 评级打分
      1. 只要网站有社交的一面，评级打分都可能用得上，典型如电子商务网站；
      2. 评级的入口一般置于产品页的产品主名称附近，一般在下方或右侧；
      3. 有时可结合评论，此时需要有提交按钮；
9. 输入数据
   1. 评论留言
      1. 留言提交后，显示在留言记录的最底下，并定位滚动条到相应的位置，高亮显示，目的是让用户确保已正确提交保存；除了留言内容，还应显示提交时间，提交人，以及一些其他可选信息；
   2. 限定输入格式
      1. 一些信息有特定格式，如果用户格式录错，导致数据不可用；因此正确的格式很重要，此时需要在界面上提示正确的输入格式，避免用户犯错；
   3. 填写表单
      1. 适用：需要用户提供某些信息，才可能为用户提供服务；
      2. 注意事项
         1. 文字含义：确保含义清晰，如有可能，辅以简单示例；
         2. 归类分组；
         3. 可选项仅在能带来明显好处的情况下使用；
         4. 良好的默认值可以加快输入效率；
         5. 支持键盘快捷键，例如TAB和ENTER；
10. 其他
    1. 页脚栏
       1. 版权声明
       2. 使用协议
       3. 隐私协议
       4. 联系方式
    2. 热门清单
       1. 有一个大的选项集合，逐个查阅成本太高，提供最受欢迎的选项供用户参考；
       2. 给选项编号，5-10个，起名TOP 5等；
    3. 模板
       1. 缘起
       2. 解决方案
       3. 适用场景
       4. 使用方法
       5. 分析