本文将分析列表在各种情境的设计方法，以及需要注意的事项。 列表常见的使用情境 概观 浏览较多的的资讯时，列表可以提供一种概观性的的方式来呈现内容。 逐一浏览项目 使用者可能逐一或随机的的阅读资讯，就像是Facebook动态资讯。 搜寻 使用者可能在清单上寻找他们想要的资讯，就像是Google搜寻结果。 分类与过滤 使用者可能正在分类资讯或者使用一些方式（档案大小、名称）过滤内容。 项目的整理、新增、删除与分类 使用者正在整理资讯，此时很有可能需要多选、搬移的辅助功能。 列表的设计模式 1。双面版选择器 双面板列表是一种将列表区分为两个区域的一种设计模式，使用者可以自由在第一个面上选择项目，第二个面版上会显示面板一选择的项目内容。 优点 操作非常的有效率，不需要来来回回的在不同列表切换。 减少使用者记忆与认知的负担，使用者不必瞭解内容在列表上的位置，也不需要学习如何返回列表。 缺点 需要比较大的萤幕时才能支持。 设计要点 请务必清楚的标示在面板一被选取的项目 2。单视窗深入 会使用一个基本的列表显示内容，当使用者点选某个项目时，会使用新的画面显示内容，新的画面会取代列表画面。 优点 使用者可以专心的处理详细资讯。 缺点 整体效率较低，需要不断的进入、离开 无法一次处理多个资讯 设计要点 因为整个画面都被新的画面取代，请确保在详细页面中有清楚的返回按钮，小心使用者迷失方向了 返回列表时，请务必恢复到前一个的状态 3。清单嵌板 列表会在原地展开收起，用来显示该项目的详细资讯。 优点 能够同时看到多个展开的内容资讯，方便比较。 因为详细内容与列表呈现在同一个画面，能轻松的阅读资讯 缺点 容易与上下项目容易搞混 详细内容太多的时候，不容易操作与定位（scrolling） 设计要点 务必将展开收起状态设计的清楚 使用图示v搭配文字的方式隐喻 4。缩图分格 将列表是用网格缩图的方式呈现，让使用者可以使用视觉图片的方式浏览内容。 优点 图像比文字还容易辨识，而且更容易的区分。 因为详细内容与列表呈现在同一个画面，能轻松的阅读资讯 缺点 容易单调乏味，也许可以把较推荐的内容放大展示 依赖文字来寻找的内容，不适合使用，因为使用者必须不断跳跃浏览（相较于垂直列表） 设计要点 注意图片缩放后的比例与解析度 避免没有图片的项目，可以在适当的时候给予预设缩图。 5。旋转木马 将一组项目使用水平弧线或水平排列的呈现方式，允许使用者向左或向右检视内容，通常当前（中间）的项目会较大显示。 优点 因为使用到空间z轴，可以省下更多的空间 能够让使用者把注意力放在正中央的内容上 缺点 无法一次呈现较多的资讯 相较于中央资讯，其他资讯无法完整的展示 设计要点 如果要用来展时较多的项目时，可以使用Scrollbar或前后的按钮来设计 旋转木马与Slider非常相似，旋转木马用来一次多个项目。 Safari在MacOSX10。9之前时也使用这样的方式展示TopSites，在10。9版后改用缩图列表的方式 6。斑马列表 使用两种不同的色彩作为列表项目的背景，使项目容易被区分出来。利用色块的方式将列表转换成合理的视觉物件（完形心理学封闭性） 优点 使用者可以轻易辨识列表项目，减少认知与视觉搜寻的时间 设计要点 在列表较为紧密的情况下使用这个设计方式 7。字母标记卷轴 列表使用字母的方式进行排列，在列表上使用英文字母的方式作为列表的卷轴，通常在电话簿、字典、音乐等列表上会看到这种模式。 使用情境 使用者不晓得项目的完整名称，但瞭解项目的开头字母，可以使用此模式进行快速定位。 设计要点 让字母卷轴支援拖移的操作方式 在卷轴上高亮显示目前列表位置对应的字母 8。页码标签 面对大量的列表资料时，将列表使用分页的方式切成多个页面阅读，一次阅读一页。 优点 使用者能够记忆项目的页次，对于瞭解资讯的位置、事后的寻找有很好的帮助 一次只载入一些资料，减少流量及载入的等候时间 缺点 体验不顺畅，浏览完一些资讯又必须重新点击页码载入新的内容 设计要点 必要时让使用者可以决定每页的项目数量大小 可以的话，显示总共的页次，让使用者能稍微瞭解共有多少资讯 除了页码外，使用较大的按钮或连结显示上下页按钮 关于分页显示与无限滚轴两个模式，会在之后的文章中进行详细的分析与比较 9。分层清单 使用多层的列表呈现内容，用来表显出内容与内容之间的阶层关系。 优点 高效且具有极佳的视觉可视性，能够一眼看出整体资讯架构 能够同时浏览与处理多个阶层的内容 缺点 较小萤幕时，此模式不容易操作 不适合使用在简单清楚的资讯架构中 设计要点 务必清楚的高亮标示当前所选择的阶层关系 10。树状清单 允许在列表结构中，展开出树状的阶层结构关系，此模式与分层清单不同，树状清单能够一次展示多个项目里头的阶层关系。 优点 高效且具有极佳的视觉可视性，能够一眼看出整体资讯架构 能够同时浏览与处理多个树状阶层的内容 缺点 某阶层内容特多时，此模式不容易操作 不适合使用在简单清楚的资讯架构中 设计要点 阶层与阶层间可以使用间距从视觉上表示彼此间的关系 务必清楚的显示展开收和的状态 11。可编辑的列表 一种快速且直觉的方式新增修改列表内容。 选择适合的解决方案 依照你的使用的情境，使用适当的对应列表呈现方式 “从清单中选择某个项目，该如何显示该项目的细节资讯？” 双面版选择器 清单嵌板 单视窗深入 “该如何呈现一份具有视觉元素的清单” 缩图分格 旋转木马 “如何管理一份长清单”
天猫清单功能体验报告网易Light安卓版产品解构分析报告如何去做一份竞品分析报告违背人性！支付宝红包大战失利原因浅析3个步骤，学习产品分析的基本逻辑豌豆荚一览产品初体验单读App体验报告：多元化发展如何才能更好用Pendo体验报告：你说的杀手锏真的是杀手锏？竞品分析报告，正确的思路是这样的百词斩扇贝单词竞品分析报告牛气股票APP产品分析你会写报告？产品体验报告的思路应该是这样的！