设计系统:如何确保你的系统对你的组织来说是现实的

什么是设计系统

设计系统,组件库插图.

设计系统有许多定义, 但用最简单的术语来说, 它是由有形和无形元素组成的一组可交付成果.

  • 有形的:模式、组件、设计人员和开发人员的工具、样式指南.
  • 不记名的:品牌价值、心态、共同的价值观和信念.

The point of a 设计 system is to help facilitate the work of the creative team (including 设计ers and developers); therefore, 系统必须为那些将使用它的人(团队)工作. 皇冠真人官方app-皇冠真人官方app(创新)有限公司-集团的目标是提供设计语言,使知识能够轻松地从一个团队转移到另一个团队.

大多数设计系统通常同时包含样式指南和模式库.

  • 风格指南: 专注于图形样式的使用(颜色,字体,插图).
  • 模式库:注重功能组件的使用和集成.

设计系统包含了公司各部门(如设计人员和开发人员)之间共享的一般知识。. 设计系统通过使用平滑整个设计和开发过程的设计模式,为各种团队经常面临的设计问题提供解决方案.

设计系统的各个阶段

创建一个设计系统是一个漫长的过程,可以分为五个主要阶段, 正如 系统成熟度指标,由Marcelo Somers和John Gully创造.

阶段1:不一致

  • 没有适当的设计系统.
  • 组织还没有尝试统一单一的UI范式.

阶段2:静态

  • 建立了品牌指南的PDF或Wiki.
  • 这一阶段通常发生在组织聘请外部机构进行品牌推广工作的时候. 该机构将提供一个PDF文件,该组织将使用它作为未来他们构建的每个应用程序的指南. 然而, 这种策略可能会有问题,因为品牌推广工作是静态的、没有变化的, 这意味着它无法满足一个成长中的公司/组织的长期需求. 

阶段3:手动

  • 建立了带有代码示例的UI-kit和组件库.
  • 这个阶段反映了您正在构建的应用程序的一些现实情况,因为您的模式库可以展示开发人员将来将使用的一些实际示例和代码片段. 
  • 这个阶段, 然而, 是否仍然只是一种必须手动更新的文档形式,以确保与应用程序的生产保持同步.

阶段4:自动

  • 组件库会自动编译成网站的代码. 
  • 创建自动模式库需要整个组织的协调, 因为多个应用程序将使用相同的代码库. 如果需要对代码库进行更改, 它可能会对所有使用它的应用程序产生影响.
  • 在这个阶段,第3阶段的手工文档将自动与生产站点同步. 要做到这一点,自动设计系统必须满足以下要求:
  1. 模式库和生产应用程序必须都能够访问相同的UI代码. 
  2. 作为应用程序构建过程的一部分,必须从远程位置下载UI代码.
  3. UI代码必须进行版本控制,这样各种应用程序才能在不同阶段绑定到设计系统中.
  4. UI代码中的实时示例必须通过新更改自动更新.

第五阶段:管理

  • 模式库过程完全集成到您的组织中.

创建一个适合你的组织的设计系统

当创建一个新的设计系统, 许多人着眼于目前可用的顶级设计系统, 如谷歌Design, Shopify, 苹果, 等. 许多人没有意识到的是,大型科技公司使用的设计系统往往是小型公司所无法企及的, 只是因为像谷歌和苹果这样的公司拥有几乎无限的资源(金钱), time, (维修团队)共同参与他们的设计系统. 虽然这些系统令人印象深刻, 对于一般规模的公司来说,这通常是不现实的, 也没有必要.