荔枝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会走向何方?

    2016年是对话式设计之年。消息应用正以惊人的好评度和参与率,占领世界和app store的排行榜。每个社区产品、应用市场、点播服务、约会应用、社交游戏和电商产品,为了提高好评度、参与率和销量,都已经或即将加入消息功能。

    2017-05-11
  • 设计顶峰:如何打造创新有价值的极致体验?

    经常发上手即用的教程和技巧,今天来点不一样的「干货」,聊聊在设计中的价值创新。内文案例丰富,配图生动,也有实战案例,对于「需求」的理解非常到位,来自阿里Heyuchan 同学的分享,如果你恰好是交互设计的,更加不能错过咯。

    2017-05-24
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 如何识别和避免“暗黑用户体验”

    作者:Emily Stevens | 翻译:沙喵〜 审校:Moli用户体验设计是一门创造独特奇妙体验的学问——但设计的产出并不都是像彩虹一样美好灿烂的。即便是本质上强调用户友好的设计产业也会有黑暗的一面,而这些黑暗的欺骗性的设计模式比你想象的更为普遍。去年,用户体验设计公司Sigma点名指出,好几家知名零售商利用欺验性的暗黑用户体验设计从用户那儿赚了更多的钱。出现在耻辱榜上的有电商巨头Amazon、快时尚电商Boohoo.com(英国)...

    2018-03-20
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14
  • 车载系统交互设计畅想Part2:为消除焦虑而设计

    在上一章节中,我试图通过重新设计智能车载中控系统来降低驾驶过程中过多的信息导致的注意力分散问题,我的主要解决方案是通过局部的简单操作配合语音导航来完成任务,并避免驾驶员的双手离开方向盘。在本章节中,通过调研和采访一些新手驾驶员,我总结了一些发现,以启发我通过体验设计来消除驾驶过程中的焦虑现象。

    2017-04-30
  • 【用户体验】“跳一跳”游戏的体验

    伴随着微信的升级和重点推荐,小游戏“跳一跳”一夜成为中国互联网的全民爆款休闲游戏。不仅周围的同事、连身在老家七八线小县城的小学同学都在乐此不彼的刷屏和相互竞技。如此如火如荼的燎原之势,除了有微信这个强大的平台效应之外,当然也有一些“跳一跳”自有的吸引力蕴含其中。今天,就和大家一起来聊一聊“跳一跳”中的游戏心理学。第一,尝鲜心理。追求新鲜事物,是人类的天性。任何时候,人类都从未停止过尝试新鲜事物的脚步。而微信,作为一个8亿+的社交平台,“...

    2018-02-26
  • 设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 用户体验方法论的演变

    用户体验工作流程令人困惑,即使对大多数设计师而言也是如此。最初Donald A. Norman创造了用户体验设计的概念:“我发明了这个词,因为我认为人机交互和可用性太窄了。我想涵盖该系统的所有方面,包括工业设计图形,交互界面,面对面交互和使用手册。从那时起,这个词被广泛传播,以至于它开始失去意义。”而到2016年,Don Norman开始谈及对于这个词的误解有多严重。在彻底了解现代用户体验之前,我们需要回顾20世纪90年代以来设计和开发...

    2018-03-07