【Android TV】智能电视UI设计规范
UI设计者 – 一个免费自学UI设计APP
【Android TV】智能电视UI设计规范
发表于: &·
·& 5,740 views &·&
TV用户较为被动，与TV交互更多是作为信息的接受者，无法达到一种沉浸式的状态。
因此在TV的界面设计上最好让用户通过方向键和OK能够进行操作，并提供返回键，避免用户低头看遥控器寻找按键而打断操作的任务流。
TV平台上的app应用
通常用户对TV发出的声音并不会感到反感或干扰，因为TV上的频道和app多为“消费性”内容，且TV标配音响系统（音量是默认开启的）。所以在app设计中，可以使用声音作为帮助提示和操作反馈提示。
导航设计——遥控器和导航结构
说到TV的UI设计，就不得不从导航开始。如上文所述，TV用户较为被动，所以需要清晰高效的导航系统来帮助用户快速定位到想要看的内容。
导航方式与输入设备息息相关，智能电视最主要的输入设备还是遥控器，有时还辅以鼠标和键盘。下面的图例是Google TV和Apple TV的输入设备。
新的智能电视输入设备以十字方向键和OK键为核心，所以TV app的导航要基于上述方向键和OK键进行设计。
左图中的Cover Flow和右图中的List，这两种方式都采用了单方向导航。Cover Flow这种方式视觉冲击力较强，单屏信息承载有限，焦点的移动两种方式将在后文陈述； 右边这种列表方式视觉冲击力较弱，单屏信息量较大，但在TV平台处理List时候和PC上有所区别：TV app不需要滚动条，而且要控制List的长度，因为尽管遥控器方向键可以启用长按加速，不过始终无法达到像PC端鼠标拖拽滚动滑块控制浏览速度和定位的表现。
导航项的三种状态
在基于十字方向键上设计导航时，导航项一般存在三种状态，即“selected”，“focused”和“selected and focused“。导航上如果有类别项（category）和动作项（action）那么导航获得焦点时，焦点移动不会切换右边容器中内容。当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。
总而言之，导航设计原则如下：
导航设计的目标，是让用户快速定位，并且能够预测出操作结果。
导航架构完后，就是焦点移动的问题，下面几个图例简单介绍了一下在TV平台上焦点移动的问题。
导航焦点态响应面积
遥控器是所有电视标配，而智能电视一般还都支持鼠标和键盘操作，所以控件的状态和PC上有些类似。使用遥控器操作的时候，控件的状态相当于用TAB键浏览网页或者操作桌面软件即控件选中态切换，而使用鼠标操作的时候和PC端一样控件要有hover的状态。因为TV的操作距离非常远，而且TV的外接鼠标可能是空鼠等（其操作不像PC上鼠标一样容易），所以在设计TV控件时针对鼠标hover状态要增加其响应面积，方便用户操作。
【图11】焦点在列表中移动
上图左边示例是一个典型的Cover Flow式的导航，这种情况下页卡滚动，焦点却一直固定在中央。在单向列表或者导航时候，这种焦点固定的方式可以很好的避免当列表中项目较多时，导航焦点一直停留在列表底部也就是屏幕边角（用户视线长时间停留边角）而造成的疲劳。
上图右示例相反，页卡不动，焦点移动选择。在这种方式下，当焦点移动到列表最右端继续滚动时，最好采用翻页效果。这种效果一是解决了上述视线停留边角问题，二是可以和page controller控件结合在一起，让用户知道在列表中所处位置。
【图12】焦点移动路径
上图是从Google TV设计指南中截出来的一张图，提倡使用图中绿色的路径，避免使用红色的对角线方向路径：
纯焦点移动路径最好平直且区域对齐，上图所示，如果从A沿绿线移动到B可以较好的被用户感知和理解；如果沿红线移动则不符合用户预期；
高焦点移动要避免大范围转移，大范围转移的焦点会让用户感到焦点丢失；
最后，就是焦点和控件的关系。PC和移动设备上很多控件都具有很强的点击感，因此用户可以较清楚的区分控件和非控件元素。在TV平台上因为输入设备是基于遥控器设计，失去了控件常见的点击感觉，用户区分哪些元素是说明性的和哪些是控件会产生困难。 因此在TV平台上控件设计尽量可以达到
可视元素可获得焦点，提示和说明性元素，要在视觉上和空间位置上与控件做出明显的区分。
颜色和分辨率
【图13】颜色错误使用
针对TV显示器的本身特性，在进行UI的视觉层面的设计中需要注意以下几点：
纯白（#FFFFFF）在电视会产生图像拖影，如需使用白色，可以用#F1F1F1(hex) 或者240/240/240(RGB)进行代替；
高饱和度颜色会导致显示失真，并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊；
大范围渐变会导致带状显示，无法平滑过渡；
在界面边缘最好留出10%空隙，避免发生电视显示屏独有的“过扫描（踩边）”现象。
【图14】分辨率和色彩模式
现阶段智能电视有两种分辨率模式和，也就是我们常说的1080p和720p，在进行UI设计时候应该：
高分辨率设计，可以使用android 9-patch切图进行低分辨率适配，在测试的时候选择用低分辨率测试可以更好的发现问题；
确保在TV所有显示模式下经过测试，都不会产生问题。
新的交互方式
最后想介绍一些TV平台上最近出现的交互方式：
本文链接: http://www.//androidtvzhinengdianshiuishejiguifan/
你在找他们吗?
同学自发组织群
Copyright&2016&&& 京ICP备号 |您所在的位置： &
Android TV 背后的技术，打造更符合客厅的应用
Android TV 背后的技术，打造更符合客厅的应用
Android TV背后的技术,Google想用更大胆的方式打造更符合客厅的应用。Google 在通过允许内容提供商切换到自己应用的方式，甚至将 Google 还打算将两种方法结合起来，不光列出 Google 推荐的结果，还会为用户提供切换到内容商应用的路径。
前两天，The Verge曾曝出一份关于Android TV的独家资料，据 Google 的描述，这款机顶盒产品将是&一个娱乐终端，而不是计算平台&。这个基于 Android 的新平台，将会鼓励开发者们去为一个&极简的机顶盒界面&构建&极简的配套应用&。
虽说还有很多这款机顶盒相关设备信息并未被曝出，但无论从完成度还是 The Verge 所获的消息来看，基本可以确定 Android TV 是真的存在。那 Android TV 有什么与众不同之处？
像内容目录，而不是应用
为什么要这么做？其实我们可以关注一下当下用户在智能电视上的体验：在大多数设备上，应用开发商在其应用外观及界面的设计上（大部分情况下）有着很高的自 主权，这就使得应用图标以及界面风格和 YouTube 的就有很大不同，各个应用都有着很强的辨识度。
但 Google 却貌似并不愿意给应用开发商这个自由。有消息称，Google
试图通过标准化的模板将用户界面统一起来。内容提供商将不必再提供其自己的界面，而只是将内容流提供给 Android TV
即可。比如电影标题和封面将会在 Android TV
中以统一的风格展示，而用户的体验将会是打开了一个大内容目录中的小目录，而不是打开了一个完全不同的新应用。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="480" height="267" src="/wyfs02/M00/23/D3/wKiom1NErOrgdd40AABPYnthV9Y867.jpg" alt="" />
最终目标：让应用中的内容更易获取
这将会带来很明显的优势，它将允许用户以同样的方式在每个应用中使用遥控器操作，而在应用中部署新功能也将更为方便。但更大的优势是，这么做将会让
Google 能直接访问每个应用内的内容信息。要知道 Google 一直以来都在推动着应用内搜索技术，而 Android TV
所尝试的应用构建模式也将有助于智能电视内的内容搜索。
更值得关注的是，这样的方式还能有更大的作用，因为获取的数据是结构化的，这就使得平台不仅能知道每个视频的来源，还能知道视频的内容类别，甚至还能知道电视剧中哪几集属于同一季。
这所有的信息能帮助 Google
去构建一个更智能的通用搜索功能，它能直接将应用中的内容单独提出并呈现出来，还能通过交叉引用给出更智能的推荐。之前有内容提供商尝试过自己解决这个问题。但通过这新模式，Google 甚至还能在用户看完 Hulu Plus 的某个节目后推荐其他某个相关节目。
现实很骨感：内容商可能不买账
内容提供商真的想要这样么？已经花了大手笔去搭建自己的内容推荐算法及用户界面的内容提供商，和一些对这种 Google 所谓的新模式所能带来利益有疑虑的内容提供商，可能都不会买账。
有消息称 Google 在通过允许内容提供商切换到自己应用的方式，甚至将 Google 还打算将两种方法结合起来，不光列出 Google
推荐的结果，还会为用户提供切换到内容商应用的路径。要知道，Google 不可能推出一款没有像 Netflix 和 Hulu
这样的大牌公司合作的产品，而这就意味着 Google 将不得不做出很多妥协，导致产品最终就和现在已有的苹果，Roku 还有 Amazon
等公司的产品大同小异了。
[本文参考以下来源：]
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
网络产业经历最近十年来的快速发展，已经根深叶茂、蔚然成林。20
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
2013年手机游戏大火，但随着很多人涌入进来，同质化和
写给开发人员――苹果的最新一代移动操作系统已经正式
大家有木有感觉很奇怪呢，现在都12月份了，北京还没下
本书全面介绍了Ubuntu Linux的相关知识，内容详实，论述清晰。主要内容包括Ubuntu介绍、文件系统管理、进程管理、压缩与查询
Windows Phone专家
Android开发专家
51CTO旗下网站10557人阅读
Android（66）
前言：上篇是介绍构建TV app前要知道的一些事儿，开发Android TV和手机本质上没有太大的区别，屏大，焦点处理，按键处理，是有别于有手机和Pad的实质区别。今天来介绍TV中Metro UI风格，并结合实例说明。
Android TV发展离不开Metro UI,先看最新的泰捷TV的会员区效果，属于典型的Metro风格，如下：
什么是Metro UI:
Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计[2]
主题应该是：“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。
Metro UI软件
Metro是微软为了方便开发者编写Metro风格的程序而提供的一个开发平台，可以调用微软WinRT暴露出来的接口编写Metro风格的程序。 而Metro风格的控件[3]
拓展Win8标准控件方法和属性,实现一些新的功能,如Component One Studio for WinRT XAML，Component One Studio for WinJS。在Windows8中开放的Windows应用程序市场也使用并推荐采用Metro风格界面的应用程序.
Metro 界面，开机后首先映入眼帘的第一个界面，个人感觉主要是为了触屏设备而设计的，但是在TV中使用起来也一样的方便。我们在Desktop中安装的程序以及 在应用商店中下载的程序都会在Metro中展现出来，所以我们要定期或不定期的对其进行分组、排序、整理，以方便我们的操作以及界面的美观。Metro界面同时提供了便捷的选项，使操作更加方便。
今天来仿照并实现这个Metro界面，以下是我实现的效果图：
gif图：(TV上没有好的录屏工具，盒子系统一般低于5.0，有些厂商已经升到5.0，我用的是i71，很老的盒子，基于API 17, 4.2.2的系统)
看下其中一个MetroItem的布局：
每一个MetroItemFrameLayout下包含一些子View,ImageView就是对应图片，CornerVew表示上下左右的的角标，TextView表示下方的描述，这些可视具体情况进行选择。
其他相关代码，下篇博客具体分析。案例已开源到Github,对应链接：。喜欢可以star.
Copyright (C) 2016 hejunlin
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
第一时间获得博客更新提醒，以及更多android干货，源码分析，欢迎关注我的微信公众号，扫一扫下方二维码或者长按识别二维码，即可关注。
如果你觉得好，随手点赞，也是对笔者的肯定，也可以分享此公众号给你更多的人，原创不易
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：530354次
积分：7255
积分：7255
排名：第3041名
原创：169篇
评论：367条
个人原创 android 技术干货，问题深度总结，FrameWork源码解析，插件化研究，最新开源项目推荐
Android 开发交流群：
Android TV开发交流群：
我的邮箱：
我的Github：
爱奇艺智能设备RD，关注Codec，多媒体，FFmpeg领域，OpenGL ES,希望结识更多同道中人。
阅读：68523
文章：28篇
阅读：123831
阅读：24928
阅读：2383021:37 提问
android tv
焦点框动画
当鼠标进入一个控件时，这个控件会变大，同时焦点框会将这个变大的控件刚好圈住
但是不会响应点击事件。
当鼠标离开这个控件时，进入另一个控件上方，原来控件的焦点框会放大或者缩小
到当前控件放大的面积。同时焦点框在两个控件之间的切换是有一个动画效果的，
原先的控件缩小，焦点框变为当前鼠标所在控件放大的面积，同时伴随着焦点框从
缩小的控件到放大控件的移动动画。
可能我描述的有些不清楚，有什么问题可以提出来 我qq
或者留言 。
我相信在乎悬赏的人是少数的，大多数是对软件开发的兴趣及酷炫动画的热爱。
按赞数排序
这个我看过了，但是感觉好像少了点什么，你按照这个做出来了吗。
我现在的问题是如何让焦点框可以从失去焦点的控件移动到获得焦点的控件，这其中当然是有动画的了，你知道怎么做吗
其他相似问题拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(38fbefdda3e643c5-ua98).
重新安装浏览器，或使用别的浏览器