Web 端導航設計核心是「如何展示」，移動端則是「如何隱藏」。抽屜式導航正是這一哲學的集大成者：將非核心操作收納側邊，以一鍵呼出/收回，讓用戶始終聚焦核心任務。從 Facebook 到 Path，再到 Gmail、Sparrow，這一模式在十年內完成從創新到標準的演變。

一、起源與演變簡史

1. 2011.11 Facebook iOS/Android 4.0：九宮格導航弱化 Timeline，推出左側抽屜，強化核心瀏覽
2. 2012 Gmail iOS：跟進採用，收納賬戶切換、標籤、設置等次要入口
3. 2012 Path 2.0：將主導航、底部 UGC 操作均做成抽屜，推向極致
4. 2013+：成為 iOS/Android 事實標準，Material Design 規範化為 Navigation Drawer

二、核心交互模型

• 觸發點：左上角漢堡包/三條線圖標
• 展開動畫：抽屜從左滑入，主頁面右移/縮放/淡出，觸發按鈕同步移至右上角
• 內容結構：一級導航列表 + 高頻快捷入口（搜索、新建、設置）
• 關閉方式：點擊主頁面遮罩層、再次點擊觸發按鈕、右滑手勢、選擇導航項後自動關閉

三、變體與進化

• Path 雙抽屜：左側主導航 + 右側 UGC 操作抽屜，雙手操作對稱美學
• Sparrow 多級抽屜：一級抽屜打開後可再拉開二級（如郵箱分類），層級疊加
• 米途訂酒店：將整個預訂流程做成底部上拉抽屜，步驟間平滑過渡
• 消息提醒整合：Facebook、快捷酒店管家將未讀數顯示在 Title 區，避免抽屜隱藏導致消息遺漏

四、核心設計原則：隱藏即聚焦

「隱藏非核心操作，讓用戶專注核心功能」——這是移動產品設計最核心的思維。

產品	核心任務	抽屜隱藏內容	保留主界面入口
Facebook	閱讀 Timeline	好友、群組、頁面、設置、搜索	Feed 流、發布入口、通知
Path	瀏覽好友動態	設置、尋找好友、隱私	動態流、左下 UGC 抽屜、右下相機
Sparrow	查看新郵件	賬戶切換、標籤、歸檔、設置	收件箱列表、右下寫信浮動鈕
快捷酒店管家	地圖找酒店	切換城市、訂單、設置	地圖、篩選、定位

五、不適用場景：何時別用抽屜

• 高頻導航切換：如底部 Tab Bar 更適合的 3-5 個同級核心入口
• 極簡應用：功能單一、無次級入口（如計算機、手電筒）
• 入口即核心：如啟動器、儀表盤類產品，所有功能均為一級入口

六、實施檢查清單

1. 核心任務是否佔據主界面 80%+ 視覺權重？
2. 抽屜內容是否真為「低頻/次要/設置類」？
3. 觸發圖標是否符合平台規範（iOS 左上、Android 左上/底部）？
4. 展開/收起動畫是否 ≤300ms、採用緩動曲線？
5. 是否提供右滑手勢關閉？
6. 消息/通知是否有主界面可見入口？
7. 橫屏/大屏設備（iPad、折疊屏）是否有適配方案？

結語

抽屜式導航的流行，標誌著移動設計從「把功能都放上去」轉向「為核心功能騰出空間」。真正的極簡，不是減少功能，而是把非核心功能藏進抽屜，只在需要時優雅地被喚出。 下一代導航範式或將結合 AI 預測用戶意圖，動態調整抽屜內容與主界面入口——但「聚焦核心」的初心永不變。