デザイン・オープンブック

手で動かす要素: スワイプ・FAB・カルーセル・メニュー

スワイプアクションやカルーセルなど、指で動かすUIを作るときの注意点は何ですか? 指にそのまま追従し、離した後も速度を引き継ぐことが基本で、スワイプには別の手段も用意し、カルーセルは次のカードを10~20%見せます。

引いたり押したりして使う要素は、指にそのまま追従する必要があります。指を離したあとも、その速度を引き継いで動くと自然です。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. スワイプアクション

    Swipe actions

    一覧の行を横にスライドすると、削除・アーカイブのボタンが現れる

  2. FABの展開

    Speed dial FAB

    浮かんだボタンを押すと、下位のボタンが複数展開する

  3. スクロールで隠れるFAB

    Hide-on-scroll FAB

    下げると隠れ、上げると再び現れる

  4. カルーセル

    Carousel

    横にスワイプして送るカードの束

  5. 次のカードをのぞかせる

    Peek

    次のカードを端に少しだけ見せる

  6. スナップ

    Scroll snap

    スワイプして離すと、カードが正確な位置で止まる

  7. メニューの展開

    Menu reveal

    メニューが、押したボタンの位置から大きくなって現れる

使い方

  • スワイプで消す機能には、必ず別の手段(ケバブメニューなど)も用意します。スワイプは隠れた機能なので、知らない人が多いです。
  • スワイプで消したあとは、「元に戻す」付きのスナックバーを表示します。
  • カルーセルは、次のカードを10~20%見せて、横にまだあることを伝えます。自動送りは使いません。
  • メニューやポップオーバーは、押したボタンの側から大きくなるようにします(transform-origin)。画面の中央から大きくなると、どこから出たか分かりません。

コピーして使うプロンプト

メール一覧のスワイプ

メール一覧にスワイプアクション(Swipe actions)を入れてください。
- 左にスワイプすると赤い[削除]、右にスワイプすると[アーカイブ]。
- 指にそのまま追従し、画面幅の40%以上スワイプして離したら実行。そうでなければスプリングで元の位置に戻る。
- 実行後は「削除しました [元に戻す]」のスナックバーを4秒。
- 同じ機能を、各行のケバブメニューにも入れてください。

カードのカルーセル

おすすめ商品のカルーセル(Carousel)を作ってください。
- 次のカードが右側に15%見えるピーク(Peek)。
- 指を離すとカード単位で止まるスナップ(Scroll snap)。
- 自動送りなし。下に現在位置を示すドットを表示してください。

参考にした投稿: @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts

すべてのカード (27)