简单实用的扁平化设计链接效果

2013年-12月-05日



尽管仅仅小小一个连接以及调配的一个简略的动画,却因为牵扯到与使用者交互的部份,细节是魔鬼,往往是这些简单的细节影响用户的体验。
从炫丽的Win8开始,扁平化,没有人能够避开,不管它是不是为将来的规划趋势,至少在目前页面规划领域中扁平化很盛行。比较以往,扁平化在界面上能够说是一种“偷闲”,界面“偷闲”后,对后边的交互上的细节需求就愈加高了。因而收集了一些和传统交互作用比较愈加有构思且合适扁平化规划的一些事例。本文为 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. 颜色叠加