你正在阅读摹客全新内容栏目【一节摹课】。
本栏目会通过一些有趣的、实用的、好看的、新潮的实操案例,分享摹客“设计1+2”产品矩阵 —— 「1个协作平台+2款设计工具」的具体操作妙计!
带大家一步一步地解锁摹客协作、摹客RP、摹客DT中的大小功能。
一节摹课的目标是:用摹客,让天下没有难做的设计和难交付的问题!
一节摹课 Vol.3
做张圣诞贺卡🎄
小时候最喜欢过节,期盼在课桌里面翻出小伙伴们偷偷塞的贺卡。
一开始只是普通对折页,之后逐渐升级成立体可拆卸、打开会唱歌等贺卡形式,再后来,贺卡好像消失了。
过了20岁,过节就不能再像小孩子一样等着收礼物了,想重拾生活的惊喜,需要自己动手准备。今天小摹教大家做一张会动的电子圣诞贺卡,并且可以在线发给小伙伴, 氛围感直接拉满。
🤓 DEMO
设计内容:圣诞贺卡
核心效果:点击开启惊喜,圣诞雪花旋转,跳转圣诞祝福
制作工具:摹客RP
* 看!具体操作
在设计圣诞贺卡之前,需要先大概梳理设计框架,比如:想要几个界面、有哪些惊喜元素需要放入、有哪些效果想要展示。
小摹做贺卡的设计思路是:1.我想要一个可以开启贺卡的仪式感→2.开启后的惊喜进入贺卡主页面,并且页面丰富有动效→3.最后可以有单独的祝福语。
根据设计思路,拆解具体操作。
1️⃣ 按钮交互,开启惊喜
在主画板上添加想使用的开启元素,在摹客RP内有3000+的组件和图标可以选择,可以是一个组件也可以是一个图标。
小摹这里选的「开关」,双击或者拖动即可使用。
通过顶部菜单栏的「辅助画板」创建以一个和主画板同等大小辅助画板,并在辅助画板上完成惊喜开启后的页面设计。
小摹在辅助画板上画了一颗圣诞树。
拖动「开关」按钮右上角的红圈,并链接到辅助画板(注意,一定是连接画板,不是画板上的某个元素),链接后完成交互设置。
小摹这里的设置是「开启」→「显示画板」。
摹客RP内置的交互动作有几十个,可以根据自己的需要选择设置。
2️⃣ 让雪花转起来,圣诞氛围拉满
点中辅助画板名称选中画板,在操作界面右侧为画板添加交互,并将交互目标选中辅助画板里面的雪花图层。
完成目标选择以后,同样开始设置交互动作,这里也可以根据需要可以选择放大缩小/隐藏/滚动等各式各样的交互命令。
小摹选择的旋转,调整旋转角度和速度,即完成交互设置。
对每个雪花重复同样的动作,就能得到一张可以动的圣诞贺卡页!
3️⃣ 蒙版弹窗,发送节日祝福
首先,需要在辅助画板里面绘制一个元素,用于交互命令的触发。然后再创建一个辅助画面,在画板上设计节日祝福所需的相关文字和内容。
小摹这次是将圣诞树上的一个圆形装饰作为触发点,在新建的辅助画板上写上Merry Christmas文字。
同样拖动圆形右上角的红圈,链接到对应的画板。
连接后,通过交互设置完成交互。小摹的设置是:显示画板→居中→选择显示遮罩→设定遮罩颜色。
(注:显示遮罩是将底色整块覆盖在主画板上,是否遮罩根据需要选择。)
全部设置完成,点击界面右上角的「演示」按钮,就可以完整浏览贺卡啦!
4️⃣ 把惊喜,分享给兄弟姐妹
当然,贺卡要送出去才有意义!
在演示界面,点击下方的分享按钮,将分享链接一键发给好友,在线就能查收贺卡。甚至还可以邀请兄弟姐妹共同在线设计贺卡,这肯定让友谊之花越开越浓。
今天的功能学会了吗?
回顾一下本节课的4个知识点:
1.按钮组件的交互
2.让图标旋转
3.页面跳转,蒙版设置
4.在线链接分享
当然,这个实操案例只是小摹不成熟的设计,学会里面的交互,你可以玩出各式各样的贺卡风格。
赶紧来试试吧→用摹客RP做贺卡
下节课想学什么,可以留言告诉小摹哟~
🔔下课!