Windows 應用商店應用導航設計全解析：分層、平面、SPA 三大模式與輔助技巧

Windows 應用商店應用 (UWP/WinRT) 強調「內容優於版面」，導航必須融入內容、不干擾使用者、支援直覺的回退體驗。Visual Studio 內建三大導航模板對應三種核心模式：分層、平面、拆分/單頁應用 (SPA)。本文系統梳理各模式適用場景、實作要點與進階輔助控制項。

分層導航：適合關聯性資料 (主/明細)

三層級結構，符合可用性研究「不超過三層」原則：

1. 中樞：啟動頁，呈現主項目清單 (如音樂藝術家)。
2. 區段：二級視圖，顯示所選項目的子集合 (如該藝術家的所有專輯)。
3. 詳細資料：三級視圖，呈現單一項目完整資訊 (如專輯中的某首歌曲)。

• 每頁皆含回退按鈕，強化 UX 連貫性。
• VS「網格應用程式」範本內建三層導航與資料繫結結構 (WinJS.Binding.List / POCO)。
• 若需更深層級，改用語意縮放、下拉選單、篩選器輔助，而非增加導航層級。

平面導航：適合非關聯內容

頂部導航列 (NavBar) 提供少量平行入口，點擊直接跳轉。典型範例：天氣應用 的城市/預報/地圖索引標籤。

實作方式

• HTML/JS：使用 WinJS NavBar、NavBarContainer、NavBarCommand 控制項 (Win 8.1 新增)。
• XAML/C#：自訂 Page.TopAppBar 樣式置頂，放置 Button/ComboBox 等。

<!-- HTML NavBar 範例 -->
<div id="NavBar" data-win-control="WinJS.UI.NavBar">
  <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
         data-win-options="{label:'Home', icon:'url(../images/home.png)', location:'/html/home.html'}"></div>
    <div data-win-control="WinJS.UI.NavBarCommand"
         data-win-options="{label:'Apps', icon:'favorite', location:'/html/apps.html'}"></div>
  </div>
</div>

<!-- XAML TopAppBar 範例 -->
<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
      <Button Style="{StaticResource SaveAppBarButtonStyle}" Click="Btn_Click"/>
      <Button Style="{StaticResource UploadAppBarButtonStyle}" Click="Btn_Click"/>
    </StackPanel>
  </AppBar>
</Page.TopAppBar>

SPA / 拆分導航：單頁面動態載入

• 技術上非單一巨大頁面，而是主容器 + 動態載入頁面片段。
• HTML/JS：PageControlNavigator (navigator.js) 管理 <div id="contenthost"> 容器，自動處理片段載入/卸載。
• XAML：Frame 導航至不同 Page，視覺上保持單一視窗。
• VS「拆分應用程式」範本：兩層導航 (區段 → 詳細資料)，詳細資料與清單並排顯示。

<div id="contenthost"
     data-win-control="Application.PageControlNavigator"
     data-win-options="{home: '/pages/home/home.html'}"></div>

進階導航輔助技巧

語意縮放

雙指捏合或滑鼠滾輪切換「縮放視圖」：概覽分類 → 詳細清單。適用於大量資料 (如 Netflix 影片分類)。

<!-- HTML -->
<div data-win-control="WinJS.UI.SemanticZoom">
  <!-- 縮放前視圖 (詳細清單) -->
  <!-- 縮放後視圖 (分類概覽) -->
</div>

<!-- XAML -->
<SemanticZoom>
  <SemanticZoom.ZoomedInView><!-- 詳細 --></SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView><!-- 概覽 --></SemanticZoom.ZoomedOutView>
</SemanticZoom>

排序、篩選、搜尋

• 下拉選單 (select / ComboBox) 實作資料排序與篩選，屬於「導航增強」。
• Windows 應用商店內建搜尋合約，啟用後全系統可搜尋應用內容。

<!-- HTML -->
<select><option>依價格</option><option>依評分</option></select>

<!-- XAML -->
<ComboBox x:Name="SortOptions" SelectionChanged="Sort_Changed">
  <x:String>依價格</x:String>
  <x:String>依評分</x:String>
</ComboBox>

全景檢視與水平捲動

將多個獨立區段並排於可水平捲動畫布，配合語意縮放快速跳轉。適用於新聞、財經、串流媒體應用 (CNN、Bing Finance、Netflix)。

設定合約取代 About/設定頁面

利用系統 Charms 列「設定」按鈕統一進入點，減少應用內導航選單，提供一致體驗。

結語

選擇導航模式取決於資料結構：關聯資料用分層、平行入口用平面、沉浸式體驗用 SPA。善用語意縮放、篩選、搜尋、全景檢視等輔助手段，可在不增加導航層級前提下大幅提升資料可達性。VS 範本已內建核心架構，開發者專注於資料繫結與細節打磨即可打造順暢導航體驗。