前言对于设计师而言，在使用 lottie 的过程中，有两个难点：第一是导出设置项，第二是功能支持列表。是否能熟练运用 lottie 来做动效落地，主要取决于这两部分。在上一篇，花了很多篇幅来为大家介绍 bodymovin（5.9.6）的相关设置项。

前言

对于 设计师 而言，在使用 lottie 的过程中，有两个难点：第一是导出设置项，第二是功能支持列表。是否能熟练运用 lottie 来做 动效落地 ，主要取决于这两部分。在上一篇，花了很多篇幅来为大家介绍 bodymovin（5.9.6）的相关设置项。掌握设置项是玩转 lottie 的基础，那么在这篇，除了功能支持列表，还会为大家介绍更高级的使用方法以及相关注意事项。

超详细！写给新人的 Lottie 快速上手指南（上） 前言 作为 UI 设计师，我们在平时的工作中，多多少少都会接触到一些动效相关的工作内容。

阅读文章 >

位图 or 矢量

相信使用过 lottie 的同学，很多情况是通过 ps/ai/sketch 等软件把样式合并进位图，导入到 AE 中并生成 lottie 动画。导入位图的情况，因为样式都可以合并进位图里，所以相对比较直观也容易控制，遇到的问题也不会很多，在不考虑文件体积或者屏幕分辨率变化的情况下，确实也是不错的选择。

本文想绕过位图这种情况，来讨论一下矢量形状生成的 lottie 动画。因为用矢量生成可以覆盖更多的使用场景，文件体积也相对较小，可编辑性也更强。如果说需要用 lottie 来建立一套动效图标组件库，或者基于网页端和 H5，来输出高清动画表情或 IP 缺省图动画，那么矢量的 lottie 动画一定是更好的选择了。

网站链接： https://lordicon.com/

基于矢量的 lottie 动画，有更好的编辑性和延展性，示例中不仅可以替换图标局部颜色，还可以切换不同风格，本质上还是在改变形状的填充色和描边色。

以上为 Telegram 和 Discord 的贴纸（高清表情）

国外已经有越来越多的应用选择 lottie 来输出动态表情了。这些表情往往动态效果细腻，趣味性强。因为矢量的特性所以在各端上都能清晰的呈现，受到很多用户的喜爱。其中为代表的是 Telegram 和 Discord，里面所使用到的贴纸（高清表情），均为 lottie 动画。

一、功能支持 通过官方给出的功能支持列表，我们可以得知，lottie 对矢量图形有很强的解析能力，并且在 web 端支持的功能是最多的。实际上，web 对 lottie 动画支持的效果是最好的，在矢量动画这部分，lottie 有着很强的优势。现在很多产品的前端技术架构，web 都占有着很大的比重，用 web 来取代其他的原生技术早已是潮流。如果我们的项目前端技术是基于 web（包括手机端里的 H5 部分、桌面客户端里的 H5 部分），那么可以尽情的使用 lottie 来作为动效落地的首选。在 web 端，lottie 拥有着非常广阔的使用空间，本文的内容也是主要围绕 web 端来展开的。

考察不同效果在原生客户端（iOS、安卓、windows 和 Mac）的兼容性成本较高，作者会根据本身经验，对一些常见已知的兼容问题做简单的补充。关于在客户端各端的支持情况，在这里暂不做系统性的阐述。欢迎有了解的同学可以共同交流分享。官方给出的功能列表项目有很多，包含着大量的基础性功能，这类功能我们了解就好。需要格外关注的功能项其实只是一少部分，合理的使用好这些功能，就可以做出很多精美的动画了。在功能推荐时，将会省略掉一些功能，比如：矩形、椭圆、填充、描边、圆角、位移、缩放、旋转、不透明度等这类最最基本的功能。这些功能是绝大多数动效输出工具都可以支持，在这里就不多做介绍了。

1. lottie-web 常用功能推荐：

我从官方众多的功能支持项目挑选了一些常用到的功能，同时也属于 AE 中的基础功能，作为个人推荐。掌握并灵活运用好这些功能就可以做出很棒的动画了。如果是新手可以先以这些功能为出发点，随着对 Lottie-web 逐渐熟悉，再去参考官方给出的完整版列表。

1）解析：「渐变描边」&「修剪路径」

素材来源于 Lottiefiles

「渐变描边」：除了填充属性可以支持渐变，描边也是可以支持的。同样可以支持“线性渐变”和“径向渐变”两种形式。而且不论是填充还是描边，都可以控制渐变的起始点和结束点，从而来改变形状的颜色。这种方式也有一定的使用场景，比如可以让某些矢量插画的背景色进行变化，或者将一个渐变按钮的不同交互状态用这种颜色的变化来表示等。

其他端兼容性：渐变描边在 android、ios 客户端中存在兼容性问题，表现为效果不可见；

渐变描边对客户端运行的性能损耗较大，建议避免过多运用；

「修剪路径」：这个功能通常用来制作路径动画或者字体书写效果。如果一个图层中有多个路径，那么也可以支持各路径“单独”修剪或者“同时”修剪。

2）解析：「蒙版路径」&「中继器」

素材来源于 Lottiefiles

「蒙版路径」：蒙版支持“相加”和“减去”以及不透明度和各锚点的调整。有这些功能就可以帮助我们做出很多不错的动画了。需要提到，蒙版的效果和遮罩类似，根据不同使用情况来区分它们。如果被隐藏的部分需要跟着图层一起动，可以考虑用蒙版，如果被隐藏的部分不需要跟着图层一起动，则可以考虑用遮罩了。

蒙板的性能消耗，跟蒙板的渲染面积以及蒙板的作用对象面积有关。如果在效果上需要做选择的话，优先考虑降级渲染面积大的蒙板。

「中继器」：中继器也是很常用的效果，在制作礼花或者水花效果时常被用到。

3）解析：「Alpha 遮罩」&「Alpha 反转遮罩」

「Alpha 遮罩」&「Alpha 反转遮罩」： Lottie 可以支持 Alpha 遮罩及亮度遮罩，但更为常用的是 Alpha 正反遮罩，所以在这里主要推荐使用 Alpha。

其他端兼容性：遮罩层对客户端运行性能的损耗很大，建议减少使用，或者相同效果下可以考虑用蒙版替代。

4）解析：「修剪路径」&「自动定向」

修剪路径上文提到，不再赘述。

「自动定向」：主体物可以根据路径方向来调整自身角度，一般的路径动画必备功能。需要注意的是，该功能只能使用在 Lottie-web，其他平台暂不支持。

5）解析：「3D 逐字化」

「3D 逐字化」：可以单独对文字进行 3D 化的处理，包含“锚点”、“位移”、“不透明度”、“缩放”、“旋转”等效果。也有一定的使用场景，比如可以作为动态 banner 模板的文案动画，设置好文字动画后，后面可以通过调整代码来修改文案内容，需注意字数尽量保持一致。

6）说明：「预合成」&「时间重映射」&「时间拉伸」

预合成可以用来简化图层结构，时间重映射和时间拉伸可以调整动画最终的节奏。这些功能在动画制作中经常使用，而且在 lottie-web 中也能得到很好的支持，请放心使用！

2. lottie-web 特殊功能推荐「独家」

在实践中，会遇到一些功能，虽然没有包含在官方功能支持列表中，但却能被 Lottie-web 所支持。在文章中会汇总一些本人在工作中遇到的特殊功能。因为目前在网上社区或论坛上，没有看到有对这类官方以外功能的系统性介绍，所以此次的介绍暂且冒昧的称为“独家推荐”，如果有其他功能可以补充，欢迎一起交流~

1）解析：「收缩与膨胀」&「圆角」

「收缩与膨胀」&「圆角」：这两个效果，没有收录在官方功能列表里，但却能在 Lottie-web 中很好的展示，做一些星型和花型的图形动画，或者是圆角变化的动画时，可以考虑使用。

2）解析：「3D 旋转」

「3D 旋转」：在 AE 中打开图层 3D 的开关，就可以使用 3D 相关功能了，目前在 Lottie-web 中还不支持“摄像机”图层的使用（不过利用 oasis 引擎可以渲染出摄像机图层，但成本较高）。需要控制动画整体角度，可以再链接一个控制图层来做角度的控制。需要注意的是，“渲染器模式”目前只支持“经典 3D”，并不支持“CINEMA 4D”，所以通过“CINEMA 4D”来挤出图形厚度的方式在 Lottie 中是不支持的。另外，3D 的动画不要过于复杂，尤其是不要给旋转物体做厚度，否则会出现破面或者图层顺序错乱的情况。

其他端的兼容性：当前 Android、iOS 以及 web 的 canvas 模式均不支持 3d 属性的解析，目前 web 的 svg 模式和 HTML 模式可以支持。

3）解析：常用表达式

在实践中发现 lottie-web 可以支持很多表达式，在这里总结几种 AE 中常用的表达式，包括“time”、“loopIn/loopOut”、“random”以及“万能弹性表达式”给大家作为参考，wiggle 也常被用到，但目前在 lottie-web 中还原的效果并不好，所以在此就不做推荐了。相信还有更多的表达式已经被支持，只是平时项目中还未涉及，所以在此不做更深入的讨论，欢迎有知道的同学共同交流~另外：即使是不支持的表达式，也可以通过烘焙成关键帧的方式来导出，但是会造成 json 文件的体积增大，所以要结合实际情况来考虑使用。

a. 解析：「time 表达式」

「time 表达式」：time 表达式常被用作制作物体旋转或者计时的功能，在 lottie-web 中也可以被很好的支持。

time 表达式作用在数字上，默认小数点后会出现多位数字。可以通过添加“.toFixed(x)”来控制小数点后的位数，比如“.toFixed(2)”就是小数点后保留两位小数，同理“.toFixed(0)”则只剩整数。

b. 解析：「loopIn/loopOut 循环表达式」

「loopIn/loopOut 循环表达式」：循环表达式也常常在 AE 动画中用到，图中用 loopOut 的四种模式来举例，loopIn 也同样支持。

c. 解析：「random 随机表达式」

「random 随机表达式」：random 随机表达式也可以被支持，可以用在数字、位置或者颜色的动画里。

random（min，max）变化会在最小值（min）和最大值（max）的范围之间，比如为源文本添加 random（1,20），就代表数字会在 1-20 之间随机变化。

d. 解析：「万能弹性表达式」

制作弹性动画，无论是直接输入还是用插件生成，其本质都是一段表达式。非常庆幸 lottie-web 可以很好的支持这类弹性表达式。

「Overshoot」：使用频率超高的弹性动画，可以被用在缩放、位移等属性中。其中 amp 为振幅、freq 为频率、decay 为衰减（可以理解为阻力，值越大阻力越大，动画结束的越快）。通过控制这三个参数的值来调整动画的。

「Bounce」：使用频率一般，通常用来还原真实的物体落地动画。其中 e 表示衰减，g 表示重力，nMax 表示弹跳最大值。

4）解析：「高斯模糊」&「设置遮罩」

「高斯模糊」：在 web 上可以支持高斯模糊的效果，但是模糊数值不能太大，否则模糊边缘的地方会被切掉。

「设置遮罩」：设置遮罩也可以在 web 上被支持，但是需要注意目前版本不支持反转遮罩，此功能建议结合实际情况来考虑使用。

5）解析：骨骼绑定插件

我们常见的 AE 骨骼绑定插件有 Duik、RubberHose、Limber 等。这些插件的原理也是在 AE 中生成形状图层和参考线图层来模拟或控制动画对象的肢体，而 lottie 也可以支持这类基础的图层，所以骨骼绑定插件制作的动画也可以在 lottie 上很好的支持。插件 Character Tool 也很常见，但目前 lottie 并不支持，所以在此不做推荐。 需要注意的是：在导出的时候，需要在设置里勾选

「Hidden」和「Guides」这两个选项。因为多数骨骼动画的控制器是参考线图层，以及有些图层是隐藏状态。勾选这两项骨骼动画就可以正常导出啦。

a. 解析：「Duik Bassel」

Duik 生成的控制器均为参考线图层，所以 lottie 也能很好的支持 Duik 的骨骼动画。

b. 解析：「RubberHose」

静态素材来源于网络

RubberHose 通过生成形状图层来模拟肢体，生成的控制器也为参考线图层，这些都可以被 lottie 所支持。

c. 解析：「Limber」

和 RubberHose 类似，Limber 生成的肢体和控制器也是形状层和参考线图层，而且 lottie 对其支持的效果也很好，这类可以生成肢体的骨骼动画，优先推荐 Limber 来制作。

6）解析：插件-motion2/motion3/motion4

motion 系列的插件相信使用过 AE 的同学都不陌生，里面包含了很多实用快捷的功能。这一系列的插件可以生成基于表达式的弹性动画和回弹动画，也可以被 lottie-web 所支持。如果需要输出弹性动画，使用插件生成也是不错的选择！

二、精准控制 1. 动画可交互性

常见的交互方式有下面四种形式：滚轮滑动、鼠标悬停、鼠标点击和指针移动。作为设计师可以参考这些交互方式来规划自己的动画。lottie 动画可以支持分段播放、正放倒放等功能，结合这些交互可以做出很多有趣的 lottie 动画甚至是小游戏。

a.滚轮滑动

鼠标滚轮可以控制动画的播放进度，也支持更精确的设定。比如：可以规定容器划到 40%的时候，再开始播放动画。

b.鼠标悬停

鼠标悬停可以控制动画的播放或者暂停，以及正放倒放等效果。

c.鼠标点击

点击也可以控制动画的播放暂停，以及正放倒放等效果。

d.指针移动

根据指针移动可以调整动画的播放进度，如：左右移动可以对应动画的正放倒放。

这部分仅简单介绍 lottie 的几种交互方式，具体内容可查看官方交互指南： https://lottiefiles.com/interactivity

2. 内容可编辑性

谈到内容的编辑性，主要是讨论文字内容替换和图片替换这两种。因为一些动画中的图文不是固定的，会因为不同情况而变化，这时就需要动态替换图文。对于这类问题，最重要的是让开发同学快速的找到要控制的元素，方便后续相关参数的调整。

图文动态替换

对于图片或者文字，前端同学可以直接去修改 json 文件里的元素，或者等 json 经过渲染后，去修改 svg 元素。本文会重点讲解后者，前者仅作为了解。不管是哪种方式，本质是让开发同学快速找到这些要修改的元素。简单的举个例子：

导出前，我们不要勾选「Glyphs」这项，勾选后文字会变成路径而导致无法修改。还要把「Include in json」勾选上，如果文件中有位图，那么图片会被嵌入到 json 中。为了方便演示和查看，这里把「Pretty print JSON」也勾选上了，但是会导致体积变大，在实际项目中请不要勾选这项。

导出后我们可以查看一下 json 里的内容：

位图：会被放在“assets”数组中，“p”字段包含的是图片的地址信息。文字：被放置在“t”字段中。

如果用直接修改 json 的方式，那么其实就是把图片的地址更换一下，“t”中的文字的内容更换一下，就能达到图文替换的目的了。但该方法灵活性有限，在此仅作为了解。

第二种方式就是修改 svg 元素，这也是本文推荐的方式。其方法就是在 AE 图层名后面添加“#XXX”或者“.XXX”，那么在 svg 动画中就会生成相应的 Id 名和 class 名，通过这两种选择器开发就可以快速找到要替换的元素了。具体如下图：

可以看到这种方式的便捷性，设计师只需要和开发提前沟通好，在 AE 中添加好 ID 名或者 class 名，后续开发可以直接找到这些元素，并调整其相关属性了。如修改文本内容、修改形状颜色、替换图片等。

json 参数简介

为了方便设计师和开发同学理解 json 中的相关参数，方便后期更进一步的调整，在这里简单介绍一下：

最外层 json：

JSON 最外一层的数据，包括一个动画的基础数据：动画帧率、起始/结束关键帧，动画的宽高等，还有子图层的信息和关联的资源信息，如图片，矢量图等。

字体集合：

assets 图片资源集合：

assets 是一个数组，资源信息包含的是矢量图信息，如形状，大小等等，也包含位图；还可能是预合成层，即对已存在的某些图层进行分组，把它们放置到新的合成中，作为新的一个资源对象。

图层类型 ty

图层有 6 种类型，不同类型的图层获取宽高的方式不同，图片层需要从关联的 refId 获取 asset 来确定宽高，具体如下：

0 代表 comp 预合成层：从属性值 w 和 h 获取

1 代表 solid 固态层：从属性值 w 和 h 获取

2 代表 image 图片层：从图片资源属性获取

3 代表 null 空图层：从根图层获取

4 代表 shape 形状层：从根图层获取

5 代表 text 位置层：从根图层获取

如果图层为形状层，还会包含着描述形状的特征，通过描边信息、颜色填充等信。如下：

shape 中的 ty 字段表示 shape 的类型，ty 有以下几种：

gr(ShapeGroup): 图形合并

st(ShapeStroke): 图形描边

fl(ShapeFill): 图形填充

tr(ShapeTransform): 图形变换

sh(ShapePath): 图形路径

el(EllipsePath): 椭圆路径

rc(RectPath): 矩形路径

tm(trimPath): 修剪路径

三、常见问题

本文汇总了一些输出时经常会遇到的问题，比如渐变修复。还有比较好用的小技巧——自动追踪功能，可以把复杂图形动画生成为lottie动画。

1. 渐变异常修复

渐变导出时出现问题可能是遇到最多的情况，主要是因为渐变为中文名或者是命名重复导致的，在这里分享一下如何解决渐变的问题。

常见错误 1：渐变名为中文，导致出现黑白渐变。解决方式为选中“渐变填充 1”按下回车键，此时就可以编辑名字了，将中文改为英文并立即保存项目，再导出 json 就可以了。需要注意在英文的命名上，尽量以“Gradient Fill”加序号的形式来命名，不过用其他的英文名字也可以支持的。

常见错误 2：渐变名重复，导致出现相同颜色。解决方式为将不同颜色用不同英文名字作区分，例如名字后面加上不同的编号。

正确展示：要保证渐变名为英文，并且保证不同的颜色使用不同的名字。注意：颜色名必须保证全局唯一，否则会和其他合成里的颜色冲突。

2. 字体乱码

字体导出后出现乱码的情况，首先需要查看是不是「Glyphs」勾选上了，去掉该选项则不会出现字体乱码。如果确实需要勾选「Glyphs」，那么字体乱码的问题很可能是因为 AE 中文版导致的，可以通过切换为英文版来解决该问题。

Adobe After Effects 中英文切换需要先找到 application.xml 文件。win： 默认安装地址——C:\Program Files\Adobe\Adobe After Effects 2020\Support Files\AMT 自定义安装地址——自定义地址\Adobe After Effects 2020\Support Files\AMT

mac：Finder-前往文件夹：/资源库/Application Support/Adobe/After Effects/17.0/AMT/

找到文件后先复制到桌面，然后再打开，如果直接本地打开修改后是无法直接保存的。找到里面的语言类型并修改，「zh_CN」为中文，「en_US」为英文，保存后替换原始文件。修改完成后再次打开 AE 就会变成所设置的语言。

切换后就可以完美解决这个问题了：

3. 复杂形变效果一招搞定——自动追踪

如果有一些无规则且复杂的图形需要导出为 lottie 动画，那么可以尝试使用 AE 中的“自动追踪”功能。因为执行过该功能后，会基于主体再生成一个有蒙版路径的动画，所以基于这个原理也可以用来导出 lottie 动画。不过需要注意的是：复杂图形生成的路径锚点和关键帧的数量都比较多，会使得导出的 json 体积会很大，所以要根据情况来考虑使用。

①准备：

自动追踪支持视频、GIF、webp、静图等素材，案例中的素材为 webp 格式。

②导入：

自动追踪功能可以将带透明通道的素材或者有背景的素材提取出来。只需要在设置的时候将通道选项选为“Alpha”或者“明亮度”即可。

可根据识别情况来调节「容差」「阈值」「最小区域」等参数来使路径更贴合图形，可以打开预览实时查看路径的贴合程度。个人习惯把「应用到新图层」也打开，在一个新的固态图层上去进行后续调整。

③调整：

经过转化以后，生成了一个蒙版路径的逐帧动画，因为是路径所以 lottie 也可以支持。之后可以把蒙版复制在新的形状层或者固态层上，去调整出一个自己想要的纯色或者渐变色。PS：因为会产生很多路径锚点和关键帧，所以会造成 json 文件体积增大，建议酌情挑选时长较短和复杂程度较低的图形去转换，来保证最终文件体积不会过大。

如果图形较复杂，可以酌情删除一些蒙版路径和帧。调整好后把蒙版复制在一个新的形状层上，这样就可以使用渐变色了，最后导出 json 时请注意渐变填充的命名方式，一个复杂图形的 lottie 动画就做好了！

原创不易，转载须经作者同意~

刚刚从五一小长假的人堆里爬出来吧？如果还没有缓过来，不想学啥新技巧，不妨收一波设计干货吧。5月第一波干货里有些有趣的东西，作品集网站合集+着陆页分类合集+现实字体设计项目合集 + 设计开发一站式参考合集网站，都是相当实用的灵感来源，而 AI 网站设计工具+ AI 配色工具合集 + 国产 AI 艺术图片生成平台，也...

刚刚从五一小长假的人堆里爬出来吧？如果还没有缓过来，不想学啥新技巧，不妨收一波设计干货吧。5月第一波干货里有些有趣的东西， 作品集网站 合集+ 着陆页 分类合集+现实字体设计项目合集 + 设计开发一站式参考合集网站，都是相当实用的灵感来源，而 AI 网站设计工具+ AI 配色工具合集 + 国产 AI 艺术图片生成平台，也都是使用的工具。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第五波！2023年4月精选实用设计工具合集 最近 AI 相关的工具和设计工具实在是太多了，今天的文章将会主要推荐一些非 AI 类的工具，这些相对更加「传统」一些的素材涵盖了图案纹理、UI 样式生成、品牌和视觉设计、图标、设计系统，这些工具、网站、素材库和灵感网站大都是几经沉淀的好东西，希望能对你的设计有所帮助。

阅读文章 >

下面我们具体看看这一期的干货：

1、最佳设计作品集网站合集 https://www.bestfolios.com/home

设计高手的设计作品都是怎么呈现的？这个名为 best folios 的网站将最优秀的设计师作品集都汇集整合到一起，每天还会有单独的编辑精选推荐。除此之外，网站还有简历设计范例、设计案例分享以及设计素材和资源的推荐，总体上也是个不可多得的设计案例、资源网站。

如果你正在寻找值得参考的作品集或者作品集网站的呈现，不妨看看这里的设计师作品集网站作为参考。

2、现实世界中字体的设计使用范例 https://fontsinuse.com/

不同的字体有着不同的气质，相比于概念设计和飞机稿当中天马行空的设计构想，现实世界中，真实项目对于字体的使用有着更高的要求。font in use 这个网站将现实中真实存在的字体应用案例汇集到一起，这些经过验证的字体应用范例应该是更好的参考。虽然这些基本都是西文字体的实战范例，但是依然具备极强的参考价值。

3、优质着陆页设计案例大合集 https://www.landingfolio.com/

网页设计依然有很大的创意发挥的空间，但是在很多基础的页面设计上，我们可以直接从已有的网页设计当中获得参考，这个名为 landing folio 的网站就汇集了大量的已有的网页设计，这些网站设计按照行业、功能和组件平台类别进行了分类，方便你根据你的需求进行筛选。值得一提的是，landing folio 自身有一套 webflow 和 tailwind 组件库，这意味着，如果你在已有的网站设计当中看到心仪的组件，你可以直接借由网站的服务，复制组件到自己的项目代码当中。

landing folio 的这项服务是付费的，不过提供免费试用，感兴趣的同学可以体验一下看看。

4、设计开发一站式参考网站 https://www.theappfuel.com/

凭空做 APP 的设计和开发总归是容易翻车的，App Fuel 将目前最为优秀的、成功的 APP 设计、真实的用户流程和最新的设计趋势和设计新闻整合到自家的平台上。最优秀的新用户引导流程大家都是怎么做的？高转化率的通知推送是怎么设计的？完备的用户购物流程都是怎么落地实施的？App Fuel 用实际的案例展现给你看，省去大量自行摸索所走的弯路，站在前人的基础上，设计出更优秀的产品。

5、AI 驱动的网站设计开发平台 https://usestyle.ai/

Style AI 将 ChatGPT 式的 AI 服务和如今流行的拖拽式设计交互有机结合到一起，让 AI 帮你输出专业的文案，可用的配图，而你可以使用传统的设计工具来调控细节，让你尽可能快地完成网站的设计。这种 AI 辅助设计的机制正在越来越完善，而在网站落地实施过程中，AI 还能根据关键词命令辅助优化 SEO。

最近几个月时间内，已经出现了好几个类似这样的 AI 辅助网页设计开发的服务，随着时间推移，肉眼可见地看到这类工具正在快速完善。也许距离完美还有一段距离，但是这种 AI 辅助 + 设计 + 开发 的机制可能在不久的未来做到比较完善。

6、基于 AI 的开源配色工具组合 https://colpat.itsvg.in/

ColPat 是一套开源的配色工具小合集，其中包含了 6 款视频频率很高的配色工具，其中包括流行配色方案，渐变色工具、Taiwind配色模板生成器，2种不同的配色生成器，以及色彩含义解读。这些工具有的是 AI 驱动的，在日常设计的时候，这套工具能够成为很好的设计参考和功能补充。

7、支持定制化模型的 AI 艺术生成平台 https://6pen.art/

6Pen 是一个国内的 AI 艺术生成平台，他们使用 DiscoDiffusion 、Stable DIffusion 和 6Pen 自研的小模型，来帮你生成艺术作品，它不仅支持中文 prompt，而且生成的艺术作品遵循 CC0 协议分发，平台不保留版权，可以自用也可商用，最重要的是，6pen 支持定制你自己的模型，你可以通过上传自己的图片和作品来定制化训练数据。

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >

刚刚从五一小长假的人堆里爬出来吧？如果还没有缓过来，不想学啥新技巧，不妨收一波设计干货吧。5月第一波干货里有些有趣的东西，作品集网站合集+着陆页分类合集+现实字体设计项目合集 + 设计开发一站式参考合集网站，都是相当实用的灵感来源，而 AI 网站设计工具+ AI 配色工具合集 + 国产 AI 艺术图片生成平台，也...

刚刚从五一小长假的人堆里爬出来吧？如果还没有缓过来，不想学啥新技巧，不妨收一波设计干货吧。5月第一波干货里有些有趣的东西， 作品集网站 合集+ 着陆页 分类合集+现实字体设计项目合集 + 设计开发一站式参考合集网站，都是相当实用的灵感来源，而 AI 网站设计工具+ AI 配色工具合集 + 国产 AI 艺术图片生成平台，也都是使用的工具。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第五波！2023年4月精选实用设计工具合集 最近 AI 相关的工具和设计工具实在是太多了，今天的文章将会主要推荐一些非 AI 类的工具，这些相对更加「传统」一些的素材涵盖了图案纹理、UI 样式生成、品牌和视觉设计、图标、设计系统，这些工具、网站、素材库和灵感网站大都是几经沉淀的好东西，希望能对你的设计有所帮助。

阅读文章 >

下面我们具体看看这一期的干货：

1、最佳设计作品集网站合集 https://www.bestfolios.com/home

设计高手的设计作品都是怎么呈现的？这个名为 best folios 的网站将最优秀的设计师作品集都汇集整合到一起，每天还会有单独的编辑精选推荐。除此之外，网站还有简历设计范例、设计案例分享以及设计素材和资源的推荐，总体上也是个不可多得的设计案例、资源网站。

如果你正在寻找值得参考的作品集或者作品集网站的呈现，不妨看看这里的设计师作品集网站作为参考。

2、现实世界中字体的设计使用范例 https://fontsinuse.com/

不同的字体有着不同的气质，相比于概念设计和飞机稿当中天马行空的设计构想，现实世界中，真实项目对于字体的使用有着更高的要求。font in use 这个网站将现实中真实存在的字体应用案例汇集到一起，这些经过验证的字体应用范例应该是更好的参考。虽然这些基本都是西文字体的实战范例，但是依然具备极强的参考价值。

3、优质着陆页设计案例大合集 https://www.landingfolio.com/

网页设计依然有很大的创意发挥的空间，但是在很多基础的页面设计上，我们可以直接从已有的网页设计当中获得参考，这个名为 landing folio 的网站就汇集了大量的已有的网页设计，这些网站设计按照行业、功能和组件平台类别进行了分类，方便你根据你的需求进行筛选。值得一提的是，landing folio 自身有一套 webflow 和 tailwind 组件库，这意味着，如果你在已有的网站设计当中看到心仪的组件，你可以直接借由网站的服务，复制组件到自己的项目代码当中。

landing folio 的这项服务是付费的，不过提供免费试用，感兴趣的同学可以体验一下看看。

4、设计开发一站式参考网站 https://www.theappfuel.com/

凭空做 APP 的设计和开发总归是容易翻车的，App Fuel 将目前最为优秀的、成功的 APP 设计、真实的用户流程和最新的设计趋势和设计新闻整合到自家的平台上。最优秀的新用户引导流程大家都是怎么做的？高转化率的通知推送是怎么设计的？完备的用户购物流程都是怎么落地实施的？App Fuel 用实际的案例展现给你看，省去大量自行摸索所走的弯路，站在前人的基础上，设计出更优秀的产品。

5、AI 驱动的网站设计开发平台 https://usestyle.ai/

Style AI 将 ChatGPT 式的 AI 服务和如今流行的拖拽式设计交互有机结合到一起，让 AI 帮你输出专业的文案，可用的配图，而你可以使用传统的设计工具来调控细节，让你尽可能快地完成网站的设计。这种 AI 辅助设计的机制正在越来越完善，而在网站落地实施过程中，AI 还能根据关键词命令辅助优化 SEO。

最近几个月时间内，已经出现了好几个类似这样的 AI 辅助网页设计开发的服务，随着时间推移，肉眼可见地看到这类工具正在快速完善。也许距离完美还有一段距离，但是这种 AI 辅助 + 设计 + 开发 的机制可能在不久的未来做到比较完善。

6、基于 AI 的开源配色工具组合 https://colpat.itsvg.in/

ColPat 是一套开源的配色工具小合集，其中包含了 6 款视频频率很高的配色工具，其中包括流行配色方案，渐变色工具、Taiwind配色模板生成器，2种不同的配色生成器，以及色彩含义解读。这些工具有的是 AI 驱动的，在日常设计的时候，这套工具能够成为很好的设计参考和功能补充。

7、支持定制化模型的 AI 艺术生成平台 https://6pen.art/

6Pen 是一个国内的 AI 艺术生成平台，他们使用 DiscoDiffusion 、Stable DIffusion 和 6Pen 自研的小模型，来帮你生成艺术作品，它不仅支持中文 prompt，而且生成的艺术作品遵循 CC0 协议分发，平台不保留版权，可以自用也可商用，最重要的是，6pen 支持定制你自己的模型，你可以通过上传自己的图片和作品来定制化训练数据。

提高3倍效率！能落地的AI绘画&设计系统课来了！ 如何快速入门AI绘画和AI设计？

阅读文章 >

前言Hello，大家好，言川又来写教程啦！！这是一篇继《外婆都能看懂的 Stable Diffusion 入门教程》教程之后的一篇文章，如果你还没有安装并了解 stable diffusion 这个软件，那么你一定要先去看看入门教程的文章，然后安装 stable diffusion。超详细！

前言

Hello，大家好，言川又来写教程啦！！这是一篇继 《外婆都能看懂的 Stable Diffusion 入门教程》 教程之后的一篇文章，如果你还没有安装并了解 stable diffusion 这个软件，那么你一定要先去看看入门教程的文章，然后安装 stable diffusion。

超详细！外婆都能看懂的Stable Diffusion入门教程 一、前言 上次发的 Midjourney 教程《奶奶看了都会的 Midjourney 入门教程！

阅读文章 >

一、Controlnet（图像精准控制）是什么？ ControlNet 是一个用于控制 AI 图像生成的插件。它使用了一种称为"Conditional Generative Adversarial Networks"（条件生成对抗网络）的技术来生成图像。与传统的生成对抗网络不同，ControlNet 允许用户对生成的图像进行精细的控制。这使得 ControlNet 在许多应用场景中非常有用，例如计算机视觉、艺术设计、虚拟现实等等。总之， ControlNet 可以帮助用户精准控制 AI 图像的生成，以获得更好的视觉效果。

看着有点复杂是不是，没关系，我给你们总结一下：

在 ControlNet 出现之前，我们在生成图片之前，永远的不知道 AI 能给我们生成什么，就像抽卡一样难受。

ControlNet 出现之后，我们就能通过模型精准的控制图像生成，比如：上传线稿让 AI 帮我们填色渲染，控制人物的姿态、图片生成线稿等等。

这下看懂了吗，就很哇塞，大家可能网上看到一些线稿生成的图片，就是用到的这个 ControlNet， Stable Diffusion 必装的插件之一。

二、Controlnet 插件安装 首先，咱们先打开秋叶大佬的启动器，并且点击更新（切换）到最新版本，这一步的目的是为了防止出现奇奇怪怪的报错。

然后我们启动 "web-UI"，打开扩展，并在这里输入该网址： https://jihulab.com/hanamizuki/sd-webui-controlnet ，然后点击安装等待一会...（安装没反应或者错误的注意网络问题，网上还有别的办法，我测试了下，这个是成功安装的）

等待一会，在这边底部就有一个信息提示，实际上就是告诉你安装的地址，这里我已经提前安装了，所以显示的可能跟大家不一样。

然后回到”已安装“这里，可以看到下面就出现了扩散控制网络（Controlnet 插件）了，然后点击”应用并重启用户界面"。

回到”文生图“这里，就看到 Controlnet 已经成功安装了。

三、Controlnet 模型安装 插件安装完成之后，还没完，我们需要安装下模型，跟着我做，首先去这个链接下载： https://huggingface.co/lllyasviel/ControlNet/tree/main/models

把下载的模型全部选中复制（ctrl+c）一下，我们需要移动到对应文件夹中。

看我的文件路径，别搞错了，把文件复制到这里来（一定不要复制到 Stable Diffusion 模型中去了）

重启 UI，耐心等待一下......

look，这就是成功安装的样子，很可爱呢~如果你没有，那说明你模型没安装到位置，仔细检查下吧。

四、模型说明及案例演示 介绍几个常用的 controlnet 模型教程，注意看哦。跟着我一步步的操作就没什么问题的，加油！

1. Canny 边缘检测 (Canny edge detection)

Canny 用于识别输入图像的边缘信息。从上传的图片中生成线稿，然后根据关键词来生成与上传图片同样构图的画面。

来跟着我的操作来一遍。

首先我们把模型和 lora 选择好，因为我这里上传的是一个真实的模特，所以像最大程度的还原，模型一定要对。这里我用到的是这两个模型。

然后输入关键词：

1girl, solo, smile, realistic, grin, looking at viewer, brown eyes, brown hair, ponytail, upper body, simple background, small breasts, breasts, blue background, teeth, lips, bare shoulders, long hair, black hair

女孩，独奏，微笑，现实，咧嘴笑，看着观众，棕色的眼睛，棕色的头发，马尾辫，上身，简单的背景，xxx，xx，蓝色的背景，牙齿，嘴唇，裸露的肩膀，长发，黑发

打开 Controlnet，选择 Canny 边缘检测，模型选择对应的 canny 模型。

上传图片，并勾选启用。

点击下方的“预览预处理结果”这一步是生成线稿。然后就会出现上面那张线稿图。

最后我们勾选下“DPM++SDE Karras”，开始生图

来看下原图和生成图片的对比，姿态构图基本一致。如果你想换头发颜色、面部细节、服装等等，就可以通过关键词来控制。这个功能学会了吧，那咱们讲下一个。

言川小知识：

可以看到上面生成的模特脸部头发丝有点乱，可以调整这个预处理器分辨率（下面两个同样也是调整线稿的精细层度），越高生成的效果与原图越相像，同样也会越吃显存，小心使用。

下面这 2 个也是同样的做法，它们的主要区别是边缘检测算法不同，具体选择哪个各位去尝试一下，玩法基本一致，我这里就不做演示了。（注意右侧的模型要选择对应的预处理器。）

2. M-LSD （建筑物绘制）

通过分析图片中的线条结构和几何形状，可以构建建筑物的外框，适合建筑、室内设计的朋友使用。

①切换预处理器和相应模型。

②上传一张室内设计的图片，然后点击“预处理结果”，（第一次用这个，控制台会更新一段时间）。

③输入关键词

pearl white walls, windsor gray floors, bedroom, Natural lighting, earthly tones, simple and clean, trending on interior design, digital artwork by Audrey kawasaki, Smooth, Detailed, Artstation, Neutral colors, elegant

珍珠白的墙壁，温莎灰色的地板，卧室，自然光，朴实的色调，简单干净，室内设计的趋势，由 Audrey kawasaki 设计的数字艺术品，光滑，细节，艺术站，中性色，优雅

可以看到，图片生成的效果还是不错的，跟原图的构图基本一致，当然还有更多的细节需要调整，大家可以调整这块的参数即可。

3. 法线贴图 (Normal map)

从原图中提取 3D 物体的法线向量，绘制的新图与原图的光影效果完全相同。

①切换预处理器和模型

②上传一张图片，然后点击“预览预处理结果”，然后就会给你生成一张法线图（懂 3 维的小伙伴应该都知道这个）

③继续输入关键词，等待生图....

Mercedes-Benz AMG GT, staring out of the window with regal air, Moody lighting, High detail, realistic fur texture, Digital painting, trending on artstation

梅赛德斯-奔驰 AMG GT，凝视窗外的皇家空气，穆迪照明，高细节，逼真的皮毛纹理，数字绘画，艺术站的趋势

怎么说呢，就是牛！！！背景细节等都可以通过关键词来控制，其他调整参数与上面一样。

言川小知识：这个模型主要是通过 RGB 颜色通道来标记表示凹凸，生成的图片立体感很强。

可以看到，图片生成的效果还是不错的，跟原图的构图基本一致，当然还有更多的细节需要调整，大家可以调整这块的参数即可。

4. OpenPose 姿态检测

通过姿势识别实现对人体动作的精准控制，不仅可以生成单人的姿势，还可以生成多人的姿势。

此外，由于 AI 生成的手部有问题，OpenPose 还有一个手部检测模型，大大改善了奇奇怪怪的手。

①切换预处理器和模型。

②上传一张图片，然后点击“预览预处理结果”，注意，第一次选中这个模型开始预处理的时候，会更新一段时间，可以在“控制台”查看更新进度，更新完成之后再次点击“预处理”就可以看到 AI 识别的图了。

看看预处理结果：

③输入关键词，等待生图....

1girl, solo, dress, braid, hairband, earrings, smile, brown eyes, white dress, realistic, jewelry, long hair, black hair, looking at viewer, bare shoulders, lips, blue hairband, single braid, brown hair, simple background

女孩，独奏，连衣裙，辫子，发带，耳环，微笑，棕色眼睛，白色连衣裙，现实主义，珠宝，长发，黑发，看着观众，裸露的肩膀，嘴唇，蓝色发带，单发带，棕色头发，简单的背景

这手奇奇怪怪的，没事，可以试试 OpenPose 手部检测模型，操作是一样的，自己去尝试哈，细节调起来操作很多，一点点尝试，肯定能成功的。

5. Scribble （涂鸦）

使用 Scribbles 模型，可以根据草图（涂鸦）绘制出精美的图片，对于那些没有接受过美术训练或缺乏绘画天赋的人来说，这是非常棒的。

①切换预处理器和模型。（第一次用这个，控制台会更新一段时间）

②点击“创建空白画布”。

③然后在这里画线稿，这里我画一盏煤油灯，我是用的鼠标绘制的，画的不好，做个演示。有手绘板的同学可以用 手绘 板绘制一下。

④输入关键词：

old electronic kerosene lamp in anthracite blue metal, warm orange metal reflections, Intricate, Highly detailed, Warm lighting, Sharp focus, Digital painting, Artstation, Concept art, trending, inspired by art by Zdenek Burian and frederick catherwood

旧电子煤油灯在无烟煤蓝色金属，温暖的橙色金属反射，错综复杂，高度详细，温暖的照明，锐利的焦点，数字绘画，艺术站，概念艺术，趋势，灵感来自艺术 zdenek burian 和 frederick catherwood

我画的不标准哈，做个演示，这个模型是根据你绘画的线稿精准控制物体的构图、构造。细节根据关键词来控制。

这里可能就有小伙伴疑问了，在 SD 里面直接绘制不是很方便，能不能通过其他软件绘制之后上传线稿生图呢，of course，看下面：

1）上传线稿图，点击“预览预处理器结果”。

2）输入上面的关键词，然后生成图片：

完事，同样细节需要你们自己去调整。

6. fake-scribble（伪涂鸦）

这个是不需要我们绘画的，上传一张图片，它会帮我们生成涂鸦效果。

①切换预处理器，模型不用切换。

②上传图片，然后点击“预览预处理器结果”。（第一次用这个，控制台会更新一段时间）

说实话，画的还不如我呢...

③输入关键词：

Espresso, set in a cozy office space with warm lighting, surrounded by office plants, books, and a cup of coffee on the desk, Detailed, Intricate, Smooth, Trending on Artstation, by artists such as loish and rossdraws and sam yang

意式浓缩咖啡，设置在一个舒适的办公空间，温暖的照明，周围的办公植物，书籍，和一杯咖啡在桌子上，详细，复杂，流畅，在 Artstation 趋势，由艺术家如 loish 和 rossdraw 和 sam yang

效果嘎嘎棒！！！

7. Semantic Segmentation（语义分割绘制）

Semantic Segmentation 语义分割是一种深度学习算法，重点关注 语义 一词，这种算法将一个标签或类别与图像联系起来，被用来识别形成不同类别的像素集合。具体还是看我的操作：

①切换预处理器和模型

②上传图片，然后点击“预览预处理器结果”。

可以看到，预处理阶段生成了一张五颜六色的图片，这就是语义分割图，这图中的每一种颜色都代表了一类物品，比如紫色（#cc05ff）代表床（bed），橙黄色（#ffc207）代表垫子（cushion），金黄色（#e0ff08）代表台灯（lamp）。

这是一份色值表格，大家自取！

③这里我就不输入关键词了，让 sd 自由发挥

言川小知识：可以在 PS 上绘制一个色块的物体（比如人，放在这个桥上，对应官方的色值），然后导入到语义分割这里来，输入相应的关键词，就可以精准控制图像的效果了。

注意看注意看：

这里我讲下这个小功能，前面两个是打开摄像头的功能，我没试过，你们想玩可以试一下啊。主要讲一下后面的那个小箭头。

这个箭头的功能是把你上传图片的分辨率，自动填充上去。

（本文部分图片素材来自网上）

七、写在最后 以上就是这篇 Controlnet 插件的基础教程啦，当中还有很多高级的玩法，我会在后续一步步分享给大家。

如果觉得对你有帮助，3 连（点赞、收藏、分享）一下吧，大家的支持才是我的动力，祝大家生活愉快

欢迎添加作者微信交流：

前言Hello，大家好，言川又来写教程啦！！这是一篇继《外婆都能看懂的 Stable Diffusion 入门教程》教程之后的一篇文章，如果你还没有安装并了解 stable diffusion 这个软件，那么你一定要先去看看入门教程的文章，然后安装 stable diffusion。超详细！

前言

Hello，大家好，言川又来写教程啦！！这是一篇继 《外婆都能看懂的 Stable Diffusion 入门教程》 教程之后的一篇文章，如果你还没有安装并了解 stable diffusion 这个软件，那么你一定要先去看看入门教程的文章，然后安装 stable diffusion。

超详细！外婆都能看懂的Stable Diffusion入门教程 一、前言 上次发的 Midjourney 教程《奶奶看了都会的 Midjourney 入门教程！

阅读文章 >

一、Controlnet（图像精准控制）是什么？ ControlNet 是一个用于控制 AI 图像生成的插件。它使用了一种称为"Conditional Generative Adversarial Networks"（条件生成对抗网络）的技术来生成图像。与传统的生成对抗网络不同，ControlNet 允许用户对生成的图像进行精细的控制。这使得 ControlNet 在许多应用场景中非常有用，例如计算机视觉、艺术设计、虚拟现实等等。总之， ControlNet 可以帮助用户精准控制 AI 图像的生成，以获得更好的视觉效果。

看着有点复杂是不是，没关系，我给你们总结一下：

在 ControlNet 出现之前，我们在生成图片之前，永远的不知道 AI 能给我们生成什么，就像抽卡一样难受。

ControlNet 出现之后，我们就能通过模型精准的控制图像生成，比如：上传线稿让 AI 帮我们填色渲染，控制人物的姿态、图片生成线稿等等。

这下看懂了吗，就很哇塞，大家可能网上看到一些线稿生成的图片，就是用到的这个 ControlNet， Stable Diffusion 必装的插件之一。

二、Controlnet 插件安装 首先，咱们先打开秋叶大佬的启动器，并且点击更新（切换）到最新版本，这一步的目的是为了防止出现奇奇怪怪的报错。

然后我们启动 "web-UI"，打开扩展，并在这里输入该网址： https://jihulab.com/hanamizuki/sd-webui-controlnet ，然后点击安装等待一会...（安装没反应或者错误的注意网络问题，网上还有别的办法，我测试了下，这个是成功安装的）

等待一会，在这边底部就有一个信息提示，实际上就是告诉你安装的地址，这里我已经提前安装了，所以显示的可能跟大家不一样。

然后回到”已安装“这里，可以看到下面就出现了扩散控制网络（Controlnet 插件）了，然后点击”应用并重启用户界面"。

回到”文生图“这里，就看到 Controlnet 已经成功安装了。

三、Controlnet 模型安装 插件安装完成之后，还没完，我们需要安装下模型，跟着我做，首先去这个链接下载： https://huggingface.co/lllyasviel/ControlNet/tree/main/models

把下载的模型全部选中复制（ctrl+c）一下，我们需要移动到对应文件夹中。

看我的文件路径，别搞错了，把文件复制到这里来（一定不要复制到 Stable Diffusion 模型中去了）

重启 UI，耐心等待一下......

look，这就是成功安装的样子，很可爱呢~如果你没有，那说明你模型没安装到位置，仔细检查下吧。

四、模型说明及案例演示 介绍几个常用的 controlnet 模型教程，注意看哦。跟着我一步步的操作就没什么问题的，加油！

1. Canny 边缘检测 (Canny edge detection)

Canny 用于识别输入图像的边缘信息。从上传的图片中生成线稿，然后根据关键词来生成与上传图片同样构图的画面。

来跟着我的操作来一遍。

首先我们把模型和 lora 选择好，因为我这里上传的是一个真实的模特，所以像最大程度的还原，模型一定要对。这里我用到的是这两个模型。

然后输入关键词：

1girl, solo, smile, realistic, grin, looking at viewer, brown eyes, brown hair, ponytail, upper body, simple background, small breasts, breasts, blue background, teeth, lips, bare shoulders, long hair, black hair

女孩，独奏，微笑，现实，咧嘴笑，看着观众，棕色的眼睛，棕色的头发，马尾辫，上身，简单的背景，xxx，xx，蓝色的背景，牙齿，嘴唇，裸露的肩膀，长发，黑发

打开 Controlnet，选择 Canny 边缘检测，模型选择对应的 canny 模型。

上传图片，并勾选启用。

点击下方的“预览预处理结果”这一步是生成线稿。然后就会出现上面那张线稿图。

最后我们勾选下“DPM++SDE Karras”，开始生图

来看下原图和生成图片的对比，姿态构图基本一致。如果你想换头发颜色、面部细节、服装等等，就可以通过关键词来控制。这个功能学会了吧，那咱们讲下一个。

言川小知识：

可以看到上面生成的模特脸部头发丝有点乱，可以调整这个预处理器分辨率（下面两个同样也是调整线稿的精细层度），越高生成的效果与原图越相像，同样也会越吃显存，小心使用。

下面这 2 个也是同样的做法，它们的主要区别是边缘检测算法不同，具体选择哪个各位去尝试一下，玩法基本一致，我这里就不做演示了。（注意右侧的模型要选择对应的预处理器。）

2. M-LSD （建筑物绘制）

通过分析图片中的线条结构和几何形状，可以构建建筑物的外框，适合建筑、室内设计的朋友使用。

①切换预处理器和相应模型。

②上传一张室内设计的图片，然后点击“预处理结果”，（第一次用这个，控制台会更新一段时间）。

③输入关键词

pearl white walls, windsor gray floors, bedroom, Natural lighting, earthly tones, simple and clean, trending on interior design, digital artwork by Audrey kawasaki, Smooth, Detailed, Artstation, Neutral colors, elegant

珍珠白的墙壁，温莎灰色的地板，卧室，自然光，朴实的色调，简单干净，室内设计的趋势，由 Audrey kawasaki 设计的数字艺术品，光滑，细节，艺术站，中性色，优雅

可以看到，图片生成的效果还是不错的，跟原图的构图基本一致，当然还有更多的细节需要调整，大家可以调整这块的参数即可。

3. 法线贴图 (Normal map)

从原图中提取 3D 物体的法线向量，绘制的新图与原图的光影效果完全相同。

①切换预处理器和模型

②上传一张图片，然后点击“预览预处理结果”，然后就会给你生成一张法线图（懂 3 维的小伙伴应该都知道这个）

③继续输入关键词，等待生图....

Mercedes-Benz AMG GT, staring out of the window with regal air, Moody lighting, High detail, realistic fur texture, Digital painting, trending on artstation

梅赛德斯-奔驰 AMG GT，凝视窗外的皇家空气，穆迪照明，高细节，逼真的皮毛纹理，数字绘画，艺术站的趋势

怎么说呢，就是牛！！！背景细节等都可以通过关键词来控制，其他调整参数与上面一样。

言川小知识：这个模型主要是通过 RGB 颜色通道来标记表示凹凸，生成的图片立体感很强。

可以看到，图片生成的效果还是不错的，跟原图的构图基本一致，当然还有更多的细节需要调整，大家可以调整这块的参数即可。

4. OpenPose 姿态检测

通过姿势识别实现对人体动作的精准控制，不仅可以生成单人的姿势，还可以生成多人的姿势。

此外，由于 AI 生成的手部有问题，OpenPose 还有一个手部检测模型，大大改善了奇奇怪怪的手。

①切换预处理器和模型。

②上传一张图片，然后点击“预览预处理结果”，注意，第一次选中这个模型开始预处理的时候，会更新一段时间，可以在“控制台”查看更新进度，更新完成之后再次点击“预处理”就可以看到 AI 识别的图了。

看看预处理结果：

③输入关键词，等待生图....

1girl, solo, dress, braid, hairband, earrings, smile, brown eyes, white dress, realistic, jewelry, long hair, black hair, looking at viewer, bare shoulders, lips, blue hairband, single braid, brown hair, simple background

女孩，独奏，连衣裙，辫子，发带，耳环，微笑，棕色眼睛，白色连衣裙，现实主义，珠宝，长发，黑发，看着观众，裸露的肩膀，嘴唇，蓝色发带，单发带，棕色头发，简单的背景

这手奇奇怪怪的，没事，可以试试 OpenPose 手部检测模型，操作是一样的，自己去尝试哈，细节调起来操作很多，一点点尝试，肯定能成功的。

5. Scribble （涂鸦）

使用 Scribbles 模型，可以根据草图（涂鸦）绘制出精美的图片，对于那些没有接受过美术训练或缺乏绘画天赋的人来说，这是非常棒的。

①切换预处理器和模型。（第一次用这个，控制台会更新一段时间）

②点击“创建空白画布”。

③然后在这里画线稿，这里我画一盏煤油灯，我是用的鼠标绘制的，画的不好，做个演示。有手绘板的同学可以用 手绘 板绘制一下。

④输入关键词：

old electronic kerosene lamp in anthracite blue metal, warm orange metal reflections, Intricate, Highly detailed, Warm lighting, Sharp focus, Digital painting, Artstation, Concept art, trending, inspired by art by Zdenek Burian and frederick catherwood

旧电子煤油灯在无烟煤蓝色金属，温暖的橙色金属反射，错综复杂，高度详细，温暖的照明，锐利的焦点，数字绘画，艺术站，概念艺术，趋势，灵感来自艺术 zdenek burian 和 frederick catherwood

我画的不标准哈，做个演示，这个模型是根据你绘画的线稿精准控制物体的构图、构造。细节根据关键词来控制。

这里可能就有小伙伴疑问了，在 SD 里面直接绘制不是很方便，能不能通过其他软件绘制之后上传线稿生图呢，of course，看下面：

1）上传线稿图，点击“预览预处理器结果”。

2）输入上面的关键词，然后生成图片：

完事，同样细节需要你们自己去调整。

6. fake-scribble（伪涂鸦）

这个是不需要我们绘画的，上传一张图片，它会帮我们生成涂鸦效果。

①切换预处理器，模型不用切换。

②上传图片，然后点击“预览预处理器结果”。（第一次用这个，控制台会更新一段时间）

说实话，画的还不如我呢...

③输入关键词：

Espresso, set in a cozy office space with warm lighting, surrounded by office plants, books, and a cup of coffee on the desk, Detailed, Intricate, Smooth, Trending on Artstation, by artists such as loish and rossdraws and sam yang

意式浓缩咖啡，设置在一个舒适的办公空间，温暖的照明，周围的办公植物，书籍，和一杯咖啡在桌子上，详细，复杂，流畅，在 Artstation 趋势，由艺术家如 loish 和 rossdraw 和 sam yang

效果嘎嘎棒！！！

7. Semantic Segmentation（语义分割绘制）

Semantic Segmentation 语义分割是一种深度学习算法，重点关注 语义 一词，这种算法将一个标签或类别与图像联系起来，被用来识别形成不同类别的像素集合。具体还是看我的操作：

①切换预处理器和模型

②上传图片，然后点击“预览预处理器结果”。

可以看到，预处理阶段生成了一张五颜六色的图片，这就是语义分割图，这图中的每一种颜色都代表了一类物品，比如紫色（#cc05ff）代表床（bed），橙黄色（#ffc207）代表垫子（cushion），金黄色（#e0ff08）代表台灯（lamp）。

这是一份色值表格，大家自取！

③这里我就不输入关键词了，让 sd 自由发挥

言川小知识：可以在 PS 上绘制一个色块的物体（比如人，放在这个桥上，对应官方的色值），然后导入到语义分割这里来，输入相应的关键词，就可以精准控制图像的效果了。

注意看注意看：

这里我讲下这个小功能，前面两个是打开摄像头的功能，我没试过，你们想玩可以试一下啊。主要讲一下后面的那个小箭头。

这个箭头的功能是把你上传图片的分辨率，自动填充上去。

（本文部分图片素材来自网上）

七、写在最后 以上就是这篇 Controlnet 插件的基础教程啦，当中还有很多高级的玩法，我会在后续一步步分享给大家。

如果觉得对你有帮助，3 连（点赞、收藏、分享）一下吧，大家的支持才是我的动力，祝大家生活愉快

欢迎添加作者微信交流：

前言对于设计师而言，在使用 lottie 的过程中，有两个难点：第一是导出设置项，第二是功能支持列表。是否能熟练运用 lottie 来做动效落地，主要取决于这两部分。在上一篇，花了很多篇幅来为大家介绍 bodymovin（5.9.6）的相关设置项。

前言

对于 设计师 而言，在使用 lottie 的过程中，有两个难点：第一是导出设置项，第二是功能支持列表。是否能熟练运用 lottie 来做 动效落地 ，主要取决于这两部分。在上一篇，花了很多篇幅来为大家介绍 bodymovin（5.9.6）的相关设置项。掌握设置项是玩转 lottie 的基础，那么在这篇，除了功能支持列表，还会为大家介绍更高级的使用方法以及相关注意事项。

超详细！写给新人的 Lottie 快速上手指南（上） 前言 作为 UI 设计师，我们在平时的工作中，多多少少都会接触到一些动效相关的工作内容。

阅读文章 >

位图 or 矢量

相信使用过 lottie 的同学，很多情况是通过 ps/ai/sketch 等软件把样式合并进位图，导入到 AE 中并生成 lottie 动画。导入位图的情况，因为样式都可以合并进位图里，所以相对比较直观也容易控制，遇到的问题也不会很多，在不考虑文件体积或者屏幕分辨率变化的情况下，确实也是不错的选择。

本文想绕过位图这种情况，来讨论一下矢量形状生成的 lottie 动画。因为用矢量生成可以覆盖更多的使用场景，文件体积也相对较小，可编辑性也更强。如果说需要用 lottie 来建立一套动效图标组件库，或者基于网页端和 H5，来输出高清动画表情或 IP 缺省图动画，那么矢量的 lottie 动画一定是更好的选择了。

网站链接： https://lordicon.com/

基于矢量的 lottie 动画，有更好的编辑性和延展性，示例中不仅可以替换图标局部颜色，还可以切换不同风格，本质上还是在改变形状的填充色和描边色。

以上为 Telegram 和 Discord 的贴纸（高清表情）

国外已经有越来越多的应用选择 lottie 来输出动态表情了。这些表情往往动态效果细腻，趣味性强。因为矢量的特性所以在各端上都能清晰的呈现，受到很多用户的喜爱。其中为代表的是 Telegram 和 Discord，里面所使用到的贴纸（高清表情），均为 lottie 动画。

一、功能支持 通过官方给出的功能支持列表，我们可以得知，lottie 对矢量图形有很强的解析能力，并且在 web 端支持的功能是最多的。实际上，web 对 lottie 动画支持的效果是最好的，在矢量动画这部分，lottie 有着很强的优势。现在很多产品的前端技术架构，web 都占有着很大的比重，用 web 来取代其他的原生技术早已是潮流。如果我们的项目前端技术是基于 web（包括手机端里的 H5 部分、桌面客户端里的 H5 部分），那么可以尽情的使用 lottie 来作为动效落地的首选。在 web 端，lottie 拥有着非常广阔的使用空间，本文的内容也是主要围绕 web 端来展开的。

考察不同效果在原生客户端（iOS、安卓、windows 和 Mac）的兼容性成本较高，作者会根据本身经验，对一些常见已知的兼容问题做简单的补充。关于在客户端各端的支持情况，在这里暂不做系统性的阐述。欢迎有了解的同学可以共同交流分享。官方给出的功能列表项目有很多，包含着大量的基础性功能，这类功能我们了解就好。需要格外关注的功能项其实只是一少部分，合理的使用好这些功能，就可以做出很多精美的动画了。在功能推荐时，将会省略掉一些功能，比如：矩形、椭圆、填充、描边、圆角、位移、缩放、旋转、不透明度等这类最最基本的功能。这些功能是绝大多数动效输出工具都可以支持，在这里就不多做介绍了。

1. lottie-web 常用功能推荐：

我从官方众多的功能支持项目挑选了一些常用到的功能，同时也属于 AE 中的基础功能，作为个人推荐。掌握并灵活运用好这些功能就可以做出很棒的动画了。如果是新手可以先以这些功能为出发点，随着对 Lottie-web 逐渐熟悉，再去参考官方给出的完整版列表。

1）解析：「渐变描边」&「修剪路径」

素材来源于 Lottiefiles

「渐变描边」：除了填充属性可以支持渐变，描边也是可以支持的。同样可以支持“线性渐变”和“径向渐变”两种形式。而且不论是填充还是描边，都可以控制渐变的起始点和结束点，从而来改变形状的颜色。这种方式也有一定的使用场景，比如可以让某些矢量插画的背景色进行变化，或者将一个渐变按钮的不同交互状态用这种颜色的变化来表示等。

其他端兼容性：渐变描边在 android、ios 客户端中存在兼容性问题，表现为效果不可见；

渐变描边对客户端运行的性能损耗较大，建议避免过多运用；

「修剪路径」：这个功能通常用来制作路径动画或者字体书写效果。如果一个图层中有多个路径，那么也可以支持各路径“单独”修剪或者“同时”修剪。

2）解析：「蒙版路径」&「中继器」

素材来源于 Lottiefiles

「蒙版路径」：蒙版支持“相加”和“减去”以及不透明度和各锚点的调整。有这些功能就可以帮助我们做出很多不错的动画了。需要提到，蒙版的效果和遮罩类似，根据不同使用情况来区分它们。如果被隐藏的部分需要跟着图层一起动，可以考虑用蒙版，如果被隐藏的部分不需要跟着图层一起动，则可以考虑用遮罩了。

蒙板的性能消耗，跟蒙板的渲染面积以及蒙板的作用对象面积有关。如果在效果上需要做选择的话，优先考虑降级渲染面积大的蒙板。

「中继器」：中继器也是很常用的效果，在制作礼花或者水花效果时常被用到。

3）解析：「Alpha 遮罩」&「Alpha 反转遮罩」

「Alpha 遮罩」&「Alpha 反转遮罩」： Lottie 可以支持 Alpha 遮罩及亮度遮罩，但更为常用的是 Alpha 正反遮罩，所以在这里主要推荐使用 Alpha。

其他端兼容性：遮罩层对客户端运行性能的损耗很大，建议减少使用，或者相同效果下可以考虑用蒙版替代。

4）解析：「修剪路径」&「自动定向」

修剪路径上文提到，不再赘述。

「自动定向」：主体物可以根据路径方向来调整自身角度，一般的路径动画必备功能。需要注意的是，该功能只能使用在 Lottie-web，其他平台暂不支持。

5）解析：「3D 逐字化」

「3D 逐字化」：可以单独对文字进行 3D 化的处理，包含“锚点”、“位移”、“不透明度”、“缩放”、“旋转”等效果。也有一定的使用场景，比如可以作为动态 banner 模板的文案动画，设置好文字动画后，后面可以通过调整代码来修改文案内容，需注意字数尽量保持一致。

6）说明：「预合成」&「时间重映射」&「时间拉伸」

预合成可以用来简化图层结构，时间重映射和时间拉伸可以调整动画最终的节奏。这些功能在动画制作中经常使用，而且在 lottie-web 中也能得到很好的支持，请放心使用！

2. lottie-web 特殊功能推荐「独家」

在实践中，会遇到一些功能，虽然没有包含在官方功能支持列表中，但却能被 Lottie-web 所支持。在文章中会汇总一些本人在工作中遇到的特殊功能。因为目前在网上社区或论坛上，没有看到有对这类官方以外功能的系统性介绍，所以此次的介绍暂且冒昧的称为“独家推荐”，如果有其他功能可以补充，欢迎一起交流~

1）解析：「收缩与膨胀」&「圆角」

「收缩与膨胀」&「圆角」：这两个效果，没有收录在官方功能列表里，但却能在 Lottie-web 中很好的展示，做一些星型和花型的图形动画，或者是圆角变化的动画时，可以考虑使用。

2）解析：「3D 旋转」

「3D 旋转」：在 AE 中打开图层 3D 的开关，就可以使用 3D 相关功能了，目前在 Lottie-web 中还不支持“摄像机”图层的使用（不过利用 oasis 引擎可以渲染出摄像机图层，但成本较高）。需要控制动画整体角度，可以再链接一个控制图层来做角度的控制。需要注意的是，“渲染器模式”目前只支持“经典 3D”，并不支持“CINEMA 4D”，所以通过“CINEMA 4D”来挤出图形厚度的方式在 Lottie 中是不支持的。另外，3D 的动画不要过于复杂，尤其是不要给旋转物体做厚度，否则会出现破面或者图层顺序错乱的情况。

其他端的兼容性：当前 Android、iOS 以及 web 的 canvas 模式均不支持 3d 属性的解析，目前 web 的 svg 模式和 HTML 模式可以支持。

3）解析：常用表达式

在实践中发现 lottie-web 可以支持很多表达式，在这里总结几种 AE 中常用的表达式，包括“time”、“loopIn/loopOut”、“random”以及“万能弹性表达式”给大家作为参考，wiggle 也常被用到，但目前在 lottie-web 中还原的效果并不好，所以在此就不做推荐了。相信还有更多的表达式已经被支持，只是平时项目中还未涉及，所以在此不做更深入的讨论，欢迎有知道的同学共同交流~另外：即使是不支持的表达式，也可以通过烘焙成关键帧的方式来导出，但是会造成 json 文件的体积增大，所以要结合实际情况来考虑使用。

a. 解析：「time 表达式」

「time 表达式」：time 表达式常被用作制作物体旋转或者计时的功能，在 lottie-web 中也可以被很好的支持。

time 表达式作用在数字上，默认小数点后会出现多位数字。可以通过添加“.toFixed(x)”来控制小数点后的位数，比如“.toFixed(2)”就是小数点后保留两位小数，同理“.toFixed(0)”则只剩整数。

b. 解析：「loopIn/loopOut 循环表达式」

「loopIn/loopOut 循环表达式」：循环表达式也常常在 AE 动画中用到，图中用 loopOut 的四种模式来举例，loopIn 也同样支持。

c. 解析：「random 随机表达式」

「random 随机表达式」：random 随机表达式也可以被支持，可以用在数字、位置或者颜色的动画里。

random（min，max）变化会在最小值（min）和最大值（max）的范围之间，比如为源文本添加 random（1,20），就代表数字会在 1-20 之间随机变化。

d. 解析：「万能弹性表达式」

制作弹性动画，无论是直接输入还是用插件生成，其本质都是一段表达式。非常庆幸 lottie-web 可以很好的支持这类弹性表达式。

「Overshoot」：使用频率超高的弹性动画，可以被用在缩放、位移等属性中。其中 amp 为振幅、freq 为频率、decay 为衰减（可以理解为阻力，值越大阻力越大，动画结束的越快）。通过控制这三个参数的值来调整动画的。

「Bounce」：使用频率一般，通常用来还原真实的物体落地动画。其中 e 表示衰减，g 表示重力，nMax 表示弹跳最大值。

4）解析：「高斯模糊」&「设置遮罩」

「高斯模糊」：在 web 上可以支持高斯模糊的效果，但是模糊数值不能太大，否则模糊边缘的地方会被切掉。

「设置遮罩」：设置遮罩也可以在 web 上被支持，但是需要注意目前版本不支持反转遮罩，此功能建议结合实际情况来考虑使用。

5）解析：骨骼绑定插件

我们常见的 AE 骨骼绑定插件有 Duik、RubberHose、Limber 等。这些插件的原理也是在 AE 中生成形状图层和参考线图层来模拟或控制动画对象的肢体，而 lottie 也可以支持这类基础的图层，所以骨骼绑定插件制作的动画也可以在 lottie 上很好的支持。插件 Character Tool 也很常见，但目前 lottie 并不支持，所以在此不做推荐。 需要注意的是：在导出的时候，需要在设置里勾选

「Hidden」和「Guides」这两个选项。因为多数骨骼动画的控制器是参考线图层，以及有些图层是隐藏状态。勾选这两项骨骼动画就可以正常导出啦。

a. 解析：「Duik Bassel」

Duik 生成的控制器均为参考线图层，所以 lottie 也能很好的支持 Duik 的骨骼动画。

b. 解析：「RubberHose」

静态素材来源于网络

RubberHose 通过生成形状图层来模拟肢体，生成的控制器也为参考线图层，这些都可以被 lottie 所支持。

c. 解析：「Limber」

和 RubberHose 类似，Limber 生成的肢体和控制器也是形状层和参考线图层，而且 lottie 对其支持的效果也很好，这类可以生成肢体的骨骼动画，优先推荐 Limber 来制作。

6）解析：插件-motion2/motion3/motion4

motion 系列的插件相信使用过 AE 的同学都不陌生，里面包含了很多实用快捷的功能。这一系列的插件可以生成基于表达式的弹性动画和回弹动画，也可以被 lottie-web 所支持。如果需要输出弹性动画，使用插件生成也是不错的选择！

二、精准控制 1. 动画可交互性

常见的交互方式有下面四种形式：滚轮滑动、鼠标悬停、鼠标点击和指针移动。作为设计师可以参考这些交互方式来规划自己的动画。lottie 动画可以支持分段播放、正放倒放等功能，结合这些交互可以做出很多有趣的 lottie 动画甚至是小游戏。

a.滚轮滑动

鼠标滚轮可以控制动画的播放进度，也支持更精确的设定。比如：可以规定容器划到 40%的时候，再开始播放动画。

b.鼠标悬停

鼠标悬停可以控制动画的播放或者暂停，以及正放倒放等效果。

c.鼠标点击

点击也可以控制动画的播放暂停，以及正放倒放等效果。

d.指针移动

根据指针移动可以调整动画的播放进度，如：左右移动可以对应动画的正放倒放。

这部分仅简单介绍 lottie 的几种交互方式，具体内容可查看官方交互指南： https://lottiefiles.com/interactivity

2. 内容可编辑性

谈到内容的编辑性，主要是讨论文字内容替换和图片替换这两种。因为一些动画中的图文不是固定的，会因为不同情况而变化，这时就需要动态替换图文。对于这类问题，最重要的是让开发同学快速的找到要控制的元素，方便后续相关参数的调整。

图文动态替换

对于图片或者文字，前端同学可以直接去修改 json 文件里的元素，或者等 json 经过渲染后，去修改 svg 元素。本文会重点讲解后者，前者仅作为了解。不管是哪种方式，本质是让开发同学快速找到这些要修改的元素。简单的举个例子：

导出前，我们不要勾选「Glyphs」这项，勾选后文字会变成路径而导致无法修改。还要把「Include in json」勾选上，如果文件中有位图，那么图片会被嵌入到 json 中。为了方便演示和查看，这里把「Pretty print JSON」也勾选上了，但是会导致体积变大，在实际项目中请不要勾选这项。

导出后我们可以查看一下 json 里的内容：

位图：会被放在“assets”数组中，“p”字段包含的是图片的地址信息。文字：被放置在“t”字段中。

如果用直接修改 json 的方式，那么其实就是把图片的地址更换一下，“t”中的文字的内容更换一下，就能达到图文替换的目的了。但该方法灵活性有限，在此仅作为了解。

第二种方式就是修改 svg 元素，这也是本文推荐的方式。其方法就是在 AE 图层名后面添加“#XXX”或者“.XXX”，那么在 svg 动画中就会生成相应的 Id 名和 class 名，通过这两种选择器开发就可以快速找到要替换的元素了。具体如下图：

可以看到这种方式的便捷性，设计师只需要和开发提前沟通好，在 AE 中添加好 ID 名或者 class 名，后续开发可以直接找到这些元素，并调整其相关属性了。如修改文本内容、修改形状颜色、替换图片等。

json 参数简介

为了方便设计师和开发同学理解 json 中的相关参数，方便后期更进一步的调整，在这里简单介绍一下：

最外层 json：

JSON 最外一层的数据，包括一个动画的基础数据：动画帧率、起始/结束关键帧，动画的宽高等，还有子图层的信息和关联的资源信息，如图片，矢量图等。

字体集合：

assets 图片资源集合：

assets 是一个数组，资源信息包含的是矢量图信息，如形状，大小等等，也包含位图；还可能是预合成层，即对已存在的某些图层进行分组，把它们放置到新的合成中，作为新的一个资源对象。

图层类型 ty

图层有 6 种类型，不同类型的图层获取宽高的方式不同，图片层需要从关联的 refId 获取 asset 来确定宽高，具体如下：

0 代表 comp 预合成层：从属性值 w 和 h 获取

1 代表 solid 固态层：从属性值 w 和 h 获取

2 代表 image 图片层：从图片资源属性获取

3 代表 null 空图层：从根图层获取

4 代表 shape 形状层：从根图层获取

5 代表 text 位置层：从根图层获取

如果图层为形状层，还会包含着描述形状的特征，通过描边信息、颜色填充等信。如下：

shape 中的 ty 字段表示 shape 的类型，ty 有以下几种：

gr(ShapeGroup): 图形合并

st(ShapeStroke): 图形描边

fl(ShapeFill): 图形填充

tr(ShapeTransform): 图形变换

sh(ShapePath): 图形路径

el(EllipsePath): 椭圆路径

rc(RectPath): 矩形路径

tm(trimPath): 修剪路径

三、常见问题

本文汇总了一些输出时经常会遇到的问题，比如渐变修复。还有比较好用的小技巧——自动追踪功能，可以把复杂图形动画生成为lottie动画。

1. 渐变异常修复

渐变导出时出现问题可能是遇到最多的情况，主要是因为渐变为中文名或者是命名重复导致的，在这里分享一下如何解决渐变的问题。

常见错误 1：渐变名为中文，导致出现黑白渐变。解决方式为选中“渐变填充 1”按下回车键，此时就可以编辑名字了，将中文改为英文并立即保存项目，再导出 json 就可以了。需要注意在英文的命名上，尽量以“Gradient Fill”加序号的形式来命名，不过用其他的英文名字也可以支持的。

常见错误 2：渐变名重复，导致出现相同颜色。解决方式为将不同颜色用不同英文名字作区分，例如名字后面加上不同的编号。

正确展示：要保证渐变名为英文，并且保证不同的颜色使用不同的名字。注意：颜色名必须保证全局唯一，否则会和其他合成里的颜色冲突。

2. 字体乱码

字体导出后出现乱码的情况，首先需要查看是不是「Glyphs」勾选上了，去掉该选项则不会出现字体乱码。如果确实需要勾选「Glyphs」，那么字体乱码的问题很可能是因为 AE 中文版导致的，可以通过切换为英文版来解决该问题。

Adobe After Effects 中英文切换需要先找到 application.xml 文件。win： 默认安装地址——C:\Program Files\Adobe\Adobe After Effects 2020\Support Files\AMT 自定义安装地址——自定义地址\Adobe After Effects 2020\Support Files\AMT

mac：Finder-前往文件夹：/资源库/Application Support/Adobe/After Effects/17.0/AMT/

找到文件后先复制到桌面，然后再打开，如果直接本地打开修改后是无法直接保存的。找到里面的语言类型并修改，「zh_CN」为中文，「en_US」为英文，保存后替换原始文件。修改完成后再次打开 AE 就会变成所设置的语言。

切换后就可以完美解决这个问题了：

3. 复杂形变效果一招搞定——自动追踪

如果有一些无规则且复杂的图形需要导出为 lottie 动画，那么可以尝试使用 AE 中的“自动追踪”功能。因为执行过该功能后，会基于主体再生成一个有蒙版路径的动画，所以基于这个原理也可以用来导出 lottie 动画。不过需要注意的是：复杂图形生成的路径锚点和关键帧的数量都比较多，会使得导出的 json 体积会很大，所以要根据情况来考虑使用。

①准备：

自动追踪支持视频、GIF、webp、静图等素材，案例中的素材为 webp 格式。

②导入：

自动追踪功能可以将带透明通道的素材或者有背景的素材提取出来。只需要在设置的时候将通道选项选为“Alpha”或者“明亮度”即可。

可根据识别情况来调节「容差」「阈值」「最小区域」等参数来使路径更贴合图形，可以打开预览实时查看路径的贴合程度。个人习惯把「应用到新图层」也打开，在一个新的固态图层上去进行后续调整。

③调整：

经过转化以后，生成了一个蒙版路径的逐帧动画，因为是路径所以 lottie 也可以支持。之后可以把蒙版复制在新的形状层或者固态层上，去调整出一个自己想要的纯色或者渐变色。PS：因为会产生很多路径锚点和关键帧，所以会造成 json 文件体积增大，建议酌情挑选时长较短和复杂程度较低的图形去转换，来保证最终文件体积不会过大。

如果图形较复杂，可以酌情删除一些蒙版路径和帧。调整好后把蒙版复制在一个新的形状层上，这样就可以使用渐变色了，最后导出 json 时请注意渐变填充的命名方式，一个复杂图形的 lottie 动画就做好了！

原创不易，转载须经作者同意~

作为 B 端的设计师或产品经理，你大概也遇到过类似的问题：“做 B 端产品的竞品分析时，有很多流程注册之后也不能使用，比如一些资金交易流程，不实际打款或者关联真实的公司账户你就无法正常使用，这种情况该如何参考和研究竞品呢？”别急，我推荐给你以下 5 种方法，分别是：竞品页面获取网站使用AI做资料收集查看竞品教学视...

作为 B 端的 设计师 或产品经理，你大概也遇到过类似的问题：

“做 B 端产品的竞品分析时，有很多流程注册之后也不能使用，比如一些资金交易流程，不实际打款或者关联真实的公司账户你就无法正常使用，这种情况该如何参考和研究竞品呢？”

别急，我推荐给你以下 5 种方法，分别是：

竞品页面获取网站 使用AI做资料收集 查看竞品教学视频 询问用户使用体验 参考功能近似产品 更多 竞品分析 方法：

4个步骤，总结B端设计师的竞品分析方法 竞品分析方法很多，但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的，真正在 B 端设计中的方法比较少，这次为大家介绍适合 B 端设计师使用的竞品分析方法。

阅读文章 >

一、竞品页面获取网站 以下 3 个网站可以快速获取到你想要分析和参考的产品页面（以海外产品为主）。

1. Figr

网站链接： https://figr.design

Figr 主要提供 Web 端的 SaaS 产品页面和落地页的页面截图，你可以按照产品名称或页面功能来查找你想要的产品：

最有趣的是，Figr 的每个页面截图都可以直接生成 Figma 的设计稿，供设计师参考和编辑使用：

2. Refero

网站链接： https://refero.design

Refero 也提供各类产品的网站页面截图，你可以按照行业类别、产品名称、组件名称、关键页面等检索方式找到相关产品和页面，你甚至能看到用户在注册后使用产品时的真实效果截图：

3. Mobbin

网站链接： https://mobbin.com

Mobbin 需要付费，但是它提供的产品种类和范围也更全，包括 iOS、Android、Web 平台各类产品的页面截图。你也可以看到用户注册后使用时的真实效果，还可以按照每一个功能在使用时的用户流程来查看页面，分析竞品的交互过程也会更加连贯：

二、用 AI 做资料收集 AI 无疑是新晋收集资料和整理信息的利器。你可以通过 ChatGPT4.0 或同类 AI 产品来查找与竞品相关的公开信息和评价。不过 AI 给出的信息内容并不会很有针对性，更多是一种通用的、常识性的信息梳理。同时，这种方式也需要设计师具备两个能力：

一是问好问题的能力：问题越精准，答案才会越有效；

二是判断能力：对真伪信息要有鉴别力。

三、查看竞品教学视频 很多 B 端产品的专业度和复杂度比较高，产品为了帮助用户理解功能，会做一些教学视频或指导文档。你可以在产品的官方网站或者常用的视频网站上找找相关内容做参考。下图为某款外贸收款平台在 B 站上的教学操作手册：

四、询问用户使用体验 如果有机会访谈你的用户，一定要抓紧机会问问用户是否有使用过竞品。你可以在每一次用户访谈中都加入这样几个问题：

您认为这些竞品中哪些功能做得比我们的产品好/不如我们？ 是否方便在现场操作竞品、演示一下？ 是否可以把竞品中的关键页面抹掉敏感数据，截图发给我们？ 是通过什么渠道接触的竞品？等等。 从用户那里得到的对于竞品的评价，也是最真实有效的评价。

五、参考功能近似产品 参考与你的产品并不完全一致、但在用户需求或产品功能上有相同之处的产品。比如 C 端产品试用和测试的门槛不高，很多功能对于 B 端产品也都具备参考价值。

举个例子，如果你做的是 B 端电商平台，那么产品的收款、付款、管款、贷款等钱包功能就可以参考支付宝或 C 端银行产品的用户心智建设和交互界面设计。

“B 端用户”并不是一个虚拟的概念，这个概念背后也是一个个对产品有着心理预期、希望能够快速完成任务的活生生的人。

以用户为中心做设计，其实也是以“人”为本的做设计。借助“人”的力量，你能做得事情会更多。

欢迎关注作者微信公众号：「长弓小子」

作为 B 端的设计师或产品经理，你大概也遇到过类似的问题：“做 B 端产品的竞品分析时，有很多流程注册之后也不能使用，比如一些资金交易流程，不实际打款或者关联真实的公司账户你就无法正常使用，这种情况该如何参考和研究竞品呢？”别急，我推荐给你以下 5 种方法，分别是：竞品页面获取网站使用AI做资料收集查看竞品教学视...

作为 B 端的 设计师 或产品经理，你大概也遇到过类似的问题：

“做 B 端产品的竞品分析时，有很多流程注册之后也不能使用，比如一些资金交易流程，不实际打款或者关联真实的公司账户你就无法正常使用，这种情况该如何参考和研究竞品呢？”

别急，我推荐给你以下 5 种方法，分别是：

竞品页面获取网站 使用AI做资料收集 查看竞品教学视频 询问用户使用体验 参考功能近似产品 更多 竞品分析 方法：

4个步骤，总结B端设计师的竞品分析方法 竞品分析方法很多，但大多数是偏向 B 端产品经理方面的或者是 C 端设计师的，真正在 B 端设计中的方法比较少，这次为大家介绍适合 B 端设计师使用的竞品分析方法。

阅读文章 >

一、竞品页面获取网站 以下 3 个网站可以快速获取到你想要分析和参考的产品页面（以海外产品为主）。

1. Figr

网站链接： https://figr.design

Figr 主要提供 Web 端的 SaaS 产品页面和落地页的页面截图，你可以按照产品名称或页面功能来查找你想要的产品：

最有趣的是，Figr 的每个页面截图都可以直接生成 Figma 的设计稿，供设计师参考和编辑使用：

2. Refero

网站链接： https://refero.design

Refero 也提供各类产品的网站页面截图，你可以按照行业类别、产品名称、组件名称、关键页面等检索方式找到相关产品和页面，你甚至能看到用户在注册后使用产品时的真实效果截图：

3. Mobbin

网站链接： https://mobbin.com

Mobbin 需要付费，但是它提供的产品种类和范围也更全，包括 iOS、Android、Web 平台各类产品的页面截图。你也可以看到用户注册后使用时的真实效果，还可以按照每一个功能在使用时的用户流程来查看页面，分析竞品的交互过程也会更加连贯：

二、用 AI 做资料收集 AI 无疑是新晋收集资料和整理信息的利器。你可以通过 ChatGPT4.0 或同类 AI 产品来查找与竞品相关的公开信息和评价。不过 AI 给出的信息内容并不会很有针对性，更多是一种通用的、常识性的信息梳理。同时，这种方式也需要设计师具备两个能力：

一是问好问题的能力：问题越精准，答案才会越有效；

二是判断能力：对真伪信息要有鉴别力。

三、查看竞品教学视频 很多 B 端产品的专业度和复杂度比较高，产品为了帮助用户理解功能，会做一些教学视频或指导文档。你可以在产品的官方网站或者常用的视频网站上找找相关内容做参考。下图为某款外贸收款平台在 B 站上的教学操作手册：

四、询问用户使用体验 如果有机会访谈你的用户，一定要抓紧机会问问用户是否有使用过竞品。你可以在每一次用户访谈中都加入这样几个问题：

您认为这些竞品中哪些功能做得比我们的产品好/不如我们？ 是否方便在现场操作竞品、演示一下？ 是否可以把竞品中的关键页面抹掉敏感数据，截图发给我们？ 是通过什么渠道接触的竞品？等等。 从用户那里得到的对于竞品的评价，也是最真实有效的评价。

五、参考功能近似产品 参考与你的产品并不完全一致、但在用户需求或产品功能上有相同之处的产品。比如 C 端产品试用和测试的门槛不高，很多功能对于 B 端产品也都具备参考价值。

举个例子，如果你做的是 B 端电商平台，那么产品的收款、付款、管款、贷款等钱包功能就可以参考支付宝或 C 端银行产品的用户心智建设和交互界面设计。

“B 端用户”并不是一个虚拟的概念，这个概念背后也是一个个对产品有着心理预期、希望能够快速完成任务的活生生的人。

以用户为中心做设计，其实也是以“人”为本的做设计。借助“人”的力量，你能做得事情会更多。

欢迎关注作者微信公众号：「长弓小子」

一、什么是 Linear 风设计？依旧是多图长文一篇，请酌情阅读。设计师都是视觉动物，废话不多说，上图：这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。

一、什么是 Linear 风设计？ 依旧是多图长文一篇，请酌情阅读。

设计师 都是视觉动物，废话不多说，上图：

这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页 设计风格 。

其独特又神秘的锋利质感，就是为了体现界面所承载产品的专业感。这种风格早已在国外设计圈流行多时，很多产品也都纷纷推出了 Linear 设计风格的网页。

大家可能在各种概念设计稿上见过 Linear 设计的影子，只是叫不出它的名字，或者并不知道这种风格源自于同名的一款 SaaS 软件。

更多设计风格科普：

超全总结！金刚区图标设计的 10 大风格 金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，也是风格切换最为活跃的。

阅读文章 >

二、Linear 首先是一个产品 老规矩，先从产品背景讲起，如果你只对设计部分感兴趣，也可以跳到下一节。但适当了解一下产品背景，会对掌握 Linear 设计风格更有帮助。

1. 为谁设计

“Linear 的设计风格是为了符合软件工程师对于「专业」的要求。黑色背景、灰色 Inter 无衬线字体、一个紫色渐变圆形 logo，基于大多数工程师都很喜欢的暗色编程环境，最大限度的减少设备能耗和视觉疲劳。”

以上出自 Linear 的 CEO （前 Airbnb 的首席设计师） Karri Saarinen 的一段访谈。他很好的解释了 Linear 的设计初衷，也道出了 Linear 其实是一款专门针对软件开发的协同管理的工具，目标用户主要是软件开发工程师和设计师。

Linear 应用局部图

Karri Saarinen 十分推崇 Apple 的设计美学和产品标准。Apple 对于设计的不懈追求，严格的成品把控，都深深启发着他们这一代人。他希望 Linear 的产品设计将来也可以与 Apple 比肩。

国内互联网刻板印象之一就是：程序员或工程师都是格子衫加兜帽衣，不善言辞，也没有审美要求。

那为什么一款主打技术受众的软件需要把自己的设计去跟 Apple 对标？难道是因为国外的开发者更懂时尚？

其实无关国内外，优秀的开发者都是对设计很敏感的，要说有哪个开发者代码写得很棒，但对设计却毫不在意，这我是不信的。像 Linear 这样一款重视美学和追求极致体验的协作工具，就是为他们量身打造。

当然，要与 Apple 比肩，听起来是有些狂妄！Linear 的各种产品标语更是傲气冲天，比如「Linear 是构建产品的更好方式」「与你以往使用过的任何工具都不同」「只为世界上最好的产品团队提供支持」等等。

不过了解下 Linear 的发展路径，感觉他们「狂」一点倒也不是不行。

2. 发展之路

Linear 创立于 2019 年 4 月，由 Karri Saarinen、Jori Lallo、Tuomas Artman 三位芬兰籍创始人在美国联合创办。产品一经发布就大受关注，短短两个月，其内测候补名单上就拥有了 10000 名用户。

Linear 三位联合创始人

Linear 的前身是 Lallo 和 Saarinen 在旧金山开发的协作书签系统 Kippt，后来被知名加密货币交易公司 Coinbase 收购，Saarinen 和 Lallo 也在 2014 年加入了该公司并分别担任设计主管和软件工程师，只是他们都未等到 Coinbase 上市就已离开去创业。

2019 年 11 月，红杉为 Linear 领投了 420 万美元种子轮融资；2020 年 12 月，红杉再次领跑并为 Linear 筹集了 1300 万美元的 A 轮 融资。

从 2021 年实现盈利到 2023 年，Linear 的银行现金已高于种子轮加 A 轮 融资的总额。目前已拥有数千家客户，包括初创团队和企业级用户。

3. 产品形态

Linear 有网页版和桌面端应用，可以跨平台同步使用，不限于 Mac、Windows 和手机、平板等移动设备。暂时不支持 Linux 桌面端，但可以使用网页版。

虽然没有移动端应用，不过最近加入的设计师 Alex Cornell 就是专门负责 App 设计的，想必也是在规划中了。

当然，Linear 的设计重心还是在于打磨桌面端体验，毕竟 B 端 产品主要使用场景并不在移动端。

另外，Linear 也支持离线模式，无需做任何额外操作，不用担心断网数据丢失。数据存储方面，使用的是谷歌云加密服务，服务器在美国。

应用下载页

4. 功能特色

Linear 的服务市场主要面向北美和欧洲，服务器在国外，在国内几乎没有使用场景。

毕竟国内也有不少项目协同工具，中小团队用 Teambition、Worktile 或者 Tower 足够了，要求不高的用石墨、语雀、飞书、Notion 这类文档工具也都可以 cover 日常需求。大厂更不必说，出于数据安全考量，基本都使用内部自研系统。

所以这里，我们不花太多篇幅来探讨 Linear 的功能细则，了解一下即可。

既然叫 Linear，那么产品肯定就是要强调线性解决方案的。敏捷开发已经过时，Linear 打造的是现代软件开发的新标准。

首先，一切操作都可以通过键盘组合键来进行，内置全局命令菜单，50ms 的实时同步速度，内置专为现代化软件团队打造的工作流。

其次，可以快速创建任务并在上下文中讨论问题，可以无缝切换列表和看板视图并支持自定义，支持周期管理和跨团队 roadmap 规划。

再者，集成了专业开发组件并能联动各大代码、数据、设计平台，任务可无缝衔接，使软件开发实现自动化。

最后，Linear 还提供了设计精美的高级报告和分析功能，支持数据导出。

官网有详细介绍和演示，这里不一一展开讲述了。

不过，我们倒是可以通过 Linear 的「Roadmap」设计来感受一下其功能考究程度。

Linear 的 roadmap 不光设计得很漂亮，还非常灵活实用。你可以在 timeline 上随意拖动任务条来调整优先级，也可以通过拖拽任务条来改变日期跨度。此外，系统内置的各种任务状态和属性图标也非常精致。

Roadmap

另外，Linear 还有一个类似 Apple 人机交互指南的使用准则：「Linear Method」，不同于使用文档，更偏重理念性，感兴趣也可以去看看。

Linear Method

5. 定价策略

大多数 SaaS 软件都会提供免费版本，Linear 也不例外。

只是不同于其他产品会对免费版本做各种功能阉割。Linear 的免费版和收费版差别主要在管理权限上，免费用户也可以使用其大部分核心功能，团队成员数同样没有上限。

具体收费：标准版可按月支付：8 美元/月，适合成员人数在 50 人以下；超过 50 人，建议选择升级版，按年计费：14 美元/月。

另外，客户订阅费用的 1% 会通过 Stripe Climate 捐出，用于助力新兴除碳技术的发展，帮助去除大气层中的二氧化碳。所以也是一家很有环保意识的企业了！

6. 设计团队

Linear 背后是一个仅 30 人的小型创业团队，团队成员分布于各个国家，全部远程协作。

虽然 CEO 自己也是设计师出身，但目前已经不再负责设计执行。设计团队现由三名专职设计师组成，负责网页和桌面端的是：首席设计师 Adrien Griveau 和设计师 Edgar Ambartsoumian。

另一位是新加入的移动端设计师 Alex Cornell，曾是一位在 YouTube 上活跃过的音乐人，他入职后的第一个项目是做数据功能宣传视频，精致流畅的动画结合特制的音效，视听体验非常美妙，这部分后面会再具体讲到。

不同于我们之前了解的 Bento 和 Arc 那种花活很多的团队风格，Linear 的团队气质和他们的产品如出一辙：严谨沉稳但又很独特。

其独特在招聘启示上就可以窥见一二，比如设计师的 JD 里要求必须讨厌「A/B 测试」，比如工程师招聘时警告说自己的团队规模超小但素质极高。

另外还有一个很独特的地方就是：Linear 的设计师不对设计稿进行图层命名。按说初级设计师往往被教育最多的就是：图层一定要命名好，以方便与他人对接。

Linear 设计文件图层截图

从上图这张公开的设计稿里我们可以看到，设计师不仅不命名图层，在 Figma 里甚至不会对元素做框架化和组件化处理，都是简单粗暴的编组、编组、再编组。这又很不符合我们的 Figma 使用认知。是不是觉得能做出一流设计的团队竟然会这么「不专业」？

团队的解释是：Linear 的设计稿并不在设计师之间对接，专人专项，设计稿只和开发人员对接。这在网上一度引起争议，有些设计师表示这很不专业，有些则认为设计稿落地结果更重要，不用太在意形式。

但老实讲，如果对接时拿到图层结构混乱，命名不规范的设计文件，确实会很头大。国内设计团队大部分都做不到专人专项，一份设计稿可能要在不同设计师之间经手多次，Linear 这种习惯咱就不学了！

7. Linear 和 Arc

读过我文章的朋友，都知道 Arc 这款浏览器。与 Arc 一样，Linear 也是优先考虑键盘操作的，在 Linear 应用中大部分操作都可以完全用快捷键来进行，这能大大提升操作效率，也很符合开发者的工作习惯。

去年 3 月份，Linear 应用程序也集成了 Arc，支持在 Arc 浏览器命令栏键入直接创建 Linear 任务。其官网更新日志中毫不掩饰对 Arc 的推崇，称其和 Linear 一样，速度极快、设计精美！可谓是英雄惜英雄了。

三、Linear 还是一种设计风格 “我们一直想把 Linear 设计得很漂亮的原因之一是：如果你有一个漂亮的项目管理工具，那么任何东西都可以变得漂亮。”

这是 Linear 的联合创始人 Tuomas Artman 对”项目管理工具为何要如此注重视觉设计“的解释。

Linear 称其设计是像素级，高精度，优雅 UI 和一流性能的绝佳组合。倒也不觉得这算夸大其词，因为无论官网还是应用界面，都挑不出任何设计细节问题。

查看其官网 CSS 样式会发现：界面上的渐变背景，发光特效甚至噪点效果都是代码实现；位图切图也采用了体积更小的 WebP 格式，矢量图形则完全采用 SVG 格式，能用代码实现的就不用切图；代码层面大量应用了 mask-image 属性和 radial-gradient 以及 linear-gradient 等渐变函数；此外还有大量的常规动效和交互动效。

这样的实现策略，很大程度上规避了切图所带来的细节问题，但对产品性能又会是不小的考验，需要有技术团队的认可和鼎力支持才行。不然，想把这种风格的设计应用在交互层面上，是很难单靠设计师自己去推进的。

图中星空背景由 SVG 切图结合代码来实现

下面就通过一些界面展示图，来直观感受 Linear 的设计风格：

1. 官网界面展示

产品展示页局部图

页面交互动效

页面常态动效

招聘页面主视觉

自述页面

这个由首席设计师 Griveau 操刀的自述页面，主插图复刻了 iMac 的前身 Macintosh 的外观样式，内容展示结合视差滚动创意十足。

实时数据服务页面

网页地址： https://linear.app/features/insights

这个页面配上声音，浏览体验太美妙了，要使用 Chrome 或 Arc 打开，别的浏览器可能无法播放。内嵌视频就是前面提到过的新晋设计师 Alex Cornell 来到 Linear 后的首秀，动画大部分在 AE 中完成，视频后期用 Premiere 剪辑，Alex 说自己大概制作了将近 100 多个小时的动画。

2. 应用界面展示

Linear 应用内工作台样式，弹出的浮层，背景都做了半透模糊处理。

Linear 应用内截图

Linear 系统还内置了至少 8 款界面皮肤供用户选择。

用户也可以自定义主题，可以在开源网站 linear.style 上查找更多主题。

但主题不能多端同步，而且只能设置自己在使用的应用程序皮肤，团队成员看到的还是他自己的主题样式。

3. 活动界面展示

Linear 去年年终推出了项目总结活动页，用户不仅可以预览到 Linear 的年终总结数据，还可以一键生成自己团队的项目总结。

Hero Image 的动效不是一整个 gif 动图或者视频，而是在静态切图上叠加了一层动态点阵滤镜，打造了一种做旧失真的故障风视效。

滚动视差交互结合精美的可视化数据表，体验超级赞。数据图形全部采用 SVG 格式，点击按钮还可以复制完整图片。

四、拆解 Linear 式设计思路 看到这里，我们已经很了解 Linear 式设计风格了。

光说不练假把式，请设计师打开 Figma，来一起拆解下 Linear 的设计思路（需要具备 Figma 操作基础）。

我们先来学习下 Linear 是怎么做多色渐变融合背景的：

第一步：新建一个矩形，给它添加 angular（角度渐变 ），按你喜欢的色值来添加。

第二步：编辑 angular 的色值，你可以调整手柄来选择渐变的角度。

第三步：给这个矩形添加图层模糊属性，参数可随意设定。

第四步：给矩形添加 mask。

第五步：复制一层渐变矩形，按你喜欢的风格选择图层叠加样式，并适当调整不透明度。

第六步：调整复制层的 angular 手柄来调整两层渐变融合的效果，并适当调整图片角度。

OK，一个专属于你的多色渐变融合背景诞生了！

小试牛刀，感觉如何，简单不？

趁热打铁，我们再来挑战复刻一下 Linear 旧版官网 Hero Image 里的应用图标：

查看样式会发现，此图标只在顶层贴了张 SVG 格式的镂空 logo，其他都是用代码实现，一共分为 4 层。

旧图标结构图

下面，打开 Figma 继续跟我操作：

第一步：新建一个圆角矩形描边框，这里有一个关于设置 iOS 级别平滑圆角的小 tip，操作见以下动图演示。

第二步：添加渐变色和模糊值，我们前面已经做好了一张渐变图，可以直接复制它的属性过来。

第三步：添加一个等比例圆形，复制渐变和模糊值

第四步：复制矩形框，添加填充色，复制渐变和模糊值。

第五步：放上镂空 logo，完成！

打开旧版官网，我们还能看到应用图标下会出现类似电影开场的激光动效，其实他们一开始只想做一个点亮图标的简单动效，考虑到是首次发布，要留下记忆点，就采用了更显著的效果。

网页地址： https://linear.app/releases/2020-12

旧版官网动画截图

另外这版官网从设计构想到实施，只用了一周时间，执行力和完成度之高也是让人佩服。

现在的官网 Hero Image 使用入口按钮取代了应用图标的位置。这是因为，一方面他们不想靠太多的视效来干扰用户浏览官网，还是以实用为先。另一方面知名度和市场既然已经打开，找来官网的大部分人都是想要快速进行注册和使用，还是要以效率为先。

五、Linear 式网页制作实操 最近正好跟 Framer 官方教程学了 Linear 官网的流光小动效。

趁热打铁，再来复刻一下（需要具备 Framer 软件基础）。

可以先在 Figma 里设计完成界面，再通过 Figma to HTML with Framer（插件加链接） 插件导入到 Framer 里制作，使其成为真正可交互的网页，全程零代码。

篇幅原因省略界面制作部分，源文件和插件贴在文末，可以在 Framer 里打开跟我一起做：

Framer 内界面全貌

第一步：紧贴截图右上角，新建一个宽 100px，高 1px 的矩形；布局选择 absolute （绝对定位）；填充色选择横向渐变，色值区间：#5E6AD2，0%～#6875E8，80%。

第二步：选中矩形，在右侧属性栏点击 effect（效果）；在弹出菜单里点选 loop（循环）；选择 delay（延迟）3 秒，为每次的循环增加一个缓冲时间；scale（比例） 设为 1。

第三步：矩形需要向右水平移动，所以我们需要设置 offset （移动路径）的 X 轴坐标参数，可以边点击步进器向上箭头边进行预览，顺势给矩形敲定一个合理的退场位置。

第四步：更改矩形的 opacity（不透明度），好让它以淡出的形式退场。这里直接把 opacity 的参数改为 0 即可。

第五步：然后设置 transition（过渡动效），缓动选择 ease out（缓出），把动画播放时长改为 1.5s。

预览一下，动画每隔 3s 播放一次，播放一次耗时 1.5s。

第六步：因为我们需要做出流光沿截图外边缘滑动的效果，所以在截图的纵向上也需要添加一段渐变矩形。

可以直接复制横向矩形，再把宽高参数对调，然后因为是向下移动，所以要设置 offset （移动路径）的 Y 轴坐标参数。

因为要制造流动的感觉，所以两段渐变不能同步进行，所以把 Delay 的时间改小一些，比如改成 2。其他操作都一样，篇幅原因，这里就不重复了

然后点击右上角蓝色「Publish」按钮，更新一下，发布完成！

现在你已经做了一个真实的 Linear 风格的网页了，去浏览器里看一看效果吧。

操作十分简单，但效果却非常显著，小小流光动效大大提升了页面质感。

好啦，到这里，你已经会做 Linear 式设计了，那就愉快地应用到设计工作当中吧，相信一定会为你的作品锦上添花的。

六、还有哪些 Linear 风产品？ 采用 Linear 设计风格的网站和应用其实都有一个专属的名称叫做：Linears。

下面就来看看都有哪些不错的 Linears 值得我们学习借鉴！

1. Raycast

首推 Raycast，一款我自己在用的 Mac 上的效率工具，类似 Mac 原生的 Spotlight，听名字都知道它也是 Linear 那挂的。Raycast 有强大的插件社区，目前产品也已接入 AI 功能，正在内测中。

Raycast 官网

Raycast 的设计也是自成一派，每打通一个应用就会为其重设计一款 Raycast 风格的应用图标（犹记得当年锤子手机也是这么干，时光啊！），包括当时给 Arc 设计的这个图标一放出来，也是立马就被刷屏了！

Raycast 的官网设计文件可以在 Figma 里打开来看一下细节：

切换到轮廓模式，可以看到设计图是相当复杂的，层级很多。

2. Cron

Cron 是一款连续两年获得 Product Hunt 金猫奖的日历应用，号称是为专业人士和团队打造的下一代日历。也是我自己在用的产品，用户体验不错，网页端使用需要在官网申请候补。

Cron 官网

这款应用目前已经被 Notion 收购了，跟 Arc 也是好基友（数数 Arc 到底有多少好基友），最近 Arc 浏览器的固定标签也支持了对 Cron 进行预览。

Notion 发推晒自己的好基友

3. FEY

一个投资管理桌面应用程序，官网做得也很有质感，背后团队是 Narative，一个远程协作的独立工作室。

Narative 团队官网

4. Linears.art

一个专门搜集 Linears 的网站，需要更多灵感可以去逛逛。

总结一下 来复习一下，前面我们了解了 Linear 这款产品，一起拆解了 Linear 的设计思路，并对其设计进行了复刻实操，最后又欣赏了一些 Linear 风格的产品。

既然学习了 Linear 的设计风格，也更应该学习其背后先进的产品理念。

Linear 的 CEO 认为，当下软件市场竞争激烈，所有的产品团队实际上都是边冲刺边工作的，大家都在追求增长，几乎没有精力去打磨设计，造成产品同质化严重又毫无生气。

反过来，无法在功能上提供太多实用价值的产品，又会通过堆砌各种有趣的设计元素来转移注意力，造成过度设计，给用户的操作铺满障碍，让人不知所措。

如何兼顾设计体验与实用性是创新型产品必须去考虑的事情。Linear 给很多产品都打了样，也帮很多初创产品树立了信心。

这里再插播一下，前段时间硅谷银行危机导致很多初创公司受到影响，Linear 则自发向初创公司（即使不是 Linear 的客户）无偿提供借款，以帮助他们临时过渡，格局之大也的确值得称道。

也许做一款设计精美、性能卓越、有格局讲格调，又能平衡好产品体验和商业价值的产品。并不在于雇佣多少人分多少组，不在于讲多少 PPT 和开多少会，更不在于打不打卡坐不坐班，甚至不在于设计稿要不要给图层命名。

只要做这件事的人都是专业的，就足够了！

学习资料：

提醒一下，互联网产品迭代快，所以文章内容具有时效性。仅能保证文章发出时，相关内容和图片都是最新的，非必要不对内容进行更新。若对产品感兴趣建议收藏以下地址，筛选了学习资料一并贴出，请自行拓展阅读。

Linear 相关资料

Linear 官网 Linear 旧版官网 帮助文档 使用准则 有趣的自述文件 实时数据服务页面 设计精美的活动页面 年度总结活动页面 YouTube 账号 CEO 讲述设计对初创公司的重要性 针对 Linear 创始人的访谈 Linear 风格网站

Raycast 官网 Cron 官网 FEY 官网 Linears.art Framer 相关资料

Framer 官方教程 Figma to HTML with Framer 插件 文中的 Framer 设计文件 文中的 Framer 动效官方教程 文中涉及图片格式和 CSS 属性

WebP：

https://developers.google.com/speed/webp?hl=zh-cn https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types https://github.com/Bulandent/blog/issues/17 SVG：

https://flaviocopes.com/svg/ https://developer.mozilla.org/zh-CN/docs/Web/SVG 蒙版属性：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image https://css-tricks.com/clipping-masking-css/ 渐变函数：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient 噪点效果：

https://juejin.cn/post/7130053304113889311