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

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

解決什么問題?

用戶需要通過一個(gè)全站導(dǎo)航來定位內(nèi)容和功能,同時(shí)需要清晰的示意用戶的當(dāng)前位置

什么時(shí)候用?

具體解決辦法是什么?

• 在網(wǎng)站的LOGO和頁頭下方水平放置一組標(biāo)簽欄
• 如果第一個(gè)標(biāo)簽是”首頁”,那么應(yīng)該指向網(wǎng)站的首頁
• 整個(gè)標(biāo)簽區(qū)域都可點(diǎn)-而不僅僅是其中的文字
• 標(biāo)簽中的每一個(gè)頁面都應(yīng)該保證有標(biāo)簽導(dǎo)航條
• 當(dāng)分類列表太長(zhǎng)時(shí),建議使用”更多”鏈接,或者考慮使用左側(cè)導(dǎo)航條

保持隱喻

• 被選中的標(biāo)簽應(yīng)該突起在其他所有標(biāo)簽之前.沒有選中的標(biāo)簽在視覺上應(yīng)該位于后面,以此來加固用戶的概念:是通過選中標(biāo)簽到達(dá)這個(gè)頁面
• 被選中標(biāo)簽及所到達(dá)的頁面應(yīng)該有視覺上的聯(lián)系,可以通過設(shè)計(jì)暗示,:比如顏色,邊框,括號(hào)等等.選擇另一個(gè)標(biāo)簽后應(yīng)該重繪整個(gè)頁面,同時(shí)展示與新標(biāo)簽有關(guān)的新的信息.
• 永遠(yuǎn)不要用多行的標(biāo)簽,因?yàn)檫@樣會(huì)導(dǎo)致選中的與未選中標(biāo)簽之間的困惑
• 當(dāng)用戶從一個(gè)標(biāo)簽跳轉(zhuǎn)到另一個(gè)標(biāo)簽時(shí),整個(gè)標(biāo)簽欄應(yīng)該出現(xiàn)在相同的位置

為什么使用這個(gè)組件?

• 標(biāo)簽可以保證情境.在大量信息中,它們具有視覺化表現(xiàn)用戶的當(dāng)前位置的作用
• 標(biāo)簽是基于現(xiàn)實(shí)生活的隱喻.”一組文件夾中的最前面的”隱喻讓選中狀態(tài)更容易理解
• 標(biāo)簽提供了導(dǎo)航.它們具有導(dǎo)航網(wǎng)站的作用

可訪問性

• 允許用戶通過Tab鍵通過合理的順序來在定位標(biāo)簽
• 已定位的標(biāo)簽可以通過回車鍵來訪問
• 通過以下替代手段中的一種來標(biāo)識(shí)選中的標(biāo)簽(和面板)(除了視覺標(biāo)識(shí))
  • 在已激活的鏈接上加入值為”active”的title屬性
  • 給鏈接加上不可見的ALT屬性,值為”active(激活)”
  • 給表示已選中的Yahoo!圖片加入值為”active”的ALT屬性

來源：http://pd4.me/blog/methodology/navtabs_yahoo_pattern_translate/