使用畫布
PageFlow 畫布用來探索路由圖,而不是編輯應用資料。
移動與縮放
- 捲動或使用觸控板,以指標為中心縮放。
- 拖動畫布空白區域來移動視窗。
- 選擇頁面卡片,使其聚焦並顯示相關關係。
- 使用瀏覽器視窗控制項,比較手機和桌面預覽。
聚焦頁面
選擇頁面後,與它相連的頁面會進入視野,選中的預覽會提升為即時 iframe,並顯示導航熱點。當完整圖包含太多額外資訊時,聚焦視圖特別實用。
探索路由群組
具有共同路徑片段的路由可能顯示為卡組。開啟卡組以查看下一層。PageFlow 會保留目前群組的麵包屑,並以動畫在層級間切換,讓目前脈絡保持清晰。
閱讀連接關係
連接具有方向。向外的連線表示來源頁面包含前往目標頁面的已知方式。沒有連線並不總代表無法導航:計算出的目標只有在應用公開後才會被發現。
更新預覽
PageFlow 在有限佇列中重新擷取過期頁面。選中的頁面和可見頁面具有較高優先級。路由與連結變更透過 HMR 傳遞,現有縮圖會一直保留到新縮圖準備完成。
使用技巧
- 從首頁或主要入口路由開始。
- 在大型應用中,每次只進入一個路由群組。
- 聚焦初始化時會寫入資料的頁面前,先使用測試資料。
- 如果頁面一直未能就緒,請加入明確的就緒訊號。