モバイルアプリ用にデザインするときは、スムーズなユーザーエクスペリエンスに特に注意を払う必要があります。Cynthia Fong氏はZhenya Rynzhuk氏のデザインアセットを活用してプロトタイプを作成します。スワイプジェスチャーで操作するフォトカルーセルなどの主要なコンテンツの動作を、コーディング前に確認することができます。この短いチュートリアルでは、Adobe XDのスワイプジェスチャーでユーザーエクスペリエンスを最大限に高めるFong氏の手法を紹介します。

Zhenya Rynzhuk氏はデザイナーです。デザイン思考によりエンドユーザーのエクスペリエンスを向上することで、クライアントのビジネスの拡大を支援します。クライアントのプロジェクトをゼロから作成することも、デザイン変更に協力することも可能です。

ステップ1:複製先を設定する

Fong氏は、オリジナルのアートボードを複製することから作業を開始します。XDのアートボードを複製すると元のレイヤー名が維持されます。これは、後の手順でアニメーションを動作させるために重要な点です。

Adobe XDの2つのアートボードに、モバイルアプリデザインのイメージカルーセルが表示、一方のアートボード名がオレンジ色にハイライト

ステップ2:フォーカスを変更する

新しいアートボードでも、カルーセルのグループ化を維持します。次に、各画像をダブルクリックして、プロパティインスペクターでサイズと位置を変更します。これによりユーザーがカルーセルをスワイプしたときに、前の画像が出ていき、次の画像が入ってくる効果を再現します。次に、Group 1からGroup 2にテキストレイヤーを移動し、文字を変更します。

レイヤーパネルにはテキスト要素が表示される、コールアウトで新しいグループに移動することを示す、イメージカルーセルでは新しい画像が中央に表示される

ステップ3:ワイヤリングとアニメーション

プロトタイプモードに切り替えて、ユーザーインタラクションを定義します。最初のアートボードの中央の画像をダブルクリックして、ワイヤーを2つ目のアートボードにドラッグします。次に、トリガーを「ドラッグ」に設定します。これにより、アクションは自動的に「自動アニメーション」に設定されます。そして、2つ目のアートボードの中央の画像から最初のアートボードにワイヤーをドラッグして戻します。XDは前の設定を記憶しています。最後に、デスクトッププレビューでインタラクションをテストします。

青い線をイメージカルーセルの中央の画像から2つ目のアートボードに接続、トリガーを「ドラッグ」に、アクションを「自動アニメーション」に設定

スワイプ操作

スワイプジェスチャーを作成して、モバイルアプリのユーザーインタラクションにリアリティを加えましょう。

楽曲のデザインが表示されているスマートフォンを手で持ち、画面のアプリをブラウズ

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

01/07/2020

アーティスト:Zhenya Rynzhuk

Adobe Stock提供元:visualbricks

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