0

Google TV のデザインはタブレットとは異なります。Google TV の UI を設計する際に注意すべきことは何ですか。

4

2 に答える 2

3

https://developers.google.com/tv/web/docs/design_for_tv

設計上の考慮事項

画面から視聴者までの距離

テレビの視聴者は、画面から比較的離れた場所に座っています。この距離により、従来の Web ページは読みにくく、雑然としており、メニューの移動やボタンの選択などの基本的なタスクの実行がより困難になります。

TV 用の Web ページをデザインするときは、表示可能な領域に全体的に表示される情報を少なくし、限られた一連のタスクに焦点を当てる必要があります (必要なタスクを自動的に実行するか、デフォルトで選択することを検討することもできます)。すべてのコンテンツを「スクロールせずに見える範囲」に保ち、下にスクロールしなくても画面に完全に表示されるようにしてください。

サイトのフォントとグラフィックは、表示距離を考慮して大きくする必要があります。人々は、同じサイズのコンピューター モニターよりも、テレビからの距離に比例して座っています。TV での乱雑な外観を避けるために、ページ上の要素間の余白を大きくする必要があります。これは通常、空白 (またはパディング) と呼ばれ、Web コンテンツを識別してナビゲートしやすくするための基本的な側面です。ワイド スクリーン ディスプレイは、デスクトップ モニターよりも使用可能な水平方向の領域が多いため、ナビゲーションは横から (コンテンツ用に貴重な垂直方向のスペースを節約する) またはオーバーレイとして処理する方が適切です。パフォーマンス vs. ビジュアルアピール

ユーザーが高速なサイトを好むという圧倒的な調査結果が示されています。また、Google TV はワークステーションほど速くページを表示できない場合があります。ページのレンダリングに多くの複雑なアニメーションを要求する前に、ユーザー満足度への影響をテスト/検討してください。シンプルなフロントエンド パフォーマンスの改善 (スタイル シートを上部に配置し、スクリプトを下部に配置するなど) は、code.google.com/speed で見つけることができます。

縦スクロール

垂直スクロールは、デスクトップ ブラウザーでは基本的な機能ですが、TV UI ではそれほど魅力的ではない可能性があります。画面外に他のコンテンツが存在することをユーザーが認識しないと、スクロールがシームレスに見えなくなり、重要な情報がスクロールしなければ見えない位置に隠れてしまう可能性があります。より良いアプローチは、コンテンツのページ間の水平レイアウトと視覚的なトランジションを利用することです。

ブラウザへのヒューマン インターフェイス

Google TV には、カーソル移動用のポインティング デバイスを備えたキーボードで構成される「リモコン」が含まれています。多くのユーザーは、このリモコンをソファに置いており、ビデオ ゲームをプレイしている初心者のように、カーソルを正確に配置するのが難しい場合があります。ただし、初めてのゲーマーほど辛抱強くない場合があります (ビデオを見たいだけです!)。このユーザーを満足させ続けるようにしてください。ページ上の要素には、マウス ユーザー向けの大きな選択面が必要です。ユーザーが要素の上にマウスを置いたときに表面を拡大すると、ユーザーはページ上の適切な項目を選択しやすくなります。ドラッグ アンド ドロップ アクションやドロップダウン メニューの選択など、マウスを使用した複雑または正確な動きは、フラストレーションを引き起こす可能性が高くなります。

Google TV のメイン インターフェースでは、リモコンの D-pad を使用して画面上で選択することが推奨されています。ユーザーは、Web 上でもこの習慣を維持する可能性があります。Web ページでは、すべての主要なアクティビティを D-pad から実行できるようにする必要があります: 利用可能なアクションの移動、オプションのスクロール、アイテムの選択など。視覚的および物理的に論理的なアイテム間。

そしてもっとリンクに行く....

于 2012-05-11T08:48:48.580 に答える
0

Google TV 用の Android アプリを開発している場合は、次のドキュメントにも従ってください:

  1. Google TV アプリの UI の設計
  2. Google TV アプリの UI の開発

また、「Google TV アプリの UI ヒント」のこのスクリーンキャストも役立つ場合があります。Google TV アプリ
の 5 つの UI ヒント

于 2012-05-11T18:47:05.473 に答える