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开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • Coding Nap:迭代式体感交互设计分享

    CodingNap是为程序员设计的一款办公室睡眠闹钟。程序员是一个不分昼夜工作的群体,十分需要短暂而高质量的睡眠。当程序员十分疲惫需要休息时,按下Coding Nap的按钮,它便为程序员设定了9分钟的睡眠之旅。同时Codin…

    2015-11-18
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 购物商城微信公众号交互设计

    设计背景 由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返…

    2015-11-06
  • 创业还没听过在线Logo生成器? 那你就落伍了!

    创业还没听过在线Logo生成器? 那你就落伍了!创业的第一步 - Logo不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。品牌Logo可…

    2016-10-17
  • 【译文】雨天里的交互细节

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

    2015-10-30
  • 一款APP从设计稿到切图全记录

    这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用。 Part 1 项…

    2016-10-18
  • 阿里巴巴技术架构首次曝光 | 站在双11的肩膀上看阿里云企业级互联网架构

    2015天猫双11全球狂欢节以912.17亿元的答卷完美收官。 双11当天14万笔/秒的交易创建峰值和8.6万笔/秒的支付峰值双双刷新了世界纪录,相比首届双11,订单创建峰值增长了350倍,支付峰值增长了430倍。 天量数字的背后…

    2015-11-18
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11