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

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

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

解決什么問題?

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

什么時候用?

• 有多個內(nèi)容面板,但是空間只夠一次展示一個
• 在使用情景中,不同面板中的內(nèi)容不需要同時查看
• 你需要一種不用跳轉(zhuǎn)到另外一個頁面就可以在內(nèi)容之間切換的方法.如果要在一個網(wǎng)站中導(dǎo)航到不同的頁面,則應(yīng)該導(dǎo)航標簽.
• 有2-10個分類標題
• 分類標題要相對較短并且(標題內(nèi)的內(nèi)容)可預(yù)知
• 確認默認顯示哪個面板是很重要的

具體解決辦法是什么?

• 直接在疊放的內(nèi)容面板上方放一行鏈接,用戶可以控制
• 對于一塊內(nèi)容,永遠不要出現(xiàn)多行標簽.(譯者注: 記得windows里面的選項卡嗎….)
• 使用管道浮”|”或相似的圖片來分隔每一個鏈接
• 至少選中一個標簽并且暫時下面的內(nèi)容
• 通過高亮背景及留白來表明選中的標簽.Yahoo在選中的標簽的底部增加了一個”暗示”(譯者注: 猜測是指的”標簽的高亮背景色與內(nèi)容面板的背景色一致”)
• 內(nèi)容應(yīng)該跟它關(guān)聯(lián)的標簽有視覺聯(lián)系和視覺界限(通常被”框”起來)
• 一次只有一個內(nèi)容區(qū)域可見

保持隱喻

• 因為用戶會從一個標簽點到另外一個,所以標簽應(yīng)該出現(xiàn)在相同的位置
• 選擇新標簽時盡量不要刷新整個頁面
• 選擇標簽不回影響到頁面上的其他地方
• 選擇標簽不會跳轉(zhuǎn)到一個不同的頁面或者執(zhí)行了一項操作(超出了”切換可見內(nèi)容”的范圍)

為什么使用這個組件?

• 標簽展示了內(nèi)容.在大量信息中,它視覺化表現(xiàn)了用戶的當(dāng)前位置
• 標簽是基于現(xiàn)實生活的隱喻.”一組文件夾中的最前面的”隱喻讓選中狀態(tài)更容易理解
• 標簽提供了導(dǎo)航.它給交替瀏覽內(nèi)容提供了導(dǎo)航方法

可訪問性

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

原文：http://pd4.me/blog/methodology/moduletabs_yahoo_pattern_translate/