21個適合扁平化設(shè)計的創(chuàng)意鏈接效果

6 評論 6667 瀏覽 2 收藏 5 分鐘

[核心提示] 雖然只是小小一個鏈接以及搭配的一個簡單的動畫,卻由于牽扯到與使用者互動的部份,魔鬼藏在細(xì)節(jié)里。

在今年如果談起設(shè)計來說,沒有人可以避開,不管它是否為未來的設(shè)計趨勢,至少在今年網(wǎng)頁設(shè)計領(lǐng)域中扁平化很流行很流行。相比以往,扁平化在界面上可以說是一種“偷懶”,界面“偷懶”后,對后面的交互上的細(xì)節(jié)要求就更加高了。因此收集了一些和傳統(tǒng)交互效果相比更加有創(chuàng)意且適合扁平化設(shè)計的一些案例。本文為 21個鏈接 Hover 交互樣式,原Demo效果在此。

1. 中括號

2. 3D翻轉(zhuǎn)

3. 底部色塊平滑漸隱

4. 底部色塊快速漸隱

5. 3D浮動

6. 左側(cè)邊框下拉

7. 上下橫條疊加

8. 邊框描邊

9. 上色塊擴張

10. 色塊遮擋

11. 文字漸隱

12. 圓環(huán)漸隱

13. 文字色點漸隱

14. 側(cè)邊變形

15. 文字陰影漸隱

16. 文字陰影跳動

17. 文字底部邊框陰影

18. 上下邊框變形

19. 色塊3D翻轉(zhuǎn)

20. 上下翻頁

21. 顏色疊加

來源:極客觀察 http://www.geekpark.net/read/view/187583

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 看到最后,我頭暈了。哈哈。

    來自菲律賓 回復(fù)
  2. 有幾個太花哨復(fù)雜的讓我完全不知道鼠標(biāo)是點中了還是遠(yuǎn)離了。

    來自上海 回復(fù)