close
模塊標簽(Module Tabs) - 網頁設計 |
|
http://webdesign.zoapcon.com
|
|
|
|
原文地址:http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html 如果頁面中可用的空間很有限同時不希望頁面刷新,則可以直接在內容上方放一行標簽形式的鏈接,通過這種方式訪問內容. 當前激活的面板需要有視覺標識,并且分類標題應該短,同時要小于10個.如果在使用情境中,內容不需要彼此之間同時查看,則可以使用模塊標簽(Module tabs).標簽是現實生活中文件夾的隱喻. 解決什么問題? 用戶需要在頁面不刷新的情況下瀏覽一個或者更多疊放的內容面板 什么時候用?有多個內容面板,但是空間只夠一次展示一個 在使用情景中,不同面板中的內容不需要同時查看 你需要一種不用跳轉到另外一個頁面就可以在內容之間切換的方法.如果要在一個網站中導航到不同的頁面,則應該導航標簽. 有2-10個分類標題 分類標題要相對較短并且(標題內的內容)可預知 確認默認顯示哪個面板是很重要的 具體解決辦法是什么?直接在疊放的內容面板上方放一行鏈接,用戶可以控制 對于一塊內容,永遠不要出現多行標簽.(譯者注: 記得windows里面的選項卡嗎….) 使用管道浮”|”或相似的圖片來分隔每一個鏈接 至少選中一個標簽并且暫時下面的內容 通過高亮背景及留白來表明選中的標簽.Yahoo在選中的標簽的底部增加了一個”暗示”(譯者注: 猜測是指的”標簽的高亮背景色與內容面板的背景色一致”) 內容應該跟它關聯的標簽有視覺聯系和視覺界限(通常被”框”起來) 一次只有一個內容區域可見保持隱喻 因為用戶會從一個標簽點到另外一個,所以標簽應該出現在相同的位置 選擇新標簽時盡量不要刷新整個頁面 選擇標簽不回影響到頁面上的其他地方 選擇標簽不會跳轉到一個不同的頁面或者執行了一項操作(超出了”切換可見內容”的范圍) 為什么使用這個組件?標簽展示了內容.在大量信息中,它視覺化表現了用戶的當前位置 標簽是基于現實生活的隱喻.”一組文件夾中的最前面的”隱喻讓選中狀態更容易理解 標簽提供了導航.它給交替瀏覽內容提供了導航方法 可訪問性允許用戶通過Tab鍵通過合理的順序來在定位標簽 已定位的標簽可以通過回車鍵來訪問 通過那些替代手段中的一種來標識選中的標簽(和面板)(除了視覺標識) 在已激活的鏈接上加入值為”active”的title屬性 給鏈接加上不可見的ALT屬性,值為”active(激活)” Yahoo!的頁面中會給已激活的標簽加入值為”active”的ALT屬性,用來表示已激活
TAG: 網頁設計 | web design |
|
文章標籤
全站熱搜
留言列表
