|
列表页是APP中平常的页面类型之一，它是承接导航页与详情页的中间页。列表页用来展示多条信息条目，虽然看起来非常简单，但亦是不可或缺非常重要的页面。本文以APP列表页为例，详述APP列表的设计原则与技巧，针对入门的新手有必定的帮忙。 
不论是新手还是部分有必定工作经验的制品经理在做一个制品功能时或画一个页面时，都无想清楚：为何要做这个功能或页面？这个页面或功能的目的到底是什么？而后，就起始动手画原型了。
又或接到需求后，直接照搬别人的制品，却无思考这般照搬是不是是正确的。知其然还必要知其因此然，因此咱们首要要学会从制品本质来分析一个页面的功能详细是什么。再从业务方向分析这个页面，而后再逐层分解，详细到该页面的元素、页面内容的布局以及细节性的斟酌。
1、从制品功能方向分析
为何要设计列表页，列表页的核心功能及价值在于什么地区。
1. 列表页的核心功能是什么，列表页是什么？
简而言之，列表页的核心目的便是展示同类信息的部分信息，方便用户进行快速地浏览及筛选。
列表页是安置多条信息入口的容器，运用户能够快速浏览并找到自己的目的信息，从而达到快速转化的目的。
用户在这儿的重点需求有两个：“快速浏览”和“快速区分”，浏览众多的信息，快速找到自己必须的信息。
那样，列表展示什么内容才可方便用户快速筛选呢？
2. 用户想要看到什么信息，怎么来确定用户的接受度、爱好度？
既然列表页是给用户浏览的，因此要处理的问题便是用户想要看到什么信息。制品经理要经过访谈方式、AB测试看数据表现、借鉴成功制品经验等方式来看用户的反馈。倘若制品在前期无做仔细的用户调研，那只能按照同理心，想象目的用户的运用场景。
以懒饭APP列表页为例，场景：周末，毕业参加工作不久的上班族小小吃腻了快餐，想自己做一顿容易做又好吃又省时不一样的饭菜，苦于不会做，于是打开了懒饭APP。
做为厨房新手，好吃简单容易做便是他必须的，因此在查看列表时，他必须的便是能够快速找到哪些难度低、省时间不太费力的菜谱，因此菜谱列表中的照片要用成品图，要有引诱力。
因此呢，懒饭APP提取出两个最重要的原因：做菜时长、做菜难度，如下图： 
2、从视觉实现方向分析
1. 列表页的页面元素有那些？ 有多少种展示样式？
列表分为：常规型列表、营销型会场列表以及个性化举荐列表。
常规列表内容重点包含导航栏、卡片内容以及筛选项。
以下图为例：导航栏重点包含返回、搜索以及定位三个功能；筛选项包含位置筛选、租金筛选等；卡片内容包含租住房子主图、租房标题、月租价格、楼层/面积体积、距离、标签。 
营销列表又叫会场列表，会场营销列表的样式丰富多样，能够一排两个，亦能够一排三个，多种形式糅合在一块。例如：杂糅了活动、排行榜、热门举荐、会员专享、秒杀专区等等多种多样的形式。
个性化举荐列表只是一个单独的模块，与列表页详情页杂糅在一块，例如：购物车。
2. 卡片内容的思虑
在列表中，卡片承载了列表页中的重点内容，卡片内容很大程度决定了用户想要快速浏览的内容及筛选的选项。
卡片的展现方式多种多样，有瀑布流样式、一排一个，一排两个，一排三个及宫格式的展现样式，瀑布流样式的好处就在于不会压缩照片，看起来更美观。
另外，在做卡片内容时，必须思考的核心是给用户供给什么样的内容，用户关注的点是什么，怎么去收集用户这些关注的点。假如要做一款菜谱APP，在前期内容少时，你会选择哪几个字段做为你的卡片内容。在第1版的时候，必定要思虑好
3. 列表页要重视那些细节性的内容？
既然列表页在APP中承担着非常重要的角色，那样列表页中的页面元素有那些？
列表页中除了导航栏、卡片内容以及筛选项外，列表页还有那些细节必须注意。列表的状态、列表的加载机制以及排序亦是非常重要的内容。
列表的状态，例如：购物车中的商品列表就有上架中、下架、售罄等状态，就必须用区别的样式来进行区分。
另外，列表为空怎么展现，这亦属于列表的状态。列表的加载机制是怎么样的，属于整体加载还是部分加载，每次加载多少条等等细节必须思虑清楚。除此之外，排序亦是列表中最平常的一个功能，列表到底按时间还是权重排序，要结合详细业务来进行排序。 
4. 列表页的需求文档怎么标注呢？必须重视那些细节性内容？
总结&后记
刚入门的制品经理最爱好功能堆砌，然则无想清楚每一个细小功能背面的深层规律。内容越少，越考验制品经理的设计能力，一个简单的列表页后亦有它的规律。
作者：鸿鹄学社，微X号：xiechengdl001。大厂高级制品经理，熟练善于行业：新零售电商，7年互联网制品设计经验。
本文由 @黄东东 原创发布于人人都是制品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
| 
发表于 2024-8-12 00:25:25
