列表设计

时间：2023-09-29 13:12:01 | 来源：网站运营

时间：2023-09-29 13:12:01 来源：网站运营

列表设计：在大家的理解范围之内，列表设计是最常用的交互样式根据前段框架或者通用的模版。往往会忽略列表的交互设计的重要性。

但列表对于整个系统来说是最重要的组成部分，尤其是对整理数据或者看报表的用户来说是最重要的，这里的用户多指领导层，只有领导才会更多的关注报表和数据。所以好的列表设计可以让整个系统更好的得到领导的肯定。




对于列表设计，我们主要先了解一下，列表的主要功能是什么？

是数据统计、数据预览、数据对比、数据管理。




数据统计、数据预览、数据对比，是用户最主要的需求，也是列表的主要功能。数据管理，是为了更好的让数据的功能满足不同用户的需求。

这里我们的列表设计主要是以数据管理的角度去设计列表。

数据管理包含数据筛选、数据操作、数据展示




一、数据筛选

1、条件搜索（模糊搜索、精确搜索、高级搜索）

1.1、条件搜索，就是把列表的重要关键字段作为条件，进行数据搜索。常见的放置位置在是在列表的上方区域，条件搜索分为模糊搜索和精确搜索，模糊搜索，属于包含关系，如，输入“A”，搜索出所有包含"A“的数据；精确搜索，属于等于关系，如，输入”A“，搜索出只有"A"的数据。除了模糊搜索和精确搜索以外还有高级搜索，高级搜索包含了除包含关系和等于关系的其他所有关系，如，不能为空，等于零等。

1.2、条件搜索样式，一般根据场景设置，一种数据量大，以查询浏览为主的列表，尽量把所有的搜索条件都展开，一种是以浏览管理为主的列表，尽量把搜索条件折起来，展示最主要的查询条件

2、列表表头搜索

列表表头搜索，最常见的一种就是每个表头字段下面一个筛选框；另一种比较特殊的表头搜索主要是根据数据根据查询条件，列表表头字段改变，改变后的列表字段查询，

3、列表表头排序

列表表头排序，多用于时间排序，

二、数据操作

1、批量操作（操作功功区）

批量操作也叫一对多的操作，就是对列表里面的数据可以多个批量操作，比如删除、停用等。这类操作都会放在列表上方区域。新建、导入、导出。

2、单个操作（操作拦位置）

单个操作也叫一对一的操作，对列表中的数据一对一的操作。比如，详情、编辑等。这类的操一般会放在列表操作栏中，操作栏一般放在列表的左边或者右边，如果列表宽度超过一屏，右边的操作栏会采用浮动的样式，操作栏功能按钮一般不超过3个，如果超过采用隐藏的形式。

三、数据展示

1、字段配置

字段配置主要用于一个列表满足不同用户的需求时，对不同用户所关注的数据字段不一样，进行人性化的配置。有字段配置的列表，初始状态有两中表现形式，一种是，默认基本字段，用户增加所需要的字段（做加法）；一种是，所有字段都展示，用户减去自己不想要的字段（做减法）。字段配置按钮一般放置在列表右上方。

2、字段展示

字段展示只列表中的每个字段展示的规则，首先字段的宽度，一般分为固定和自适应宽度。固定宽度指每个字段宽度都时一个固定的值（如果字段过少，不满一屏可等分），自适应宽度，就是字段的宽度根据字段的大小变化而变化，但也哟最大值，一般最大值为15个字符，超过15个字符用...代替。一般不建议数据换行。

3、分页设置

分页设置时为了减少加载数据，增加打开页面速度。默认分页根据电脑屏幕的显示最大数据量显示，一般为25、50、100、200等。分页需要显示当前页，总共页数，跳转到相应页面，数据总计等。

四、写在最后

因为最近一直在做后台系统的交互设计，接触了很多列表页面设计，和许多奇奇怪怪的场景，但总体来说，列表的主要目的是一样的：数据统计、数据预览、数据对比、数据管理。也是基于最基础的列表结构来扩展，满足不同的场景需求。这里简单的对列表结构进行了简单的总结，希望在工作中对大家有锁帮助，也希望大家可以多多交流。