2.標(biāo)簽卡導(dǎo)航元素

本質(zhì)上標(biāo)簽卡導(dǎo)航和滑門效果是差不多的技巧。它們都能幫你把一大片內(nèi)容放到一小塊區(qū)域里。標(biāo)簽卡導(dǎo)航很常見(jiàn)，但也有很多不常見(jiàn)的運(yùn)用方式。我們這里 關(guān)注的是在一個(gè)頁(yè)面內(nèi)部的標(biāo)簽卡，而不是用于在不同頁(yè)面之間跳轉(zhuǎn)的標(biāo)簽樣式主導(dǎo)航。標(biāo)簽卡很明顯地將內(nèi)容劃分到不同區(qū)塊，最終又把他們?nèi)诤系秸嫉孛娣e很小 的一個(gè)區(qū)塊中。

標(biāo)簽卡的樣式范例出眾的背景，大的可點(diǎn)擊區(qū)域，明顯的分割第一個(gè)例子來(lái)自 Mac Pro網(wǎng)站 的“Performance”部分，其標(biāo)簽元素的組織非常值得學(xué)習(xí)。這些標(biāo)簽卡上的文字都十分易讀，可點(diǎn)擊區(qū)域很大，各標(biāo)簽視覺(jué)上的區(qū)分也很明顯，這正是 大部分用戶期待的樣式啊。你也應(yīng)該能注意到，當(dāng)前標(biāo)簽卡上還有著十分微妙的漸變背景，與主內(nèi)容區(qū)塊很好地融合在了一起。未激活的標(biāo)簽背景則略暗，主內(nèi)容區(qū) 塊在其上有微弱的投影，這種做法加強(qiáng)了深度感和立體效果。十分簡(jiǎn)單而有效的技巧。

按鈕區(qū)分的簡(jiǎn)潔標(biāo)簽卡

以下是另一個(gè)利用標(biāo)簽卡緊湊地展示信息的實(shí)例。根據(jù) Atebits 的布局結(jié)構(gòu)，介紹性內(nèi)容的空間被擠壓，不太適合做成多區(qū)塊樣式。所以他們介紹內(nèi)容的三大部分被組織到了標(biāo)簽中，保持了布局的整潔有序。再一次地，當(dāng)前標(biāo)簽 卡的背景與主內(nèi)容區(qū)融合，不活動(dòng)標(biāo)簽卡則是較暗的灰色背景。你同樣也會(huì)發(fā)現(xiàn)標(biāo)簽卡之間有著漂亮的分割線，使得每個(gè)標(biāo)簽卡看起來(lái)都像是獨(dú)立的按鈕。