精品推荐

限时优惠活动!原198包年VIP,现88;原598终身VIP,现188。随着资源不断增多,随时提价!——详情请点击。请已升级包年、终身VIP的会员添加社长微信好友。——详情请点击
您的位置:大中社主页 - 经验分享 -

如何在Adobe XD中制作弹出式叠加层

如何在Adobe XD中制作弹出式叠加层

优化用户体验是应用成功的关键。艺术家Erica Larson在其原型中创建了可重复使用的图像和菜单覆盖图,以测试其设计。在这个简短的教程中,了解Larson如何在Adobe XD中将她的移动应用程序创意变为现实。

作为Adobe Studio团队的一员,平面艺术家Erica Larson每天都在梦想灵感设计。换句话说,她制造的东西使别人想要制造东西。

在此视频中,花一分钟时间看一看Larson的过程;步骤如下所示。

步骤1:设定舞台

Larson首先复制她的主要画板。为此,她在按住Alt(Windows)或Option(macOS)键的同时单击画板名称,然后将画板向右拖动。

步骤2:搜寻和隐藏

Larson希望最初在美工板上隐藏一些元素,以便在用户与应用程序交互时它们可以进出视野。她在画板上按住Shift键并单击以将其全部选中,然后将“属性”检查器中的“不透明度”滑块移动到0%。

第3步:进入菜单

Larson单击“原型”选项卡以定义交互性。她在第一个iPhone画板上选择了汉堡菜单图标,并将电线拖到Menu画板上。她将“动作”设置为“覆盖”,并选择“向右滑动”作为“动画”,因此菜单将在画板上滑动。然后,她拖动叠加层的绿色圆圈将菜单移到适当位置。最后,她在第二个iPhone画板上的汉堡菜单上重复了此技术。

步骤4:显示隐藏的内容

接下来,Larson将一根导线从“信息”图标拖到第二个iPhone画板上。这次,她希望隐藏的元素淡入显示,因此将“动作”设置为“过渡”,将“动画”设置为“溶解”。

步骤5:减少和重复使用

Larson的最后一步是将模型脸颊上的热点连接到产品覆盖层。她选择一个点,将导线拖到“产品”叠加画板中,然后定义交互。然后,她将覆盖物移动到第二个画板上的位置。完成后,她单击“桌面预览”以测试所有内容。

创造现实的体验

为您的移动应用程序设计可重复使用的图像和菜单叠加层。

发表评论0

请先

推荐阅读

扫码添加博主微信好友

扫码添加博主微信好友
没有账号? 忘记密码?

社交账号快速登录