对TV端产品设计的分析太特么少了。翻遍网络,大多也是针对UI设计的分析,这篇从产品设计的角度,梳理下现有的TV端产品设计法则,顺道做点分析。(前方多图,高能预警)

目录:

1. TV端产品使用场景

2. TV端产品设计法则

3. TV端产品设计分析

4. 总结

1 TV端产品使用场景

电视使用环境

1)距离远:智能电视尺寸几乎均大于42寸,使用环境应该在2.7-3.5米之间。虽然屏幕尺寸大,但操作距离远,单屏信息量小。

2)灯光暗:用户在使用电视时,多灯光昏暗,有可能后仰躺在沙发里,有可能在一边做其他事一边操作电视。用户比较被动,频繁使用遥控器会难以进入沉浸状态。

3)接受声音:由于电视本身多为娱乐消费性内容,用户习惯于消费声音,且电视拥有良好的音响系统。

4)操作单一:遥控器按键少,在电视上移动的方式单一。频繁的操作将损害用户体验。

5)显示效果差:电视屏幕分辨率和显示技术尚未同步于电脑屏幕。

6)“后仰”体验:电视在本质上是被动接受,这通常被称为“后仰”体验。即使是愿意与电视互动的观众也不愿意互动得太多。他们想后仰靠在沙发上并享受着互动过程,而不是像用电脑或手机一样要高度集中注意力。

7)娱乐环境与社会环境:电视的使用环境决定了用户处于一个娱乐环境,而不是工作环境;是一个社会环境,而不是个人环境。

2 TV端产品设计法则

1)简单可见的导航:考虑到使用距离和坑爹的控制操作设备(遥控器),导航要简洁、简单、可见。常见的导航设计包括:大区块(Samsung Smart TV)、左右分栏(Android TV)、磁贴(Xbox)、Coverflow和list列表。但使用list时要考虑到长度控制。

2)十字型焦点移动:产品形态分布与操作移动路径应符合视觉焦点分布。因为是用遥控器操作,让你得移动路径是向上、向下、向左、向右,尽量避免斜角。同时避免大范围的焦点转移,会让用户感到焦点丢失。

视觉焦点分布

3)符合人性的焦点停留:避免视觉焦点长期停留在画面边缘,可采用焦点居中或翻页的方案。

视觉焦点停留方式

4)利用返回键和OK键:完全利用起遥控器上的每一个按键,给用户带来操作的流畅感,避免因为低头寻找按键而打断操作任务流。

5)精简操作:从A到B,从第一层到第N层,用遥控器操作起来真的太麻烦了,元素布局要符合操作路径,能少按一下就少按一下,帮你的用户进入沉浸状态。

6)反馈:也是距离原因,要给用户明显的反馈以确定上个动作。选中状态要明显,善用Hover悬浮框(而且悬浮框要足够大),用声音给予辅助提示。

3. TV端产品设计分析

分析几个TV端产品设计:

1)Xbox One

XBOX ONE首页
 
XBOX ONE主界面

几周前就在微信上向XBOX表白了!神似win8的界面设计,恩,毕竟是一个妈【……】 磁贴能做的这般高大上简直让人瞬间动了春心←喂 对应以上的设计法则,我们看看XBOX的设计:

- 导航清晰,界面简洁,就连底色都是简单的大黑屏。

- 整齐的磁贴符合视觉焦点分布,有利于十字型焦点移动。翻页设计有利于控制视觉焦点。

- 注意一下,首页上的最大的磁贴位是“recent”。考虑到TV端用户会经常重复使用同样的游戏(应用),将使用记录直接放在最容易进入的位置,降低操作成本。

- 支持手势控制和语音导航。突破遥控器操作障碍的利器,极大提升了用户体验。

XBOX交互方式

2)Apple TV

Apple TV首页
 
Apple TV操作界面

Apple TV是一种上下分栏的导航模式,首屏是焦点图+主菜单(第一行图标),向下翻页后展示第二屏的应用。二级页面仍然是焦点图+内容的上下分栏。

没有实际体验过,但仅就收集到的资料而言,这种设计很容易将主导航栏隐藏,从而让用户失去定位,首屏展示的信息也太局限。而且……我觉得这设计丑哭了……真的是丑哭了……不知道apple是怎样的考虑,欢迎交流……

另,iPhone可以和Apple TV连接控制电视,最新消息说Apple TV很快将支持Siri,这倒是一大利器。

3)Android TV

Android TV主界面
 
Android TV卡片式设计

上文中提到过左右分栏的导航设计,Android TV就是了。仔细看看吧:

- 严格按照网格状视频焦点的布局。

- 采用了Google近些年推出的卡片式设计风格(Inside Out Design),电影、电视、游戏、应用四组界面都是用卡片来展示。目测是横向平滑移动的效果,虽然符合了十字型操作习惯,但有将用户的视觉焦点固定在屏幕右侧的嫌疑。(或许可以用卡片数量来控制)

- APPS和GAMES两个类别,app会按照使用频次自动排列,减少用户操作次数。

- 同样的,支持手机控制和语音控制。

- 设置在最底部——觉得这个位置很蠢,用户有需要的时候,必须连续移动焦点到最底部才能选中;用户没有需要,又何必显示出来,和其他更主要的内容争夺视觉焦点呢?

Android TV设置区

4 总结

就是强调几点,顺带絮叨几句:

1)娱乐场景和社交环境。

智能电视的确还不算主流,但确是智能家居发力的主要着力点之一。考虑到人性本质就是放纵任性,处于娱乐场景的TV绝不会被手机和电脑取代。而社交环境则决定了太过个人化的产品难以体现在TV这个载体上,聊了那么久的智能电视社交,为什么推不出去……因为大家都不是一个人在看电视啊!一个人的时候电脑就解决了好么!即便想要和不在场的亲友聊天,手上有手机啊!

2)克服操作瓶颈。

比起手机和电脑而言,智能TV的操作实在是太不友好了。如何克服?从产品层面,就是上文中提到的减少操作频次、简化步骤等等,以提升操作流畅感,达到沉浸的效果;而从技术层面,使用手机去操作,使用姿势和声音去操作,都是目前的技术完全可以实现的。

3)是电视,又不是电视。

考虑到使用场景,电视的主流作用仍然是视频播放和游戏,产品设计必须考虑到电视本身的特性;而另一方面,目前对智能TV的想象还是不够丰富,产品设计还是脱离不了传统电视的框架,或许我们面对一个40寸以上的屏幕,忘记了它是电视,TV端产品设计才算一个新的开始。

TV端产品设计法则和分析的更多相关文章

  1. 浅谈由管理者角色引出的B端产品设计思考点

    本文来自网易云社区 作者:任琼瑶 最近一直都在持续跟进云课堂B端的交互设计,在此期间,多多少少遇到了一些不曾遇到过的问题,虽然同是做产品设计,但B端和C端产品的确存在很多不同之处. 首先,当我们在做C ...

  2. 第三阶段:3.Web端产品设计:3.产品设计的层次

    一般淘宝购物的五个流程:浏览对应表现层,搜索对应框架层,产品页面对应架构层,确认对应范围层,付款对应战略层. 从具象到抽象.但是我们做产品都是从抽象到具象,而用户使用产品是从具象到抽象. 各个层次之间 ...

  3. 第三阶段:3.Web端产品设计:5.产品设计-视觉设计

    视觉设计主要在表现层. 色彩心理产品经理可以也是应当掌握的.什么颜色的选择都是有理有据的. 信息清晰度. 比如这个图:当用户操作出问题,谷歌会给出问题同时给出解决方法. 视觉动物. 2/8分布原则.用 ...

  4. 第三阶段:3.Web端产品设计:4.产品设计-交互设计

    交互设计主要做框架层以及结构层.包括交互关系,信息结构,界面布局,导航设计,信息内容. 导航关系非常重要. 这是框架层. 这是结构层. 要素就是信息内容.

  5. 第三阶段:3.Web端产品设计:1.以用户为中心的产品设计2

    从功能到体验.提供不同的附加值.

  6. 如何写好B端产品的技术方案?

    B端产品为企业提供协同办公的工具,帮助企业解决某类经营管理问题,核心价值在于为企业增加收入.降本提效.管控风险,企业级SaaS产品也是B端产品中的一类. B端产品有以下特点: ​客户是一个群体:B端产 ...

  7. 回顾2017系列篇(二):移动端APP设计趋势

    移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...

  8. B端产品需求文档怎么写?

    B端,或者2B,一般指的是英文中的 to busniss,中文即面向企业的含义.与B端相对应的,是C端,或者2C,同样指的是英文中的 to customer,即面向消费者的意思.因此,人们平常所说的B ...

  9. 个性化推荐产品功能的设计和B端产品的功能策划方式

    宜信科技中心财富管理产品部负责人Bob,与大家一起聊聊个性化推荐产品功能的设计和B端产品的功能策划方式. 拓展阅读:回归架构本质,重新理解微服务|专访宜信开发平台(SIA)负责人梁鑫 智慧金融时代,大 ...

随机推荐

  1. 30 个 PHP 的 Excel 处理类

    下面的 PHP Excel 处理类中,包含 Excel 读写.导入导出等相关的类,列表如下: PHP Excel Reader classes 1. Read Excel Spreadsheets u ...

  2. leetcode:Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  3. matlab函数集锦

    matlab函数集锦 matlab函数集锦ISFINITE(X), ISINF(X), or ISNAN(X)pwd 当前目录eval 执行matlab函数CONV2(  ,'same')  卷积F  ...

  4. 【温故知新】C#委托delegate

    在c#的学习过程中,学到委托与事件总会迷糊一段时间,迷糊过后自然而就似懂非懂了~,所以最近我打算把以前所学的迷糊过的知识总结,温故知新,总结记录下来. 首先,我们来看一下msdn对委托的定义: del ...

  5. hdu1052(田忌赛马 贪心)

    好坑的一道题,不过确实是贪心的一道好题,想了好久一直无法解决平局的情况.  参考了别人的思路,然后结合了自己的想法,总算是想出来了. 这题有些步骤是必须要执行的,有四个步骤 一.当期状态田忌的最慢的马 ...

  6. Hybris 预备知识学习列表

    需要学习的: Spring,Spring对于hybris非常重要,整个hybris是基于spring的架构之上. 包括例如spring mvc,spring security, 设计模式 软件构建工具 ...

  7. DataGridView导出Excel

    将DataGridView里面的数据,导出到表格里面去. 首先,需要添加三个引用 直接在解决方案里,右键添加引用,找到路径即可.然后再把这三个文件复制到项目的根目录下. 然后定义导出表格的函数: pu ...

  8. mysql大数据导出导入

    1)导出 select * from users into outfile '/tmp/users.txt';或 select * from users where sex=1 into outfil ...

  9. mysql-备份和还原(普通还原和binlog还原)

    1)备份 mysqldump -uroot -proot share -l -F > /tmp/share.sql 说明:-l 锁表 -F 刷新日志文件(相当于flush logs) 2)还原( ...

  10. Asp.net动态调用WebService

    Public Class WebServiceHelper #Region "InvokeWebService" '动态调用web服务 Public Shared Function ...