Serge Vasil氏は、Adobe XDを使ってデザインしたインタラクティブなTV番組検索アプリに音声コマンドと音声再生機能を組み込みました。

Serge Vasil氏は、ユーザー研究、デジタルブランディング、インタラクティブエクスペリエンスなどの多彩な分野で活躍するサンフランシスコ在住のデザイナーです。Sergeは、直観的に使用できる美しい製品を開発することに注力しています。

必要な情報

このサンプルファイルには、このチュートリアルの学習内容の練習に使用できるAdobe Stock画像が含まれています。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

案内を作成する

Vasilは、デザインしたインタラクティブTVアプリのプロトタイプに音声案内を組み込む準備をして、プロトタイプモードに切り替えました。最初のアートボードを選択した後、インタラクションを定義するために青い矢印をクリックしました。また、トリガーとして「時間」を、アクションとして「音声を再生」を選択し、画面が読み込まれたときに音声応答として再生されるメッセージを入力しました。

Adobe XDでのTVアプリのホーム画面のプロトタイプデザイン。インタラクションダイアログが表示され、「トリガー」に「時間」が、「アクション」に「音声を再生」が設定されている。

検索を開始する

ユーザーが番組を検索する操作をシミュレーションするため、Vasilは初期画面の検索アイコンから次のアートボードにワイヤーをドラッグしました。トリガーとして「タップ」を選択し、その他のインタラクティブプロパティはデフォルト値のままにしました。

青いワイヤーによってホーム画面の検索アイコンが検索画面に接続され、インタラクティブプロトタイプ用の設定で「トリガー」に「タップ」が設定されている。

アイコンをアニメーション化する

Vasilは、検索機能で音声コマンドも認識されることを示す視覚的な手掛りとしてマイクアイコンをアニメーション化したいと思いました。Search-1アートボードから2つ目のアートボードにワイヤーをドラッグしました。この2つのアートボードに含まれるデザインでは、マイクアイコンの状態が異なります。トリガーを「タップ」に、アクションを「自動アニメーション」に設定しました。それぞれのアートボード上のマイクの名前は同じであるため、インタラクティブプロトタイプを表示すると、XDによってアイコンのデザインの違いがアニメーション化されます。

青いワイヤーで最初の検索アートボードが2つ目のアートボードに接続されている。「トリガー」が「タップ」に、「アクション」が「自動アニメーション」に設定されている。

アニメーションをループさせる

このアプリのデザインでは、ユーザーによる操作を待っている間、マイクアイコンをパルス表示する必要がありました。この効果を作成するため、Vasilは、2つ目の検索アートボードから3つ目のアートボードにワイヤーをドラッグしました。「トリガー」を「時間」に、「アクション」を「自動アニメーション」に設定し、望み通りの効果が発生するように「ディレイ」と「デュレーション」の数値を大きくしました。ユーザーが音声コマンドを開始するまでアニメーションをループさせるために、3つ目のアートボードを選択し、青い矢印をクリックし、「トリガー」を「時間」に設定し、「アクション」として「ひとつ前のアートボード」を選択しました。

2つ目の検索アートボードが3つ目のアートボードにワイヤーで接続され、3つ目では「アクション」が「ひとつ前のアートボード」に設定されていることが示されている。

音声検索を追加する

ユーザーには、音声コマンドを使ってお気に入りの番組を検索できる機能が必要です。このインタラクティブ機能をシミュレーションするため、Vasilは、各アートボード上のマイクを検索結果にワイヤーで接続しました。次に、Shiftキーを押しながら3つのマイクをクリックしてすべてを選択し、「トリガー」を「音声」に設定し、プロトタイプのテスト時に検索結果を表示するために使うことができる音声コマンドを入力しました。プロトタイプをテストするために画面上部のデスクトッププレビューを選択し、スペースバーを押しながら発話して音声コマンドをテストしました。

マイクアイコンが最終的なアートボードにワイヤーで接続されている3つのアートボード。マイクアイコンの「トリガー」が「音声」に設定され、「コマンド」が「action movies」になっている。

アプリを使うためのインタラクション

ユーザーが様々な方法でアプリとインタラクションできるプロトタイプをデザインします。

青い壁の前のモダンな白のTV台の上に大画面TVが設置され、画面に映画の検索結果が表示されている。

注意:このチュートリアルに付属のプロジェクトファイルは練習目的でのみご利用ください。

03/16/2020

アーティスト:Serge Vasil 

Adobe Stock提供元:gerasimov174ArdeaADennis

このページは役に立ちましたか。