Adobe XD

Rapid Prototyping

XDインタラクション高速化のためのシナリオ法

  1. ストーリー・デコンポジション
  2. アートボード・プランニング
  3. オブジェクト・リスティング
  4. モーションデザイン

ストーリー・デコンポジションの例

Pinterestのアプリの場合

 

  • [1]アプリのアイコンをタップする
  • [2]ホーム画面が表示される/画面最下部のメニューは「ホーム」が選択状態になっている
  • [3]スクロールする
  • [4]気に入った画像のサムネイルをプレスする
  • [5] 5つのアイコンが表示される/他の画像は消える
  • [6]プレスしたまま指を動かしPinアイコンに合わせる
  • [7]アイコンの色が赤くなりサイズが大きくなる/空きスペースに「保存」と表示される
  • [8]指を離す
  • [9]ボードを選択する画面に切り替わる
  • [10]保存したいボードをタップする
  • [11]ホーム画面に戻る/画像のサムネイルに「保存しました!」と表示され2秒後に消える/サムネイルの下部に保存したボード名と「>」が表示される
  • [12]ボード名をタップすると、保存したボードの画面に切り替わる
  • [13]画面最下部のメニューの「ホーム」をタップする

事例:ゲームのスプラッシュスクリーン(アニメーションあり)

ストーリー・デコンポジション

 

怪獣が火を噴く

 

  →[1]尻尾を振る

  →[2]胴体が上下に動く

  →[3]火を噴く

     →口が開く

     →両手が下がる

     →炎が吹き出す

  →[1]に戻る

アートボード・プランニング

 

ボード数:10

 

  • [1-1]尻尾(静止)
  • [1-2]尻尾(回転)
  • [1-3]尻尾(静止)
  •     ↓ 時間:0/アクション:なし
  • [2-1]胴体(静止)
  • [2-2]胴体(回転)
  • [2-3]胴体(静止)
  •     ↓ 時間:0/アクション:なし
  • [3-1]アゴ(静止)+ 炎(縮小・不透明度0)+両腕(静止)
  • [3-2]アゴ(回転)+ 炎(拡大・不透明度100)+両腕(回転)
  • [3-3]アゴ(回転静止)+ 炎(拡大)+両腕(回静止)
  • [3-4]アゴ(静止)+ 炎(縮小・不透明度0)+両腕(静止)

オブジェクト・リスティング

 

アートボード[1]

  • 怪獣本体(尻尾以外)
  • 尻尾 +中心点フレーム

 

アートボード[2]

  • 怪獣本体(足以外)+中心点フレーム
  • 右足
  • 左足

 

アートボード[3]

  • 怪獣本体(腕とアゴ以外)
  • 右腕 +中心点フレーム
  • 左腕 +中心点フレーム
  • アゴ +中心点フレーム
  • 炎 +中心点フレーム

モーションデザイン

 

  • [1-1]尻尾(静止)イージング:/継続時間:
  • [1-2]尻尾(回転)イージング:/継続時間:
  • [1-3]尻尾(静止)
  •     ↓ 時間:0/アクション:なし
  • [2-1]胴体(静止)イージング:/継続時間:
  • [2-2]胴体(回転)イージング:/継続時間:
  • [2-3]胴体(静止)
  •     ↓ 時間:0/アクション:なし
  • [3-1]アゴ(静止)+ 炎(縮小・不透明度0)+両腕(静止)+ イージング:/継続時間:
  • [3-2]アゴ(回転)+ 炎(拡大・不透明度100)+両腕(回転)+ イージング:/継続時間:
  • [3-3]アゴ(回転静止)+ 炎(拡大)+両腕(回静止)+ イージング:/継続時間:
  • [3-4]アゴ(静止)+ 炎(縮小・不透明度0)+両腕(静止)

トップページに戻る

Made with

Adobe Muse

& AI Technology

このWebサイトは、AI技術とAdobe Museの連携によって生成されています

Soy activo en la posición de Adobe Community Evangelist. Está principalmente a cargo de "Adobe Sensei" y "Adobe XD".

난은 Adobe Community Evangelist의 입장에서 활동하고 있습니다. 주로 "Adobe Sensei」과 「Adobe XD」를 담당하고 있습니다.

我是Adobe的“社区布道者”。它主要负责“Adobe Sensei”和“Adobe XD”。

Mr.Creative.Edge

Creative Edge School Books

@commonstyle | ebookcast@gmail.com