|
7. 手風(fēng)琴效果（折疊菜單）
折疊菜單和滑動(dòng)門以及標(biāo)簽卡涉及同一個(gè)概念：把大量信息壓縮到一小塊區(qū)域里�！笆诛L(fēng)琴效果”指的是一些被水平或垂直組織的區(qū)塊，通過點(diǎn)擊，一個(gè)內(nèi)容區(qū)塊滑向另一個(gè)區(qū)塊，并將其內(nèi)部?jī)?nèi)容展示出來，和手風(fēng)琴的推拉過程有點(diǎn)相似。
手風(fēng)琴效果的實(shí)例
功能性和大點(diǎn)擊區(qū)域
Alex Cohaniuc
的手風(fēng)琴菜單設(shè)計(jì)的很好。把作品項(xiàng)目藏到手風(fēng)琴里是的做法其實(shí)挺有道理的，因?yàn)檫@能把每個(gè)項(xiàng)目的不必要信息隱藏起來，等訪客有需要的時(shí)候再顯示。說這項(xiàng)設(shè)
計(jì)好是因?yàn)椋阂�，每塊畫布的標(biāo)題都很大，很好點(diǎn)擊；二，每塊標(biāo)簽卡都使用了一個(gè)小箭頭來反映開合狀態(tài)；三，鼠標(biāo)滑過時(shí)，當(dāng)前標(biāo)簽卡有將它區(qū)分出來的不同背
景色。
水平內(nèi)容滾動(dòng)
Jason Reed
使用手風(fēng)琴將整個(gè)站點(diǎn)糅合進(jìn)一張頁面里。他沒有賦予手風(fēng)琴以特別不一般的視覺特征，而是讓它融入了頁面之中。另外，這是一個(gè)水平方向推拉的手風(fēng)琴（盡管標(biāo)
簽卡是垂直方向的）。請(qǐng)注意看他的標(biāo)簽卡，每個(gè)標(biāo)簽卡之間的距離很大，這些標(biāo)簽卡，或者說標(biāo)題，并不像上一個(gè)例子有那么明顯的區(qū)分，設(shè)計(jì)師利用了留白來將
它們各自獨(dú)立。鼠標(biāo)移上去的時(shí)候，這些十分易讀的標(biāo)簽就會(huì)變成橙色，讓用戶能夠非常明確地了解到自己將要點(diǎn)擊的標(biāo)簽后面都有什么。
包含圖像和信息的手風(fēng)琴
Marius Roosendaal
使用另一個(gè)非常漂亮的手風(fēng)琴來“儲(chǔ)藏”他的作品圖像。與上面兩個(gè)例子一樣，每一個(gè)內(nèi)容區(qū)塊都是一個(gè)項(xiàng)目的展示。不過，此例的手風(fēng)琴里的每個(gè)圖像還附加有一
些文字介紹。你能注意到一個(gè)小按鈕被用來顯示/隱藏介紹。他同時(shí)也提供到更詳細(xì)介紹或者更大預(yù)覽圖的鏈接。在一個(gè)小小的手風(fēng)琴里當(dāng)然不能塞進(jìn)特別特別多的
信息，所以如果可以的話，還是盡量給每個(gè)項(xiàng)目都加上到詳細(xì)內(nèi)容的鏈接吧。
手風(fēng)琴腳本
出處：笨活兒
責(zé)任編輯：moby
上一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [6] 下一頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [8]
|
第 1 頁 
第 7 頁 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [7]
