アプリケーションデザインの作成-レイアウトオプション

はじめに

このドキュメントでは、Brightcove Beacon エクスペリエンスのレイアウトをどのように表示するかについて、一連の質問について説明します。これらの質問に答えた結果は、Brightcoveの Beacon エクスペリエンスのアプリケーション設計を構築するのに役立ちます。あなたのアプリのために定義したいものの非常に簡単な例をここに写真に示します：

OTT アプリ用の UX の設計経験がない可能性があります。このドキュメントの最後のセクションでは、ガイダンスはありますか？、ベンダーのリスト' アドバイスが表示されます。UIを設計する前に、そのガイダンスを読み、検討することをお勧めします。

カテゴリ/選択内容の記録

このドキュメントで作業する決定は、スプレッドシートに記録します。スプレッドシートを準備するには、次の手順に従います。

1. このリンクをクリックしてテンプレートをダウンロードしてください: app-design-layout-options.xlsx .それが保存される場所を覚えておいてください。
2. Google スプレッドシートアプリから空白のスプレッドシートを開きます。
3. Google スプレッドシートのメニューから [ ファイル] [> インポート ] を選択します。
4. 表示されるダイアログから、次に示すように、まず [ アップロード ] を選択し、[デバイスからファイルを選択 ] ボタンをクリックします。

   

5. ダウンロードした Excel ファイルを見つけて選択し、[ 開く ] をクリックします。
6. 表示される [ ファイルのインポート ] ダイアログで、[ スプレッドシートの置換] を選択し、 [ データのインポート ] ボタンをクリックします。

   

7. スプレッドシートをインポートすると、次のような内容が表示されます。

   

スプレッドシートには、このドキュメントの質問に対する回答を記録します。あなたは、画面のレイアウトの選択を示すドロップダウンリストから選択します。

このプロセスの最後に、完成したGoogleシートをBrightcoveの担当者と共有し、エクスペリエンスの設定を支援します。

サイトレイアウトオプションの選択

以下に、アプリのさまざまな部分のレイアウトオプションを示します。表示される画像と、好みを選択する画像は、モバイルアプリのものです。もちろん、テレビやウェブの画面は少し違って見えます。たとえば、最初にモバイルアプリの映画詳細画面が表示され、次にApple TVアプリの同じ映画詳細画面が表示されます。

今度は、オプションの選択を開始する時間です。以下に、アプリのさまざまな部分のレイアウトオプションを示します。特定のレイアウトのオプションを確認し、選択した内容をスプレッドシートに記録します。

ランディングページ

ランディングページはオプションです。ランディングページを希望する場合はレイアウトを選択し、そうでない場合は選択します無し。注、Web アプリにはランディングページはありません。選択できるオプションは 2 つあります。

映画の詳細ページ

ムービーの詳細ページには、特定のムービーの詳細と、関連するムービーのリストが表示されます。選択できるオプションは4つあります。

シリーズ詳細ページ

シリーズの詳細ページには、特定のシリーズの詳細、および関連する映画のリストが表示されます。選択できるオプションは 2 つあります。

ライブテレビ

お客様は、選択したチャンネルで現在プレイしているものと、次に何が再生されるかを確認できます。有る一オプション、そしてそれはここに示されています。

プレイヤー

プレーヤーコントロールは、シリーズ内の他のビデオと同様に、異なって表示されます。選択できる3つのオプションがあります。

ライブテレビプレーヤー

ライブテレビが再生されているときに使用されるプレーヤー。選択できる3つのオプションがあります。

顧客設定

顧客を表示します' 設定オプション。選択できる3つのオプションがあります。

オプションアイテム

このセクションでは、いくつかのオプション項目を含めるかどうかを決定します。スプレッドシートでは、はい/いいえで答えます。

評価ポップアップ

評価ポップアップを使用するかどうかを決定します。

詳細情報ポップアップ

[詳細情報] ポップアップを使用するかどうかを決定します。

画面について

[バージョン情報] 画面を使用するかどうかを決定します。

前進する

このタスクは完了しました。Brightcove Beacon Experience の構築時には、後でBrightcoveの担当者に提出するために作業しているスプレッドシートを保存してください。

まだ実行していない場合は、「アプリケーション設計の作成-情報アーキテクチャ」を使用してアプリケーション設計を定義する他の部分を完了し、表示するビデオとそのグループ化方法と順序を決定する必要があります。

ページデザイン

また、個々のページをどのように表示するかについても考え始める必要があります。たとえば、次のホームページの例を次に示します。

ページレイアウトオプションの詳細については、ページの紹介資料。ここでは、使用できるさまざまなページタイプと、それらのページのビデオコンテンツのレイアウトについて詳しく説明します。

ガイダンスは利用可能ですか？

UXデザインは複雑な問題であり、デザインを構築する際に他の人が考慮しているものを確認したい場合があります。以下は、主要なOTT選手のデザインとベストプラクティスに関するアドバイスの一部へのリンクです。

• ロク:設計のベストプラクティス
• アップルテレビ:ヒューマンインタフェースのガイドライン
• ファイヤーテレビ:設計およびユーザーエクスペリエンスのガイドライン
• アンドロイドテレビ:アンドロイドのテレビのためのデザイン