Pull to Refresh (プルトゥリフレッシュ)

ドラッグすると要素がポインターに追従し、範囲や軸を制限することもできます。

[適用する場所]にドラッグ(Drag)のインタラクションを追加してください。ドラッガブル(draggable)、ドラッグ制約(drag constraints)とも呼ばれます。
ドラッグ中は要素がポインターにそのまま追従し、許可された範囲の端で止まり、離すと小さく弾んで元の位置に戻るようにしてください。
マウスだけでなくタッチでも、下のページがスクロールせずに操作できるようにし、キーボードで動かす方法も用意してください。

リングや円弧が回り続け、読み込み中であることを示します。

[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。

パネルが下端からスライドして現れます。ドラッグでき、決まった高さに吸着することもよくあります。

[適用する場所]にボトムシートスライドアップ(Bottom Sheet Slide-Up)を追加してください。ボトムドロワー(bottom drawer)、シート(sheet)とも呼ばれます。
背後のページが暗くなると同時に、パネルが下端からスライドして上がり、なめらかに減速して弾まずに所定の位置に収まるようにしてください。
シートを開くたびに一度だけ再生し、閉じるときは下へスライドして戻し、開いている間はキーボードフォーカスをシートの中に保ってください。

クリックやタップした位置から円形の波が広がり、フェードアウトします。

[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。

円とチェックマークが描かれ、操作が成功したことを伝えます。

[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。

リストの行を横にスワイプすると、削除やアーカイブなどの操作ボタンが現れます。

[適用する場所]にスワイプで削除(Swipe to Delete)のインタラクションを追加してください。スワイプアクション(swipe actions)、スワイプで表示(swipe to reveal)とも呼ばれます。
行を横にドラッグすると指にそのまま追従して動き、裏にあるアーカイブや削除などの操作ボタンが現れ、ボタンが全部見えたところで止まるようにしてください。離したら弾まずになめらかに所定の位置へ滑らせてください。
横にスワイプしている間も縦スクロールが効くようにし、スワイプしなくてもキーボードやスクリーンリーダーで同じ操作ができるようにしてください。