前端开发眼中的组件库

给视觉交互设计师的分享，吐槽一下组件库的重要性

Transcript

1. 前端开发@@的组件库
   Sharing by Kaiye
   

   View Slide

2. 关于巨无霸
   

   View Slide

3. 巨无霸组件
   

   View Slide

4. 巨无霸组件
   

   View Slide

5. 巨无霸组件
   

   View Slide

6. 巨无霸组件
   

   View Slide

7. 巨无霸组件
   

   View Slide

8. 巨无霸组件
   

   View Slide

9. 巨无霸组件
   

   View Slide

10. 巨无霸组件
    

    View Slide

11. 巨无霸组件
    

    View Slide

12. 关于商品列表
    

    View Slide

13. 商品列表组件
    

    View Slide

14. 商品列表组件
    

    View Slide

15. 商品列表组件
    

    View Slide

16. 商品列表组件
    

    View Slide

17. 商品列表组件
    

    View Slide

18. 商品列表组件
    

    View Slide

19. 商品列表组件
    

    View Slide

20. 商品列表组件
    

    View Slide

21. 商品列表组件
    

    View Slide

22. 商品列表组件
    

    View Slide

23. 商品列表组件
    

    View Slide

24. 商品列表组件
    

    View Slide

25. 商品列表组件
    

    View Slide

26. 商品列表组件
    

    View Slide

27. 在拍拍，你找不出两个完全相同的商品列表……
    传说：
    

    View Slide

28. 关于TAB切换
    

    View Slide

29. TAB切换组件
    

    View Slide

30. TAB切换组件
    

    View Slide

31. TAB切换组件
    

    View Slide

32. TAB切换组件
    

    View Slide

33. TAB切换组件
    

    View Slide

34. TAB切换组件
    

    View Slide

35. TAB切换组件
    

    View Slide

36. TAB切换组件
    

    View Slide

37. TAB切换组件
    

    View Slide

38. TAB切换组件
    

    View Slide

39. TAB切换组件
    

    View Slide

40. 前端开发的现状
    • Urmilawei：前端资源很紧张
    • Yuanzhou：卖场活动要固化
    • Jornnyliu：前端兼容性要专业
    • Loadingliu：前端要做自动化工具
    • Reeqiwu：产品说这个体验不好
    • Ginnyguo：名字溢出没做控制
    • Eman：首页又改啦！
    

    View Slide

41. 为什么会
    

    View Slide

42. 历史总是惊人的相似……
    

    View Slide

43. 旧版支付宝
    

    View Slide

44. 新版支付宝
    

    View Slide

45. 新版支付宝
    

    View Slide

46. 现在的他们
    

    View Slide

47. 现在的他们
    

    View Slide

48. 背后的故事：交互组件库
    

    View Slide

49. 背后的故事：视觉组件规范
    

    View Slide

50. 背后的故事：视觉组件规范
    

    View Slide

51. 背后的故事：视觉组件规范
    

    View Slide

52. 背后的故事：视觉组件规范
    

    View Slide

53. 背后的故事：视觉组件规范
    

    View Slide

54. 背后的故事：前端组件库
    

    View Slide

55. 背后的故事：组件平台
    

    View Slide

56. 组件 = 规范
    

    View Slide

57. 组件 = 效率
    

    View Slide

58. 组件 = 专业
    

    View Slide

59. 组件 = 非个性化 ？
    

    View Slide

60. 组件个性化示例
    

    View Slide

61. 组件个性化示例
    

    View Slide

62. 组件个性化示例
    

    View Slide

63. 组件个性化示例
    

    View Slide

64. 前端组件化基本要求
    • DRY
    • 同类应用场景具有相同的信息架构
    • 具有⼀一致的交互效果
    • DIY
    • 相同的视觉布局、内容规格（栅格化）
    • 允许不同的颜色、纹理
    

    View Slide

65. Library is The One
    

    View Slide

66. Thanks
    

    View Slide