當網(wǎng)站的分類不會經(jīng)常改變時，在網(wǎng)站的LOGO和頁頭下方，水平放置一組固定的單行標簽，是一種提供高層級的導航的方法。標簽導航應該與整個頁面寬度一致，分類的標題應該是可預知并且盡可能短，同時通過高亮當前選中的標簽來保持”文件夾的隱喻”。（標簽的設(shè)計是來源于現(xiàn)實中一組文件夾的隱喻，更多信息可以參考“模塊標簽”中的介紹）

解決什么問題？

用戶需要通過一個全站導航來定位內(nèi)容和功能，同時需要清晰的示意用戶的當前位置

什么時候用？

有3-10個分類標題時

分類標題要相對較短同時（標題內(nèi)的內(nèi)容）可預知

分類的數(shù)量不會經(jīng)常變化

頁面的整體寬度取決于內(nèi)容。另一個可選方案是左側(cè)導航條

所有分類屬于一個網(wǎng)站

你需要展示網(wǎng)站的頂級導航

你需要示意在一組可選項中用戶的當前選擇

（當用戶點擊時）你需要改變整個頁面而不只是頁面內(nèi)容中的某一個小節(jié)

你需要一種控制頂級導航的方式

具體解決辦法是什么？

在網(wǎng)站的LOGO和頁頭下方水平放置一組標簽欄

如果第一個標簽是”首頁”，那么應該指向網(wǎng)站的首頁

整個標簽區(qū)域都可點-而不僅僅是其中的文字

標簽中的每一個頁面都應該保證有標簽導航條

當分類列表太長時，建議使用”更多”鏈接，或者考慮使用左側(cè)導航條

保持隱喻

被選中的標簽應該突起在其他所有標簽之前。沒有選中的標簽在視覺上應該位于后面，以此來加固用戶的概念：是通過選中標簽到達這個頁面

被選中標簽及所到達的頁面應該有視覺上的聯(lián)系，可以通過設(shè)計暗示，：比如顏色，邊框，括號等等。選擇另一個標簽后應該重繪整個頁面，同時展示與新標簽有關(guān)的新的信息。

永遠不要用多行的標簽，因為這樣會導致選中的與未選中標簽之間的困惑

當用戶從一個標簽跳轉(zhuǎn)到另一個標簽時，整個標簽欄應該出現(xiàn)在相同的位置

為什么使用這個組件？

標簽可以保證情境。在大量信息中，它們具有視覺化表現(xiàn)用戶的當前位置的作用

標簽是基于現(xiàn)實生活的隱喻。”一組文件夾中的最前面的”隱喻讓選中狀態(tài)更容易理解

標簽提供了導航。它們具有導航網(wǎng)站的作用

可訪問性

允許用戶通過Tab鍵通過合理的順序來在定位標簽

已定位的標簽可以通過回車鍵來訪問

通過以下替代手段中的一種來標識選中的標簽（和面板）（除了視覺標識）

在已激活的鏈接上加入值為”active”的title屬性

給鏈接加上不可見的ALT屬性，值為”active（激活）”

給表示已選中的Yahoo！圖片加入值為”active”的ALT屬性

原文地址： http://developer.yahoo.com/ypatterns/navigation/tabs/navtabs.html

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

延伸閱讀：

• 手風琴導航(Accordion)_Yahoo_Pattern(翻譯)
• 頂部導航條(Top Navigation Bar)_Yahoo_Pattern(翻譯)
• 左側(cè)導航條(Left Navigation Bar)_Yahoo_Pattern(翻譯)
• 進度條(Progress Bar)_Yahoo_Pattern(翻譯)
• 模塊標簽(Module Tabs)_Yahoo_Pattern(翻譯)

標簽： 雅虎組件 導航標簽 網(wǎng)站導航 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。