设计体系有助于简化产品设计过程,使其更加透明和可预测。另外,UI设计体系使得在产品创建的各团队能够更紧密的跨职能协作,提高团队创建产品的效率的同时,又不会牺牲用户体验。今天,Pixso设计师就将探讨UI设计体系的概念以及创建设计体系的关键步骤。

Royco 设计系统

Royco 设计系统

1. 什么是设计体系

设计体系即设计系统,其实就是用一套连贯组织、相互关联的模式和共享实践为指导,使产品团队能够达到快速创建产品的目的。简单的说设计体系就是一系列可重用的组件和它们的使用指导文档。设计体系为公司的各种产品提供了基石和指导,是动态的,并且需要维护与改进的。

UI设计体系包括的设计语言即(设计组件、设计原则、设计模式),设计规范(设计风格)、设计组件库(如下图所示,为Pixso资源社区的Royco设计体系资源,包含设计大量设计组件资源)、资源与工具。

1.1 设计组件与模式

设计组件是设计的功能元素,通过组件构建块,再将其组合,构成设计组件库,供相关人员在创建产品时使用。

设计模式是一种经常性,可重复使用的解决方案,可用于解决设计问题,我们经常会说解决整个方案我们要运用什么样的设计模式。

设计组件与模式

1.2 设计风格规范

风格规范关注图形的样式即颜色、字体、插图,以及用法的可交付成果。通常在创建风格样式时,应考虑品牌价值将品牌元素、颜色等应用于产品中,强化用户的品牌心智。例如将品牌颜色用于号召性用于按钮。如下图所示,为Royco设计体系风格规范。

Royco设计体系风格规范

1.3 设计原则

通过设计原则可帮助团队做出有意义的设计决策,快速达成共识。设计原则反映了设计团队的共同信念。在实际工作中,创建的产品会有不同的需求,不可能提供每个设计体系都应该使用的通用元素列表。但是,很多UI设计体系会共享一些元素,在创建设计体系时,我们应该要先考虑公共的通用元素。

排版规范

2. 创建设计的10个关键步骤

2.1 对当前设计过程进行分析

为了更好地创建设计体系,Pixso设计师认为设计师需要先了解与分析当前公司的设计方法,明确以下3个问题:

  • 现有的设计流程是什么?

  • 现有的设计工具有哪些?

  • 整个产品团队的设计水平如何?

通过以上问题的了解,有助于帮助我们更好的判断该如何更好地引入UI设计体系。

分析设计过程

2.2 明确品牌语言

在定义UI设计体系的视觉语言时应基于品牌语言(颜色、字体、形状、动画、声音和音调)进行。在制定设计原则和风格规范时将品牌语言考虑进去。

明确品牌语言

2.3 UI审核

产品设计中最危险的问题之一是设计重复,这会导致碎片化,而碎片化会导致不一致。识别设计元素的重复有助于团队避免团队成员从头开始构建元素却发现已经存在类似版本的情况。这就是为什么对产品中的所有视觉组件进行分类应该是设计团队在创建设计体系之前首先要做的任务。通过UI审核,明确以下问题:

  • 突出显示产品的不一致问题

  • 明确最重要和最常用的元素和组件

UI 审核是一个多步骤的过程。首先必须确定主要的 UI 属性,例如颜色、字体、图像,然后才分析这些属性将如何在组件中使用。

如下图所示,这里推荐大家使用Pixso的团队资源库,发布通用的元素组件,可以有效避免团队成员间重复创建类似的组件元素,消除团队在构建产品时所用组件样式不一致的问题。

Pixso团队资源库

2.4 定义设计原则

了解设计决策背后的原因对于创造卓越的用户体验至关重要。这就是为什么在建立系统的设计原则时,必须围绕一组明确的目标来协调团队以保持一致性和平衡。设计原则真正反映组织的价值观并符合整体愿景至关重要。

设计原则

2.5 创建组件

收集产品所需的UI组件,根据用户需求或者业务目标进行评估,考虑是否要留下该组件。

创建组件

2.6 定义设计规范

设计体系的主要目标之一是扩展创意方向。系统不应将设计人员锁定在特定的设计方向上。相反,它应该为设计人员和开发人员提供一个框架,在他们选择遵循之前提供足够的自由来探索各种方法。在定义设计体系规范时,既要条规严格,又要有宽松的规则,以满足多样化的需求。

定义设计规范

2.7 制定治理策略

设计体系是动态的,并且它们总是在不断发展。这就是为什么在设计体系中定义批准更改的过程至关重要的原因。创建清晰的治理策略对于确保设计体系能够适应变化至关重要。 常见的治理模型有孤立模型、中心化模型、联合模式三种。孤立模型中,一个直接负责的个人或一群人统治着设计体系。在中心化模型中,一个团队负责系统并指导其演进。在联合模式中,几个团队的几个人负责系统。

2.8 定义元素的结构

许多设计体系都遇到过功能元素重复的问题,团队成员创建的组件过于专注于单一用例。结果,系统变得不灵活,并且其用户(设计人员和开发人员)每次需要覆盖新场景时都必须创建新组件。然而,成功的设计体系需要高度可重用,具备很强的可扩展性。因此,在创建设计体系组件时,Pixso设计师认为我们应注意以下几点:

  • 模块化组件,通过模块化的组件有助于创建可重用和可互换的组件。

  • 可组合,可通过现有组件来创建新组件。

  • 可定制,可以调整和扩展组件以使其在各种环境中工作。

如下图所示,为Royco设计体系组件搭建应用示例图。

模块化组件

2.9 确保团队使用共享语言

设计体系的根本目的是促进团队的工作,这就是为什么鼓励每个人使用它比构建一个更重要的原因。设计体系应该集成到团队的工作流程中,成为设计师和开发人员日常生产力的关键部分,并为团队成员提供价值。

如果你刚刚开始将设计体系整合到组织的设计过程中,请进行一系列访谈以了解相关人员如何使用它,并使用这些信息来调整设计体系。 

团队使用共享语言

2.10 沟通变更

一旦团队开始使用设计体系,就必须将更改和更新传达给整个组织。定期发布更新并附上更新日志。日志应该告诉用户新版本中引入了哪些更改以及升级将如何影响他们的工作。

布局示例

3. 推荐使用Pixso创建设计体系

通过以上信息的了解,详细大家对设计体系的构建的关键步骤有了较为清晰的认识了。这里Pixso设计师再给大家推荐一款创建设计体系的工具即Pixso,帮助大家在团队中推广设计体系更事半功倍。

Pixso专为用户体验设计师设计,采用组件化设计理念,让高保真原型设计到交付体验从始至终,节省大量其他重复、乏味的工作时间。另外,Pixso是基于云端浏览器运行,无需下载安装客户端,对于设计体系的在线协作应用方面,拥有显而易见的优势。

最重要的是,对于设计体系的构建方面,Pixso在资源社区功能,提供大量业内知名规范素材,方便我们学习借鉴,快速创建设计体系。

总的来说,Pixso在创建设计体系方面,非常方便,推荐给大家!

Pixso协作功能