使用 Adobe XD 来规范团队的产品设计

我们团队的产品设计一直是一个老大难问题。字号及配色一直都没有一套统一的规范。结果就是每次搞开发时，都从头来一遍设计，或者等客户自己出设计，然后客户再一再推翻自己的设计。。。导致反复返工，时间一长就没啥利润了。以致我都不太敢去接客户网站的项目，接了就是等着亏钱。

这不，上周五去青岛，在现场因为字号乱的问题，被客户当面羞辱了一顿。我都不好意思抬头看投影上的网站界面，太惨不忍睹了。于是从青岛回来，我就一直在思考如何能形成一套设计规范来规避设计问题。

网站、小程序的界面排版可复用，可测试化。形成一套 SOP (Standard Operating Procedure)，省的每次靠发火、靠喊，既上火，又没有效果。遇到问题，不应该以责备为主，而是发现管理流程上的疏漏，制定原则及工具，但是发现不遵守时才应该责备及处罚。

开始只是想定个规范，例如几个字号，几个配色方案。于是看了一遍苹果、Google 及微信团队的设计规范，整理了一篇 字号、字体在网站、小程序、APP 中的规范。但是这个很难从流程上去规避问题，大家不遵守还是不遵守，没有美丑概念的前端还是照样乱来。周一的时候无意在一个客户群里发现一个设计大神在使用 sketch + flinto 工具组合来出设计稿，然后放到蓝湖上共享给我们。效果非常的赞，感觉比我们专业一万倍。。。

sketch 还是非常靠谱。确实，我看 google material design 直接提供了 sketch 的配置。说明 sketch 是目前软件开发行业的标配。所有的大公司的设计规范都会出 sketch 的资源配置文件。

但是 sketch 只能在 Mac 上使用，而我们团队目前除了设计用 Mac，其他开发人员不是 Windows 就是 Ubuntu，无法统一使用 sketch。我家里也是 Windows 10 变成了主力开发机，Macbook 已经落灰。另外我还是倾向于前端开发人员也能懂一点设计，在一些基本的简单的业务场景下能够自己出设计稿，例如，支付流程，订单管理等。另一个问题是，sketch 的付费也个麻烦，不是一次性付费，需要每年交 99 刀的年费。虽然不贵，但是架不住人多，而且每年都要交。

于是我决定找一下 sketch 的替代品，Google 了半天还真发现一个不错的 Adobe XD。

以下是几个大厂的支持

https://docs.microsoft.com/en-us/windows/uwp/design/downloads/

其中 Adobe XD toolkit 更新最为频繁。

在导入图片时，支持的工具

https://developer.apple.com/design/resources/

可见，Adobe XD 的生态还是没啥问题的。

左侧功能区域可以作为字体、字号及配色的规范，即设计师规定几个主色，及字号，设计稿中的主要功能页面都需要遵守这个规范，开发人员如果想自己出部分功能的设计稿，只能从这些预设的字号及色彩中选取，尽可能地不用自由发挥。

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式