引言： 列表页的设计，一直被大家所忽略。感觉没什么可做，亦或没什么发力点，设计侧内部给到的排期时间也不充裕，提需求的也不看重，自然，设计师输出的过程中就少了一些思考和仔细。最后进入开发或上线后，可能就会暴露问题。今天给大家整理一下关于列表页的设计归纳，以及应该注意的一些细节问题。 本文预估阅读时长：10分钟 概念 什么是列表页？日常工作中，我们也会叫List页，就是把若干内容以某维度集合起来的聚合页。 类型 主要常见的列表页大类我们可以划分为以下三种： 当然内容&功能list不仅仅只有微信这样的形式，这里只是示例，比如携程的APP首页也是相同类型的列表页。筛选结果list，我们暂且定义为：从某些入口进入的，不需要用户输入任何内容的列表页。 搜索结果list和筛选结果list，除了结果内容的多少之外，貌似看上去都一样。我们聚焦在页面顶部，就会发现有两个地方不同：一个是搜索框内是否有关键词，一个是“更多筛选”的选项是否高亮。 对于搜索结果list搜索框展示关键词，大家应该都毋庸置疑。但筛选结果list，用户没有输入，是从某个入口进来的，顺推这里增设搜索框的话，搜索框内应该是没有任何内容的。如果考虑到告知用户当前是根据什么样条件展示的内容，应在页面标题栏告知。 但实际上，一些平台筛选结果list的搜索框依然有关键词。比如天猫，从分类中女鞋-板鞋进入，如图： 我们大胆猜测两种可能，一是为了节约资源，直接复用了搜索结果list；另一个，为了节省屏幕空间，呈现更多内容，去掉了顶部的标题栏，间接告知用户当前页面的主题内容是什么。但不管原因怎样，我个人觉得，这样做不是特别严谨，原因如下： 其一：前面提到搜索框是用户输入关键词的地方。虽然平台将若干关键词组合成某个入口，但实际用户并没有输入关键词，不应该以这样的形式呈现。 其二：试想，用户来到筛选结果list，想在当前的品类或内容下，再细分，在搜索框输入了关键词，如：红色，但实际天猫的搜索池是全站，出现的是红色的裙子，并非锁定在当前的品类，造成结果懵逼。 因此个人建议：筛选结果页，若考虑提供搜索框，应该是锁定在当前品类下或者某些条件的，如前面图所示的京东房产筛选结果列表。亦或告知用户此搜索的搜索范畴。下图是当时做TOPLIFE的筛选列表页的时候，考虑到以上问题，没有提供搜索框，同时还有另一个原因，一期上线的时候，SKU数量相对较少。 再简单说下“更多筛选”高亮的问题，因为在入口处，已经锁定了一些“筛选”内的一些选项，搜索结果页和筛选结果页的底层逻辑是一样的，故这里选择了高亮状态，来告知用户，“筛选”中有被选中的选项。 搜索结果list和筛选结果list是很像，但他们的确不一样。 作用 如下图，列表页背后的终极目标就是提高效率，解决问题。 我们举例电商平台的列表页，来到列表页，就是想快速找到我想要购买的商品，完成凑单、查找商品等任务。其中对比，包含不同纬度的排名对比，以及内容之间的对比。而筛选是让结果能够更精准，减少对比内容的数量。 大多数的列表页都是某个流程上的重要中间环节，并不是用户的最终目的，故此，我们在设计中，应该将效率作为整个列表页的KPI来进行考核。 主要结构 围绕作用，我们再来看看列表页都应该提供哪些内容。主要分为两个大模块，如图： 内容是主体，功能是提高效率的工具。两者也有着相互关系。主体有内容时，工具才能发挥作用，工具也会影响内容的呈现。 内容模块，根据平台或者业务属性不同，需要展示的信息也不同。但所有的列表页都要明确告知用户：当前页面是根据什么条件展示的内容； 以上三种类型的列表页功能可以大致归为如图以下内容： 以上归纳了几种常见功能，不同场景下的列表页，选用的功能也是根据自身实际情况来决定，当然也要根据用户的实际需求来设定，如电商平台列表页的功能和社交平台的列表承载的一定是不一样的。但是要遵循一点：平衡效率和内容呈现量。如果一股脑子全露出，必定会影响用户的实际效率，优先级一定要理清楚。 我们可以参考天猫，搜索结果list，当用户向下浏览的时候，顶部所有内容，会向上隐藏，屏幕留出最大区域来展示主体。 设计细节 1.尽量减少用户输入 搜索容易出错。筛选路径拉长，两者如果体验不佳，都会造成用户流失。关于列表页内的搜索，减少输入一般策略有，用户点击搜索框，就会出现热搜、历史搜索。用户输入内容时，就会出现联想搜索等等，甚至有些自动帮你填好热门的关键词，只要点击确认就可以。 这里提供一个建议，如果用户输入的关键词涉及到多个品类时，结果列表页中是否可以能够外露出品不同品类名称，让用户去点击，实际就是将重要的筛选项外露出来，减少用户再次输入或减短筛选的路径。如用户搜索”咖啡“，则会在结果页上呈现出：速溶咖啡、咖啡粉、咖啡豆、咖啡利口酒等。同时也存在不同品类，涉及到内容也不尽相同，是否能够在资源充足的情况下，能够针对性的提供对应方案。 2.合理解决异常流 出错是永远避免不了的，用户出错的”智慧”也是无穷的，我们只能尽量减少。针对出错，我们应该怎样让用户找到“正确”结果 。 搜索是最容易出现出错的， 下图为京东房产搜索异常的处理，列表页并非全以空状态展示，而是即便你出错，我也能给你内容。 3.尊重需求 |
|
|
