中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用Tab來(lái)控制內(nèi)容切換的特性之一是快速和互動(dòng)。為此，應(yīng)該在html代碼里提前內(nèi)嵌所有內(nèi)容區(qū)的代碼，并通過(guò)CSS/Javascript來(lái)隱藏未被選中內(nèi)容區(qū)，而不是等用戶切換到某個(gè)標(biāo)簽后再去遠(yuǎn)程請(qǐng)載入信息。

避免在標(biāo)簽切換的時(shí)候去載入頁(yè)面，使用AJAX從遠(yuǎn)程讀數(shù)據(jù)來(lái)生成動(dòng)態(tài)菜單也是一個(gè)辦法，但這對(duì)使用語(yǔ)音閱讀器的用戶（譯注：Screen-Reader：為視力障礙的用戶準(zhǔn)備，可以語(yǔ)音讀出頁(yè)面上的信息。）是不友好的，因?yàn)檎Z(yǔ)音閱讀器不支持DOM模型。

（譯注：有4種方法載入隱藏區(qū)的內(nèi)容代碼：

• html 一次性載入：這種方法原始且安全，但是存在數(shù)據(jù)太多或太復(fù)雜導(dǎo)致頁(yè)面解析緩慢，從而導(dǎo)致整個(gè)頁(yè)面打開(kāi)速度變慢，這是不可忍受的。
• frame: 將隱藏區(qū)的代碼作為一個(gè)frame載入，frame的好處是可以新建進(jìn)程，和頁(yè)面中的圖片同時(shí)下載。不同的瀏覽器可以運(yùn)行一定數(shù)量的進(jìn)程并行，比如IE可以同時(shí)允許4個(gè)。這樣對(duì)整體頁(yè)面的打開(kāi)速度影響小。另外，frame可以進(jìn)入瀏覽器緩存，在多個(gè)頁(yè)面共用同一個(gè)Tab元素時(shí)，frame是一個(gè)好選擇。
• iframe：iframe和frame類(lèi)似，繼承了frame的優(yōu)點(diǎn)，此外它還可以作為一個(gè)容器隨意嵌入頁(yè)面。google adsense使用了iframe來(lái)實(shí)現(xiàn)了局部代碼的載入。。
• Ajax：響應(yīng)用戶操作或響應(yīng)某個(gè)觸發(fā)條件，由JS在后臺(tái)向服務(wù)器發(fā)出請(qǐng)求，載入隱藏區(qū)的代碼。我認(rèn)為除了交互和需要響應(yīng)動(dòng)態(tài)生成的內(nèi)容外，沒(méi)必要ajax技術(shù)。）

標(biāo)簽應(yīng)該設(shè)計(jì)得盡可能窄，以便在一行內(nèi)容納盡可能多的標(biāo)簽。

在標(biāo)簽區(qū)使用簡(jiǎn)單的描述或內(nèi)容關(guān)鍵字，可以幫助用戶在掃描頁(yè)面時(shí)快速找到他們想要的內(nèi)容。所以使用概括準(zhǔn)確符合邏輯的文字來(lái)描述內(nèi)容區(qū)是非常重要的，選用這些文字應(yīng)該經(jīng)過(guò)深思熟慮。

下面這個(gè)在網(wǎng)站CBS.com上的案例，是一個(gè)難用的Tab。標(biāo)簽上沒(méi)有任何說(shuō)明性文字，用戶無(wú)法預(yù)測(cè)未顯示的內(nèi)容區(qū)里到底有什么。

而在 Navigant Consulting 的網(wǎng)站上，使用數(shù)字來(lái)暗示數(shù)據(jù)是有序的。但仍然沒(méi)有表達(dá)出內(nèi)容區(qū)里包含什么。這種設(shè)計(jì)容易產(chǎn)生歧義導(dǎo)致用戶產(chǎn)生不必要的困惑。

在Tab的內(nèi)容區(qū)里使用滾動(dòng)條會(huì)增加用戶負(fù)擔(dān)：用戶在要查找信息在哪個(gè)內(nèi)容區(qū)里時(shí)，不僅需要切換標(biāo)簽，還需要加上移動(dòng)滾動(dòng)條的操作。

內(nèi)容區(qū)里容納的信息太多或設(shè)計(jì)Tab時(shí)設(shè)定的高度不夠，會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。所以需要考慮精簡(jiǎn)內(nèi)容、增加高度值，或把選中狀態(tài)的內(nèi)容區(qū)處理為的高度自適應(yīng)。

出處：西喬的九卦
責(zé)任編輯：bluehearts

上一頁(yè) Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [2] 下一頁(yè) Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [4]