Android TV设计的践行者:沙发管家引领本土TV应用国际化潮流

Android TV 将是 Google谷歌进军客厅的先锋利器,特别是最新版本的界面进行了全新设计,采用了谷歌最新开发的界面设计语言—Material Design。

同时也结合了移动平台发展出来的“卡片”设计趋势。Google 也的确要以全新思维打造机顶盒TV市场。

另外,Google也对产品功能进行了重新定位,鼓励开发者“为极为简洁的机顶盒界面开发极为简洁的TV应用”。

而作为中国国内Android TV设计的先驱者——沙发管家,近期发布一款符合Android TV设计风格的V5版本。也是国内首家符合Android TV设计理念的电视应用。

25学堂小编体验了沙发管家的V4和V5版本,从UI界面设计角度来看,沙发管家将对Android TV设计规则的理解,和对自己产品的了解结合在一起,产生的是一款既引领潮流,又实用好用的产品。

沙发管家

沙发管家Android TV   v4.8.3

沙发管家2

 沙发管家最新Android TV设计版本  v5

Android TV的设计语言就是目前安卓圈内最流行的设计风格—Material Design。

专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的全球先进设计规范。

 

下面就来跟随25学堂的小编来一起从下面三个方面来体验下Android TV设计语言的魅力!

 

1、Android TV 主屏幕的布局设计更加人性化

Android  TV 的用户体验从主屏幕开始,包括搜索、内容推荐、App 列表以及设置入口。主屏幕提供一种多层次的、影院风格的和视频内容概览。

Material Design通过模拟物理世界纸张的伸缩、变形、拼贴等多种可能性来作为主要交互手段,这一方式结合电视大屏特性,就要求我们更多采用卡片式的大图来作为信息载体,减少层级跳转,将突出内容呈现作为页面布局最重要的目的,使得整体交互过程更加简洁、轻快。

122222

 

沙发管家不仅仅提供了应用下载、更新、电视优化等管理功能,还突出了电视的大屏优势,在视觉上和电视的宽屏契合,力求达到“更轻、更快”的使用体验。

采用了左侧菜单右侧内容的布局,推荐位和列表页都使用横排布局,图标统一采用卡片式设计,引入“轴阴影”焦点设计方案,并且从主屏到欣赏内容之间的键操作不会超过三次。

沙发管家2

主屏幕顶部的推荐栏是的核心元素。这一栏是为用户速览个性化的内容、继续播放该设备或其他设备上的内容而准备的,同时也帮助用户发现自己可能喜欢的新内容。

 

2、采用最先进的移动APP设计趋势:卡片式设计

卡片式布局的优点:简洁布局、层级清晰、加载快速。不仅能给人很好的视觉一致性,而且更易于设计上的迭代。更重要的是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。既要做到视觉上尽量一致,又要平衡文字和图片的强弱,这时卡片设计经常有奇效。

其次,卡片是立体的、有深度可以被翻转, 扩展性很强。如下图所示:

android-Tv卡片式设计

 

下面是沙发管家的V5版本UI界面图:

android-tv投影效果

沙发管家右边正是采用层次清晰,易于自适应的的卡片式布局设计,同时还增加了投影效果! 更突显每一个卡片的立体感!

左边是可伸缩的导航菜单,非常简单!右边是用户感兴趣的内容区域!上下滚动即可。建立从左到右、从上到下的导航模式! 移动体验非常的完善!

使用水平布局,并且提供页面间的视觉过渡。如果要使用垂直滚动,将其范围限制在页面中的细节区域。保持左侧导航栏固定。除此之外,保持上下文易于理解,这将会更好得易于用户理解。

 

3、交互界面做到直观易懂

如今的交互不单纯只是人机界面交互,还有语音、手势、人脸识别等交互技术,这些交互方式和技术也在产品中逐步应用。

比如Material Design引入全新“Z轴”概念后,通过强调“Z轴”来凸显页面之间的空间层级关系。每一次移动、点击,页面都从移动中心点扩散出来,整个界面操作交互非常的流程易懂。

沙发管家2

 

其次,关键字是“Overlay”和去主页化。去掉主页的设计减轻了用户进行选择方面的负担,让看电视“更像”看电视节目。

更重要在AndroidTV上,搜索依然存在,而输入方式则改为了语音,这确实优化了产品的体验,部分解决了在电视上的输入问题。目前,中国市面上有些盒子是搭配语音遥控器操作的。有兴趣的小伙伴可以去尝试体验一下!

 

沙发管家的交互设计在AndroidTV的“高标准”和中国用户实际的用户体验之间做了平衡,值得推荐的细节有:

第一:流畅的屏幕转场切换效果。还有上下缓存滚动的的特效。如果网速较慢的话,屏幕中央会出现旋转加载的动画。告知用户稍微等待。

第二:就是用户选中某个卡片的放到特效。非常的醒目,一把就能抓住用户的眼球。同时图标会有一些小小的动画效果。也就是符合Android TV的放大每一个光标可以访问的UI控件(比如链接或按钮),并在控件周围留出足够的空白。形成视觉聚焦。如下图所示:

沙发管家3

第三、为界面中可选择、可导航的项目添加指示或高亮状态。这是一个很不错的设计。这样启示用户更好的操作V5的ui界面设计。

第四、方向键控制器将运动限制在上、下、左、右。使用方向键中间的Enter或OK键触发光标所在的操作。用户只需控制好 方向导航键,就可以快速简单的与V5界面进行交互操作。

 

总的来说沙发管家的V5版本,从用户体验界面设计角度来说,几乎符合下面四点:

1、保持设计的一致性。

2、保持元素行为的一致性。

3、保持所有重要的操作和选项可见,包括搜索、设置、返回等等。在十英尺环境中,不可见的元素容易被记住,即便它们是在屏幕以外或者在遥控器上。

4、只使用一种视觉导航模式或是一种信息层级。从而引导用户适应所有UI的心理模型。

 

最后,  25学堂小编觉得一个可以把产品设计理念变成一种潮流,而且设计出来的UI界面易用、好看、匹配产品使用场景、大胆创新元素等以上种种举措,足以让我们了解沙发管家是一个舍得花心思在UI界面设计上,重视用户交互体验的电视应用产品。

再说谷歌官方的发布的Android TV设计规范并不完美,也是在尽最大努力的满足用户喜好,甚至引导用户发现自己的需求,不断的去完善Android TV设计规范。

当然,我们也愿意跟随Android TV这样专注创新设计的先驱者,一起进步。

每天更新,
全站高品质素材免费下载!