Principle实例教程:如何制作“卡片滑动”和“按钮点击”变化的效果
发布时间:2022-10-01 20:59:17
Principle for Mac是一款新开发的交互设计软件。相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些。如果您还没有合适的或者喜欢的交互原型设计软件,可以考虑一下这一款Principle for Mac!
此次小编来带大家看看,Principle是如何做“卡片滑动”和“按钮点击”变化的效果。
界面设计
我这里使用了iPhone x的设计尺寸(375x812),为了后面能更好的按照流程走,最好都是用375x812设计尺寸,因为后面制作动效会使用到一些参数。界面设计如图下所示。
明确交互
根据界面设计,这里要实现的交互动效是#主题卡片滑动背景色随主题色变# #滚动条随卡片变化# #点击右下按钮展开信息#,这就是我们待会要在principle实现的动效。
图层整理
1、根据要实现的交互动效,把所有页面内容整理在一个画板里(命名页面1),滑动卡片图层分别按卡片1/卡片2/卡3命名好。
2、滚动条就按点1/点2/点3命名好
3、点击按钮展开的信息先隐藏,展开信息放置左边每个图层元素不透明度为百分之0
打开Principle
1、导入刚刚整理好的页面1,导入sketch里选中的画版(页面1)
2、把卡片1/卡片2/卡片3放置新建文件夹命名滑动, 将卡片2/卡片3向x轴移动375/750个单位,移动后把卡片2/卡片3背景图层去掉,卡片1背景放置滑动图层底部。
3、按图中指示操作,设置完后,就可以预览一下效果了,但是背景色还不会变,请继续往下看吧。
4、选中背景图层,在联动窗口设置填充,然后移动时间轴设置卡片2/卡片3关键帧,再次预览效果背景就有了变化了。
5、设置滚动点,现在把点2/点3滚动点删除,把点1滚动点复制两个命名为点2/点3,移动到合适位置
选中点1/点2/点3图层,在联动窗口设置缩放和不透明度(scale/opacity),当前点1参数(scale 1/opacity 100%),那么点2/点3 就是0.6和50%,点的缩放不透明度随时间轴变化设置
6、现在要点击右下方按钮展开功能,所以把页面1再复制一个命名为页面2,页面2把之前隐藏的展开信息显示出来(不透明度为100%)
然后将展开信息按设计效果图调整位置
下面做点击按钮切换状态,选中按钮图层,点击闪电图标选择tap(点击)将箭头指向页面2,同样的在页面2点击关闭将箭头指向页面1,页面2按钮图层记得隐藏(不透明度0%)不然就跟关闭按钮重叠了。
猜你喜欢
- 咱们都 阅历过 门生 时期, 测验是 常常的事, 挑选题上都有ABCD4个字母的选项, 那末,那些字母选项是 怎样 加之去的呢? 明天,小编
- 还在寻找一组好看的电影风格艺术效果lr预设吗?别急,今天小编给大家带来了6个专业 * 艺术效果lr预设合集,每一个摄影后期调色lr预设都经过
- 在PDF文件的使用中,编辑pdf是一大难题,小伙伴们常常看着怎么也无法撼动的PDF文件欲哭无泪在PDF文件的使用中,编辑pdf是一大难题,小
- 工具条的前三个按钮图标是对图像进行剪切的。单击第一按钮后在图像中出现一个矩形框,如果要调整矩形框的大小,可以把指针放在矩形框的边框上,当指针
- 方法/步骤首先双击桌面上word 2010快捷方式,启动该应用程序。 执行文件-打开命令,打开一篇事先准备好文字内
- 我使用的笔记本电脑,每次使用WORD时候,都会有亮线出现,这到底怎么回事啊,难道是我的笔记本有问题吗?解答:是拼写检查,没有关系,只要输完后
- 如何使用Omni Remover Mac版释放Mac上的空间?在Mac使用过程中,许多用户会遇到这样的情况:突然收到系统提示,说磁盘已满/存
- 现如今,电脑的使用越来越普及,许多人上班或者生活中都需要用到word文档办公软件,但其中一些小知识,比如如何在word中添加字体?小编在这里
- 方法一:选中需要插入对号的单元格,在【插入】选项卡下,最右侧的位置找到【符号】,鼠标左键单击,选中【更多】选项,进入符号对话框。进入【插入特
- 我们都知道如何在wps文字中合并图形,如果我们要将两张图片合并,那么,应该如何操作呢?下面就让小编告诉你 wps文字如何将两张图片进行合并的
- 音频格式不兼容?mac音频格式转换器哪个好?有选择强迫症?不知道那款音格式转换工具适合自己?今天小编为大家带来一些Mac上的音频格式转换器,
- ①打开Excel2003,看到单元格下面插入了分页符,我们想将其删除。 ②选中分页符,单击插入--删除分页符。 &
- 我们在操作电脑的时候会下载很多软件,这些软件会访问电子邮件,在这个过程中就会有泄露隐私的风险,所以我们可以在电脑中设置禁止应用访问电子邮件,
- 欢迎观看 After Effects 教程,小编带大家学习 After Effects 的基本工具和使用技巧,了解如何在 AE 中创建具有
- Menuwhere是一款菜单栏便捷工具,可以帮助你将应用程序的菜单栏放到鼠标所在位置的弹出菜单中,而且支持界面大小控制,方便大家快速进行菜单
- 欢迎观看 Axure RP 教程,小编带大家学习 Axure RP 的基本工具和使用技巧,了解如何在 Axure RP 中旋转、变换元件。元
- 某单位组织一次大型会议,要求各参会单位填写好会议回执后传回,再进行汇总。回执是用Excel制作的,有一个统一的标题行。由于参会单位和参会人员
- 在“ Excel仪表板示例:每周和每月十大活动报告”中,我介绍了Chris Helfrecht创建的两个Excel仪表板报告。在这篇文章中,
- 为了突出某一部分的内容,我们可以为其添加放大镜的效果,对于刚接触wps演示的朋友来说,可能不知道怎么办,不过没关系,下面就让小编告诉你wps
- 在计算机职称考试中,经常出现要求将一部分文字变成指定字体,现将替换功能做个演示,示例将“桌面”变成“黑体”“三号”“红色”,那么接下来就由小