ドラッグ アニメーションのガイドライン

ドラッグ アンド ドロップ アニメーションは、リスト内で項目を移動するときや、特定の項目を別の項目上にドロップするときなど、オブジェクトを移動する際に使います。

推奨と非推奨

ドラッグの開始アニメーション

  • ドラッグの開始アニメーションは、ユーザーがオブジェクトを動かし始めるときに使います。
  • ドラッグ アンド ドロップ操作の影響を受けるオブジェクトが他に存在する場合に限り、それらのオブジェクトをアニメーションに含めるようにします。
  • ドラッグの開始アニメーションがトリガーされるまでの間には、ユーザーがある程度オブジェクトを動かせるようにします。単にタップまたは選択しようとしたオブジェクトがユーザーの意図に反してドラッグされるのを防ぐことができます。しきい値は 20 TIP (タッチに依存しないピクセル) がお勧めです。
  • ドラッグの開始アニメーションによって始まったアニメーションのシーケンスの終了には、ドラッグの終了アニメーションを使います。ドラッグの終了アニメーションにより、ドラッグの開始アニメーションで変化したドラッグされたオブジェクトのサイズが元に戻ります。

ドラッグの終了アニメーション

  • ドラッグの終了アニメーションは、ドラッグされたオブジェクトをドロップするときに使います。
  • ユーザーがオブジェクトをドロップしてリストの並びを変えるときは通常、他の項目の位置を変更して、項目をドロップするためのスペースを確保する必要があります。これには、ドラッグの終了アニメーションの終了後に、項目を追加するリスト アニメーションを使います。ただし、項目は追加しません。追加する項目は既に存在しています。これにより、すべての要素にアニメーションが実行され、それぞれが適切な位置に移動します。
  • ドロップ後にドラッグ ソースを消す場合 (ファイルをフォルダー アイコンの上にドロップしてフォルダーにファイルを格納する場合など)、ドラッグ ソースにフェード アウト アニメーションを使います。
  • ドラッグの開始アニメーションに影響を受けるオブジェクトが存在する場合に限り、それらのオブジェクトをドラッグの終了アニメーションに含めるようにします。
  • ドラッグの終了アニメーションは、ドラッグの開始アニメーションよりも先に使わないでください。ドラッグ シーケンスの完了後にオブジェクトを元のサイズに戻すためには、両方のアニメーションを使う必要があります。

項目間でのドラッグの開始アニメーション

  • 項目間でのドラッグの開始アニメーションは、2 つのオブジェクトの間のドロップ可能な場所にドラッグ ソースをドラッグするときに使います。
  • 適度な大きさのドロップ ターゲット領域を選んでください。この領域が小さすぎると、ドラッグ ソースをドロップする際に重ね合わせるのが難しくなるため、好ましくありません。
  • ドロップ可能な場所を示すために影響を受けるオブジェクトが移動する距離は、40 ピクセルをお勧めします。
  • ドロップ可能な場所を示すために影響を受けるオブジェクトが移動するときには、互いにまっすぐに引き離すことをお勧めします。移動方向が上下になるか、左右になるかは、影響を受けるオブジェクトが並ぶ向きによって異なります。
  • ドラッグ ソースを領域内にドロップできない場合、項目間でのドラッグの開始アニメーションは使わないでください。項目間へのドラッグの開始アニメーションは、影響を受けるオブジェクトの間にドラッグ ソースをドラッグできることをユーザーに知らせるためのものです。

項目間でのドラッグの中止アニメーション

  • 項目間でのドラッグの中止アニメーションは、ユーザーがオブジェクトをドラッグして 2 つのオブジェクトの間のドロップ可能な領域から出すときに使います。
  • 項目間でのドラッグの開始アニメーションよりも先に、項目間でのドラッグの中止アニメーションを使わないでください。

関連トピック

デザイナー向け
追加と削除のアニメーションのガイドライン
コンテンツ切り替えアニメーションのガイドライン
端に基づく UI アニメーションのガイドライン
フェード アニメーションのガイドライン
ページ切り替えアニメーションのガイドライン
ポインター クリック アニメーションのガイドライン
位置変更アニメーションのガイドライン
ポップアップ UI アニメーションのガイドライン
スワイプ アニメーションのガイドライン
開発者向け (HTML)
HTML アニメーション ライブラリのサンプルに関するページ
UI のアニメーション化
ドラッグ アンド ドロップ シーケンスのアニメーション化
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
開発者向け (XAML)
UI のアニメーション化
ドラッグ アンド ドロップ シーケンスのアニメーション化
クイック スタート: ライブラリのアニメーションを使った UI のアニメーション化
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

表示:
© 2015 Microsoft