产品入门系列|APP设计思路一:列表页

2019-06-28 01:49| 发布者: | 查看: |



相关推荐:



  列表页是APP中常见的页面类型之一,它是承接导航页与详情页的中间页。列表页用来展示多条信息条目,虽然看起来十分简单,但也是不可或缺非常重要的页面。本文以APP列表页为例,详述APP列表的设计原则与技巧,对于入门的新手有一定的帮助

  不论是新手还是部分有一定工作经验的产品经理在做一个产品功能时或者画一个页面时,都没有想清楚:为什么要做这个功能或者页面?这个页面或者功能的目的究竟是什么?然后,就开始动手画原型了

  又或者接到需求后,直接照搬别人的产品,却没有思考这样照搬是否是正确的。知其然还必须知其所以然,所以我们首先要学会从产品本质来分析一个页面的功能具体是什么。再从业务角度分析这个页面,然后再逐层分解,具体到该页面的元素、页面内容的布局以及细节性的斟酌

  简而言之,列表页的核心目的就是展示同类信息的部分信息,方便用户进行快速地浏览及筛选

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

  用户在这里的主要需求有两个:“快速浏览”和“快速区分”,浏览众多的信息,快速找到自己需要的信息

  既然列表页是给用户浏览的,所以要解决的问题就是用户想要看到什么信息。产品经理要通过访谈方式、AB测试看数据表现、借鉴成功产品经验等方式来看用户的反馈。如果产品在前期没有做详细的用户调研,那只能根据同理心,想象目标用户的使用场景

  以懒饭APP列表页为例,场景:周末,毕业参加工作不久的上班族小小吃腻了快餐,想自己做一顿容易做又好吃又省时不一样的饭菜,苦于不会做,于是打开了懒饭APP

  作为厨房新手,好吃简单容易做就是他需要的,所以在查看列表时,他需要的就是能够快速找到那些难度低、省时间不太费力的菜谱,所以菜谱列表中的图片要用成品图,要有诱惑力

  以下图为例:导航栏主要包括返回、搜索以及定位三个功能;筛选项包括位置筛选、租金筛选等;卡片内容包括租住房子主图、租房标题、月租价格、楼层/面积大小、距离、标签

  营销列表又叫会场列表,会场营销列表的样式丰富多样,可以一排两个,也可以一排三个,多种形式糅合在一起。比如:杂糅了活动、排行榜、热门推荐、会员专享、秒杀专区等等多种多样的形式

  个性化推荐列表只是一个单独的模块,与列表页详情页杂糅在一起,比如:购物车

  在列表中,卡片承载了列表页中的主要内容,卡片内容很大程度决定了用户想要快速浏览的内容及筛选的选项

  卡片的展现方式多种多样,有瀑布流样式、一排一个,一排两个,一排三个及宫格式的展现样式,瀑布流样式的好处就在于不会压缩图片,看起来更美观

  此外,在做卡片内容时,需要思考的核心是给用户提供什么样的内容,用户关注的点是什么,怎么去收集用户这些关注的点。假如要做一款菜谱APP,在前期内容少时,你会选取哪几个字段作为你的卡片内容。在第一版的时候,一定要考虑好

  既然列表页在APP中承担着非常重要的角色,那么列表页中的页面元素有哪些

  列表页中除了导航栏、卡片内容以及筛选项外,列表页还有哪些细节需要注意。列表的状态、列表的加载机制以及排序也是非常重要的内容

  列表的状态,比如:购物车中的商品列表就有上架中、下架、售罄等状态,就需要用不同的样式来进行区分

  此外,列表为空怎么展现,这也属于列表的状态。列表的加载机制是怎样的,属于整体加载还是部分加载,每次加载多少条等等细节需要考虑清楚。除此之外,排序也是列表中最常见的一个功能,列表究竟按时间还是权重排序,要结合具体业务来进行排序

  刚入门的产品经理最喜欢功能堆砌,但是没有想清楚每个细小功能背后的深层逻辑。内容越少,越考验产品经理的设计能力,一个简单的列表页后也有它的逻辑

  作者:鸿鹄学社,微信号:xiechengdl001。大厂高级产品经理,熟悉擅长领域:新零售电商,7年互联网产品设计经验

  \u5217\u8868\u9875\u662fAPP\u4e2d\u5e38\u89c1\u7684\u9875\u9762\u7c7b\u578b\u4e4b\u4e00\uff0c\u5b83\u662f\u627f\u63a5\u5bfc\u822a\u9875\u4e0e\u8be6\u60c5\u9875\u7684\u4e2d\u95f4\u9875\u3002\u5217\u8868\u9875\u7528\u6765\u5c55\u793a\u591a\u6761\u4fe1\u606f\u6761\u76ee\uff0c\u867d\u7136\u770b\u8d77\u6765\u5341\u5206\u7b80\u5355\uff0c\u4f46\u4e5f\u662f\u4e0d\u53ef\u6216\u7f3a\u975e\u5e38\u91cd\u8981\u7684\u9875\u9762\u3002\u672c\u6587\u4ee5APP\u5217\u8868\u9875\u4e3a\u4f8b\uff0c\u8be6\u8ff0APP\u5217\u8868\u7684\u8bbe\u8ba1\u539f\u5219\u4e0e\u6280\u5de7\uff0c\u5bf9\u4e8e\u5165\u95e8\u7684\u65b0\u624b\u6709\u4e00\u5b9a\u7684\u5e2e\u52a9\u3002

  \u56e0\u6b64\uff0c\u61d2\u996dAPP\u63d0\u53d6\u51fa\u4e24\u4e2a\u6700\u91cd\u8981\u7684\u56e0\u7d20\uff1a

  \u4e8c\u3001\u4ece\u89c6\u89c9\u5b9e\u73b0\u89d2\u5ea6\u5206\u67901. \u5217\u8868\u9875\u7684\u9875\u9762\u5143\u7d20\u6709\u54ea\u4e9b\uff1f \u6709\u591a\u5c11\u79cd\u5c55\u793a\u6837\u5f0f\uff1f

  \u4ee5\u4e0b\u56fe\u4e3a\u4f8b\uff1a\u5bfc\u822a\u680f\u4e3b\u8981\u5305\u62ec\u8fd4\u56de\u3001\u641c\u7d22\u4ee5\u53ca\u5b9a\u4f4d\u4e09\u4e2a\u529f\u80fd\uff1b\u7b5b\u9009\u9879\u5305\u62ec\u4f4d\u7f6e\u7b5b\u9009\u3001\u79df\u91d1\u7b5b\u9009\u7b49\uff1b\u5361\u7247\u5185\u5bb9\u5305\u62ec\u79df\u4f4f\u623f\u5b50\u4e3b\u56fe\u3001\u79df\u623f\u6807\u9898\u3001\u6708\u79df\u4ef7\u683c\u3001\u697c\u5c42\/\u9762\u79ef\u5927\u5c0f\u3001\u8ddd\u79bb\u3001\u6807\u7b7e\u3002

  \u6b64\u5916\uff0c\u5217\u8868\u4e3a\u7a7a\u600e\u4e48\u5c55\u73b0\uff0c\u8fd9\u4e5f\u5c5e\u4e8e\u5217\u8868\u7684\u72b6\u6001\u3002\u5217\u8868\u7684\u52a0\u8f7d\u673a\u5236\u662f\u600e\u6837\u7684\uff0c\u5c5e\u4e8e\u6574\u4f53\u52a0\u8f7d\u8fd8\u662f\u90e8\u5206\u52a0\u8f7d\uff0c\u6bcf\u6b21\u52a0\u8f7d\u591a\u5c11\u6761\u7b49\u7b49\u7ec6\u8282\u9700\u8981\u8003\u8651\u6e05\u695a\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u6392\u5e8f\u4e5f\u662f\u5217\u8868\u4e2d\u6700\u5e38\u89c1\u7684\u4e00\u4e2a\u529f\u80fd\uff0c\u5217\u8868\u7a76\u7adf\u6309\u65f6\u95f4\u8fd8\u662f\u6743\u91cd\u6392\u5e8f\uff0c\u8981\u7ed3\u5408\u5177\u4f53\u4e1a\u52a1\u6765\u8fdb\u884c\u6392\u5e8f\u3002

  4. \u5217\u8868\u9875\u7684\u9700\u6c42\u6587\u6863\u600e\u4e48\u6807\u6ce8\u5462\uff1f\u9700\u8981\u6ce8\u610f\u54ea\u4e9b\u7ec6\u8282\u6027\u5185\u5bb9\uff1f

  点击“提交”后,我们会向您的邮箱发送一封验证邮件,请按照邮件中的提示完成操作

<
>
快速飞艇网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

江苏省南京市玄武区玄武湖

13588889999(服务时间:9:00-18:00)

admin@adminbuy.cn

在线咨询 官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

网站建设 微信开发 售后服务 咨询电话13588889999 返回顶部
返回顶部