跳到主要内容

数商云设计系统

基于数商云多年为客户服务的设计沉淀而成,助力企业级的产品设计系统。


背景

分析历史

随着互联网行业的发展,设计也经历了体验一致性设计效率设计系统构建/应用效率多端适配 等诸多问题。

许多人认为构建一套设计系统(Design System) 是解决企业级用户体验规模化问题的关键。

发现问题

但实际上,就算团队中有了一套统一的标准工具和设计指南,部分设计师依然会有新的不一致的 “创意”,而前端对应的组件代码也需要在不同业务中根据设计“创意”而二次修改;

可见让设计师单独解决问题而不是系统地解决问题,必然导致设计与项目内部的不一致,也将导致产品本身的体验不一致;

并且设计与项目内部的工作本身也将是低效的,在此我们需要思考如何满足业务的不断迭代?

制定方向

我们需要将设计与前端看成一个系统化的方向制定设计系统。

持续优化

而当业务发展到 平台化、垂直化、多样化 阶段时,设计也面对了更多的问题和挑战:

  • 周期性业务的设计更新
  • 不同品牌的多种垂直业务设计
  • 众多相似的后台系统构建
  • 跨业务/部门的设计、前端协作问题
  • ......

面对这些问题,体验工程的建设已经远远不止于一套设计规范或一套组件库,他需要一套完整的系统来支撑,

解决内部协作的一致性问题,解决设计系统更新的周期性问题,解决一群设计师与工程师如何规模化的生产各种业务 UI 的问题,从而最终解决用户体验一致性的问题。

系统概念

设计系统是预先构建的、可复用的资产——组件、模式、指南和代码。

可以为用户更快地创造一致的体验。通过使用预先构建的资产,节省团队花费在设计和开发上的时间。

这样就可以花更多时间去发挥创意来解决特定的客户问题。

系统构成

我们的中后台前端/设计解决方案,秉承原子组件化思维,

致力于在设计规范和基础组件的基础上,继续向上构建,提炼出业务组件/典型模板/配套设计资源等。

我们的设计系统主要包含了以下部分:

设计语言

设计系统的灵魂,包括 Logo、品牌色、品牌故事、口号……;定义设计原则如清晰、高效、统一、美观、简单、可靠、易用、美观等。

布局网格

页面框架、响应式与网格规则等。

设计风格

颜色、字体、投影、图标、Design Token 等。

基础组件

组件解决的是具体操作应该怎么去执行。

业务模块

由基础组件拓展,适配各种业务场景的组件模块。

模式场景

针对的是一个具体的事件的详细说明,涵盖不用基础组件和业务流程的不同组合。

页面模版

产品中可复用的页面。

图标库

符合系统品牌调性的图标库,包含基本图标、业务图标等。

交互设计库

常用的封装好的交互组件、交互动效模块。

体验度量库

基于业务及交互,定义好的体验验证工具、流程和方法。

动效动画库

元素、组件、整套的动画解决方案。

图片视频

图片的规范和素材。

设计价值

适用于跨职能团队的每一位成员——设计师、开发、产品经理和营销人员。

设计师

设计系统是设计师体系化思考的能力沉淀,也是设计师职业发展不可或缺的一种重要能力。

设计师可以利用系统中的可复用的组件快速为我们的客户创建量身定制的解决方案。

设计系统能发挥团队探索和交付设计的全部潜力,避免重新设计和重复工作,将重点放在不同的客户实际问题上。

设计团队

设计系统是设计团队最为核心的能力和资产,是设计团队提升影响力、成为业务核心能力的重要基础。

公司

设计系统是一个产品的基础,也是业务快速迭代的发动机。通过设计系统的建设,可以优化业务生产流程,达到企业降本提效的目的。

...