让高保真原型动起来！这个宝藏网站你值得收藏

看了上面的图片，是不是觉得这样的原型很有感觉，让人眼前一亮。抓住眼球的动态图标效果，实在是太棒了。　　今天就和大家分享一个宝藏网站，使用免费的动态图标，为你的原型加分。

网站说明

Lordicon 是一个功能强大的精心制作的动画图标库， 可用于数字产品、演示文稿或视频！4 种样式 – 1,125 个免费图标 – 5,104 个高级图标。

从嵌入 HTML 代码到手动集成 – 有很多方法可以将动画图标添加到您的项目中！

嵌入代码方式：

Shopify／Wix／SquarespaceWeebly／Webflow／Webstars／Duda／Pagecloud／GoDaddy

手动添加方式：

MANUAL／Web／iOS／Android／Flutter／React／Native／Xamarin／NativeScript／Windows／Vue／Angular／QT／Skia

使用方法

点击页面顶部的ICON按钮，可以看到平台提供了Wired和System2大类，总计6000 的动态图标。

进入对应的列表页面，选择任意图标，可以看到右侧看到实时的动态效果预览。

在预览区域包含了几大部分

从下载和导出区域，我们可以看到平台支持常用的导出方式，比如html代码，gif文件，lottie文件等，除了这些还可以More按钮，选择更多的导出方式。

可以看到居然还可以导出json格式，mp4视频格式等等。

如果你不满足于预览面板中的简单修改，还可以点击“Reveal full editor”按钮

进入高阶编辑界面。

在当前页面，我们可以对图标选择不同的风格进行编辑，不同风格的编辑选项也不相同，下图为差异对比。

除了对不同颜色进行调整以外，还支持对透明度，XY坐标值位置进行调整。

当一切设置完成以后，网站还贴心地为你提供了不同场景下的预览。

这里还有一点提示一下，在选择不同导出方式的时候，还可以对当前的导出格式进行不同的设置。

比如导出HTML时，你可以选择动画的触发效果，包括：Hover、Click、Loop等

导出gif格式时，可以设置不同的背景色，以更好的适应不同背景色的场景。

导出后如何更好的应用，就要看自己啦！

结尾

可能有些朋友会问，这些素材怎么应用在Axure或者其他的交互设计软件中呢？

其实不同的原型软件，支持的格式有所不同，这也是平台提供不同格式导出的原因。

比如Axure你可以选择生成gif或者mp4格式导入，比如protopie你可以选择Lottie格式进行导入，当然怎么用？怎么用的更好？就看大家的发挥了。