如果頁面中可用的空間很有限同時不希望頁面刷新，則可以直接在內(nèi)容上方放一行標簽形式的鏈接，通過這種方式訪問內(nèi)容。

當前激活的面板需要有視覺標識，并且分類標題應該短，同時要小于10個。如果在使用情境中，內(nèi)容不需要彼此之間同時查看，則可以使用模塊標簽（Module tabs）。標簽是現(xiàn)實生活中文件夾的隱喻。

解決什么問題？

用戶需要在頁面不刷新的情況下瀏覽一個或者更多疊放的內(nèi)容面板

什么時候用？

有多個內(nèi)容面板，但是空間只夠一次展示一個

在使用情景中，不同面板中的內(nèi)容不需要同時查看

你需要一種不用跳轉(zhuǎn)到另外一個頁面就可以在內(nèi)容之間切換的方法。如果要在一個網(wǎng)站中導航到不同的頁面，則應該使用導航標簽。

有2-10個分類標題

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

確認默認顯示哪個面板是很重要的

具體解決辦法是什么？

直接在疊放的內(nèi)容面板上方放一行鏈接，用戶可以控制

對于一塊內(nèi)容，永遠不要出現(xiàn)多行標簽。（譯者注： 記得windows里面的選項卡嗎…。）

使用管道浮”|”或相似的圖片來分隔每一個鏈接

至少選中一個標簽并且展示下面的內(nèi)容

通過高亮背景及留白來表明選中的標簽.Yahoo在選中的標簽的底部增加了一個”暗示”（譯者注： 猜測是指的”標簽的高亮背景色與內(nèi)容面板的背景色一致”）

內(nèi)容應該跟它關聯(lián)的標簽有視覺聯(lián)系和視覺界限（通常被”框”起來）

一次只有一個內(nèi)容區(qū)域可見

保持隱喻

因為用戶會從一個標簽點到另外一個，所以標簽應該出現(xiàn)在相同的位置

選擇新標簽時盡量不要刷新整個頁面

選擇標簽不回影響到頁面上的其他地方

選擇標簽不會跳轉(zhuǎn)到一個不同的頁面或者執(zhí)行了一項操作（超出了”切換可見內(nèi)容”的范圍）

為什么使用這個組件？

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

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

標簽提供了導航。它給交替瀏覽內(nèi)容提供了導航方法

可訪問性

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

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

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

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

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

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

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

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

延伸閱讀：

• 手風琴導航(Accordion)_Yahoo_Pattern(翻譯)
• 頂部導航條(Top Navigation Bar)_Yahoo_Pattern(翻譯)
• 左側導航條(Left Navigation Bar)_Yahoo_Pattern(翻譯)
• 進度條(Progress Bar)_Yahoo_Pattern(翻譯)

標簽： 網(wǎng)站標簽 雅虎組件 模 楸昵

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