21个适合扁平化设计的创意链接效果

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

[核心提示] 虽然只是小小一个链接以及搭配的一个简单的动画,却由于牵扯到与使用者互动的部份,魔鬼藏在细节里。

在今年如果谈起设计来说,没有人可以避开,不管它是否为未来的设计趋势,至少在今年网页设计领域中扁平化很流行很流行。相比以往,扁平化在界面上可以说是一种“偷懒”,界面“偷懒”后,对后面的交互上的细节要求就更加高了。因此收集了一些和传统交互效果相比更加有创意且适合扁平化设计的一些案例。本文为 21个链接 Hover 交互样式,原Demo效果在此。

1. 中括号

2. 3D翻转

3. 底部色块平滑渐隐

4. 底部色块快速渐隐

5. 3D浮动

6. 左侧边框下拉

7. 上下横条叠加

8. 边框描边

9. 上色块扩张

10. 色块遮挡

11. 文字渐隐

12. 圆环渐隐

13. 文字色点渐隐

14. 侧边变形

15. 文字阴影渐隐

16. 文字阴影跳动

17. 文字底部边框阴影

18. 上下边框变形

19. 色块3D翻转

20. 上下翻页

21. 颜色叠加

来源:极客观察 http://www.geekpark.net/read/view/187583

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 看到最后,我头晕了。哈哈。

    回复
  2. 有几个太花哨复杂的让我完全不知道鼠标是点中了还是远离了。

    回复
    1. 回复

      么么哒 取其善者而从之

  3. 还是简单些的好,简单的就是最好的还是有道理的。太花哨了影响用户体验,用户都是懒人,没有人会花费时间去看、去研究这些效果的。他们要的是简单的反馈,不要适得其反。对于设计师来说,这些还是对创作有灵感的。

    回复
    1. 回复

      恩恩 这个只是素材 具体还看产品实质属性

  4. 太乱了!

    回复
加载中