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

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

解決什么問題？

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

什么時候用？

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

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

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

有2-10個分類標(biāo)題

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

確認(rèn)默認(rèn)顯示哪個面板是很重要的

具體解決辦法是什么？

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

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

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

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

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

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

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

保持隱喻

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

選擇新標(biāo)簽時盡量不要刷新整個頁面

選擇標(biāo)簽不回影響到頁面上的其他地方

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

為什么使用這個組件？

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

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

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

可訪問性

允許用戶通過Tab鍵通過合理的順序來在定位標(biāo)簽

已定位的標(biāo)簽可以通過回車鍵來訪問

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

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

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

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

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

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

延伸閱讀：

• 手風(fēng)琴導(dǎo)航(Accordion)_Yahoo_Pattern(翻譯)
• 頂部導(dǎo)航條(Top Navigation Bar)_Yahoo_Pattern(翻譯)
• 左側(cè)導(dǎo)航條(Left Navigation Bar)_Yahoo_Pattern(翻譯)
• 進(jìn)度條(Progress Bar)_Yahoo_Pattern(翻譯)

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

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