|C端列表页如何设计?


【|C端列表页如何设计?】编辑导读:在C端产品设计中 , 数据列表页是非常常见的页面 , 它一般用来展示多条信息条目 。 虽然看起来十分简单 , 但也是不可或缺非常重要的页面 。 本文作者从产品使用场景出发 , 对列表页设计的设计重点和步骤展开了梳理分析 , 供大家一同参考和学习 。
|C端列表页如何设计?
本文插图

一、场景描述
作为产品的设计者 , 我们想象以下几个常见的场景:

  1. 一款电商产品 , 在搜索框中输入手机 , 系统会反馈回来很多个手机相关的内容 , 且每个内容的信息较多 , 如何将这些内容“同时”展示给用户?
  2. 一个外卖平台 , 入驻了很多不同的餐厅提供不同的菜品 , 当用户打开软件定食物时 , 如何将合适的餐厅“同时”展示给用户?
  3. 策划一个特卖活动 , 对很多个商品进行打折促销 , 策划者希望活动页面能够让用户尽可能多的看到商品有哪些 , 如何将这些商品“同时”展示给用户?
上述场景在产品中经常发生:产品中存在很多内容 , 在一些场景下需要“同时”反馈给用户 , 供用户浏览 , 但页面空间是及其有限的 , 而每一条内容的信息量通常又较大 , “没办法”在同一个页面展示每一个内容的全部信息 。
二、解决方法
为了解决这个问题 , 我们引入一个页面 。 在这个页面 , 通过减少每一个内容所展示的信息量 , 来增加展示的内容数量 , 用户对某条内容产生兴趣后 , 再点击查看该内容的全部详情 。 这样 , 就在同一个页面空间中将多条内容展示在了用户面前 。 通常我们把这个中间页面称为列表页 。
如图 , 图一的列表页面中 , 展示了多个文章 , 但对每个文章 , 只展示了标题 , 如果用户对某一个文章感兴趣 , 可点击查看文章详情 。
|C端列表页如何设计?
本文插图

列表页在产品中十分常见 , 基本存在于产品的各个功能版块 , 是连接用户与内容详情的关键页面 , 对于列表页面的设计不可掉以轻心 。
三、如何设计列表页面?
产品将内容展示给用户 , 是希望用户会根据内容进行一些对产品有价值的操作 , 如购买、关注等 , 通常 , 用户对内容了解的越多 , 越可能产生这些行为 。
但由于列表页的特性 , 使得每一条内容只展示很少部分信息 , 因此 , 如何能够尽可能的让用户产生点击查看详情的冲动是设计列表页面要考虑的重点 。 可以从两方面考虑:
1. 展示哪些信息以及如何展示
用户是否会对内容产生兴趣进而查看详情 , 取决于内容在列表页所展示的信息 , 因为 , 这是用户在列表页唯一可以了解内容的途径 。 可以通过以下3个步骤来确定展示的信息:
(1)结合产品定位和内容类型选出用户更关注的信息
不同的产品 , 有不同的定位 , 影响着用户对于产品的认知 , 也因为产生的认知 , 吸引着目标用户群体 。 通过向用户传递出产品的定位 , 可以更好的吸引用户 , 留住用户 。
对于已经到达产品中的用户 , 通过将能够传达出产品定位的信息融入到用户的使用路径中 , 不断的触达用户 , 强化用户的印象 。
用来强化产品定位的信息 , 需要能够让用户快速且“正确”的理解 。 用户在浏览时 , 不会停下来 , 调动大脑深度思考 , 需要让用户第一反应就能理解;而正确 , 则是指:这个信息表达的含义是产品想要传达给用户 , 不能产生歧义或者无法理解 。 比如:
同样是做服饰电商的产品 , 前者主打折扣吸引用户 , 折扣的信息是及其重要的 , 越快让用户感知到越好 , 因此 , 在列表页面 , 会着重突出折扣相关的信息;而后者 , 主打高端 , 虽也有商品会打折 , 但却不会像前者这样着重突出 。


推荐阅读