如何更高效地展示产品的功能结构,信息展示,更好地传递产品的sense,像用户一样真实体验产品,高保真这时候需要登场了。最近在用principle制作高保真原型,配合sketch使用,可畏双剑合璧,高效好用,特此强烈推荐。同时会陆续整理相关的教程。
今天,就从打开app的第一步看到的欢迎页入手,来和大家一起看看如何用priciple制作欢迎页的翻页切换效果。这个部分同样适用于banner位轮播效果哦!那么就开始用8步制作高保准的app欢迎页吧。
1.将相关的素材在sketch中整理好,打开principle,点击import,将素材导入。以下是我导入的素材(图片素材来自dribble):
2.在页面画板中添加一个矩形,点击左上角矩形按钮,调整矩形大小为750*1334,将其颜色填充为紫色。再复制两个等大矩形,分别填充为黄色和蓝色,调整其位置均为(0,0)。
3.分别将scroll1,scroll2,scroll3合并为一个组。然后选择Horizontal的效果为page。这个时候,有一个关键点,我们需要拖动组的边界线至画板红框标注的位置(宽为750,与scroll1等高)。到这里,就实现了基础的翻页效果了,但离我们实际想要的翻页变化效果还有几小步哦。
4.页面的滑动切换自然少不了原点的指示,现在我们就来添加3个滑动指示原点吧。依旧选择在画板上添加矩形,principle没有提供其他图形的添加选择,在这里我们通过调整矩形的圆角度数来实现矩形的添加。调整其大小并将其填充为白色,透明度调整为30%。
5.接下来,需要再添加一个标识原点,填充色为100%白色,命名为r_selected,将其覆盖在r1上。
6.接下来,我们将使用到principle的Driver工具来实现滑动翻页变化的效果。点击位于上方的Drivers按钮展开Drivers控制面板,点击左侧画板控制器中的purple背景,这个时候你会看到purple出现在Drivers的面板上,点击其旁边的锚点然后选择Opacity,拖动控制线至x=750的位置,这时候我们点击锚点,0-750的锚点间会被线连接起来,说明对于purple这个元件,透明度的变化联系已经被建立,我们在750处的锚点处,将其透明度调成0%。同样的操作在yellow这个元件上重复一遍,这次,将锚点线建立在750-1500的位置上,x=750时,Opacity=100%, x=1500时,Opacity=0%。
7.最后一步,我们来控制标识原点r_selected的效果(随着页面切换,标识点指示当前位置)。我们选中r_selected,选择其锚点变换值为x轴位置。拖动控制线至750位置时,将r_selcted的x位置调整成r2的x轴位置(80)。再拖动控制线至1500,将r_selcted的x位置调整成r3的x轴位置(160)。
8.Finally, app 常见的欢迎页切换效果就搞定了。
我制作了动效gif上传至了网盘,大家有兴趣的阔以去下载哦。有问题可以随时私我。欢迎指教!
gif链接: https://pan.baidu.com/s/1bpNxfeZ 密码: baum