今年夏天，Adobe XD 发布了两项出色的原型功能：固定元素和叠加。当您使用原型并希望它们更具交互性时，此类功能将非常有帮助。（本文由 Adobe 友情赞助。）固定元素是您设置在画板上固定位置的对象，允许其他项目在下面滚动。这样，您就可以在桌面和移动设备上获得逼真的滚动模拟。通过新的叠加功能，您可以模拟灯箱效果和子菜单等交互。
知名品牌如何使用固定元素和叠加层？好吧，让我们先看一些例子来获得一些灵感。
使用固定元素和叠加层的品牌示例从左到右：1）麦当劳 电子邮件营销列表 活动房屋2）当您点击汉堡菜单时，子菜单会向上滑动。这是叠加的示例。3) Netflix 的意大利移动网站主屏幕。4）Netflix将号召性用语设置为固定元素。当您向下滚动时，该按钮固定在屏幕底部。5) Adobe mobile home 6) 通过单击菜单符号，会出现一个覆盖的子菜单。（大预览）
在本教程中，我们将学习如何将菜单栏设置为固定元素以及如何在原型中应用覆盖过渡，以模拟通过单击按钮打开菜单。这两个示例都将在移动模板中完成，以便我们可以直接在移动设备上看到我们的模拟。我还提供了一个带有图标的 Illustrator 文件，您可以使用它来快速设置示例。
让我们创建一个餐厅应用程序，人们可以在其中从食物列表中选择要点。
|
收藏