一个好用的列表是如何设计出来的

一、列表介绍

1.列表定义

列表，又称表格，以行和列的形式组成表格，装载文字或者图片等内容。网上的许多教程把列表和表单的概念混淆，表单提供的是数据采集功能，通常利用文本框，单选框，复选框等组件进行数据采集。

2.列表作用

列表有3个方面的作用：

（1）规范的存储大量的数据，如后台管理中的用户管理，可以规范地将用户名称、年龄、电话号码等信息规范存储；

（2）方便查找，通过一个列表，可以比较方便搜索数据库中的内容；

（3）方便比较，大量内容最直观的对比方式还是用列表。

3.列表元素

列表包括的元素有表头，位于顶行，如下图左侧的“代码”、“名称”；以及内容，位于表头下方。

二、列表的类型

1.经典列表

如图所示，以行和列组成文字矩阵的列表。

2.图文列表

如下图所示，装载图片和文字内容组成的列表，其他类似的还包括淘宝中的商品列表页，这种图文列表一般是考虑利用图片直观展示更生动的内容。

三、列表设计

1.提高列表的可读性

（1）对齐

表格对齐的方式建议是左边第一列（或者前两列）左对齐，右侧所有列右对齐。主要原因是左边左对齐符合人眼球从左到右的阅读习惯，用户阅读表格是首先是从左开始阅读，先看到左侧的关键信息；而右侧的列右对齐是因为考虑到列表通常都会带有数字，而右对齐的数字方便进行大小比对。

（2）排序

列表支持排序是提高可读性的重要影响因素之一，支持升序、降序的排序操作，能方便比较数值的大小。注意，排序的图标一般用上下三角箭头表示，上箭头表示升序，下箭头表示降序。

2.列表的筛选

（1）基本筛选

列表要从海量的数据中获取信息，为列表设定筛选条件必不可少。筛选条件一般是通过支持字段进行查找，主要是两种方式：模糊搜索以及精确筛选。

模糊搜索：通过输入关键词查找内容，多个关键词可以合并在一起，例如订单名称或者订单号，模糊搜索也可以通过唯一匹配进行精准查找，例如通过QQ号搜索添加好友。

精确筛选：通过穷举选项进行筛选。

（2）高级筛选

对于筛选条件比较多的表单，可以默认展示常用的筛选项，其他筛选项默认收齐，需要点击再展开。这里主要是因为两个方面的原因：一是电脑屏幕高度一般大约700px，筛选条件过多会导致看不到列表内容只能看到筛选条件；二是过多的筛选条件呈现出来，会导致用户阅读速度变得更慢，变相降低表格筛选效率。