1. 程式人生 > >前端的UI設計與交互之導航篇

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

頂部 隱藏 標簽 距離 例如 適合 操作類 允許 垂直

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