導航標簽(navigation Tabs) - 網頁設計

http://webdesign.zoapcon.com

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

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

解決什么問題? 用戶需要通過一個全站導航來定位內容和功能,同時需要清晰的示意用戶的當前位置

什么時候用?有3-10個分類標題時分類標題要相對較短同時(標題內的內容)可預知分類的數量不會經常變化頁面的整體寬度取決于內容.另一個可選方案是左側導航條所有分類屬于一個網站你需要展示網站的頂級導航你需要示意在一組可選項中用戶的當前選擇 (當用戶點擊時)你需要改變整個頁面而不只是頁面內容中的某一個小節你需要一種控制頂級導航的方式具體解決辦法是什么?在網站的LOGO和頁頭下方水平放置一組標簽欄如果第一個標簽是”首頁”,那么應該指向網站的首頁整個標簽區域都可點-而不僅僅是其中的文字標簽中的每一個頁面都應該保證有標簽導航條當分類列表太長時,建議使用”更多”鏈接,或者考慮使用左側導航條

保持隱喻

被選中的標簽應該突起在其他所有標簽之前.沒有選中的標簽在視覺上應該位于后面,以此來加固用戶的概念:是通過選中標簽到達這個頁面被選中標簽及所到達的頁面應該有視覺上的聯系,可以通過設計暗示,:比如顏色,邊框,括號等等.選擇另一個標簽后應該重繪整個頁面,同時展示與新標簽有關的新的信息. 永遠不要用多行的標簽,因為這樣會導致選中的與未選中標簽之間的困惑當用戶從一個標簽跳轉到另一個標簽時,整個標簽欄應該出現在相同的位置為什么使用這個組件?標簽可以保證情境.在大量信息中,它們具有視覺化表現用戶的當前位置的作用標簽是基于現實生活的隱喻.”一組文件夾中的最前面的”隱喻讓選中狀態更容易理解標簽提供了導航.它們具有導航網站的作用可訪問性允許用戶通過Tab鍵通過合理的順序來在定位標簽已定位的標簽可以通過回車鍵來訪問通過以下替代手段中的一種來標識選中的標簽(和面板)(除了視覺標識) 在已激活的鏈接上加入值為”active”的title屬性給鏈接加上不可見的ALT屬性,值為”active(激活)” 給表示已選中的Yahoo!圖片加入值為”active”的ALT屬性

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

TAG: 網頁設計 | web design |