スキル自身の言葉で
Apple DesignはAppleのWWDCインターフェーストーク、主にDesigning Fluid Interfaces（WWDC 2018）を、流動的で物理的なウェブUIを構築するためのルールへと蒸留したものです。ドラッグ、スワイプ、シート、スプリング、モメンタム、中断可能なトランジション、半透明マテリアルと奥行き、タイポグラフィ（オプティカルサイジング、トラッキング、リーディング）、そしてモーション低減時の挙動といった、ジェスチャー駆動のインターフェースに取り組むデザイナーおよび開発者を対象としています。
一貫しているのは、モーションは画面上の現在値から始まり、ユーザーの速度を継承し、モメンタムを先に投影し、いつでもつかんで元に戻せるべきだという点です。スプリングは固定時間のアニメーションに代わるものであり、本質的に中断可能で速度を感知するため使われます。このスキルは、共通の語彙として使われるAppleの8つのデザイン原則で締めくくられます。
生成されるもの
- :active時に100msのease-outトランジションでコントロールをスケールする、プレスフィードバック用CSS。
- クリティカルダンピングのデフォルトと、モメンタムバウンスのバリアントを並べて示すモーションスプリング呼び出し。
- デフォルトのdecelerationRateを0.998として、モメンタム投影を実装するproject()ヘルパー。
- 半透明ツールバーをブラーなしの単色背景に置き換える、透明度低減用CSS。
仕組み
- 01ポインターダウンで応答する
フィードバックはリリースではなくプレスに属します。押した瞬間にコントロールをハイライトし、入力パス上で本質的でないもの（約300msのタップ遅延を含む）はすべて不具合として扱います。
- 02ポインターを1:1で追従する
要素の境界を出てもトラッキングが継続するように、キャプチャ付きの Pointer Events を使用してください。また、要素の中心にスナップするのではなく、ユーザーがどこを掴んだかを尊重してください。
- 03モーションを中断可能にする
動いている要素は、飛んでいる最中でも掴んだり方向転換したりできる必要があります。ユーザーは現在のアニメーションが終わるのを待ってから操作をやり直す必要はないはずです。
- 04スプリングでモーションをモデル化する
スプリングは目標を単に変更するだけで新しい入力を吸収できるため、モーションは連続したままになります。固定時間のスクリプトには再ターゲットする対象がありません。
- 05リリース時の速度を引き渡す
ドラッグとアニメーションの間に切れ目が生じないように、リリース時のポインターの速度をスプリングに渡してください。API が相対速度を求める場合は、残り距離で正規化してください。
- 06モーメンタムを射影してからスナップする
指を離した位置からスナップしないでください。スクロールの減速のように静止位置を射影し、その射影に最も近いスナップターゲットを選んでください。