60 秒決策
先確認使用者要完成的事。
適合使用
- 手機上有三到五個高頻、同層級的主要目的地。
- 使用者需要在核心區域之間快速切換，且每個入口有短而清楚的名稱。
不適合使用
- 想把桌面側欄的全部項目都搬到底部。
- 目的地很少使用、層級很深，或需要較長的文字說明。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
只留高頻目的地
概覽、成員、專案與更多可以固定；權限、稽核等低頻頁面交給 Drawer。
圖示搭配文字
圖示幫助掃讀，文字保證每個入口的意思不靠猜。
保留安全區與內容空間
固定底部導覽時，內容區要留出高度，避免最後一段內容被導覽遮住。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
目前頁
只有一個高頻目的地被標示為目前頁。
更多入口
低頻目的地由 Drawer 或選單承接，不增加底部項目數。
窄螢幕
文字不截斷、觸控目標維持足夠大小，內容底部保留可滑動空間。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
四個手機高頻入口
先觀察：底部導覽只保留概覽、成員、專案與更多。
操作：縮到手機寬度，切換「專案」後再開啟更多。
預期結果：目前頁狀態同步；設定等低頻項目不會塞進底部列。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立 LumenDesk 手機版 Bottom Navigation，只放「概覽、成員、專案、更多」四個高頻入口。固定在安全區域上方，每個項目都有圖示與文字，觸控目標足夠大；目前頁以 aria-current="page"、文字與樣式一起標示。設定、權限等低頻目的地放在 Drawer 或更多選單，不要塞成八個底部按鈕。驗收清單
不要只確認欄位能不能點。
- 是否只保留三到五個高頻目的地？
- 每個入口是否同時有圖示與文字？
- 目前頁是否有 aria-current="page"？
- 內容底部是否不會被固定列遮住？
- 低頻目的地是否由更多選單或 Drawer 承接？