TV design guidelines
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

TV design guidelines

on

  • 997 views

 

Statistics

Views

Total Views
997
Views on SlideShare
846
Embed Views
151

Actions

Likes
2
Downloads
5
Comments
0

3 Embeds 151

http://designers-hack.net 101
https://twitter.com 47
http://www.feedspot.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TV design guidelines Presentation Transcript

  • 1. TV design guidelines2013/6/20株式会社エクサ 安藤幸央@yukio_andohHackDesign.org
  • 2. 10 foot User Interface
  • 3. GoogleTVGoogle TVChrome 28JB 4.2.2Android:As seen on TV!Christian KurzkeKOREAEthernetStreaming/DRM
  • 4. 前提10フィート(3メートル)離れている。画面大きい。いつも横向き。16:9。基準は42インチリーンバック(ソファに座ってくつろいでいる)リモコンで操作する(音声やジェスチャも一つの可能性)一人ではなく、複数人で利用する場合もある部屋が明るい時も、暗い時もある(画面が明るい発色の時と、暗めの発色の時がある)そもそも、目的が他のデバイスと大きく異なる。受け身であること、映像中心であることフィードバックとしても、エンターテインメントとしても、「音」は需要な要素
  • 5. GuidelinesLG Smart TV and Media Product UI Guidelinehttp://developer.lge.com/resource/tv/RetrieveDocReferencesContent.dev?resourceId=RS00000737#noneOpenCableTM Guidelines - Enhanced TV User Interface Guidelineshttp://www.cablelabs.com/specifications/OC-GL-ETV-UIG-V02-060418.pdfSamsung TV application SDK UX Guidelinehttp://freethetv2011.s3.amazonaws.com/Samsung%20TV%20Application%20SDK%20UX%20Guideline%5BV1.01%5D.pdfGoogle TV Design Pattenshttps://developers.google.com/tv/android/docs/gtv_android_patterns
  • 6. GuidelinesBBC: interactive televition designhttp://www.mhp.org/docs/itv-design_v1.pdfhttp://www.bbc.co.uk/guidelines/futuremedia/desed/Opera Creating web content for TVhttp://dev.opera.com/articles/view/creating-web-content-for-tv/Roku Design Guidelineshttp://sdkdocs.roku.com/display/sdkdoc/Design+Guidelines
  • 7. ポイント今どこにいるのか、常に把握できるようにする。また、いつでも戻れるように一つのことをするには一つのアクションで済むように今何を選択している状態なのかを明確に。マウスとは違い、選択中のものを「決定」する最大値を考える。10件なら良いが、1000件の場合も使いやすいか?1つの操作で移動は一つ垂直方向へのスクロールは注意深く利用する。基本、ページ単位で考えスクロールしない急に ON/OFF すること。中断/再開すること。または常に電源が入りっぱなしなこと常に何でも出来る必要は無い。ある時にやりたいことはたいてい数種類しかない。
  • 8. GoogleTV 用 Web制作のポイントごくごくシンプルな作りに。色使いに配慮。明るすぎない明るい色調で。スクロールなしナビゲーションは単純に、明確に。片手で、一回でできる方法で。なにが選択できるか?テレビ画面サイズを考えてデザイン。コンピュータの画面では無い。PCの2倍の気持ちで文字フォントは重要。大きさも、太さも、行間も。コントラストも。一画面に表示されて、読み切れる文字数を考える。音に頼らない。びっくりするような音を出さない。表示パフォーマンス重要。速度は PCよりも携帯電話よりも重視。だれも待ってはくれない。
  • 9. 1段落につき 90文字が限界。日本語にすると 50文字くらい?日本語字幕は 10∼13文字で2行。10文字以下なら一瞬で読み取れる。暗い背景に、明るい文字が読みやすい720p なら最小でも18pt 推奨 21pt 以上。1080p なら最小24pt 推奨28pt 以上。印刷物よりも行間を広めに(文字が大きいことだけが読みやすさでは無い)文字
  • 10. 吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。吾輩は猫である。名はまだ無い。
  • 11. 色純粋な白 (#FFFFFF) は極力使わない(ゴーストが目立つ)。推奨は (#F1F1F1) (240,240,240) 十分白に見える。明るい白、赤、オレンジは色がにじみやすいので注意。テレビの様々なモードで表示を確認すること(省電力モード、シネマモードなど)。細かいグラデーションには注意。マッハバンドが目立つ可能性が高い。性能の悪い、ガンマ値の違うディスプレイで見ているものと考える。ピクセル単位での調整を厭わない。
  • 12. シーンを考える実物で試す
  • 13. http://www.youtube.com/watch?v=o1tTe5M-rz0