认识达内从这里开始

列表算是一个非常基础的设计元素，无非是一排一排的数据内容，加上一些基本的操作。最近连续设计了一个礼拜的列表后，最直观的感受是：再简单的东西，也有很多的细节需要思考。尤其对于很多数据产品和工具型产品，列表是非常重要的一部分，例如电子邮箱，文件系统（Google drive, dropbox)。一个信息结构合理，操作明确表格、列表设计，能够帮助用户减轻很多的阅读负担。达内长沙IT培训的这篇文章会分享一些列表设计中的基本思路。

表格中的操作设计

大多数情况下，列表中的每一排是一个item，每一个item都会有一些基本的操作，例如删除、编辑和查看详情。网上有各种各样的设计列表样稿，但是总体来说，有以下几种比较典型的操作设计方案。在真实的产品设计中，也常会有以下几种方案的结合体出现。

方案一：每一排都显示具体的操作

这种方案一般比较适合各种各样比较简单直观的操作设计，支持各种用户不需要查看item detail，直接就可以根据列表上的信息做出快速的判断并且高频发生的操作。

Pros

操作的discoverability很高，对于新用户来说，所有操作一目了然；

对于high-frequency的操作，用户只需要one-click就可以完成具体的操作。

Cons

信息过载。尤其是举的例子里，要是这个list非常长的话，页面将会非常拥挤。而且这些按钮因为视觉特征比较明显，造成了不必要的distraction；

扩展性不强。毕竟列表长度有限，操作要是继续增加，迟早都会需要group到一个下拉菜单里去；

误操作率相对较高。同样因为列表上的空间有限，一般操作只能放下icon，再加上几个icon之间距离非常近，很容易一不小心就点错了。对于危险系数比较高的操作，千万不要采用这种设计。

方案二：只有在鼠标hover,或者点击某个具体按钮之后现实操作

这种方案将操作隐藏起来，比较适用于一些操作比较risk较高，操作非常多而导致无法再列表上完全显示，或者操作不常发生的情况。

Pros

信息密度低，可以帮助页面突出更加重要的信息，例如Item name，item status。待用户发现需要进行操作时，再显示操作选项；

对于risk比较高的危险操作，例如停止一个正在运行的server，这样的做法提高了操作门槛。

Cons

如果很多情况下，用户在不需要查看详细信息只需要通过列表就可以对项目进行操作时，这样的设计会增加用户的点击次数；

操作的discoverability较低，用户需要鼠标移到表格的某一行上，或者需要点击一个右侧的icon，才可以看到全部可行的操作。

方案三：支持multi-row action，用户选中多个item，并且在列表上方进行统一操作

这种方案适用于用户经常需要多个文件进行同时管理的情况。

Pros

对于用户经常需要批量管理的列表有帮助

Cons

实现成本相较于单行操作较高，如果只有assumption，没有真实的用户数据佐证，产品团队不会去开发这样的操作；

如果不同的项目，可以支持的操作不同，逻辑会比较复杂。

目前Google Drive的列表，gmail, dropbox都是采用这样的设计，用户可以对多个项目进行批量操作。其中唯一的不同是，gmail需要用户专门点击checkbox，来选中某一行，而Google Drive和dropbox是直接点击这一行就可以选中。

达内长沙IT培训猜这样的设计主要是因为对于email来说，更多的use case是用户查看详细内容，所以把最简单的操作（也就是点击一整行）留给了这个行为，而点击checkbox才可以选中这封邮件；然而对于文件管理系统来说，用户更多的操作是对文章进行管理，所以点击行就可以选中整个文件。