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

设计系统有许多定义, 但用最简单的术语来说, 它是一组可交付成果,由有形和无形的元素组成.
- 有形的:模式、组件、设计人员和开发人员的工具、样式指南.
- 不记名的:品牌价值、心态、共同的价值观和信念.
The point of a 设计 system is to help facilitate the work of the creative team (including 设计ers and developers); therefore, 系统必须为使用它的人(团队)工作。. 目标是提供设计语言,使知识能够轻松地从一个团队转移到另一个团队.
大多数设计系统通常同时包含样式指南和模式库.
- 风格指南: 关注图形样式的使用(颜色、字体、插图).
- 模式库:侧重于功能组件的使用和集成.
设计系统包含公司各部门(如设计师和开发人员)之间共享的一般知识。. 设计系统通过使用设计模式为各个团队经常面临的设计问题提供解决方案,从而使整个设计和开发过程变得平滑.
设计系统的各个阶段
创建一个设计系统是一个漫长的过程,可以分为五个主要阶段, 正如 系统成熟度指标,由马塞洛·萨默斯和约翰·古利创作.
第一阶段:不一致
- 没有适当的设计系统.
- 该组织还没有尝试统一单一的UI范例.
第二阶段:静态
- 建立品牌指南的PDF或Wiki.
- 这一阶段通常发生在组织聘请外部机构进行品牌推广工作时. 该机构将提供一份PDF文件,该组织将使用该文件作为未来构建每个应用程序的指导方针. 然而, 这种策略可能会有问题,因为品牌工作是静态的,没有变化的, 这意味着它无法满足一个成长中的公司/组织的长期需求.
第三阶段:手动操作
- 建立了带有代码示例的UI-kit和组件库.
- 这个阶段反映了您正在构建的应用程序的一些现实情况,因为您的模式库可以展示开发人员将来将使用的一些实际示例和代码片段.
- 这个阶段, 然而, 仍然只是一种必须手动更新以确保与应用程序生产同步的文档形式吗.
第四阶段:自动
- 组件库自动编译成网站的代码.
- 创建自动模式库需要整个组织的协调, 因为多个应用程序将使用相同的代码库. 如果需要对代码库进行更改, 它可能会对所有使用它的应用程序产生影响.
- 在这个阶段,阶段3的手动文档将自动与生产站点同步. 为了实现这一点,必须满足自动设计系统的以下要求:
- 模式库和生产应用程序都必须能够访问相同的UI代码.
- 作为应用程序构建过程的一部分,必须从远程位置下载UI代码.
- UI代码必须进行版本控制,以便在不同阶段将各种应用程序绑定到设计系统.
- UI代码中的实例必须随着新的更改自动更新.
第五阶段:受治理
- 模式库过程完全集成到您的组织中.
创建一个适合你组织的设计系统
当创建一个新的设计系统, 许多人都将目光投向目前可用的顶级设计系统, 比如Google Design, Shopify, 苹果, 等. 许多人没有意识到的是,大型科技公司使用的设计系统对于规模较小的公司来说往往是遥不可及的, 因为像谷歌和苹果这样的公司拥有几乎无限的资源(金钱), time, 维护团队),汇集到他们的设计系统. 虽然这些系统令人印象深刻, 对于一家中等规模的公司来说,这通常是不现实的, 它们也不是必需的.