如果頁面中可用的空間很有限同時(shí)不希望頁面刷新,則可以直接在內(nèi)容上方放一行標(biāo)簽形式的鏈接,通過這種方式訪問內(nèi)容.
當(dāng)前激活的面板需要有視覺標(biāo)識,并且分類標(biāo)題應(yīng)該短,同時(shí)要小于10個(gè).如果在使用情境中,內(nèi)容不需要彼此之間同時(shí)查看,則可以使用模塊標(biāo)簽(Module tabs).標(biāo)簽是現(xiàn)實(shí)生活中文件夾的隱喻.
解決什么問題?
用戶需要在頁面不刷新的情況下瀏覽一個(gè)或者更多疊放的內(nèi)容面板
什么時(shí)候用?
有多個(gè)內(nèi)容面板,但是空間只夠一次展示一個(gè)
在使用情景中,不同面板中的內(nèi)容不需要同時(shí)查看
你需要一種不用跳轉(zhuǎn)到另外一個(gè)頁面就可以在內(nèi)容之間切換的方法.如果要在一個(gè)網(wǎng)站中導(dǎo)航到不同的頁面,則應(yīng)該導(dǎo)航標(biāo)簽.
有2-10個(gè)分類標(biāo)題
分類標(biāo)題要相對較短并且(標(biāo)題內(nèi)的內(nèi)容)可預(yù)知
確認(rèn)默認(rèn)顯示哪個(gè)面板是很重要的
具體解決辦法是什么?
直接在疊放的內(nèi)容面板上方放一行鏈接,用戶可以控制
對于一塊內(nèi)容,永遠(yuǎn)不要出現(xiàn)多行標(biāo)簽.(譯者注: 記得windows里面的選項(xiàng)卡嗎….)
使用管道浮”|”或相似的圖片來分隔每一個(gè)鏈接
至少選中一個(gè)標(biāo)簽并且暫時(shí)下面的內(nèi)容
通過高亮背景及留白來表明選中的標(biāo)簽.Yahoo在選中的標(biāo)簽的底部增加了一個(gè)”暗示”(譯者注: 猜測是指的”標(biāo)簽的高亮背景色與內(nèi)容面板的背景色一致”)
內(nèi)容應(yīng)該跟它關(guān)聯(lián)的標(biāo)簽有視覺聯(lián)系和視覺界限(通常被”框”起來)
一次只有一個(gè)內(nèi)容區(qū)域可見
保持隱喻
因?yàn)橛脩魰䦶囊粋�(gè)標(biāo)簽點(diǎn)到另外一個(gè),所以標(biāo)簽應(yīng)該出現(xiàn)在相同的位置
選擇新標(biāo)簽時(shí)盡量不要刷新整個(gè)頁面
選擇標(biāo)簽不回影響到頁面上的其他地方
選擇標(biāo)簽不會跳轉(zhuǎn)到一個(gè)不同的頁面或者執(zhí)行了一項(xiàng)操作(超出了”切換可見內(nèi)容”的范圍)
為什么使用這個(gè)組件?
標(biāo)簽展示了內(nèi)容.在大量信息中,它視覺化表現(xiàn)了用戶的當(dāng)前位置
標(biāo)簽是基于現(xiàn)實(shí)生活的隱喻.”一組文件夾中的最前面的”隱喻讓選中狀態(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!的頁面中會給已激活的標(biāo)簽加入值為”active”的ALT屬性,用來表示已激活