前端的UI設計與交互之導航篇

在廣義上，任何告知用戶他在哪裏，他能去什麼地方以及如何到達那裏的方式，均可以稱之爲導航。當設計者使用導航或者自定義一些導航結構時，請注意：
儘量提供標識、上下文線索，避免用戶迷路；
保持導航樣式和行爲一致或者減小導航數量，下降用戶學習成本；
儘量減小頁面間的跳轉（例如：一個常見任務須要多個頁面跳轉時，請減小至一到兩次），讓用戶移動距離保持簡短。
1、導航菜單
一、頂部導航菜單
頂部導航菜單的形式就是把超連接連成一行，信息內容層級比較簡單明瞭，適用在瀏覽性強的門戶性質以及比較前臺化的應用。一級類目建議在 2-7 個之內。標題長度 4-15 個字符長度爲好，中文字長 2-6 個。
二、側邊導航菜單
垂直導航較橫向的導航更靈活，易於向下擴展， 且容許的標籤長度較長。類目數量不限，可配合滾動條使用，適合信息層級多、操做切換頻率高的管理性質的應用。
2、麪包屑（Breadcrumb）
麪包屑導航的做用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關係。
注意事項： 1. 層級過深時，建議作隱藏處理，頁面顯示保持在三級之內，最多不宜超過五級； 2. 儘量不使用麪包屑，尤爲是當前頁面的導航能清晰的告訴用戶他在哪裏時。
3、標籤頁（Tabs）

標籤頁把大量信息進行分類展現，用戶能夠方便地切換標籤，而沒必要跳轉頁面進行比較瀏覽，能夠在有限的顯示區域內展現更多信息。分類可根據業務類別、業務狀態或者操做類型等並列關係來分，分類標題長度爲 2-6 箇中文字。
一、基本樣式
引領整個頁面的內容，用於主功能切換。
二、卡片樣式
用於頁面中局部展現，包裹型容器能很好的和其它內容隔離。
三、膠囊型樣式
用於卡片內的選項切換，常常和其它組件結合使用，讓用戶快速切換對應內容。
四、豎狀樣式
用於分類較多的選項，能夠不限制分類數量，具有更好的擴展性
4、步驟條（Steps）
步驟條是引導用戶按照流程完成任務的導航條，能夠幫助用戶對操做流程長度和步驟有個預期，而且知道本身當前在哪一個步驟，同時也能夠對用戶的任務完成度有明確的度量。當任務複雜或者存在前後關係時，將其分解成一系列步驟。
一、橫向流程步驟條
步驟多於 2 步時使用, 但建議不超過 5 步，每階段文字長度保持在 12 個字符之內。
二、豎向流程步驟條
通常居頁面左側，懸浮固定，可追加多行文字描述，適合較多步驟或步驟數動態變化時使用，例如：時間步驟跟蹤描述。
三、分頁器（Pagination）
當有大量內容須要展示時進行分頁加載處理，分頁器可讓用戶清楚的知道本身所要瀏覽的內容有多少、已經瀏覽了多少、還剩餘多少。
a）標準樣式
當信息條目較多的時候，能夠容許用戶自定義每頁的行數，以提升用戶查看和檢索信息的效率和靈活性，常與表格、卡片搭配使用。
b)迷你樣式
通常用於卡片或者浮層。
c)簡易樣式
通常用於卡片或者統計類表格展現，在 10 頁以內。