妙多技术
AI 生成 UI 背后的工程实践
樊锴
Adobe 工具的深度用户
从大学起，我陆续使用过多款设计软件。这些工具有些已经被淘汰了，有些使用频率不高，只有 Adobe 工具被一直沿用下来。多年下来，我也成为依赖度很高的深度用户。一是因为其自身强大的产品功能，比如 Illustrator 的矢量编辑、Photoshop 的图像处理，这些功能让我在做视觉设计时非常方便；二是因为其庞大的用户基础，我的合作方几乎都在用 Adobe，日常协作也更加顺畅。虽然这两款工具也有一些不便之处，但是瑕不掩瑜，对于视觉设计师来说，确实是不二之选，难以替代。
从 Adobe 切换到 Motiff 妙多
加入 Motiff 妙多时，我发现团队内不同工种同事的工作大都在 Motiff 里完成。随后这款自研工具进入内测阶段，作为团队一员，将工具切换到 Motiff 成为一种必然。
但 Adobe 工具已经用着很顺手了，我也不禁有些疑虑。Motiff 作为一款界面设计工具，肯定是更贴合产品设计师的工作场景，它能否满足视觉设计师的工作需求呢？与 Adobe 相比，处在内测阶段的它产品功能是否完善？会不会限制发挥而降低工作效率？带着这些疑虑我开始了一段时间的试用，先从一些小项目练手，再逐步切换。
如今，我已经将工具切换为 Motiff 一年多了，当我 95% 以上的日常工作都能在 Motiff 里丝滑完成的时候，完全打消了以前的顾虑，也获得了一些实践心得。如果你也有同样的问题，不妨一起来看一下。
云端存储与协作
不用传来传去
之前我在工作中经常遇到这样的场景：
1、居家办公，但相关的素材文件遗忘在公司电脑上；
2、软件版本不同，设计文件无法打开，需要升级软件；
3、文件需要导出后通过 IM 软件才能分享给他人；
4、个人文件存储杂乱，团队文件找不到，需要的文件要找很久……
类似这些看似不起眼却又很真实的问题，其实也是设计师们的日常。
过去我会把这些文件上传到团队资源库或者网络云盘里，等需要的时候去查找。
而现在，这都不再是问题。因为 Motiff 是基于浏览器的应用，跨平台兼容，无需下载安装，让我随时随地打开浏览器就能设计，工作台的模式结构清晰，设计团队可以根据需要建立多个文件夹，当需要某个设计文件时只需搜索一下，就可以快速定位到文件。
例如 Motiff 妙多设计团队专门建立了一个名为“规范及资产”的项目，在日常工作中积累下来的设计规范、素材、模板等资产都沉淀其中，方便更新维护，保证大家使用的文件都是最新版，对于个人及团队文件管理来说简直太方便了。
多页面多画布
多页面目录竖向排列在左侧面板上，我也慢慢养成了文件管理的习惯，把设计调研、草稿、验证方案、设计交付等按照分类独立成页，让设计过程可追溯查找。另外，如果一个项目有多个版本，单个版本下有多套方案，可以排布在同一个页面下，方便不同版本的方案进行对比和分类管理，更加直观。
项目协作
另外，在我们团队中，很多项目需要跟产品经理、产品运营、产品设计等职能协作完成。
以我为 Motiff 妙多官网设计的产品功能配图为例，我做完设计方案后，设计稿需要被多方评审，还需要适配产品设计师的页面框架。
使用 Motiff 后，只需要一个文件链接，产品和运营的同事就可以同步进行编辑和审阅，其内置的评论功能支持团队成员间发表评论、回复评论，实现了线下评审转线上，进一步提高了评审效率。通过文件链接，研发同事在研发模式下也可以很方便地查看尺寸、间距、样式等信息，自动识别图标元素、批量导出，从而简化了传统设计流程中标注和切图的步骤，解决了设计师的使用痛点。
因此，Motiff 带来的远超 Adobe 工具的丝滑协作体验，也是切换工具对我来说非常重要的受益点。
在线编辑器竟然不卡
回到工具本身，性能和功能使用的顺滑程度可能是视觉设计师最为关心的问题。
基于原生系统开发的 Adobe 软件本应更好地利用本地硬件资源，但这些软件实在是太吃内存了，卡顿、文件崩溃时有发生，等待进度条更是工作日常。因此，我对基于浏览器开发的 Motiff 妙多的性能更加怀疑，这也是我在使用 Motiff 之前的一大疑虑。
但 Motiff 的性能表现有些超乎想象。
来看我工作中的一个例子。下面是在 Motiff 妙多团队筹备全球发布会期间设计的产品演示文档，近百页的内容排布在同一个页面。以往像这种大体积的文件，我在 Adobe 里编辑很卡顿，但在 Motiff 妙多里反而很流畅。它很快，同时操作近百个画布也没有卡顿，像拖拽、缩放、复制也都没有问题。
在使用 Motiff 之前，很难想象一个基于浏览器的设计工具可以做到如此流畅。关于 Motiff 妙多技术研发团队如何保障工具性能，感兴趣的朋友可以看看《Motiff 妙多：高性能的背后》。
Motiff 的矢量绘制更自由
如果把 Motiff 完全当成矢量设计工具来用，你就能收获一个可以自由绘制的无限画布。
相较于传统软件，Motiff 的矢量网络绘制更自由，使用钢笔工具可以快速绘制一个形状，无需重新连接到起点即可完成闭合，并可以选中锚点进行任意编辑，很多细腻的效果也都没有问题！
像下面这样的设计案例，Motiff 也可以做到细腻的渐变色和背景模糊效果。它有丰富的图层混合模式，使用布尔运算进行并集、交集、减去等操作可以保留图形的原始形状，方便进行二次调整。调整后，再进行色彩渐变、投影、模糊、遮罩等的调整就可以了。
除此之外，Motiff 还支持粘贴 Illustrator 的素材，在矢量绘制上可以完全替代 Adobe 工具。
组件、样式、自动布局，并不是 UI 设计师的专属
在 Adobe 工具中没用过的功能，也让我体验到了产品设计师的快乐。
组件
对视觉设计师来说，品牌 logo 可能是复用率很高的一个素材。而 logo 往往有不同的版本——中文版、英文版、横版、竖版、及是否带 slogan 的版本等等。把各个版本的 logo 做成组件，后续不管是我还是团队中其他同事，做设计项目时就可以轻松调用。当组件被更新，接收到提醒后，我们也能随即更新历史文件，不再需要像以前一样人工排查，轻松维护品牌准确性和设计一致性。
样式
当我要设计一个新的 icon，而 icon 的色彩和效果还想引用之前的样式时，在 Adobe 工具里，我需要进行如下操作才能把两个 icon 的样式做到一致。
- 1.吸取颜色；
- 2.查看效果参数；
- 3.复制参数；
- 4.反复检查比对效果以防出错。
而在 Motiff ，只需应用样式属性，新的 icon 就完成了，省事省力，还不会出错。以上方法也可以同理到一个卡片，甚至一个完整的用户界面。
自动布局
自动布局是一个听起来就很酷的功能，用起来也是相见恨晚。
当我设计好了一个海报，但是业务方突然想在海报上增加一个标签。如果是在 Adobe 文件中，我需要：
- 1.把做好的文件打散；
- 2.插入一个模块；
- 3.重新排版。
对于视觉设计师来说，这其实是繁琐且低效的工作，一个小的改动常常要调整很久。
接触到自动布局后，我尝试着给这些复用率较高的海报打上自动布局，在需要增加标签和修改文案时，我只需要调整局部，整体设计就会自动跟随调整，我不再需要像以前那样对着各个模块逐一拖动，大大节省了设计时间。
以下场景 Motiff 可与 Adobe 结合使用
Motiff 虽然在性能、功能和使用体验表现出色，但因其定位是一款产品界面设计工具，在图形图像处理时，尤其是位图的处理上，还是存在天然的不足。
我在使用 Motiff 的过程中，也遇到两个明显的问题：
1、设计复杂的视觉效果时，我还是需要切换回 Adobe ，使用风格化、3D、扭曲、模糊等滤镜效果；
2、设计线下物料，诸如针对展会现场发放的产品手册、手提袋、贴纸等礼品时，Motiff 无法支持线下印刷时常用的 CMYK 色彩模式，无法输出印刷尺寸及 300dpi 的文件。
因此，我选择分场景、结合使用 Motiff 和其他工具——我的大多数工作在 Motiff 中完成，但遇到设计复杂视觉特效时，我不仅会结合 Adobe 工具，也会利用当下流行的 3D 及 AI 工具来结合设计。而在面向线下印刷品的设计时，Adobe 工具则是主要选择。
以上就是我的一些实践心得。
关于从 Adobe 到 Motiff 妙多的切换成本，我认为大多数的设计软件对设计师来说都极易上手，各个工具的基础操作也都大同小异，看下教学视频和帮助文档也就学会了，Motiff 妙多就是如此。
如果你在目前的工具使用中也遇到了产品性能、团队协作、工作体验上的痛点，不妨尝试下 Motiff 妙多。欢迎更多设计师与我们交流互动，分享设计工具的实践经验。
继续阅读
