荔枝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-28
  • 交互设计师面试问题:“了解 UE 吗?能否详谈一下?”应该这样回答...

    很多面试UE设计、面试交互设计师、面试产品经理(PM)、面试UI设计师的朋友经常被问到这个问题 面试官为你这个问题实际上想从你那里得到你对UE 基础概念,以及你是否具备用户体验设计的思维。 如果你被问到这…

    交互设计 2015-05-29
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • 游戏交互设计心得分享:从代入感与反馈感入手提升打击体验

    前言经常听到一些设计人员、产品经理、甚至是一些交互体验”大师“的言论——【这个操作太麻烦了,需要操作好几步,体验太差了!】亦或者【这个功能藏的太深了,你有考虑过用户体验么?】之后不知怎么的,设计游戏或者软件的人员经常会把这几句话挂在嘴边。无论做什么,3句话里面保准带一句上述“金句“。所以近段时间,你会发现打开一个游戏或者软件,第一眼的界面,功能堆积,眼花缭乱,不知从何下手。我觉得,经常拿着两句话一刀切的人太幼稚,太低级了。所以我今天斗胆...

    2018-02-20
  • 多款智能手表的对比

    终于 Apple Watch 将要在下个月上市了。在目前还不知道这款产品售价的情况下,相信设计会成为不少消费者朋友选择产品的重要标准之一。Apple Watch 已经获得了 iF 设计金奖,不过可能有人觉得这无法令他们信服,他们…

    交互设计 2015-03-10
  • 新手转向资深的必经之路——交互文件命名的最详细规范(下)

    接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范(上)》继续整理文件命名的规范继续,今天来讲讲Sketch的Artboard(画板)命名和Layer(图层)命名、Symbol(组件)的命名、导出图片的处理方式。Sophia的tips:真正的高手,细节都做的很好!

    2017-05-01
  • iOS和Android规范解析——简易菜单、简易对话框和弹出框

    今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。

    2017-05-02
  • UI交互设计手册

    Good UI是一家研究用户体验的设计机构。我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验。今天为大家分享一些Good UI 在一些项目中获取的设计以及运营策略等方…

    2017-08-01
  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27