TV UI之焦点篇

TV UI之焦点篇

      APP标签栏图标的标记状态作用是让用户知道身处何处，那么TV中焦点作用也是如此，由于目前TV技术限制使得用户更加被动，还是倚靠遥控完成所有交互指令，这就要求TV UI和交互必须简洁醒目：更简单的导航系统、更少的页面跳转、更大的字号以及更醒目的焦点状态。

TV UI之焦点篇

    TV UI分为控件与非控件，前者能获取焦点，后者不能，简单来说就是内容应用卡片和提示文字图标的区别。而可获取焦点的控件有四种状态：正常状态、焦点状态、标记状态、半选中状态。焦点状态指移动按钮的状态时，侧边的内容也会随之更换，适用于导航栏按钮；半选中状态指按钮悬停在该选项中，点击遥控器确定按钮才会发生结果，适用于视频选集、清晰度的切换；标记状态指当前已选的选项记录，适用于导航栏上的选项标记（焦点不在选项而在卡片内容时）。

TV UI之焦点篇 TV UI之焦点篇

      更深入点，就焦点状态来讲，要醒目，尤其白天模式。黑色相对于白色更体现颜色对比，这就要求TV的白天模式的焦点要更加明显，当然要适量而不至花哨，一般会用到两个到两个半的效果，这里来做个焦点效果程度对比：放大+阴影（多用于launcher这样有序的应用排列）>发光+边框（多用于APP商城这样不规则排列）>不同透明度（多用于文字区分）；Launcher主要以内容为主应用为辅，现在商城也有这样的趋势，放大+阴影的焦点模式既保证了可见度，又不会让用户对内容注意力分散到选中效果上，这也是为何Amazon Fire TV在选中框上做了50%透明度的原因，而ROKU TV为了保持UI与交互完全统一，在粗边框和放大效果的选择中，舍弃一方选择前者。 

TV UI之焦点篇

      这里提到ROKU还为引出另外一个需要注意的点：所有可控组件的焦点样式必须统一。大部分应用商城多采用纯色或渐变样式的色块卡片，如果焦点选中效果也是色块，就会使用户混淆，举个栗子：顶部搜索、设置、用户这类功能按钮若采用色块焦点样式，就会和下方色块内容卡片混为一谈，不知道卡片和按钮哪个是焦点。统一采用边框+发亮的焦点效果，更清晰更粗暴。

TV UI之焦点篇

      最后吐槽一点，在非自主研发Launcher以及后台APK取图质量不可控因素下，Launcher的海报、应用以及视频封面就设计来说是惨不忍睹的，很可能出现焦点框与图片色值过于接近的悲剧，既然没法改变内容图片，那也不能随遇而安吧，将焦点设有色值的边框，侧在焦点框内部加6-8PX的黑色边框，可以很好避免二者色值过于接近而带来混淆。 目前先写这些，有补充再写。