Skip to main content

插件端 AI 策略设置

本篇以 PS 为例,Sketch、Figma 操作相同

CodeFun 的产品逻辑是希望尽可能由算法完成所有的识别工作,但是受限于 Photoshop 这一类设计软件图层的复杂程度,部分场景下难以完美还原图像特效、以及输出合理的 HTML 代码。

所以我们在插件端提供了一个设置面板,用户可以对设计稿某个区域的算法策略进行控制。当 AI 算法在云端工作时,会优先以用户设置的策略为主。

目前我们提供了最基本的两个策略

  1. 切图策略
  2. 保留当前分组策略

受限于设计软件本身的机制,为了让用户更方便的查看到某个区域的策略,我们会在设计稿的图层或者分组上名字上添加一个标记,用于告知用户这是一个有某种策略图层。

我们的策略语法是以 %xxx% 作为图层名字的开头,比如原来的图层叫做“支付列表”,添加了“保留当前分组”策略后,会变为“%group%支付列表”。如果用户在后续的设计过程中,破坏了这个名字规则,则该策略也会随之失效。

标记后图层语法效果

切图策略

对于设置了“切图策略”的图层或者分组,上传设计稿时会将其整个区域翻译为图片

先切图再上传,有利于在算法推算布局时提供良好的结构、优化翻译质量。同时,PS 上某些无法用 CSS 翻译出来的特殊样式图层,也可通过设置切图解决,从而避免特效丢失。

案例

比如以下设计稿:

未切图前,我们尝试用 CSS 还原设计稿 UI,不仅会引入不必要的分组结构,中间的艺术字也因为缺失字体,造成还原效果和原稿有差异

  1. 标记切图策略之前

标记切图前

  1. 标记切图策略之后

我们可以看到,相同区域的分组十分整洁、艺术字体也得到了完美展示。

标记切图后

操作

  1. 打开插件
  2. 点击 AI 策略设置标签页
  3. 选中设计稿中需要切图的图层
  4. 点击切图按钮
  5. 标记成功后,图层名称会加上 %image% 前缀
  6. 切回主页,将打标签后的设计稿上传

标记切图操作

注意:一次只能对一个图层设置切图标记。若需将多个图层切为同一张图片,可先将它们编组,再对编组切图

保留当前分组策略

为了避免设计师不同设计手法、风格或者软件使用习惯带来的误差,AI 在云端工作时会忽略全部的原始分组信息。但有些时候用户的分组非常完美,不希望AI 去干涉它,所以我们提供了一个叫做“保留当前分组”的策略,用户对某个分组设置了该策略后,AI 会保留当前的原始分组结构,以用户的分组意图为优先。

案例

比如以下设计稿:

标记分组前,可以看到第二个列表项的文字与图片没有分到一起,分组逻辑有点问题。只能借助编解组功能调整

标记分组前

对原始设计稿两个列表项所在分组,分别设置保留分组策略。上传后可以看到相同位置的分组变得合理,而且自动识别出了 List

标记分组后

操作

  1. 打开插件
  2. 点击 AI 策略设置标签页
  3. 选中设计稿中需要保留的图层组
  4. 点击保留当前分组
  5. 标记成功后,图层名称会加上 %group% 前缀
  6. 切回主页,将打标签后的设计稿上传

标记分组操作