如何设计一个素材列表

最近在设计一个新的拍摄玩法,用户点击拍摄后,首先会进入一个素材列表页,选择对应的素材后进入拍摄页面开始拍摄。经过一个版本上线后收到的定性和定量的用户数据反馈都显示,在素材列表页的选择阶段,用户的流失率较高,用户对于素材选择行为的目的性明显不足。

文章目录[隐藏]


最近在设计一个新的拍摄玩法,用户点击拍摄后,首先会进入一个素材列表页,选择对应的素材后进入拍摄页面开始拍摄。经过一个版本上线后收到的定性和定量的用户数据反馈都显示,在素材列表页的选择阶段,用户的流失率较高,用户对于素材选择行为的目的性明显不足。

如何设计一个素材列表

原设计稿如下图所示:

如何设计一个素材列表

根据用户的访谈反馈,主要是对于素材列表页的样式认知出现了偏差,而问题根源来源于两方面:

  1. 样式:当前的素材列表页样式采用的是类似宫格样式,1:1的方图更像是一个视频内容;封面图片为明星内容,而不是一般意义上的贴纸或、文字等素材样式;加之素材名称往往以内容来命名,用户对于『这是一个素材』的认知被削弱了。
  2. 用户习惯与记忆:这是一个隐藏的,但是与用户体验深度相关的疏漏。新的玩法是作为视频App的一个新的拍摄互动玩法,用户对于视频的认知和记忆根深蒂固,而且封面图都是明星,用户对于明星的直观指向就是视频内容,这就导致用户一看到这种宫格样式的页面,第一反应就是这是一个视频列表页,而不是素材列表页。

在收到用研同学的反馈后,设计师有研究了一些竞品的素材列表的设计样式,发现了一些通用的设计样式:

1. 宫格样式-小影

如何设计一个素材列表

小影苏素材列表样式多样,其中的宫格样式同样选取1:1的方图,但是其标题文案描述、标签内容与素材内容较为一致;方图画面风格选择和样式上都具有很强的一致性,因此并不会产生过多的认知偏差;

2. 列表样式-小影,抖音,小咖秀,音乐app

如何设计一个素材列表

列表样式的素材,弱化了图片内容,增加了素材的文案描述和说明内容,同时增加符合场景的下载、收藏、拍摄icon,能够强化用户对于『素材』的认知,便于用户理解;

3. 瀑布流样式-小影

如何设计一个素材列表

小影的这种瀑布流样式素材列表页面不太常见,但是由于画面效果更加突出,标题描述、下载icon的存在,给用户传达的信息同样比较明确。

由此可见,对于素材列表页的重新设计,需要从以下几点展开:

  1. 避免与当前APP内的视频样式冲突,选取差异化的样式;
  2. 增加标题文案描述,同时可给出对应的玩法引导;
  3. 增加对应的拍摄icon,提升引导效果。

如何设计一个素材列表

概念方案

总结

从素材列表页面衍生到其他APP内页面,除了要与用户的心理预期和认知一致,避免产生偏差影响转化率;同时也要考虑用户对于APP的使用习惯和固有记忆。尤其针对新的内容或者互动玩法,要尽量避APP内已有的设计样式,防止给用户带来认知混淆。

 

作者:虾米&胖喵,百度交互设计师

本文由 @虾米&胖喵 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21779/

(0)
CatherineCatherine
上一篇 2017-04-29 09:35
下一篇 2017-04-29 11:30

相关推荐

  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 蘑菇街App改版设计总结

    新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

    2017-05-12
  • 原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 网站交互设计模式为什么值得读

            对于现在的web的发展来说,这本书优点旧了,里面的相关案例网站都是一些比较早的数据。但是这本书还是很值得一读。就像作者所说的,时间在流逝,模式会变化,适当改变信息密度,网站的…

    2017-08-03
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 千万级用户的视频体验,我们是这么做的

    如今app的更新迭代速度很快,因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化,且在功能上较难满足用户预期,因此需要在整体视觉和产品功能上进行相应的美化和完善,使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

    2017-05-26
  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 【大数据】APP留存率的计算

    留存率,越来越受到大家的关注,从网站用户到客户端产品,游戏产品,无线APP产品,都非常重视这一指标,留存率成为衡量一个产品是否健康成长的重要指标之一。 留存率的“40–20–10”规则 Facebook平台流传出留存率“40–…

    2015-01-14