|
2.標(biāo)簽卡導(dǎo)航元素
本質(zhì)上標(biāo)簽卡導(dǎo)航和滑門效果是差不多的技巧。它們都能幫你把一大片內(nèi)容放到一小塊區(qū)域里。標(biāo)簽卡導(dǎo)航很常見，但也有很多不常見的運(yùn)用方式。我們這里關(guān)注的是在一個(gè)頁面內(nèi)部的標(biāo)簽卡，而不是用于在不同頁面之間跳轉(zhuǎn)的標(biāo)簽樣式主導(dǎo)航。標(biāo)簽卡很明顯地將內(nèi)容劃分到不同區(qū)塊，最終又把他們?nèi)诤系秸嫉孛娣e很小的一個(gè)區(qū)塊中。
標(biāo)簽卡的樣式范例
出眾的背景，大的可點(diǎn)擊區(qū)域，明顯的分割
第一個(gè)例子來自 Mac Pro網(wǎng)站的“Performance”部分，其標(biāo)簽元素的組織非常值得學(xué)習(xí)。這些標(biāo)簽卡上的文字都十分易讀，可點(diǎn)擊區(qū)域很大，各標(biāo)簽視覺上的區(qū)分也很明顯，這正是大部分用戶期待的樣式啊。你也應(yīng)該能注意到，當(dāng)前標(biāo)簽卡上還有著十分微妙的漸變背景，與主內(nèi)容區(qū)塊很好地融合在了一起。未激活的標(biāo)簽背景則略暗，主內(nèi)容區(qū)塊在其上有微弱的投影，這種做法加強(qiáng)了深度感和立體效果。十分簡單而有效的技巧。
按鈕區(qū)分的簡潔標(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ū)融合，不活動標(biāo)簽卡則是較暗的灰色背景。你同樣也會發(fā)現(xiàn)標(biāo)簽卡之間有著漂亮的分割線，使得每個(gè)標(biāo)簽卡看起來都像是獨(dú)立的按鈕。
為整個(gè)標(biāo)簽集提供清晰的分割線
Fontcase 的標(biāo)簽卡設(shè)計(jì)也很精妙，很有現(xiàn)代感。盡管在未激活標(biāo)簽之間沒有分割線，當(dāng)前標(biāo)簽卻有明顯的邊線。你也能注意到，在整個(gè)標(biāo)簽集的上方和下方各有一條邊線。標(biāo)簽卡使用了圖標(biāo)與留白來突出文字，提高了易用性。
標(biāo)簽卡效果腳本
出處：笨活兒
責(zé)任編輯：moby
上一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [1] 下一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [3]
|
第 1 頁 
第 2 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [2]
