|
4. 翻轉(zhuǎn)元素 Rollover Elements
翻轉(zhuǎn)元素目前被越來(lái)越多地運(yùn)用于商業(yè)網(wǎng)站、作品集站點(diǎn)和產(chǎn)品展示頁(yè)。翻轉(zhuǎn)元素的核心概念就是當(dāng)用戶鼠標(biāo)移到某個(gè)按鈕或網(wǎng)頁(yè)元素上時(shí)，處于另一個(gè)布局區(qū)域的元素就自動(dòng)顯示出來(lái)。請(qǐng)看下面的例子深入了解我說(shuō)的“翻轉(zhuǎn)元素”究竟是什么。
翻轉(zhuǎn)實(shí)例
標(biāo)簽卡翻轉(zhuǎn)
下圖是 Miro主頁(yè) 的截屏，他們?cè)O(shè)計(jì)了一個(gè)十分精妙的巨大翻轉(zhuǎn)元素。這 本質(zhì)上和滑門類似 —— 只不過(guò)內(nèi)容切換時(shí)不需要點(diǎn)擊罷了。
小地方的微妙翻轉(zhuǎn)
TaoEffect 向我們完美展示了如何通過(guò)設(shè)計(jì)精巧漂亮的翻轉(zhuǎn)元素來(lái)添加清爽整潔的額外信息（這種效果最早是應(yīng)用于前文提到過(guò)的Coda網(wǎng)站，但我們選擇了TaoEffect作為這一節(jié)的實(shí)例）。信息的展示十分友好，您只需要把鼠標(biāo)移到按鈕上即可。
訪問(wèn)網(wǎng)站你會(huì)發(fā)現(xiàn)，翻轉(zhuǎn)時(shí)有非常輕柔的動(dòng)畫，垂直跳動(dòng) + 淡入淡出。你應(yīng)該也能注意到它的背景是半透明的，跳出來(lái)的卡片邊緣還有高光和投影，與背景很好的區(qū)分開(kāi)來(lái)。
內(nèi)容地圖上的翻轉(zhuǎn)元素
OneHub 則利用翻轉(zhuǎn)元素實(shí)現(xiàn)了另一種效果。這個(gè)頁(yè)面有點(diǎn)像地圖，在不同區(qū)域做出了標(biāo)注。鼠標(biāo)移到標(biāo)注上時(shí)，會(huì)顯示該標(biāo)注的額外信息。這種方法用在需要分區(qū)域詳細(xì)解釋的產(chǎn)品介紹頁(yè)上將有特效。
與幻燈切換結(jié)合的翻轉(zhuǎn)元素
另一個(gè)蠻有趣的設(shè)計(jì)來(lái)自 SquaredEye —— 他們?cè)趯?dǎo)航按鈕上用翻轉(zhuǎn)元素來(lái)展示下一頁(yè)內(nèi)容的預(yù)覽圖。
小提示/翻轉(zhuǎn)元素的腳本
出處：笨活兒
責(zé)任編輯：moby
上一頁(yè) 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [3] 下一頁(yè) 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [5]
|
第 1 頁(yè) 
第 4 頁(yè) 提升設(shè)計(jì)品質(zhì)的8個(gè)布局方案 [4]
