web-dev-qa-db-ja.com

水平ページ間でアイテムをドラッグするためのヒューリスティック

Android homeまたはiPhone Springboardのように、ユーザーが水平ページのコレクション全体にアイテムをドラッグできるようにしようとしています。Androidでは、ページからページに移動するためのアイコンを取得するのが非常に難しいと感じていますドラッグ中のページですが、iOSではかなり直感的に機能します(AndroidのHaterzとiOSのファンボイズ。

私の現在のコードは、左/右にスライドするのが簡単になりすぎる(つまり、左または右の列に何かを入れようとしていて、代わりにページを切り替える)か、画面に行き詰まってしまうところまでたどり着きました。切り替えることはありません)。

これまでのところ、私はページを切り替えるときの呼び出しを行う際にx位置だけを見ていますが、これは十分に満足のいくものではないようです。誰かがより成功した同じようなものを実装しましたか?ドラッグのx軸速度を使用してアクションのヒントを得るのはどうですか?

3
Pettiross

1つのアイデアは、挿入ポイントがどこにあるかについて視覚的なフィードバックを提供することです。アイコンがそのアフォーダンス(ドラッグに対する受容性)を示すことができるのと同じように、「ターゲット」はその柔軟性(ドロップされたオブジェクトに対する受容性)を示すことができます。

プレビューするときにアニメーション化されないことを除いて、アニメーショングラフィックは次のとおりです。 :(ユーザーは計算機アイコンを左にドラッグしています。

enter image description here

挿入ビーム(図の黄色のIビーム)は、デスクトップの柔軟性を示しています。「アイコンを今すぐドロップすると、そこに移動します」。 Iビームはドラッグの方向に基づいて宛先を予測するので、Iビームはユーザーのドラッグしている指がそこに到達する前にページの左端にスナップします。これは、ユーザーがアイコンを少し早くドロップできることを意味します別のページへのスクロールを回避するため

これを適切に機能させるには、ドラッグの開始時に、ユーザーがドラッグを開始するまで、挿入ビームはおそらくデフォルトで画面の「内側」に向かって表示されるはずです(したがって、ユーザーはデフォルトで画面の中央に向かってドラッグすると想定します)。外側、offページ。同様のタイプの相互作用は、垂直軸に沿ったページ付けに対応できます。

これは1つの解決策にすぎません。他にもあると思います。楽しんでください。

3
JeromeR