设计系统是一个定制化的设计元素和规范指南的集合体,主要用于团队创建出一致且连贯的用户体验产品和服务,借此提升设计工作效率。我们所理解的设计系统通常包括:用户界面视觉组件、视觉风格指南、交互设计模式和交互设计原则等等。在其他未知的领域,也有不同的理解和应用。
设计系统的主要目的是为了在设计决策时,能够提供一个多方已达成共识的设计基准,为了让设计师和研发工程师之间(还有业务、产品等)更加和谐的配合,构建一个精益、敏捷的协作方式和运作流程。设计系统还有助于确保多个产品和平台之间的视觉、交互、代码等一致性。在重大的品牌视觉升级或是界面重构时可以通过设计系统进行统一管理和升级。
通常侧重于产品的视觉传达,设计元素,如调色板、排版和图标,外观、材质等。
涵盖更广泛的设计元素,包括用户界面组件、模式和交互设计原则,零部件、组合形式。
包含使用设计元素的基本准则,简单理解为设计规范或参考;设计系统不仅如此,还提供使用和实现每个设计元素的详细文档和指导。
包含用于构建组件的代码块和设计模板以及运用场景案例。
为特定的项目或产品所设计的,难以适配或扩展到其他项目或产品。
灵活且可扩展的设计,组件和模式可以在团队内跨多个产品或项目中重复使用。
与风格指南相比,设计系统通常需要额外制定,更加结构化,并需要定期管理维护。
设计系统涉及更复杂的设计元素,需要设计师、研发工程师和其他业务相关者之间共创。治理机制可以确保设计系统保持一致且最新版本。
以下是我们历经多年项目所总结的设计系统类型。每当选择实施其中的某一种类型的设计系统,主要是取决于项目的需求和目标。
侧重点在于创建和维护所有营销和物料视觉设计的品牌一致性。包括调色板、排版、图标、图像和其他品牌相关元素的品牌指南。
侧重点在于数字产品和服务创建和维护一致的用户界面。包括用户界面(UI)组件、风格指南、设计模式和交互设计原则指南。
侧重于用户界面(UI)设计基础模式,如按钮、表单和导航菜单。包括一系列可在不同项目中重复使用的预设。
结合品牌和用户界面设计系统,创造出一种整体设计方法。包括理念、原则、视觉、交互、行为等方面的设计指南。
组件库与模式库类似,但包括更详细的文档和每个组件的代码段。开发人员通常使用它,通过提供可在项目中轻松实施的预建组件来加快开发过程。
侧重点在于所有产品和服务,营销和设计的材料中,创建和维护一致的内容策略。它包括语音语调、信息传递和内容结构指南。传递给用户不仅仅只有图像视觉,还有文字内容,这往往被设计师所忽略。
设计系统可以帮助企业实现多个目标,如改进工作流程、提高设计一致性、减少开发时间和成本。
Airbnb 的设计系统名为 "Design Language System"(DLS),帮助他们在不同平台和设备上实现品牌一致性。DLS 还改善了设计师和开发人员之间的协作,缩短了开发时间,提高了用户体验。
IBM 的设计系统名为 "Carbon Design System",帮助他们整合设计标准,并在所有产品中推广更加一致的视觉语言。Carbon Design System 还帮助 IBM 的开发团队缩短了产品上市时间,改善了用户体验。
Atlassian 的设计系统名为"Atlassian Design Guidelines"(ADG),帮助他们在产品组合中实现了更加一致的设计。ADG 还帮助 Atlassian 简化了开发流程,降低了开发成本,改善了用户体验。
虽然设计系统可以为组织带来巨大收益,但是我们在推动和实施设计系统时也面临很多挑战。
设计系统通常需要对既定的设计和开发工作流程进行重大变革。对变革的抵触会使新设计系统难以实施。
设计系统可能很复杂,尤其是在企业拥有大量产品组合的情况下。创建和维护设计系统可能需要投入大量的时间和资源。
实施设计系统需要不同部门利益相关者的支持。让利益相关者相信设计系统的好处是一项挑战。
实施设计系统是一项艰巨的任务。从小处着手,从单一产品或单一设计元素入手,有助于形成势头,并获得利益相关者的支持。
在实施设计系统时,与利益相关者合作至关重要。让利益相关者尽早参与进来,并在整个设计系统开发过程中鼓励他们提供反馈和意见。
向利益相关者宣传设计系统的优势至关重要。强调设计系统如何改进工作流程、减少开发时间和成本,以及改善用户体验。
设计系统可以根据企业的具体需求进行定制,包括从调色板和排版到表单、表格和导航菜单等更复杂的用户界面组件。通过为每个元素提供详细的文档和指南,设计系统可确保项目中的每个人都站在同一起跑线上,并了解如何正确使用每个组件。
以下是一些有关设计系统的资源,可帮助你开始构建设计系统。
EightShapes Specs(Figma 插件)
Design System Slack Community
一个帮助团队创建和维护设计系统的平台。它提供创建设计库、样式指南和用户界面组件的工具,并允许团队协作和共享设计资产。
一种流行的设计工具,具有创建设计系统的功能。其设计系统功能包括可重复使用的组件、共享样式以及用于存储和共享设计资产的库。
EightShapes Specs(Figma 插件)
一种允许设计师直接在 Figma 界面中轻松创建设计规范和样式指南的工具。该插件旨在通过自动执行创建和维护规范所涉及的许多重复性任务,简化为设计系统创建文档的流程。
创建设计系统的综合指南。它涵盖了如何定义设计系统、如何创建可重复使用的用户界面组件以及如何记录设计系统以便于参考等主题。
一种创建设计系统的方法,强调使用模块化、可重复使用的用户界面组件。它提供了一种结构化的方法来创建可扩展且易于维护的设计系统。(大家熟知的原子设计)
Shopify 使用的设计系统,它是 GitHub 上的一个开源项目。它包括排版、色彩、布局和用户界面组件指南,以及为希望在自己的项目中实施该设计系统的开发人员提供的资源。
一个探索设计系统世界的播客。播客内容包括对该领域专家的采访,以及对设计系统管理、文档和采用等主题的讨论。
Design System Slack Community
面向设计师、开发人员和其他对设计系统感兴趣的专业人士的论坛。它为创建和维护设计系统相关主题的讨论和合作提供了空间。
设计系统示例、资源和工具的精选集。它提供大量有关设计系统的信息,包括案例研究、风格指南和设计系统库。