如何创建模态叠加 | Adobe XD 教程
使用 Adobe XD 中的叠加功能,在不必复制画板的情况下模拟 App 中的互动。
双手握住手机的特写,手机屏幕中显示 4 个图标(Notes、Pictures、Must See 和 Logistics)

打开样本文件或使用您自己的文件。首先打开一个包含一个源画板和一个叠加画板的设计。在该设计中,我们创建了这样一个画板:前面一个弹出菜单,后面是应用了背景模糊的矩形。背景模糊将柔化应用叠加的每个下层画板,抓住用户的注意力。

Adobe XD 画布上有 2 个画板,1 个为手机大小、1 个为小一点的叠加画板,“Appearance”(外观)面板会显示“Background Blur”(背景模糊)设置。

切换到“Prototype”(原型)模式,将画板或对象连接到叠加画板。尝试不同的“Transition”(过渡)设置,找到您喜欢的动画效果。使用桌面预览功能来预览效果。

“Prototype”(原型)模式中的 App 界面画板显示绿色的叠加边框,三个设置分别为“Overlay”(叠加)、“Dissolve”(溶解)和“Ease In-Out”(淡入淡出)

根据需要,将多个不同的画板或对象连接到叠加上。

3 个画板用绿色边框表示放置叠加的位置,每一个都通过一条蓝线连接叠加画板

看一看应用了背景模糊的叠加画板与下层各个画板的交互有何不同。

3 个移动 App 界面显示顶部带图标并应用了背景模糊的叠加画板

现在,您可以运用模态叠加更高效地打造真实的用户体验了。

07/29/2020
此页面是否有帮助?