荔枝FM交互飞机稿

已经使用了近两年的荔枝FM,身为一个产品经理,一直对荔枝FM的使用逻辑和交互体验感到费解,所以今天就小试牛刀!

荔枝FM交互飞机稿

已经使用了近两年的荔枝FM,身为一个产品经理,一直对荔枝FM的使用逻辑和交互体验感到费解,所以今天就小试牛刀!

先看下现在荔枝FM主体框架:

荔枝FM交互飞机稿

荔枝FM基础框架分析

在使用的时候,会发现,整体框架并不是按照用户的使用逻辑去设计的,而是根据形态学上的逻辑来设计的,所以会存在很多让用户觉得不舒服的地方,但殊途同归,我们归纳后大致分为以下三条路线

  • 逻辑线路1:用户进入应用,浏览/搜索想要的电台——找到不错的电台——看到电台的节目列表——听故事
  • 逻辑线路2:用户当前在这个电台——去社区参加讨论——了解更多的电台资料——投稿/分享
  • 逻辑线路3:自己创建一个电台——录音/剪辑——发布给大家

第一节:主页交互设计优化

设计概念:简洁、少即是多

梳理主页逻辑:主页分为【搜索】【分类Tab】【首页按钮】【播放快捷按钮】【推荐电台】【底部导航】

分析界面重点:作为平台方,能够尽可能的展现更多的电台内容是没错的,于是就有了现在这一版本的界面,但作为用户,用户主要可以分为【被动接受者】【主动索取者】

  • 【被动接受者】:你给我什么内容就是什么内容,这个内容不好我就换,好听我就听会
  • 【主动索取者】:我想要某些电台,我自己知道其名字和分类,你能让我快速找到就好

于是有了右边的界面设计

荔枝FM交互飞机稿

设计功能点:【顶部标签】、【搜索】【推荐电台】【底部播放菜单栏】

功能点介绍:

【顶部标签】:虽然越来越多的操作菜单因为大屏被移到界面底部,但这里的设计理由为

  • 对C端的用户来说,录制按钮不会经常点,也不会去点
  • 播客们不管你按钮在哪,都是一样,不会说你在上面就感觉很不舒服,即使不舒服也一样去点

采用牺牲播客们的体验原因是:如果听客们,觉得应用不舒服,你的流量如何提升

【搜索】:搜索去到另外一个界面,配合分类引导进行更多展示,设计理由

  • 主页承载太多信息,需要进行信息区分
  • 对于主动索取信息的用户,可以直接来搜索,即精准搜索
  • 对于被动获取的用户来说,他们想要的不是有一大波的数据来给我挑,而是你能引导我,快速找到我想找到的,少即是多,因此给了相关分类列表

荔枝FM交互飞机稿

【推荐电台列表】:少即是多的原理,目前主页选择性太多,可以自由选择,但就像听音乐一样,用户进入App的出发点是能够找到一个电台,打发点时间,结果你还给我这么多的选择,界面信息量又要处理,这是一种很糟糕的体验。设计理由:

  • 少即是多:根据小编或者用户点播不错的电台放出来,保证用户能够快速随性的获取到自己想要的东西
  • 采用手势操作:上下滑动进行电台切换,点击即切换电台播放,模拟真实的电台习惯

【底部播放菜单栏】:常用操作,对于一个有听广播习惯的人来说,我会经常固定的听我喜欢的电台,而不是经常去换。设计理由:

  • 保留用户习惯的电台,是从用户的出发点
  • 简介+播放按钮+播放列表:能够知道我经常播放的这个电台的基本信息,足矣!

第二节:电台详情

设计概念:以核心带动相关设计

电台详情的框架思维导图如下

荔枝FM交互飞机稿

功能点分区:

  • 原版面对电台的功能有:【分享】【订阅】【勾搭主播】【投稿】
  • 原版面对节目的功能有:【分享】【播放】【点赞】【缓存】【信息】【更多操作】
  • 原版面其他功能:操作,快捷播放入口

版本存在问题有:

  • 功能点区分不够明显
  • 功能点的重点不明确
  • 各种操作混乱杂糅

因此有了右边的界面

分析用户:电台详情页面由三部分组成【电台简介】【电台中间操作区】【节目列表】,从用户的角度出发分析,我进入一个电台,有已知和未知的区别

  • 【已知】:听电台就好,如果更感兴趣,欢迎参与和本电台的其他相关功能,社区、投稿、订阅
  • 【未知】:了解电台详情,了解电台文化

荔枝FM交互飞机稿

  1. 播放区域:播放音乐相同的体验,希望能把播客当成音乐来听,至于快进15s和往后退15秒的概念其实已经可以不用再出现了,对于定时播放的概念,可以在设置中统一实现
  2. 播客简介:一个播主,最想要的是别人了解他,听他的节目,分享他的节目,因此播客的介绍有必要进行提升,甚至可以增加更多新鲜功能
  3. 操作区:对于节目的操作和对本播客的操作,对节目的操作有缓存和赞,对播客的操作有投稿、社区、列表,进一步的将用户和播客的交互提炼了!
  4. 关于分享:在原版中的分享有分享节目和分享播客的区别,但是从行为学的角度来说,当你分享了一个节目,自然会带上这个播客,既然有重复,何必要多加一个功能呢?

关于交互:

业内很多人一直在追求交互设计,交互设计的概念也被大家炒得很玄乎,也相继不少大厂出了很多书,例如:《身边的设计》、《破茧成蝶》、《设计之下》这类耳熟能详的书,确实这些也绝对是高品质的读物

对荔枝FM个人总结交互设计大概分为

  1. 框架
  2. 基础交互

框架

框架层主要是几个主要界面的界定【查看电台】【录制节目】【播放详情】【搜索】【设置】这5个界面

这五个界面相当于一级导航,无论是听客还是播客在这五个界面就已经完全可以完成他想做的事情

  • 查看电台作为电台陈列的入口,提供优质电台的推荐和展示的功能,配合搜索功能将整个平台的电台节目进行展示,既保证了电台播客只要做得好,就能有机会展示,也保证了听客在这里能够听到好的内容。
  • 录制节目是直接给播客们的入口,快速到达指定位置作业,完成录制并发布,一气呵成
  • 播放详情结合电台详情,深挖人和电台的关系,综合社区、投稿以及栏目的介绍,让人和电台更专一
  • 设置综合了用户的双重身份,既可以是一个听众,又可以是一个播客

以上五点确定了交互框架,接下来就是确定基础交互

基础交互

基础交互层主要是界面的操作交互,对于首页查看电台来说,摒弃一贯的陈列式显示,改成滑动操作,在交互上增加了刺激,上下滑动切换电台是对古老的收音机进行模拟;采用底部播放快捷入口,点击进入播放详情,类似豆瓣FM的体验;搜索则将搜索和推荐结合做到基础的引导;社区则采用开放式的交流,采用微信式的交互体验,保证用户在使用习惯上的统一

相关页面设计

荔枝FM交互飞机稿

荔枝FM交互飞机稿

总结:做了这么久的产品经理,关于交互其实想说一句:适合自己项目的交互是最好的交互。

之前带过新人,也合作过一些同事,往往会遇到,看这个产品就是这样的,看他们就是这样做,看XXX设计原则就是这样说的,对于一个合格的产品经理,希望大家真的把交互做到产品里面,而不是把概念做到产品里面

 

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

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

(0)
CatherineCatherine
上一篇 2017-06-03 16:42
下一篇 2017-06-03 18:50

相关推荐

  • 浙大教授告诉你用户体验的知识、内容、流程

    作为一门新兴学科,在具体的设计操作过程中,用户体验设计吸取了多个学科的知识。除了第一章所讲述的面向人的学科和面向技术的学科之外,还包括面向设计的学科。面向人的学科包括心理学、生理学、社会学、文化学、语言学、哲学和美学等方面的知识;面向设计的学科包括工业设计、艺术设计、数字媒体设计和动画设计等;面向技术的学科主要指信息沟通技术,涉及到计算机技术、信息技术、电子技术、网络技术、软件工程、人机交互技术和数据库等。

    2017-05-29
  • 交互设计师高级:兴趣、场景推荐核心算法之‘多维空间的两个向量夹角的余弦公式’

    不知道大家有没有关注过你手里的APP,那么它在不停升级中变得越来越懂你,越来越知道你的喜好,举例先:网易云音乐的推荐、今日头条的新闻推荐,他们都是你使用越长时间使用频率越多对你兴趣越准确的判断从而推荐给…

    交互设计 2015-08-31
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 交互设计师入门文章大集合

    由于新手童靴们在群中咨询交互入门的问题较多,所以小编耐心地将咱们网站的所有关于交互设计师入门相关文章汇总,便于大家了解和学习。愿大家做出自己的选择后,风雨兼程,早日入门或转行交互成功! 《交互设计的背…

    交互设计 2016-03-29
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04
  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07
  • 不要做椅子上的设计师

    事件一:某巨头公司L开会,产品的老大C带头发言:“我觉得吧,用户不会喜欢这个设计、他们……”。相信在各位设计师的工作历程种这种发言都不是第一次听。

    2017-05-28
  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27
  • 从周星驰的电影出发,浅谈用户体验的四个特点

    周星驰电影很受大众欢迎,而且具有很强的生命力却是一个不争的事实。而大众欢迎,生命力强正是我们在用户体验所追寻的目标。只有用户知道你核心性能和速度直接超越暴风影音,差异化才出得来。
    ——马化腾

    2017-05-03