让高保真原型动起来!这个宝藏网站你值得收藏 – Axure中文学习网
axure商城

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

图片

 

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

图片

 

网站说明

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格式进行导入,当然怎么用?怎么用的更好?就看大家的发挥了。

给TA打赏
共{{data.count}}人
人已打赏
高级教程

Axure教程:用一段JS搞定动态的当前IP定位

2022-5-6 16:25:48

高级教程

Highcharts实现Axure动态可视化图表

2022-9-26 10:26:25

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索