Android电视应用:Amazon Fire TV版TVPlayer设计

1476771443-4636-f7c00004eb4fca6ca9d

设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重新思考,如何利用大屏幕和遥控带来的输入模式。

Fire TV上的TVPlayer

1476771444-2754-f7c00004eb5b081819a

这个任务并没有吓到TVPlayer的开发者们,这是全英国在Fire TV和Fire TV Stick上最成功的电视应用之一。

TVPlayer是一款Android原生流媒体应用,可以让你在Amazon和Android设备上免费观看电视直播,它掌握了英国许多收视率最高的频道。TVPlayer在2014年作为Fire TV的一部分同时发布,它的成功一直延续至2015年、2016年。

Simplestream,TVPlayer背后的研发与设计团队,接受了打造电视优先体验的艰巨任务。

我们采访了运营总监Lewis Arthur和Simplestream的Android开发Michael Jordan,请他们分享Fire TV应用设计过程中的真知灼见,下面是他们的分享。

设计过程:从手机到电视

在登陆Fire TV前,TVPlayer已经可以在Fire Tablets和Android设备的Amazon Appstore中下载。移动端版本的设计师,将关注点聚焦于可用性与内容的易达性。他们在欢迎界面采用了大胆醒目的图片布局,主标签内有可滚动的直播电视频道列表。设计师决定坚持“浅色”主题,为了使内容突出,也保持各平台的主题一致。

1476771444-9398-f770000cd4d975a5e94

1476771446-1172-f770000cd4c4582ddcf

当进行平板端的支持时,设计师需要重新思考,更好地利用大屏幕。主体布局有所改动,在主界面上直接为用户呈现更多内容。这是个很好的策略,既能吸引用户注意,并且为多种相关内容提供快捷入口。

1476771445-3750-f7b00008675d98df67c

至于第一版Fire TV应用,主界面需要呈现新的面貌。电视的设计,与手机平板的界面和用户体验设计有两大不同,这都来源于TV自身的天性:它有巨大的显示器,也不提供触摸式界面,因为所有的操作都发生在遥控器上。

Simplestream在第一版Fire TV应用的主界面上,尽数使用了大胆醒目的图片。“主页”、“正在直播”和“频道”标签都移到左边字号成倍放大,使得从远处看也清晰可辨。

1476771445-7566-f770000cd4b2d3a6d14

第一版Fire TV应用主界面,感觉像平板端那样清爽,栅格布局中承载各类主要频道。

为Fire TV开发简单而迅速:4周就从移动端迁移到电视

当我们询问Simplestream团队,从移动版到第一版Fire TV应用花了多长时间,他们告诉我们大约4周。由于Fire TV是一款完全成熟的Android设备,搭载了基于Android Lollipop的Fire OS 5,改版迅速而流畅:移动端和电视版的核心组件相同,保持界面与应用底层结构分离,能让开发者拥有足够的灵活性快速迭代,在几周内成就完整的电视应用。

Fire TV的界面革新

这款Fire TV应用发布一年多以后,从应用数据中收集了足够的用户操作反馈,TVPlayer开发者与设计师们决定,是时候为Fire TV应用创造一套新界面了。目的在于使应用更加高效,为电视用户提供最佳的内容呈现形式,同时在应用中加入新功能。

新的一版加入了按月订阅的应用内购——包含免费与付费内容,使应用更多样化。Simplestream的设计师进行了深入的竞品分析,理解流媒体应用设计当前的趋势,掌握了如何设计统一一致的界面,甚至是跨越多平台与设备

1476771446-9633-f7400016d20ba253931

选用合适的配色方案,确保应用对眼睛友好

首先,设计师决定探索Fire TV的深色配色方案。在设计上一版Fire TV应用时就做出了个决策,不过在这版界面更新中更进一步,把多数UI组件都加深了。深色主题主要是为了防止浏览内容时眼睛疲劳,因此能创造更轻松的用户体验。这对于应用的启动界面尤其重要,把它改成黑色,避免“亮瞎眼”。

让用户的眼睛免于疲劳。

设计电视应用时,浅色与亮色的主题需要慎重考虑,因为多数可能的使用场景都发生在夜晚,没有自然光,因此明亮的界面会损害用户体验,久而久之导致应用被抛弃。通过色彩来展现品牌也非常重要。对于TVPlayer,蓝色作为高亮色彩,相比前一版,更有助于保持多平台的品牌一致性。蓝色表示免费内容,而粉色表示付费内容。

通过ViewPager进行内容翻页

TVPlayer的开发者们想要一套极具表现力的界面,但也希望保持品牌辨识度,并提供独一无二的用户体验。因此他们决定不遵循标准的Android Leanback界面,他们建立了自己的布局与导航系统

TVPlayer的主体布局对ViewPager组件进行了自定义。ViewPager是一种布局管理组件,可以在多页内容中轻松左右翻页。在TVPlayer中,通过ViewPager的自定义运用,实现了水平滚动翻页切换节目与频道,每一页都包含一系列自定义视图。

内容的快速入口增强粘性

上一版中创建的网格视图得到了改进,每项有更大的间距,并且用水平滚动替代了垂直滚动。同时也引入了快速内容导航:用户可以选中翻页导航指示器,在页面间快速滚动。翻页导航指示器与ViewPager相关联,决定了当前展现什么页面,下一页是什么。快速滚动意味着用户能更快触达更多内容,因此有助于增强用户粘性、加强记忆。

1476771446-9039-f7b00008676fceab326

马赛克式界面:内容的快速入口,更加商业化

最终的结果是马赛克式界面,能快速到达各个频道。自定义Android视图和Adapter的使用,让开发者能在一个界面中完全掌控和融合免费与付费内容,改善了通向应用内购的高级内容入口,因此也创造了更多收入。TVPlayer从第一版完全免费的形式,变为包含付费内容的新版本。保持了干净的用户界面,将界面背后的逻辑与核心应用组件分离开,使得这次改版轻松而迅速,也保证了快速迭代来创造优秀的用户体验加强商业化

1476771447-7262-f7900069b0fd44f70ba

马上开始创造Amazon Fire TV应用吧!

Amazon Fire TVFire TV Stick给你提供了绝佳的机会,让你的Android或HTML5应用能触达更多用户。只要遵循Amazon Appstore的开发者文档,把Android移动应用迁移到Fire TV上非常简单!这些链接会非常有用:

Amazon Fire TV:把应用和游戏带到客厅,触达更多用户

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/developing-apps-and-games-for-amazon-fire-tv

Amazon Fire TV应用与游戏开发入门

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/getting-started-developing-apps-and-games-for-amazon-fire-tv

为Amazon Fire TV开发应用与游戏

https://developer.amazon.com/public/solutions/devices/fire-tv/overview/developing-apps-and-games-for-amazon-fire-tv

转载自微信号 可乐橙

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

(0)
iouedioued
上一篇 2016-10-18 14:16
下一篇 2016-10-18 14:23

相关推荐

  • 为了App更新,程序猿都变成段子手了

    头图来自:flickr 本文转自歪楼(easy1414),已获得其授权。 这年头混你们互联网创业圈真是太难了。 按着互联网思维,连修bug的程序猿小哥们都被逼得寂寞如雪。 有的自带牛逼气质: 有的在App更新日志里写起了诗: …

    2016-01-26
  • 个性的移动应用引导页设计欣赏

    现在的用户下载app时最先看到的东西就是引导页。一个引导页就像一个导游,它会快速的向用户介绍app本身对用户有什么用处已经该如何操作。这是描述应用本身最简单的方式,但是它的设计却不是那么容易。 一个引导页最…

    2016-04-27
  • 大牛推荐!UI设计师工作必备的七个设计神器

    编者按:今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值…

    2015-12-03
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17
  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10
  • 网易云音乐交互设计:如何让用户感知到个性化推荐

    一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

    2016-10-25
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03