/

ThunderUI:桌面端应用设计系统

桌面端UI组件库设计系统:Thunder UI

近年来,设计规范(Style Guide)逐渐发展演变为设计系统(Design System),基于一套架构严谨,规则统一的体系,在产品的表现层面的设计上实现模块化运作,从而大大提升设计效率和前端开发效率。设计领域里大家耳熟能详的Atomic Design, Bootstrap, Material Design, ElementUI, Ant Design, 以及去年开源的Fusion Design等等,都属于这样的系统。去年初参与了公司的一个PC桌面产品的更新改版设计,设计基本从零开始,所以也有了机会搭建一套完整的产品设计系统,彻底解决上个版本由于多人协作设计以及开发架构陈旧所带来各种体验和样式问题。产品名称叫迅雷,所以这个设计系统也就取名为ThunderUI。


整个系统中包含以下几个层级的内容,从高到低是:

  • 设计思想:最抽象的设计方向性描述,解决组件为什么要这么做(Why),以及如何做的问题(How)
  • 设计规范:由设计思想衍生而来的具体的设计统一性描述,包括颜色,尺寸,字号,图形特征等等对下一级层级的规范化内容
  • 设计组件库:颗粒度最低的组件,比如Button, Input, Checkbox, Radio……等等
  • 设计场景模板库:是在组件库的基础上,根据业务场景抽象出来固定的组件合集,所形成的模板页面,比如PC桌面端场景的话就有:登录,安装卸载,评论,图文卡片……等等

大致如下:
1

关于设计思想,也是在更新版本,梳理组件的过程中,逐步抽象总结而成的,这个过程并不是一蹴而就,盖棺定论。而是应该要跟随项目更新,不断修正迭代的。
1
1
1
1
1
1
1
1
1
1
1
1
1
1