电视应用 设计之道 谢芬

Why

DESIGN?

Make life simpler

Save Time, Space, Money

User Friendliness Humor Interesting, change the mood

精⼼心设计的产品，是创造收益的起点

Integrity Function Efficacy

Reliability Easy to Use

Beauty

设计考虑

• 分辨率 Resolution:

• HD Ready = 720p = 1280x720 • Full HD = 1080p = 1920x1080

• 观看距离 viewing distance:

• 30” – 3m

• 40" – 4m • 50" – 5m

电视屏幕 设计考虑 •  少即是多：电视屏幕很⼤大，可是观看

距离远。（⼀一个远距离观看的电视和⼀一个近距离使⽤用的⼿手机没什么不同）

•  横向布局更符合电视宽屏。

•  深⾊色背景上的浅⾊色内容更易读。 •  字体要⾜足够⼤大，⽅方便阅读。 •  ⽂文字和背景对⽐比明显。 •  任何时候，聚焦框／聚焦元素明显。

•  电视的优势在于对⼤大图像，视频及⾳音频的展⽰示，利⽤用这些优势。

•  图像⾜足够清晰，避免锯齿。

设计考虑 红外摇控器 •  ⼀一切内容⽤用遥控器⽅方向键可访问： 上,

下, 左, 右 ,确定, 返回。

•  避免⽤用户输⼊入⽂文字。

•  电视与⽤用户之间有⼀一定距离，唯⼀一的媒介是摇控器，⽽而红外传输有⼀一定延时，需要：

－ 保证对⽤用户操作的快响应性。 － 避免使⽤用需要点击才能交互的元素： 如下拉列表，不点击内容即不可⻅见； ⼜又如滚动条，遥控器⽆无法拖曳。

沙发懒⼈人 The Coach

Person

从个⼈人到⼤大家 Me -> We

•  电视主要⽤用来娱乐休闲的，⽤用户不希望有太多的交互及决策。

•  电视是公共设备，控制隐私的能⼒力有限。需提供功能⽅方便⽤用户清除历史纪录。

•  避免输⼊入可以提供桌⾯面⺴⽹网⻚页让⽤用户输⼊入信息，然后将帐户很⽅方便地链接到电视上。

•  从个⼈人到⼤大家(me->we)的转变，除了视频⾳音频应⽤用外，社交分享类，教育类，多⼈人交互的游戏类应⽤用也适合开发为电视应⽤用程序。

设计考虑

设计基本准则

设计基本准则

对⻬齐 Alignment

亲密性 Proximity 重复 Repetition 对⽐比 Contrast 概念清晰 Clear Objective 少即是多 Less is more 留⽩白 Whitespace 安排明暗 Light and Dark 动静有致 squish and separate 平衡 Balance

Opera电视应⽤用商店

及其 程序验收标准

Opera电视应⽤用商店

•  基于 HTML5，针对电视宽屏及摇控器操作进⾏行了优化 •  云架构平台，展⽰示及管理各种电视应⽤用:

-  个⼈人⾸首⻚页: My Apps -  应⽤用商店: TV Store

•  跨平台，运⾏行于Opera Devices SDK 3.1及其以上

CSP

Applications

Opera电视应⽤用商店的架构

TV Store

CSP

Admin, developer access

CSPs URL, Meta-data

Application launch

下载 Opera TV Emulator:

opera.com/tv

Emulator 及 Dragonfly 上调

试 在Emulator或实

际设备上测试

提交⾄至���Opera电视应⽤用

商店

Opera 审核: •  程序 •  内容源

发布到Opera电视应⽤用商店

开发流程及⼯工具

＊ Opera桌面浏览器可用“Shift + 方向键”模拟摇控器四键导航。

Acceptance Criteria

显⽰示 Display

p  在分辨率1280x720下显⽰示全屏且正常 p  图像⽂文字清晰可⻅见：建议使⽤用⾄至少

22px⼤大⼩小的⾮非衬线字体，可聚焦选择的元素⾼高度⾄至少34px。

p  任何时候聚焦框清晰可⻅见

导航 Navigation p  上下左右键能实现导航，如有设置其

他键为快捷键，其他按键也可⽤用。 p  所有外部链接都可访问，且链接⻚页⾯面

在电视上显⽰示正常（针对电视做过优化）。

⺴⽹网络 Network p  对于需要⺴⽹网络的程序，对⺴⽹网络断开／

重新连接都有异常处理。

视频/⾳音频 Audio/Video p  播放流畅 p  可播放／暂停／重播／停⽌止等 p  对播放异常进⾏行处理 p  如需Flash及其他插件，需设备⽀支持。

性能 Performance

p  保证应⽤用程序对⽤用户操作的快响应性。 p  程序加载时间不能太⻓长(<20秒)，对于

加载>5秒，需要提⽰示正在加载中。

其他 Others

p  提供邮件⽀支持 p  避免崩溃或死机

验收标准

实例

dev.opera.com/tv