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

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


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

  先看看效果:

  下面开始这期教程。

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

  2、开始设计登录页。

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

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

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

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

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

  删除按钮的动作:

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

  输入框的动作:

  登录按钮的动作思路:

  到此,登录页已完成。

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

  打开“系统框架”页。

  1)先画导航栏。

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

  2)画二级菜单导航栏。

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

  动作设置如下,

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

  系统框架搭建完成:

  4、最后,制作内容页。

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

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

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

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

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

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

  大家学会了没?

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

  知乎 - 安全中心

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

  你的肯定是我的动力。

欲望! 发表于 2024-2-22 18:30:40

路过,学习下

liukai 发表于 2024-2-22 18:31:23

过来看看的

小猪芬迪克 发表于 2024-2-22 18:37:32

好好 学习了 确实不错

吴浩 发表于 2024-2-22 18:40:08

谢谢楼主,共同发展

国家 发表于 2024-2-22 18:42:48

过来看看的

苦浪漫 发表于 2024-2-22 18:46:39

谢谢楼主,共同发展
页: [1]
查看完整版本: 叙述:手把手教你用Axure,制作后台管理系统框架