叙述：手把手教你用Axure，制作后台管理系统框架

xubin · 发表于 2023-11-14 19:40:07

　　写在最前：这期教程，手把手教你们用Axure制作一个高保真的后台管理系统框架。高颜值，高保真，一次学习，跟着操作一次，可以复制到以后的其它原型中，方便快捷。需要原型的私信或者评论留言axure原型https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。

　　先看看效果：

　　下面开始这期教程。

　　1、打开Axure Rp，新建文档。设置三页：登录页、系统框架页、内容页。如图示。

　　2、开始设计登录页。

　　１）双击"登录页"进行编辑设计。第一步设计背景。点击软件右边的“样式”，找到“背景颜色”，这里我选蓝色。

　　２）接着，拉几条辅助线。竖的三条，分别是20、1080、1100。横的一条，是60。全部锁定。这个范围是预览时的可见范围。大小大家可以根据常规PC端的规格来做。这里我的宽度是1100

　　３）画登录界面。我们要放置一个矩形。样式中把矩形的四角变为圆角。右键选中矩形并将它转成动态面板。

　　4）双击动态面板，放置LOGO，输入框和按钮。如图所示。

　　拉入输入框，在右边设置它的参数，如图示。上下两个输入框同一样设置。

　　删除按钮的动作：

　　放置好元件后，如图示，点击动态面板，右边点击“固定到浏览器”，在弹出框中的两个方向都选择“居中”。确定。

　　输入框的动作：

　　登录按钮的动作思路：

　　到此，登录页已完成。

　　3、下面开始制作后台框架。

　　打开“系统框架”页。

　　1）先画导航栏。

　　其它菜单复制后，修改文字即可。

　　2）画二级菜单导航栏。

　　打开其中一个面板，再设置一个小的动态面板，放置元件如图示。

　　动作设置如下，

　　同时，将一级二级菜单作关联。动作如下。

　　系统框架搭建完成：

　　4、最后，制作内容页。

　　放置一个内联框架元件进去。

　　双击，选择显示内容页内容。

　　内容页这里就简单点，画个标题跟方框，因为这里主要教搭建后台框架。

　　至此，已搭建完成。再用动态面板搞一个退出的弹框。隐藏这个动态面板。设置出现在浏览器时居中

　　设置一下他们的动作。这里就不展开了。

　　至此，我们的框架就搭建完成。

　　大家学会了没？

　　都有吧自媒体导航 - 自媒体人都爱用的导航网站！

　　知乎 - 安全中心

　　我是JimmyMo，可关注我，或者加公众号：产品经理逛世界

　　你的肯定是我的动力。