浅析设计中台在软件设计开发中的应用

吕洪波 杨登丰 李正奎

摘要：本文针对应用软件设计开发中面临的重复设计、重复开发、体验不一致等问题，提出一种以设计中台为核心的解决方案，并对其发展阶段、应用模式及适用人群等进行阐述。

关键词：应用软件设计;设计中台;交互设计

一、前言

应用软件设计评审时，设计师发现自己绞尽脑汁做的设计方案其他产品早就做过，而且还比自己做得好;应用软件研发时，相同的功能在不同的软件产品中形态千差万别，实现后也常常说改就改;用户使用应用软件时，同部门出品的A产品与B产品在交互操作、视觉风格等用户体验上大相径庭……

这些场景是不是似曾相识？其实这是很多研发团队面临的典型设计困境：重复设计、重复开发、用户体验不一致。

这些问题的出现从系统研发的各个阶段，有多种因素造成。本文主要针对UI和交互設计阶段，针对典型设计困境：重复设计、重复开发、用户体验不一致。提出了以设计中台为核心的解决方案，希望通过设计中台的构建与应用，提升设计能力、规范设计模式、减少重复开发，最终提升软件品质，优化用户体验。

二、我们面临的设计困境

近年来，各领域信息化建设大潮席卷而来，应用软件的研制需求井喷式增长，数量、质量要求呈快速上升态势。以往的“项目经理提功能需求-设计人员出原型设计-开发人员编码实现”单线程工作模式让人力资源日益捉襟见肘。同时，由于设计人员理念、风格和能力的差异性，项目间设计人员信息的不对称，同一个问题存在多个解决方案，最终造成了以下尴尬的局面：

1. 项目/产品间用户体验不一致

某一个重点项目投入设计力量多，经过多轮评审后投入研发，用户体验非常良好;但另一个临时项目由于时间紧功能多，最终效果只能说覆盖了功能点，用户体验优化工作滞后。

2. 同一项目/产品内用户体验不一致

某大型项目由于前后有多个设计人员参与设计，每个版本的交互方式都不一样，项目内光是表格样式就有五、六种，一个模块一种风格，造成研发输入不一致。

3. 用户体验得不到完美落地

某项目紧急上马，大家都知道用户体验很重要，但由于研发资源不足、进度安排时间紧……最后放弃用户体验方面的细节优化。

三、解决策略

对于企业而言，大量项目的定制研发在带来利润的同时，人力资源紧缺成为不可忽略的现实问题。传统的“一对一设计+点对点服务”模式不能满足效率、质量、成本之间的协同效应，基于此，对于项目范围，特别是基于需求可视化的设计方式，提炼设计模式，形成“一对多设计+点对面服务”，提升设计规范性和通用性的需要日益迫切，设计中台应运而生。设计中台将设计人员、产品经理、研发人员从大量重复工作中释放出来，使各产品的用户体验保持一致，也确保不同能力的设计、研发输出同等质量的成果;其次，设计中台避免了无谓的“重复造轮子”的资源浪费，让设计人员把创造力专注在最需要的地方;同时设计中台也降低了设计门槛，能让更多了解业务的人参与进来，真正做到“人人都是设计师”。

四、什么是设计中台

所谓中台，是通过制定标准和机制，把不确定的业务规则和流程通过工业化和市场化的手段确定下来，以减少人与人之间的沟通成本，同时还能最大程度地提升协作效率。其目的是提高企业快速低成本创新的能力，减少沟通成本。

应用软件设计中台是由可视化元件、组件、模块、典型页面、功能解决方案以及设计规范等设计资产组成的设计资源池，用于指导各产品快速、高质实现新增业务设计方案的工具。

设计中台明确了统一的评价标准，是各产品的设计指导方向，使各产品的设计风格保持统一，不会往不同的方向越走越远，不同类型的产品间能实现视觉统一性、操作一致性和数据互通性。

设计中台提供不断更新进化的系统性解决方案。当需要设计一个常用业务流程时，都可以从设计中台迅速找到推荐方案，从功能到页面、到组件元素都不再需要设计人员重复决策。

设计中台还是可直接调用的资源池。设计人员原型设计时，设计中台提供从元件到解决方案的不同粒度的设计资源;对研发而言，可直接调用与设计中台匹配的代码化组件，推进设计方案的快速落地。

五、设计中台的内容

1. 设计原则

从设计理论和实践总结出的代表性问题及对应的处理方法，是设计过程中所依据的准则。如易用、美观、高效，以及简化交互、即时反馈、对齐等。

2. 设计规范

设计规范确保页面统一规整。规范内容包括设计中的基础元素，如网格体系、颜色、字体、间距、圆角、对齐方式等。它决定了一套可视化设计组件库的最基础的形态。

3. 元件

元件是原型设计中能被调用的最小单位，因其粒度足够小，故而具备了最大的灵活度，能被充分运用于各种新/老业务场景。如按钮、输入框、下拉选择框、标签、步进器等。

4. 组件

组件是元件的集合，其存在目的是解决元件滥用导致的软件产品质量不可控的问题，组件通常就是基于行业标准化和设计语言形成的功能最优解。如表单、卡片、查询过滤、提示反馈、帮助等。

5. 典型页面

典型页面是将一些高频场景组装成现成的页面，其目的是让设计者“上手即用”，无需再从无到有地用元件组件搭建页面。使用时根据业务需要选择类似结构的页面模板，稍加改动即可快速原型图。如注册登录、统计看板页面、列表页面、详情页、结果页等。

6. 功能解决方案

元件组件解决了页面元素级的设计问题，设计中台指导设计人员在什么情况下使用什么样的元素，并且提供直接调用的元件;

典型页面解决了页面级的设计问题，设计中台指导设计人员在什么情况下使用哪种的页面，并且提供可直接复制的页面模板，只要按需适当调整内容即可;

而功能解决方案解决的是更高一层的问题，多个页面按既定的规则形成一个完整的交互链路，来直接覆盖一些常用流程化的操作。即将典型通用功能的解决方法通过提炼、封装，规定某功能采用哪几个页面、页面之间的关系如何等。在各产品实际业务中可直接采用的一整套完整方案。

六、设计中台的发展阶段

设计中台的发展通常分三个阶段。

第一阶段，主要是以元件组件为主，设计师用元件组件搭建出页面;

第二阶段，元件、组件在业务的牵引下演变等更具针对性，在原型设计时，以典型页面的形式来覆盖业务，具有一定的业务属性;

第三阶段，加深与典型业务流程的耦合，在某些业务场景下，甚至可以脱离设计资源的投入，设计中台提供的解决方案与前端技术框架对应，直接对接后台数据便可完成业务需求落地，是设计中台最为理想的状态。

七、设计中台的搭建方法

企业搭建设计中台，通常有二种方法：

1. 梳理以往产品、项目，基于积累的元件、组件、典型页面资源库，在此基础上提炼共性组件，在行业常用业务场景下，搭建设计中台。

2. 基于开源的设计组件库，结合企业自身行业和业务特点，对进行二次设计和整合，搭建设计中台。

在使用的过程中，根据业务的拓展和需求的反馈，设计中台会不断迭代更新。面对不同产品不同业务的纷繁需求，不能全盘接收一概采纳，要过滤出真正的诉求，以专业的设计原则合理规划。同时也要基于行业特征，以前瞻性的视野为业务的发展准备未来解决方案。

八、设计中台的使用及落地

设计中台搭建之后，设计人员或产品经理拿到业务需求后，对照手边的设计中台资源池，优先选用功能解决方案，其次选用典型页面快速形成原型界面。如没有合适的典型页面，再从元件库中挑选元件拼装界面。元件库也无法满足的，再根据实际需求定制化设计。通过这种积木拼装式的方法，解决约70%的常规业务需求，特殊需求经评估后进行个性化设计，实现“基于模式提升效率，兼顾个性确保品质”。

设计中台的落地，则需要从需求分析、原型设计、视觉形态、技术实现等方面着手，整体统筹规划，需要考虑以下几个方面：

1. 通用性与特殊性的平衡：设计中台在推行过程中必然会遇到通用性与特殊性性的矛盾，此时便需要设计师来把握边界，建立二者的共存机制，这也是对设计中台能否长久生存的考验。更好的通用性能够让设计中台应用更多场景和业务，也具备更长久的生命力。

2. 匹配技术实现框架：要让设计中台自身价值落地，单靠设计层面的建设是不够的，还需要与开发人员配合，建设成套的技术实现框架。倘若对应的技术实现和成套的代码化组件有所缺失，设计中台就只能服务于设计师本身，而不能真正扩散到产品、研发等上下游角色。同时也会因为缺少代码化沉淀，而不具备节约研发成本的基本诉求，对于企业内的不同部门也缺乏约束力、说服力。

3. 设计能力的传播：设计中台的出现，讓界面原型设计变得和堆积木一样简单。设计师以外的产品相关干系人（如产品经理、研发等）通过学习基本的排版规则和设计理念，也能自行组装出常用的典型页面，设计师不定期举行设计中台相关培训和交流，通过对原型设计工具、组件元件库、设计基本原则、排版与布局方式等方面的讲解，来帮助非设计专业人员掌握基本设计技巧，提升彼此的协同效率。

九、适合使用人群

1. 设计师。使用设计中台做原型设计，能提高设计效率，规范和统一视觉交互体验。设计师应负责设计中台的需求收集和过滤、资源库的实时迭代更新以及设计中台相关的宣传和培训。

2. 团队领导。利用设计中台的快速原型能力能更直观的理解系统、帮助决策。团队领导应自上而下的推行设计中台策略。

3. 产品经理。设计中台降低设计参与门槛，产品经理通过可直接上手做页面原型设计，降低沟通成本，保证项目进度。产品经理应参加培训使用原型设计工具，并使用组件库搭建原型。

4. 前端研发。设计中台有助于前端研发者更高效的理解设计思想，参与设计，降低沟通成本。前端研发应通过学习了解最新设计组件库的方式直接参与业务。

设计中台提供了规范统一的视觉和交互模式，形成动态迭代、持续优化、兼容吸收业务场景模式和解决方案，通过设计中台不断沉淀积累的设计资源，设计师提高设计效率，有效支撑团队形成统一产品风格，非设计专业人员也能快速上手简单的原型界面搭建，再结合与之配套的前端技术框架、设计理论培训，不断共享和提炼设计与研发模式，以应对更多不确定性应用场景和业务需求，进而提升整个团队的竞争力。

参考文献：

【1】Jenifer Tidwell.界面设计模式[M].东南大学出版社， 2011-5：25-40

【2】GB/T 20527.1-2006.多媒体用户界面的软件人类工效学，第1部分：设计原则和框架[S].

【3】海顿·皮克林.包容性Web设计[M].人民邮电出版社，2017-7：65-93