PPT on design of TV apps, speech given at Html5 Top conference 2012 Beijing.

1. 电视应用
设计之道
谢芬

2. Why
DESIGN?

3. Make life simpler
Save Time, Space, Money
User Friendliness
Humor
Interesting, change the mood
精⼼心设计的产品，是创造收益的起点
IntegrityFunction
EfficacyReliability
Easy to Use
Beauty

4. 设计考虑

5. • 分辨率 Resolution:
• HD Ready = 720p = 1280x720
• Full HD = 1080p = 1920x1080
• 观看距离 viewing distance:
• 30” – 3m
• 40" – 4m
• 50" – 5m
电视屏幕
设计考虑
• 少即是多：电视屏幕很⼤大，可是观看
距离远。（⼀一个远距离观看的电视和
⼀一个近距离使⽤用的⼿手机没什么不同）
• 横向布局更符合电视宽屏。
• 深⾊色背景上的浅⾊色内容更易读。
• 字体要⾜足够⼤大，⽅方便阅读。
• ⽂文字和背景对⽐比明显。
• 任何时候，聚焦框／聚焦元素明显。
• 电视的优势在于对⼤大图像，视频及⾳音
频的展⽰示，利⽤用这些优势。
• 图像⾜足够清晰，避免锯齿。

7. 设计考虑
红外摇控器
• ⼀一切内容⽤用遥控器⽅方向键可访问： 上,
下, 左, 右 ,确定, 返回。
• 避免⽤用户输⼊入⽂文字。
• 电视与⽤用户之间有⼀一定距离，唯⼀一的
媒介是摇控器，⽽而红外传输有⼀一定延
时，需要：
－ 保证对⽤用户操作的快响应性。
－ 避免使⽤用需要点击才能交互的元素：
如下拉列表，不点击内容即不可⻅见；
⼜又如滚动条，遥控器⽆无法拖曳。

10. 沙发懒⼈人
The Coach
Person
从个⼈人到⼤大家
Me -> We
• 电视主要⽤用来娱乐休闲的，⽤用户不希
望有太多的交互及决策。
• 电视是公共设备，控制隐私的能⼒力有
限。需提供功能⽅方便⽤用户清除历史纪
录。
• 避免输⼊入可以提供桌⾯面⺴⽹网⻚页让⽤用户输
⼊入信息，然后将帐户很⽅方便地链接到
电视上。
• 从个⼈人到⼤大家(me->we)的转变，除
了视频⾳音频应⽤用外，社交分享类，教
育类，多⼈人交互的游戏类应⽤用也适合
开发为电视应⽤用程序。
设计考虑

12. 设计基本准则

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

14. Opera电视应⽤用商店
及其 程序验收标准

15. Opera电视应⽤用商店
• 基于 HTML5，针对电视宽屏及摇控器操作进⾏行了优化
• 云架构平台，展⽰示及管理各种电视应⽤用:
- 个⼈人⾸首⻚页: My Apps
- 应⽤用商店: TV Store
• 跨平台，运⾏行于Opera Devices SDK 3.1及其以上

16. CSP
Applications
Opera电视应⽤用商店的架构
TV Store
CSP
Admin, developer access
CSPs
URL, Meta-data
Application launch

17. 下载 Opera TV
Emulator:
opera.com/tv
Emulator 及
Dragonfly 上调
试
在Emulator或实
际设备上测试
提交⾄至
Opera电视应⽤用
商店
Opera 审核:
• 程序
• 内容源
发布到Opera电
视应⽤用商店
开发流程及⼯工具
＊ Opera桌面浏览器可用“Shift + 方向键”模拟摇控器四键导航。

18. 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 避免崩溃或死机
验收标准

19. 实例

21. dev.opera.com/tv