Windows 應用程式的導覽設計基本知識
如果您將應用程式想成一組頁面的集合,則導覽描述的是頁面之間和頁面內的移動動作。 這是使用者體驗的起點,也是使用者尋找感興趣的功能與內容的方式。 導覽非常重要,但想要做好並不容易。
您需要在眾多導覽方式中做出選擇。 例如,您可以:
要求使用者依序瀏覽一系列頁面。
提供可讓使用者直接跳到任何頁面的功能表。
將所有內容放在同一個頁面上,並提供查看內容的篩選機制。
雖然不存在適用於所有應用程式的單一導覽設計,但有一些原則和指導方針可幫助您決定適合您應用程式的設計。
良好導覽的原則
讓我們從良好導覽設計的基本原則開始談起:
- 一致性:符合使用者的期望。
- 簡潔:不做多餘的事。
- 明確:提供清楚的路徑和選項。
一致性
導覽方式應與使用者的期望一致。 選用使用者熟悉的標準控制項,並依循圖示、位置和樣式的標準慣例,將使導覽對使用者而言更容易預測且符合直覺。
使用者預期會在標準位置尋找特定 UI 元素。
簡潔
導覽項目越少,使用者就越容易做出決定。 為重要目標位置設定捷徑,並隱藏較不重要的項目,可幫助使用者更快抵達想要的位置。
在熟悉的導覽功能表中呈現導覽項目。
不要提供過多導覽選項,以免使用者不知所措。
明確
清楚的路徑可幫助使用者以合理的方式進行導覽。 提供一目了然的選項,並釐清頁面之間的關係,可防止使用者迷失方向。
清楚標示出目標位置,讓使用者知道自己身在何處。
一般建議
現在要來探討我們的設計原則 - 一致性、簡潔和明確 - 並根據它們提出一些一般性建議。
- 考量您的使用者。 找出使用者可能在您的應用程式中依循的一般途徑,並思考使用者來到每個頁面的原因,以及接著想前往哪裡。
- 避免深層的導覽階層。 導覽層級超過兩層時,請提供階層連結列,向使用者顯示他們所處的位置,並讓他們快速返回。否則,使用者就有可能陷入深層結構,難以自拔。
- 避免「來回跳動」。當存在相關內容,但導覽至該內容需要使用者先往上一層、再往下一層時,就會發生來回跳動狀況。
使用適當的結構
現在您已熟悉一般導覽原則,那麼接下來要如何建構您的應用程式? 有兩種一般結構︰單層式和階層式。
單層式/側面
在單層式/側面結構中,頁面是並排存在。 您可以按任何順序,從一個頁面前往另一個頁面。
我們建議使用單層式結構的狀況是︰
- 頁面可按任何順序檢視。
- 頁面之間有明顯的區別,而且沒有明顯的父系/子系關係。
- 群組中的頁面數超過 8 個。
(頁面數量較多時,使用者可能難以理解各頁面的獨特性,或理解它們目前在群組中的位置。如果您認為這對您的應用程式來說不構成問題,則可以讓這些頁面繼續維持對等。否則,請考慮使用階層式結構,將頁面分成兩組,或分成多個較小的群組。)
階層式
在階層式結構中,頁面是組織成類似樹狀的結構。 每個子頁面都有一個父頁面,但父頁面可以有一或多個子頁面。 要到達下層頁面,需要先經過上層頁面。
階層結構對於組織跨多個頁面的複雜內容來說很實用。 缺點是會有一些瀏覽負荷︰結構越深層,就需要多按幾下才能在頁面間瀏覽。
我們建議使用階層式結構的狀況是︰
- 頁面應以特定順序周遊。
- 頁面之間有清楚的父子關係。
- 群組中的頁面數超過 7 頁。
結合結構
您不必非得選擇一種結構;許多設計精良的應用程式皆同時使用兩者。 應用程式可在最上層頁面使用單層式結構,可以任何順序檢視頁面,而具有較複雜關係的頁面則採用階層式結構。
如果您的導覽結構有多個層級,建議對等導覽元素應只連接至目前樹狀子目錄中的對等項。 請思考相鄰的圖例,其中顯示具有兩個層級的瀏覽結構:
- 在層級 1,對等瀏覽元素應提供對頁面 A、B 和 C 的存取功能。
- 在層級 2,A2 頁面的對等瀏覽元素應只連結至其他 A2 頁面。 這些元素不應連結至 C 樹狀子目錄中的層級 2 頁面。
使用適當的控制項
一旦您決定頁面結構之後,您必須決定使用者瀏覽頁面的方式。 XAML 提供各種不同的瀏覽控制項,有助於確保您的應用程式提供一致、可靠的瀏覽體驗。
有幾個例外,即任何有多個頁面的應用程式都會使用框架。 一般來說,應用程式會有主要頁面,包含框架和主要瀏覽元素,例如瀏覽檢視控制項。 當使用者選取頁面時,框架會載入並且顯示。
顯示相同層級中水平的頁面連結清單。 NavigationView 控制項會實作頂端瀏覽模式。
在以下情況使用上方瀏覽:
- 您想要在螢幕上顯示所有的瀏覽選項。
- 您希望您的應用程式內容有更多空間。
- 圖示無法清楚地描述您的瀏覽類別。
顯示一份水平清單,列出各個較高層級的頁面連結。 BreadcrumbBar 控制項會實作頂端導覽模式。
階層連結的使用時機如下:
- 您想要顯示目前位置的路徑
- 您有許多導覽層級
- 您希望使用者能夠返回先前的任一層級
顯示一份項目清單。 選取在詳細區段中顯示其相對應頁面的項目。 的使用時機:
- 您預期使用者會在子項目之間頻繁切換。
- 您想讓使用者能夠對單一項目或項目群組執行進階操作 (例如刪除或排序),也想讓使用者查看或更新每個項目的詳細資料。
清單/詳細資料適合電子郵件收件匣、連絡人清單及資料項目。
內嵌瀏覽元素可顯示在頁面的內容中。 不同於其他瀏覽元素在頁面間皆須保持一致,內嵌於內容的瀏覽元素會隨頁面不同而改變。
後續:新增導覽程式碼到您的應用程式
下一篇文章「實作基本導覽」將會展示使用 Frame
控制項在應用程式中的兩個頁面之間啟用基本導覽所需的程式碼。