移动端列表页设计思考

列表页作为一个基础功能模块,几乎在每个产品中都能看到,在实际项目设计中也经常会涉及。我通过在项目实践过程中的学习和思考,从列表页的本质、目的出发,总结以下列表页的设计方法。

Part 1 列表的本质和目的

列表的本质其实是为用户提供一系列同类数据信息的展示。那信息展示的目的是什么?解决的是什么问题?在大多数情况下,列表的信息展示只是某个任务的一个中间环节,比如到达详情页的信息浏览或者批量处理的数据选择,所以列表其实只是用户达到最终目的的其中一个过程,如此可以将列表的本质总结为:为用户提供一系列的同类信息展示,通过有效的信息组织,帮助用户快速找到感兴趣的信息并引导进入下一步的操作。

Part 2 列表的分类

根据列表内容不同的复杂程度,可以将列表大致分为这几类:

纯信息展示

第一种是纯信息展示的列表,用户来到这里的目的就是为了获取信息,没有下一步的操作。

信息的缩略展示

第二种是信息缩略展示的列表,用户通过列表页的基础信息找到感兴趣的内容进入详情页进行下一步操作。

带操作的信息展示

第三种是带操作的信息展示列表,由于对于下一级详情页的操作(该流程的最终目的)很明确,所以将关键操作前置到列表页。

Part 3 列表的组成

从列表的几个基本分类可以归纳总结出,无论列表内容如何展示,本质上就是由两部分内容组成,一个是信息,一个是操作。信息的展示形式包括文字、图片、图形标签等等,操作一般来说有按钮和手势。

列表的信息

在设计列表页每个item的信息需要思考以下两个问题:

  1. 列表应该提供哪些信息足以帮助用户进行判断,找到感兴趣的信息?
  2. 列表的信息如何有效组织?

对于第一个问题,列表应该提供哪些信息,这在不同领域、不同场景下的情况都会不同,比如对于一个社交类产品,头像、昵称、个人介绍、身份标示就可以帮助用户进行判断了;但是如果切换到电商类产品,商品图片、商品名称、价格、优惠信息、销量、评价、店铺都会影响用户的判断。
这时候就引出第二个问题,列表的信息如何有效组织,尤其是信息量多的列表,比如上文提到的电商类产品,这么多信息的优先级是怎样的,哪些信息更加切中用户的关注点,基于优先级的判断再对信息的展现形式进行设计。
这里举一个我实际工作中的例子,在健身房会籍跟进转化一个会员的场景下,需要先将潜在会员信息注册到系统中,然后持续跟进潜在会员,最后转化潜在会员为购卡会员。对于新注册会员列表,关键信息为会员的注册来源、注册推荐人、注册时间;对于跟进中会员,关键信息为会员的最新跟进记录;对于已购卡会员,关键信息为会员的首次购卡记录。

列表的操作

常见的列表操作主要有两种,一种是将关键操作前置的按钮,一种是隐藏手势操作。
对于第一种关键操作前置,再举一个我实际工作中的例子,在会员缺勤统计列表,健身房会籍在统计长时间未出勤的会员之后,通常需要去联系维护会员,所以在设计这个列表的时候,将联系会员的操作前置,用户可以直接在列表页完成关键操作。

手势隐藏操作常见于iOS系统中对联系人列表的操作,同时在一些效率类工具中也很常见。但是对于绝大多数用户来说,手势隐藏操作是具备一定们槛的,对于基础产品它应该是操作另一个维度的补充而不是唯一方式,使用需要慎重。

Part 4 快速定位信息的辅助工具

在一些情况下,列表页往往包含大量数据,如果只能通过下滑查找内容显然是效率很低的,这时候就需要借助一些辅助工具来提高用户找到感兴趣的信息的效率。一般来说有搜索、分类、筛选、排序这几种方式。

  1. 搜索
    当用户有很明确的查找目标的时候,通常需要使用搜索功能。在设计搜索功能的时候需要考虑哪些字段是支持搜索的,这跟梳理列表项的关键信息的逻辑是一致的,而且最好将支持搜索的字段显示在搜索栏,引导用户正确搜索。

  2. 分类
    分类更多用于列表页展示类型过多的情况,同时这些分类又是互斥的,使用分类能帮助用户更快定位到目标信息类型。

  3. 筛选&排序
    排序和筛选通常用于列表项信息较多较复杂的列表,由于影响用户判断的因素较多,所以将关键的影响因素提取为筛选项或者排序项汇总在一起提供给用户。筛选排序项较多的情况下,设计时还需考虑如何将筛选排序有逻辑地分类展示。为提高筛选效率,在一些情况下还会将特殊的筛选项暴露在列表页上,这多见于大型电商平台。