頂部導航條(Top Navigation Bar)

　　這個可能是最簡單也最常用的組件了，所以內容也不多……。

　　用戶為了完成任務需要找到必須的內容和功能。頂部導航條在水平的緊湊的空間內提供給用戶已分類內容的訪問入口。

　　解決什麼問題?

　　用戶為了完成任務需要找到必要的內容和功能。

　　什麼時候用?

　　2-12個分類

　　分類的標題相對較短並且可預測

　　分類數量基本不會變

　　為一個web產品展示頂級導航時

　　配合標簽來展示二級導航

　　如果頁面寬度很重要，用它來替代左側導航條

　　通過控制導航條的狀態來跟蹤和展示用戶當前位置很困難，成本很大時，用它來替代標簽。

　　分類都屬於一個產品時

　　具體解決辦法是什麼?

　　1、在一個水平的橫條上顯示一系列單行的鏈接，如果有網站頭部，則放到頭部之下。

　　2、可以通過與”標簽”一起使用，在導航條中同時顯示一級和二級導航

　　3、如果只使用頂部導航條，最好第一個鏈接是”首頁(Home)”。應該指向網站的首頁

　　但是如果頂部導航條是用在一組標簽下，那麼標簽的第一個應該是”首頁”並且具有同樣的功能

　　4、在導航條中用留白和”管道符” “|”(或者是垂直居中的”點”，或者是簡單的視覺元素)來分隔每一個分類

　　5、頂部導航條中鏈接的所有頁面本身也一定要顯示在頂部導航條

　　6、當頂部導航條數量過多時，建議使用”更多。.”的鏈接，或者考慮使用左側導航條

　　7、與標簽一起使用來顯示高層級的內容

　　8、跟左側導航條一起使用來顯示二級或三級內容

　　關注內容的劃分范圍(符合用戶的心智模型)比關注頁面的展示更重要。因為最常見的錯誤是將一系列沒意義的內容歸在一類。

　　1、盡可能降低分類之間的交集

　　2、讓分類之間的界限盡可能的清晰(例如，很容易猜到想要的東西是否在一個分類中)

　　3、避免過於寬泛或者過於特殊的分類名字。

　　為什麼使用這個組件?

　　頂部導航條提供給用戶一種很方便，簡潔分類展示方式，讓用戶訪問品類繁多的有組織的內容。

　　原文地址： http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

　　文章來源：pd4.me/blog/ 轉載請注明出處鏈接。