Upgrade to Pro — share decks privately, control downloads, hide ads and more …

前端开发眼中的组件库

kaiye
May 03, 2011

 前端开发眼中的组件库

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

kaiye

May 03, 2011
Tweet

More Decks by kaiye

Other Decks in Design

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