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

什么是设计系统

设计系统,组件库插图.

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

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

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

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

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

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

设计系统的阶段

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

第1阶段:不一致

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

第二阶段:静态

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

第三阶段:手工

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

第四阶段:自动

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

第五阶段:治理

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

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

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