如何提高设计还原度？做好这5个方面就够了！

作为软件产品的设计者，你是否有过设计还原度的困扰？比如开发的界面总是对不齐，界面颜色、组件行为总是不统一，排查设计问题需要大量的时间，并且总是没办法根治？

作为一名资深设计师，今天我和大家分享下在设计还原度方面的一些方法和思考。

一、什么是设计还原度？

设计还原度是指设计以及最终产品符合顶层设计理念和设计规范，在不同界面、不同系列的产品中，保持相应的一致性，严格还原设计稿。设计还原度除了指界面上的还原度外，交互和动效设计的还原度也包含在内，今天我们重点分析UI设计和交互设计的还原度问题。在业内，我们常说设计还原度低，是指最终开发完成的产品未还原设计。

常见的设计还原度问题包括：

• 基本界面还原问题，通常以不符合4大基本设计原则（亲密、对齐、重复、对比）的形式出现。

• 界面一致性问题，比如不同界面的按钮尺寸、样式不一致，颜色存在细微差异等。

• 交互一致性问题，比如产品中不同弹窗的弹出和关闭方式，是否都支持使用Esc、Enter快捷键等交互细节差异。

• 不同平台的自适应问题，比如设计稿是iOS的，但还要开发H5和安卓平台，进而导致的适配问题。

• 功能未还原，比如漏掉了界面元素或某种状态，导致产品功能不如预期。

二、还原度低的原因有哪些？

设计还原度低的原因错综复杂，软件开发的各个环节都可能对还原度造成影响，我们主要从设计阶段和开发阶段进行分析，并给大家分享我们团队的解决方案。

1、设计阶段

设计阶段是定义最终产品的重要环节，分析还原度问题，源头是重点考察的因素，根据我的经验，设计阶段以下环节很容易出问题。

1）规范定义和维护问题：团队如果有多名设计师，需要制定明确的规范维护、更新机制，确保大家的信息始终是同步的，如果大家不是采用相同版本的规范的进行设计，势必会在设计阶段便出现不一致的情况。所以设计规范的修订和同步是首要需要解决的问题。

2）设计质量不过关：设计质量一般根据设计师的水平以及设计评审来进行保障，设计评审是设计阶段最后一道关卡，需要有明确的流程和工具进行控制。

3）缺少设计说明：有很多设计思想是设计师之间的默契（或者说设计师的常识），但对于后续工序，比如开发、测试人员，他们极有可能缺少相关背景知识，此时需要补充设计说明给予辅助，明确阐述设计意图。

4）交付流程混乱：设计的最后一个环节是交付给开发，因为敏捷开发的缘故，节奏十分紧凑，设计往往在交付给开发后，还会有一些细微的改动，如何让开发能固定到对应的设计版本进行开发，是很困难的一个管理问题。

2、开发阶段

开发阶段是产品的生产环节，有一句话说得很好：“优秀的产品是生产出来的，不是测试出来的。”生产质量也是开发环节的重中之重，我们也常将设计还原度作为开发生产质量最重要的保障。开发阶段容易在以下环节出问题：

1）开发对的设计稿：这个问题看起来很可笑，但确实存在大量开发开发错了版本的情况。在没有规范的流程下，开发很容易拿着旧版本的设计稿进行开发，直到测试环节才发现一开始的参考就错了。

2）设计语言转换为开发语言：开发的本质其实就是将设计语言翻译成代码语言，这个转换的过程开发主要依赖于设计稿上的标注、说明和视觉效果。看错或看漏说明往往会导致还原度问题；

3）用错变量或不用变量：设计一致性如果要保证，研发侧必须要对颜色、间距等基础内容制定统一的全局变量，便于和设计规范进行对齐。同理要保证所有组件的行为一致，则研发需要封装统一的组件库，通过复用组件代码的方式开发产品，才能确保所有组件的行为是一致。

三、如何提高设计还原度？

我们分析完了还原度低的原因，再一起看看如何通过方法和工具，来提高产品设计还原。

其实问题主要集中在设计阶段和设计与开发的信息同步上，需要确保设计师和设计师之间的协同顺畅，设计师和开发之间的协作高效。

设计师之间的协同主要在设计工具中进行，目前支持协作的工具已经有很多了，下方推荐几种常见的设计工具解决方案：

1、Sketch + 三方云

Sketch作为经典的UI设计工具，相信很多团队仍在使用，但协同问题如果不购买Sketch Cloud就无法使用，这时可以考虑三方的平台。目前能满足云同步组件库、设计源文件的产品只有一个摹客（https://www.mockplus.cn/?home=1），它可以通过插件同步组件库和设计源文件。

2、Web端的设计工具

云端化趋势明显，Figma、摹客DT、即时设计等web端的UI设计工具，可以完美的设计师之间的协同问题。这些设计工具都支持原子化设计，并在win和mac上都可以使用。Figma的组件库如果要跨文件使用，是需要收费的，摹客DT、即时设计等设计工具目前是完全免费的，可以尝试一下，目前我们团队的设计已经全部迁移到了摹客DT，并运行了半年了。

目前Web端的工具都不支持完全离线使用，如果你对离线场景有很高的要求，Sketch + 三方云目前是最好的选择。

解决完设计师之间的问题，我们再看设计和研发之间的问题，主要是三类信息同步的问题：

1）设计规范和开发组件库对齐，开发可以直接在设计稿上获取到变量、组件代码最佳；

2）设计稿标注和说明：开发可以在一个地方看到开发所需要的所有信息，设计说明和设计标注、切图、原型等。

3）设计稿版本和流程，开发可以直接通过开发任务获取到对应的设计稿，并可以确认当前版本已经通过了设计审核。

3、设计规范和开发组件库对齐

这个问题主要有两种解决方案：

1）方案一：设计师在工具中定义组件库文件时，颜色的名字包含开发所需要的变量名，目前无论是设计工具自带的标注功能还是三方协作平台上的标注功能，都能显示出该信息。这样可以解决变量和开发对齐的问题，不完美的是组件代码信息不能关联，同时设计师的体验会降低，因为开发的命名规则和设计不一样，需要设计师做一些妥协。

2）方案二：借助设计系统类的产品，作为胶水层，将设计语言和开发语言做映射，目前此解决方案只支持Sketch，且产品也只有摹客的协作平台支持，其优势是除了颜色、样式变量，还可以关联组件代码。

4、设计标注和说明

自动标注已经很成熟了，三方平台的标注功能比设计软件自带的会好用一些，开发可以直接点选到可见的图层，而不用去选择编组层级，效率会高不少。

重点是设计说明，如果你将说明直接写到设计稿上，不会存在这个问题，如果说明写设计稿上会影响到设计稿美观度，有这方面需求的，则需要专门的设计说明工具了。设计说明工具目前主要有两种：

• 使用图钉添加设计说明：比如蓝湖或设计工具内，你可以用评论的图钉为设计稿添加设计说明。

• 专门的设计说明工具：目前在Invision和摹客协作上有这个功能，你可以连续撰写设计说明，支持富文本和与图层关联。

5、设计稿版本和流程管理

这个方面，我更推荐将设计环节和开发环节分开的方式，即设计师在设计软件中设计，开发在协作平台查看标注。有这样一个区隔后，信息流转会更可控。开发直接到设计软件中查看标注真容易出问题，如果权限没给对，不小心改了设计稿，会带来很多很难追溯的问题。

设计还原度是软件产品中的一个重要问题，它涉及到设计稿与最终产品的一致性。设计还原度不仅关乎界面的一致性，还包括交互和动效设计的一致性。常见的问题包括界面元素不统一、交互细节差异、不同平台的适配问题以及功能未完全实现等。

这些问题的出现可能与设计阶段和开发阶段的多个环节有关，如规范定义和维护、设计质量、缺少设计说明以及交付流程混乱等。为了提高设计还原度，需要确保设计师之间的协同顺畅，以及设计与开发的信息同步。这可以通过使用合适的设计工具和协作工具来实现。此外，将设计环节与开发环节分开管理也有助于提高信息流转的可控性。提高设计还原度是一个复杂的过程，需要从多个方面进行考虑和优化。