美文网首页产品经理@产品0岁的产品经理
让你设计的列表页不会出错的2个要点

让你设计的列表页不会出错的2个要点

作者: 东风BLCKLIN | 来源:发表于2017-11-12 14:36 被阅读36次

    在这个信息过剩的时代,每个产品都是信息的集合体,甚至工具型产品都要加个热点新闻来拖延用户留在APP中的时间。所以用来展示多条信息的列表页几乎成了每个产品中必备的功能。

    列表页是什么

    是放置多条信息入口的容器。使用户可以快速浏览并找到自己的目标信息,达到快速转化的目的。

    用户在这里的主要需求有两个,“浏览”“区分”,浏览众多的信息,从中区分出自己想要的信息。

    此处提到的“信息入口”,就是淘宝的搜索结果页中的每条商品数据,也是今日头条里的每条新闻数据。我们可以简称它为“条目”

    在设计条目的时候,最重要最需要产品去考虑的两个问题就是:

    1、条目里该放什么信息?

    2、条目里的信息该怎么摆放?

    条目里的信息放错放少了了,用户从列表页中看不到自己想要的信息,很容易造成潜在用户的流失。

    条目里的信息放多放杂了,整个列表页会显得臃肿杂乱,重要性不同的信息推在一起,极大地增加了用户获取信息的负荷。

    所以列表页并不是这么好设计的,如何让你的列表页视觉上简洁不臃肿,信息上又能切中用户的需求呢?

    让我们从下面这三点来整理设计思路

    1、确定需求

    万变不离其宗,既然列表页是给用户浏览的,所以最重要的问题就是:用户想要在这里看到什么信息。

    要解决这个问题,还是要回到用户身边去,听取用户的意见。如果在产品设计前期没有做详细的用户调研的话,那只能由产品经理根据自己的同理心,去想象目标用户的使用场景:

    是想买奶粉的年轻妈妈正躺在床上漫无目的的浏览

    还是正在地铁上想看娱乐新闻的上班族只能用一只手紧张的操作

    【场景五要素:用户,需求、场景,媒介,目的】

    通过场景模型的帮助,我们可以知道用户在进入你的产品列表时,他想要获得的信息是什么。

    作为有一定教育基础的年轻妈妈,她买奶粉的需求一定是想买到安全的有品质保证适合中国宝宝的有口碑的奶粉,所以她关注点一定不是奶粉本身的便宜实惠,买奶粉带来的优惠和返利,而是奶粉品质的“可信”与购买结果的的“可控”。

    提取出几个因素:品牌,产地,销量,口碑,品质保证

    所以我们就知道,除了奶粉的名称,容量,价格,图片等硬性指标外,我们还需要放置可以让用户感到安心的信息,这些信息可以是

    奶粉的品牌

    口碑【用户评分,专家背书】

    品质保证【商家或平台的安全保障】

    通过对目标用户需求的定位,我们提取出来了用户关注的几个信息因素,然后通过信息因素发散出了具体的信息。这样,我们就知道了我们在条目页中应该放什么信息。

    2、抽象与封装

    在知道条目页里应该放什么信息之后,是不是就可以把信息直接铺在小小的条目里就可以大功告成了?

    当然不是

    设置列表页的目的,是让用户在众多信息中可以很快的找到自己的目标信息入口。

    所以我们需要将第一步收集到的用户想要看到信息,抽取出来具有入口属性的信息放置在条目中,将详细信息封装到入口后面的详细信息中。

    那么如何从信息中筛选出具有入口属性的信息放置在条目中呢?

    ① 用户与商业需求

    站在用户的角度,要考虑两个因素,①足够的信息  ② 足够的效率

    站在商业角度,要考虑UI的设计是否符合当前的商业模式,元素的摆放是要突出图片与折扣促进用户购买欲望还是突出标题简介提升用户获取信息的效率。

    两种不同风格的条目设计

    在购物APP中,为了促进用户的购买欲望,往往会将图片放在视觉的第一优先级。

    而新闻资讯类APP,为了提高用户的浏览信息的效率,往往将标题放在视觉的第一优先级。因为新闻资讯特有的时效性,所以条目中也需要放置新闻的发布时间。

    ② 区分列表与详情

    作为信息的入口,作用就是让用户知道入口里的信息是什么,所以要具有代表性【标题,简介,图片】,这些代表性信息是必须要有的在此不做讨论

    满足用户了解信息的基本需求后,要注意信息之间的差异化,要考虑用户体验与场景,让用户能在列表页中根据自己的需求做出筛选【电商的评价,价格,店铺;新闻的发布时间】。而在设计这部分信息的时候,很容易犯难以取舍的毛病,很容易将用户所需要的信息全都摆放在条目中:

    小张在设计一个预订场地的APP中场地预订订单的列表页时候,将场地标题,图片,订金【线上需要交付】,预计交付的实际金额【不需要线上交付】,已经预约的时间端全部放在了条目中,这样合理么?

    上面的例子中,乍一看上去,的确都是用户需要了解的信息,但是当我们仔细分析,除了标题,图片和需要线上交付的订金外,“实际金额”与“时间段”是不具有入口属性的,他们应该作为这条信息的详细内容的一部分隐藏在入口的背后。

    用户在订单列表中只需要根据标题和图片将订单区分开,然后在交付订金即可,具体的时间段和实际金额,在列表页中做出浏览与区分后,可以点击条目进入详细查看。

    以上是我在工作中的总结,欢迎各位批评指正。

    如何在视觉上将信息作出层次感,我的另一篇关于视觉层次的学习总结希望各位的批评指正http://www.jianshu.com/p/64206a77642e

    相关文章

      网友评论

        本文标题:让你设计的列表页不会出错的2个要点

        本文链接:https://www.haomeiwen.com/subject/fvygpxtx.html