小楼axure 图文教程（八）带遮罩层的弹出框

Axure带遮罩层的弹出框设计教程 在本教程中，我们将学习如何使用Axure设计带遮罩层的弹出框，实现弹出框在页面上下左右滚动时保持水平和垂直居中的效果。该教程来自产品经理博客：诉客-产品经理的心声，并提供了详细的步骤指南和示例原型下载。 知识点1：Axure的动态面板 在Axure中，动态面板是一种特殊的控件，可以在不同状态之间切换。我们可以将其用作弹出框、对话框或其他交互式元素。在本教程中，我们将使用两个矩形，转换为动态面板，并设置标签为“遮罩层”和对话框。 知识点2：遮罩层设计 遮罩层是指在弹出框出现时，页面上的其他元素都会被遮盖的灰色或半透明层。我们可以通过设置矩形的大小、边框、填充色和透明度来设计遮罩层。在本教程中，我们将设置矩形的大小与网站页面大小相同，并设置边框为“无”，填充色为灰色，透明度为50%。 知识点3：弹出框设计 弹出框是指在页面上弹出的对话框，可以包含按钮、文本、图片等元素。在本教程中，我们将设计一个简单的弹出框，包含一个关闭按钮和一个文本框。 知识点4：固定到浏览器窗口 在Axure中，我们可以将动态面板固定到浏览器窗口，以便在页面上下左右滚动时保持水平和垂直居中的效果。我们可以勾选固定到浏览器窗口，水平和垂直都选择居中，并勾选“保持在前面”。 知识点5：Onclik事件 在Axure中，我们可以使用Onclik事件来实现交互式效果。在本教程中，我们将设置按钮的Onclik事件为隐藏遮罩层和当前编辑的动态面板。 知识点6：原型设计 在Axure中，我们可以设计各种原型，例如弹出框、对话框、菜单等。在本教程中，我们将设计一个带遮罩层的弹出框原型，实现弹出框在页面上下左右滚动时保持水平和垂直居中的效果。 知识点7：扩展应用 在Axure中，我们可以使用固定到浏览器窗口的方式来实现各种交互式效果，例如网站两侧的对联广告、浮在页面上的一些按钮、图片等。通过这种方式，我们可以设计出更加丰富和交互式的原型。