Adapt

/impeccable adapt

Good fit

• 現在のレイアウトが小さい画面で崩壊する。
• プロダクトにより思慮深いレスポンシブ戦略が必要。
• タッチターゲット、密度、コンテンツフローがデバイスによって異なる。

いつ使うか

/impeccable adapt はあるコンテキスト向けにビルドされたデザインを別のコンテキストで機能させるためのものです。デスクトップからモバイルへ、モバイルからタブレットへ、Webから印刷へ、スタンドアローンから組み込みへ、ダッシュボードからメールへ。ソースデザインはしっかりしているが、他のブレークポイント、タッチ、または異なるコンテナで崩壊する場合に使ってください。

ゼロからのレスポンシブ構築には向いていません。その場合は /impeccable から始めて、レスポンシブファーストでレイアウトを形作ってください。Adaptは「モバイルなんて考えてなかった」遡及対応向けです。

仕組み

スキルはコンテキスト適合の4つの次元で動作します。

1. ブレークポイントと流体レイアウト：マルチカラムをシングルカラムに崩す、clamp範囲を調整する、デザインが本当に壊れる場所で新しいブレークポイントを導入。
2. タッチターゲット：最小44pxのヒットエリア、隣接するターゲット間の十分なスペース、視覚的境界を超えたより大きなタップゾーンが必要な場所。
3. ナビゲーションパターン：デスクトップのサイドバーがモバイルのボトムナビやスライドアウトに、密集したツールバーがメニューに崩れる、ホバー状態がタッチ相当を取得。
4. コンテンツ優先度：可視でなければならないもの、開示に折りたためるもの、そのコンテキストでは完全に削除できるものを決定。

交渉不可のルール：適応せよ、切断するな。重要な機能は、都合が悪いという理由だけでモバイルで消えてはいけません。収める方法を見つけるか、インタラクションを再設計するか、本当にデスクトップで重要だったかを再考してください。

試してみる

/impeccable adapt the settings page for mobile

期待される変更：

• 3カラムグリッドがセクションヘッダーをsticky区分として機能するシングルカラムに
• サイドバーナビがコンテンツ上部の水平スクローラーに移動
• トグルに8pxの垂直パディングが追加され44pxタッチターゲットに適合
• インラインヘルプテキストがホバーではなくタップで表示に移動
• 「Danger zone」セクションは不可逆的なアクションを含むため、モバイルでは折りたたまず完全に展開し、ユーザーに明確に見えるように

注意点

• 機能を切り捨てること。 モバイル版がデスクトップ版でできることを隠すなら、それは適応ではなく後退です。機能のために戦ってください。
• モバイルを「小さいデスクトップ」として扱うこと。 モバイルは異なるコンテキストです：親指、中断、短いセッション。ビューポート幅ではなくコンテキストに適応してください。
• その後に /impeccable harden をスキップすること。 レスポンシブレイアウトはエッジケースを露呈します。adaptの後にhardenを実行して320pxでしか現れない問題をキャッチしてください。

Related commands

• Layout
• Clarify
• Harden