列表是最常见一种界面元素。之前我用「元素+操作」的方式记录了列表设计的注意点，发现这种总结方式不适合向别人分享。因此我将内容提炼为具体的设计问题，总结为以下设计要点：

用户面对列表，可能会：概览信息 / 逐项浏览 / 查找特定信息 / 对比信息 / 编辑信息。用户面对列表，可能会：概览信息 / 逐项浏览 / 查找特定信息 / 对比信息 / 编辑信息。

· 怎样使列表更易读？

· 怎样帮助用户想找到列表中特定的信息？

· 列表项信息过多怎么办？

· 列表项信息过多如何处理？

· 有哪些手动排序方式？

列表是什么

一组高度结构化的信息，信息有文字、图片、链接、按钮等多种形式。

列表的使用场景

用户面对列表，可能会：概览信息 / 逐项浏览 / 查找特定信息 / 对比信息 / 编辑信息。

设计要点

针对上述的场景，思考怎样去设计列表：

· 怎样使列表更易读？

1. 使用斑马行。

2. 高亮光标所处位置，帮助用户聚焦。

3. 表格类列表，固定表头，减少用户的记忆负荷。

· 怎样帮助用户想找到列表中特定的信息？

1. 支持排序，并设置合适的默认值。

2. 支持筛选，并设置合适的默认值。

3. 支持搜索，包括模糊搜索和精确搜索。

4. 可选视图，如，在电商网站中，缩略图视图比纵向列表视图更能展示出商品图片的细节，而后者比前者更适合展示商品的文字信息。

· 列表项信息过多，如何处理？

1. 隐藏次要内容，鼠标悬停后展示全部。

百度网盘，鼠标悬停时显示操作项

2. 折叠次要内容，让列表项可展开。

3. 使用树列表或多行合并列表，让信息进一步分层。

4. 用样式代替文字信息，如 gmail 邮件标题用加粗表示未读。

· 有哪些手动排序方式？

除了之前提到过的默认排序之外，有的列表还需要支持手动排序。在《列表排序交互方式小结》中，我做了更详细的说明。

1. 置顶

置顶的特点在于无论列表内容有多少，可以简单地完成对目标内容的操作，适用于对列表中单个或少数几项进行突出。如QQ 联系人列表、淘宝店铺的商品展示列表。

2. 拖拽

适用于：需要安排整体项目顺序的列表，如某些相册为了营造浏览图片的节奏感，会精心安排每张图的顺序。这是最自然的手动排序方式，但不适用于列表项过多的情况，因为如果使用拖拽的方式，所有列表项都需要在同一页加载出来。另外要注意到是，在视觉上列表项需要表现出可拖拽性，拖拽触发、完成过程中的各项值也需要详细定义。

3. 输入序号

适用于：需要安排整体项目顺序、但体量较大不便于拖拽的列表。如豆瓣的豆列。

4. 上/下微调

单次点击实现一个单位的上/下移动，操作简单，适用于对列表局部中的项进行排序。常用于文件创建类工具的内容管理，如 Sketch、Axure 的图层管理。

与移动端列表的区别

· 设备方面，移动端显示空间小得多

只显示最重要的，将更多信息放在下一级的详情页。

· 使用场景方面，移动端更能感知实时实地的环境

可以考虑自动基于地理位置的筛选。

· 网络环境方面，移动端网络状况不稳定

要制定更细致的分步加载规则，优先加载重要信息。

· 操作方式上

1. 利用手势替代按钮，节约界面空间，如清单列表，滑动列表项标记完成。

2. 考虑单手操作，将操作项集中在界面一边。

3. 尽量隐藏操作，防止滑动时误操作。