Adapt

/impeccable adapt

适用场景

• 目前的版面配置在較小螢幕上會崩潰。
• 產品需要更周全的響應式策略。
• 觸控目標、密度或內容流程因裝置而異。

何時使用

/impeccable adapt 用於將為一個情境建構的設計使其在另一個情境中運作。從桌面到行動、從行動到平板、從網頁到列印、從獨立到嵌入式、從儀表板到電子郵件。當原始設計穩固但在其他斷點、觸控操作或不同容器中會崩潰時使用。

不適用於從零開始建構響應式。為此，從 /impeccable 開始，以響應式優先的方式塑造版面。Adapt 適用於「我們從沒想過行動端」的事後補救。

運作方式

技能從四個情境適配的維度進行處理：

1. 斷點和流體版面：將多欄折疊為單欄、調整 clamp 範圍、在設計真正斷裂的地方引入新斷點。
2. 觸控目標：至少 44px 的點擊區域、相鄰目標之間足夠的間距、需要時比視覺邊界更大的點擊區域。
3. 導航模式：桌面側邊欄變成行動底部導航或滑出式選單、密集工具列折疊為選單、hover 狀態獲得觸控等效。
4. 內容優先順序：決定什麼必須可見、什麼可以折疊到展開區塊中、什麼可以為該情境完全移除。

不可協商的規則：適配，而非截肢。關鍵功能不能只因為不方便就從行動端消失。找到容納它的方式、重新設計互動，或重新考慮它在桌面上是否真的關鍵。

試試看

/impeccable adapt the settings page for mobile

預期變更：

• 三欄網格變為單欄，區塊標題作為黏性分隔線
• 側邊欄導航移到內容上方的水平捲動器
• 開關增加 8px 的垂直 padding 以符合 44px 觸控目標
• 行內幫助文字改為點擊顯示，而非 hover
• 「危險區域」區塊在行動端完全展開而非折疊，因為它包含不可逆操作，我們希望使用者清楚看到

注意事項

• 截肢功能。 如果行動版隱藏了桌面版能做的事情，那是退步，不是適配。為功能而戰。
• 把行動端當作「更小的桌面」。 行動是不同的情境：拇指、被打斷、短暫使用。適配到情境，不是適配到 viewport 寬度。
• 之後跳過 /impeccable harden。 響應式版面會暴露邊緣情況。在 adapt 之後執行 harden 來捕捉只在 320px 出現的那些。

相关命令

• Layout
• Clarify
• Harden