棧式導覽與智慧位置選擇：流暢探索的藝術

“層層疊疊如卡片，輕鬆跳轉任意門。在 MononoMori 的導覽世界中，每一次點選都是一次優雅的旅行。”

MononoMori 的 棧式導覽系統 (StackablePeek) 和 智慧位置選擇器 (DrillDown Selector) 是為深度空間管理而精心設計的高階互動系統。它們將複雜的層級結構轉化為直觀、流暢的操作體驗，讓使用者能夠在海量物品中如魚得水般自由穿梭。

📚 StackablePeek 導覽：Safari 式的層疊體驗

設計理念：卡片疊加的視覺隱喻

StackablePeek 導覽借鑑了 Safari 瀏覽器的標籤頁管理理念，將每個瀏覽層級表示為一張獨立的卡片。使用者可以像翻閱書籤一樣在不同層級間穿梭，既保持了上下文關係，又提供了快速跳轉的便利。

核心特徵：

• 層疊深度：新頁面如卡片般疊加在當前頁面之上，形成自然的深度感。
• 可見上下文：通過精妙的偏移設計，你始終能看到後方父級頁面的邊緣標題，永不迷失方向。
• 狀態保持：每個層級的瀏覽狀態（滾動位置、展開項）都被完整凍結，返回時即刻恢復。

視覺細節與互動美學

Safari 式堆疊效果： 系統通過動態計算每張卡片的位置，營造出真實的物理堆疊感：

• 錯位偏移：後方卡片會向右上方輕微偏移（垂直 + 水平），露出關鍵的標題資訊。
• 漸進縮放：底層卡片逐級輕微縮小，增強景深效果。
• 層級透明：非當前卡片會略微降低透明度，將視覺焦點自然引導至頂層。
• 智慧陰影：卡片間投射柔和的陰影，清晰界定層級邊界。

層級指示器 (Level Indicator)： 螢幕頂部常駐一個優雅的麵包屑指示器，以小圓點和標題直觀展示當前的導覽深度。

• 圓點追蹤：每個圓點代表一個層級，高亮圓點指示當前所在位置。
• 路徑視覺化：連線線串聯起整個探索路徑，清晰展示”我從哪裡來”。

手勢操作指南

StackablePeek 專為單手操作最佳化，提供符合直覺的手勢體驗：

基礎操作：

• 拖拽關閉：按住頂層卡片向下滑動，即可關閉當前層級，返回上一級。
• 背景點選：直接點選後方露出的卡片邊緣，或點選半透明背景遮罩，即可快速”彈走”頂層卡片，回到該層級。
• 全屏切換：內容區域支援完整滾動，鬆手後卡片自動回彈吸附。

介面互動：

• 新增子項：點選卡片右上角的 “帶 ”+” 號的資料夾” 圖示，即可在當前位置快速建立子空間或子位置。
• 檢視全部：點選”物品一覽”旁的”檢視全部”，可展開完整的物品列表檢視。

使用場景：深度瀏覽

當且僅當你需要從宏觀逐步深入微觀時，StackablePeek 發揮最大威力：

1. 森林總覽：點選空間，彈出第一張卡片（空間詳情）。
2. 空間深潛：點選空間內的某個位置（如”書櫃”），新的卡片疊加出現。
3. 位置鑽取：繼續點選子位置（如”第二層”），第三張卡片再次疊加。
4. 物品互動：在任意層級點選物品，喚起物品詳情頁。

---

🔍 DrillDown 位置選擇器：精準導覽的智慧

三層遞進的導覽架構

在移動或新增物品時，DrillDown 位置選擇器採用了清晰的三層遞進結構，將複雜的層級關係扁平化：

導覽層級：

1. 空間層 (Spaces)：顯示所有頂級空間（如家、辦公室）。
2. 位置層 (Locations)：選中空間下的主要位置（如衣櫃、書架）。
3. 子位置層 (Sub-locations)：支援無限層級的子位置鑽取。

⚡️ 智慧父級選擇 (Smart Parent Selection)

這是 DrillDown 系統最高效的特性——“點選標題即選擇”。

很多時候，你瀏覽到了”客廳 > 電視櫃”，但只想把物品放在”電視櫃”這個大位置，而不選具體的抽屜。 在傳統設計中，你需要退回上一級勾選。但在 MononoMori 中：

• 操作：直接點選頂部的 “電視櫃” 標題欄。
• 反饋：標題欄會立即顯示綠色 ✅ 標記，表示”已選中當前父級”。
• 優勢：無需反覆進出層級，在瀏覽的同時完成寬泛選擇。

麵包屑導覽欄

選擇器頂部集成了可橫向滾動的麵包屑導覽欄：

• 路徑顯示：完整顯示 空間 > 位置 > 子位置 的全路徑。
• 快速回溯：點選路徑中的任意節點（如點選起始的”空間”），即可一鍵跳轉回該層級，無需多次點選返回按鈕。

高效篩選與識別

• 視覺圖示：所有選項都帶有型別圖示（房屋、盒子），一眼區分空間與位置。
• 包含計數：每個選項副標題都顯示了其包含的子項數量，輔助判斷位置規模。
• 高亮反饋：選中路徑全程高亮，清晰展示當前的歸屬關係。

---

💡 最佳實踐建議

導覽系統的配合使用

StackablePeek 和 DrillDown 雖然形態不同，但設計邏輯一脈相承：

1. 瀏覽用 Stackable：當你是在”逛”自己的森林，尋找靈感或檢視物品時，使用 StackablePeek。它的保留現場能力讓你隨時可以回看上一步。
2. 操作用 DrillDown：當你明確要”移動”或”新增”物品時，DrillDown 專注於路徑選擇，沒有任何多餘的干擾資訊，效率最高。

防迷路小貼士

• 善用背景點選：在 StackablePeek 中，如果你覺得層級太深，直接點選最黑的背景遮罩，可以一鍵關閉所有卡片，回到森林地圖。
• 關注頂部指示器：無論是哪個系統，頂部始終都有路徑指示。迷茫時，抬頭看一眼頂部，就能找回方向。

🌟 結語

MononoMori 的導覽系統不僅是連線資料的橋梁，更是數字空間中的”透視眼”。它讓你在哪怕最複雜的收納結構中，也能享受到如翻閱精美畫冊般的優雅與從容。

在這片森林裡，沒有死衚衕，只有通往下一個發現的幽徑。