设计设计一致性的追求
对空间、间距的定义上，画布和代码的逻辑往往不相同
这是一篇躺在我Bear笔记里的一篇文章，看样子像是一篇演讲稿。但我完全不记得啥时候讲过这个。从这个职业诞生之日起，设计师们就在追求产品实现的精准。设计工具的演变
在UI设计还没那么流行的时候，设计师主要用Photoshop来设计界面，在设计图上标注尺寸，并切图。正如软件名所揭示的，Photoshop虽然能处理一切类型的图片，但它更适合处理摄影、海报。所以那个时候做UI是很痛苦的，画起来麻烦，交付给开发也折腾。Sketch从这一版开始，成为了一个易用、强大、高效的矢量绘图软件。（简单介绍矢量位图区别）。对，跟AI是一个性质的。但AI更适合画插画，适合做视觉效果。而Sketch更适合做有层级有组织的界面设计。从这时候开始， UI变成了一个人人都能上手的工作 。正是因为sketch在UI设计中的统治地位，UI设计师们才能用上苹果电脑。思路的转变
但是设计师的追求并没有就此止步。刚才说到，Sketch是一个高效的矢量绘图软件。问题就在这，它仍然是一个“绘图软件”。而UI设计，按照我的看法，应该属于“工程”。UI不是插画，画完效果图拿去打印就好；UI设计不仅需要关注iMac上的显示效果，还需要关注开发出来的实际效果。因此如何把Sketch中的设计准确地传达给程序员，最终准确地实现，成为了一个大问题。为此Sketch做了很多优化和更新。比如Text Style，我设置好一个文字的样式：字体、字号、行高、颜色，当其他人在设计的时候引用这个文字样式，他不需要设置具体的参数，字体就会保持一致。如果原始的样式有了修改，所有引用到这个样式的地方都会同步修改。再比如Library，将一个组件添加到symbol，其他地方引用了这个组件也都会保持一致、同步更新。对一致性的追求
然而这只是设计稿的统一。我们应该如何把设计稿上的参数准确传达给开发？最开始是直接在设计稿上叠加标注参数，遇到不太讲究的团队，程序员直接在图上量尺寸，用取色器取颜色。这样显然不利于维护。然后有了Sketch Measure，可以把sketch设计稿导出为html文档，将这一套文档发给程序员，他们用浏览器打开，可以查看每个部分的详细参数：尺寸、间距、颜色、阴影等。但这种方式需要将sketch导出、压缩、发送。如果修改一次就要重新导出一次。稍不注意就会导致版本的错乱。再然后有了蓝湖/Zeplin。设计师可以把设计稿上传到网站上，由蓝湖将其转成可以查看标注的网页。这样设计师只需要上传修改过的部分，剩下的都交给蓝湖。于是从去年年底到今年上半年，我们整理了原来的设计组件，定了规则。我做了Sketch Library文件，虽然因为历史遗留问题留下不少不合理的组件。还写了文档，生成一个网站。还做了一个网站，将icon导出到一个gitlab项目里，就会自动部署到这个网页上。- 如何从根源上统一设计元素
- 如何存储设计文档并且易于搜索
- 如何用最少的精力维护组件库和文档
- 如何保证设计稿“总是最新版”
工具的选择
一些产品和开发同事应该知道，今年我们有一些项目和设计规范是通过Figma交付的。Figma是一个异军突起的设计软件。它的特点是基于Web，跨平台，在浏览器里也能用。因此这是实时的。你可以理解为设计界的Google Doc。今年上半年我开始推广Figma，主要是它解决了原来很难解决的问题：- 产品设计逻辑比Sketch更合理；
- 所有数据在线实时同步，不会有“是不是最新版”的困惑；
- 所有人看到的都一样，因此不需要设计师手动切图，一切由开发自助搞定；
- 不像sketch文件越积越大，难以存储；
- 同步更及时，对规范的应用会更好。
我在Figma里做了一套新的组件库，在一些项目中开始使用。还请前端同事写了个程序，监控组件库的变动，并将变动推送到相关微信群。团队的选择
然而经过一段时间的试用，设计同事全票否决了整体迁移到Figma的方案。我没有注意到，不是所有人都像我一样买那么贵的梯子的。因此在试用Figma的那段时间内，他们经常遇到打不开文件或者需要很长时间才能加载的情况，更不用说在会议室经常没有网了。另外Figma的理念也和sketch略有不同，因此导致很大的不适应。所以目前只有我还在用。展望
其实折腾这么多，我们的目的都是一致的，就是尽可能保证不同的人设计出的产品像是一个人设计出来的，并且开发出来以后也是如此。所以工具的选择不是为了折腾，而是为了更好地实现这个目标。目前我们通过公司网盘同步Sketch Library文件，用蓝湖上传标注。同时也会加强内部的审核，保证设计规范的推行，尽量。另外也会做一些技术方面的学习，从工程师角度优化设计。但我不保证未来不会切换软件，毕竟，什么工具更有利于工作，就用什么工具。 评论