列表算是一个非常基础的设计元素,无非是一排一排的数据内容,加上一些基本的操作。但是,再简单的东西,也有很多的细节需要思考。
表格中的操作设计
大多数情况下,列表中的每一排是一个条目,每一个条目都会有一些基本的操作,例如删除,编辑,查看详情。网上有各种各样的设计列表样稿,但是总体来说,有以下几种比较典型的操作设计方案。在真实的产品设计中,也常会有以下几种方案的结合体出现。
方案一:每一排都显示具体的操作
这种方案一般比较适合各种各样比较简单直观的操作设计,支持各种用户不需要查看条目详情,直接就可以根据列表上的信息做出快速的判断并且高频发生的操作。
优点:
操作的可视性很高,对于新用户来说,所有操作一目了然
对于高频操作,用户只需要一次点击就可以完成具体的操作
缺点:
按钮因为视觉特征比较明显,造成了不必要的困扰
扩展性不强,毕竟列表长度有限
方案二:只有在鼠标悬浮, 或者点击某个具体按钮之后现实操作
这种方案将操作隐藏起来,比较适用于一些操作风险较高,操作非常多而导致无法在列表上完全显示,或者操作不常发生的情况。
优点:
信息密度低,可以帮助页面突出更加重要的信息,例如条目名称,条目阶段。待用户发现需要进行操作时,再显示操作选项
对于风险比较高的操作,例如停止一个正在运行的服务,这样的做法提高了操作门槛
缺点:
增加用户的点击次数
操作的可视性较低,用户需要鼠标移到表格的某一行上,或者需要点击一个右侧的icon,才可以看到全部可行的操作,新用户可能需要学习一段时间
方案三:支持批量操作,并且在列表上方进行统一操作
这种方案适用于用户经常需要多个文件进行同时管理的情况。
优点:
对于用户经常需要批量管理的列表有帮助
缺点:
如果不同的项目,可以支持的操作不同,逻辑会比较复杂
注意细节:在设计的时候同时要对点击区域做考虑,要把简单好用的设计留给用户行为。
表格中的信息设计
分页设计和卷轴设计
分页设计:分页来展现全部的列表项目。
优点:
分页是一种非常符合用户认知逻辑的归类方式。它可以帮助用户从一个很长的列表中定位某个特定的项目
缺点:
每次到达页面底端时,用户需要点击之后才能到下一页,对于一些浏览性的表格来说,点击显得比较多余
卷轴设计:用户触底之后,页面自动显示“加载更多”,然后呈现出更多信息。(一般来讲,卷轴设计在列表中适用的情况较少)
优点:
适用于一些浏览性的列表,用户更多得在获取信息,例如花瓣网的信息流(不过这个也不能算列表),用户可以不需要点击就获取更多的内容
缺点:
对于一个列表来说,用户常常会不知道自己还有多少没有看完,导致在精神上比较有负担。
一般比较难定位一个具体的项目位置。
原文地址:zhuanlan.zhihu