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

什么是设计系统 

设计系统,组件库插图.

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

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

The point of a 设计 system is to help facilitate the work of the creative team (including 设计ers and developers); therefore, 系统必须为那些将使用它的人(团队)工作. 其目标是提供一种设计语言,使知识能够很容易地从一个团队转移到另一个团队. 

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

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

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

设计系统的各个阶段 

创建设计系统是一个漫长的过程,可以分为五个主要阶段, 正如 系统成熟度指标它由马塞洛·萨默斯(Marcelo Somers)和约翰·古利(John Gully)创建. 

阶段1:不一致 

  • 没有适当的设计系统.
  • 该组织还没有试图统一一个单一的UI范例. 

阶段2:静态 

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

阶段3:手动 

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

阶段4:自动 

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

第五阶段:管理 

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

创建一个适合公司的设计系统

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

好消息是,你不需要一个复杂的系统