荔枝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

相关推荐

  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15
  • 在设计项目中,用好小图标的七个技巧

    图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。

    2017-05-10
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • 「交互设计七大定律」在设计中的应用(二)

    今天给大家介绍的是:希克定律(Hick’s Law)。1、希克定律定义希克定律指的是:一个人面临的选择越多,所需要作出决定的时间就越长。用数学公式表达为:RT=a+blog2(n),其中,RT表示反应时间,a表示跟做决定无关的总时间,b表示根据对选项认知的处理时间实证衍生出的常数(这个例子对人来说约是0.155s),n表示同样可能的选项数字。比如,假设需要两秒测知警铃、了解其含义,接着假设按下五个按钮中的一个按钮,可以解决触动警铃的状况...

    2018-02-05
  • 认知设计论:关于认知最全面的一篇

    所谓的成长就是认知升级。——傅盛

    2017-05-03
  • “用户体验”3.9万油电混合植保机演示视频

    植保季就快来到,很多植保团队以及飞手非常关注行业植保机的动向,不仅因为飞机本身的性价比高而且续航时间和作业效率同样是大家非常关心的事情。因为对于植保作业来说,作业效率关系着成本和收益,同样的植保机在单位时间内所节省的时间相当于是多出来的利润,这也就是为什么油电混合植保机能被大众所看中的缘由。近期在无人机网(www.youuav.com)发布的这款3.9万油电混合植保机一经亮相之后在植保行业中引起了足够的重视,很多朋友对其抱有足够的兴趣,...

    2018-04-24
  • 盘点 Smartisan OS 历代亮点, 罗永浩凭借用户体验翻身?

    #交互学堂#今天为大家盘点一下锤粉骄傲的资本,那些#Smartisan OS# 中具有启发性的系统层优化,从远到近从大到小,从 Smartisan OS v1.3 到 最新的 Smartisan OS 3.1,这算是一份锤子给智能手机操作系统的独特贡献…

    2016-11-01
  • 设计实战案例!谈谈网易严选企业购的交互设计

    网易UEDC – 柴蒙:企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

    2017-09-21
  • 用户体验设计师必备的4种UX文档

    当谈及用户体验 相关的文档之时,线框图和原型相关的文档无疑是其中最重要的。但值得注意的是,用户体验 所涵盖的范畴不止于此,它们也仅仅只是个开始。实际上,我们发现还有四份文档也是日常用户体验 设计中极其实用的文档。这四种文档的诞生,是为了帮设计人员更容易了解用户,更方便作出争取的设计决策,打造优秀的设计和成功的产品。

    2017-06-05
  • 以人为中心的沉浸式交互设计如何做?

    对于VR的产品中很多的的问题,我们并没有一个通用的解决方式,最好的办法依然是迭代、迭代、迭代!比如头部参考系:它通常定义了一个透明的光标来定位屏幕坐标系。
    又比如虚拟现实坐标系:由于我们容易在虚拟世界中迷路,所以放一个指南针在脚下使得用户一直有方向感是个不错的选择。
    还有躯干参考系:我们可以把信息和工具放在躯干的周围,使它一直跟随着用户,这样当用户低下头时就能看见他需要的东西。
    此外,现实世界参考系:我们可以提供和现实世界有着稳固联系的线索来减少VR眩晕,通过现实参考系可以减少用户看到的和感觉到的感知冲突。

    2017-05-21