交互日记 | 列表该如何设计？

最近在设计一个服务平台的界面，也是首次接受这种后台类型的设计，难免有不少问题是之前没有遇到过的，因此这里把设计中遇到的问题、自己的思考、最后的解决方法记录下来。一是为了方便自己以后回顾，另外也和简书上的好友交流一下，希望能得到提高。

1.问题

列表原型

这是产品给的列表页面原型，每个条目后边都跟有相应的操作选项，基本的查看，修改，删除和用户权限的设置，结构很简单。

2.设计过程

拿到手后没有想太多，直接开始进行设计。

设计稿v1.0

第一版的设计直接沿用了产品的原型，只是把操作的文字变成了图标，从而显得有一些设计感。删除操作具有不可逆的属性，属于重要操作，用了橙色进行区分，提醒用户注意。

完成之后想了想，发现图标虽然在视觉上比文字要好看的多，但是没有文字显得直观，用户在操作时可能会产生一定的疑惑，并不清楚知道每个图标所代表的准确含义。于是，进行了改进设计。

设计稿v1.1

改进后的设计加入了鼠标移入的文字提示，当用户把鼠标放在图标上时，会出现相关的文字，告诉用户这个操作到底是用来做什么的。这样不仅保持了视觉的美观，而且在可用性方面也有了很大的改进。

然而自己并不满意，还是觉得这几个图标摆在这里显得元素很多，整个界面显得冗余，不是那么的简洁，于是继续进行改进。在查看了大量的相关设计稿之后，终于设计出了自己认为又简洁又方便的设计，如下图

设计稿v2.0-1 设计稿v2.0-2

新版设计把整个操作放进了一个下拉框中，当用户需要对当前选项进行操作时，可以点开下拉框，从而出现具体的操作选项，所有的选项均采用文字加图标的设计，语义清晰。整个界面非常简洁，用户可以清楚的找到自己需要的操作。

但是最后拿给产品的时候，却立马被否定了。

产品给出的结论是：这样的设计界面是非常简洁，但是用户在操作的时候，原先只需要一次点击就可以完成操作，而现在却需要两次点击，产品的操作变得繁琐。

3.问题思考

那么问题来了，我们在设计列表页面时，到底是要保持整个界面的简洁清晰，还是要保证所有的元素方便操作？

其实答案在于这个列表的具体用途是什么。

如果一个列表的作用是显示，用户的主要操作是看，主要目标是为了获取信息，那么我们在设计的时候就应该保持界面的简洁清晰，从而用户可以很方便的获取自己想要的信息。

如果一个列表的作用是操作，用户的主要操作的点击，主要目标是为了完成特定的任务，那么我们在设计的时候就应该注重可用性，保证用户可以方便完成操作。

基于以上的思考，再来看我们的原型。这是一个管理员的列表，主要是为了增加，修改或者删除相应的管理员，或者给某个管理员赋予一定的权限，那么这里的重点就是操作，这个列表是用来完成任务的，那么在设计的时候就应该以方便用户的操作为目的。

接下来我又对自己的设计进行了修改，结果如下

设计稿v3.0

最终设计采用了设计稿v1.0的思路，只是对配色等细节进行了优化，使得整个界面显得更加和谐，同时满足了用户方便操作的需求。

4.总结

任何一个元素的设计，都是建立在它的最终目的之上的。在设计的过程中，我们首先要深刻理解自己是为什么而设计，通过设计需要达到的最终目的是什么。设计是用来解决问题的，只有我们的设计很好的解决了最终的问题，才能算合适的设计。