做一个平台的高保真原型开始,我们需要确定好产品的需求,确定产品主要功能,比如画一个产品的业务流程图、产品结构图、思维脑图,对做产品原型都是很有必要的。对于网站的后台管理系统模板,需要确定产品的一级菜单、二级菜单,剩余的就是添加原型页面了。

(1)首先,打开Axure RP7.0,给文件命名为“网站后台管理系统模板”,在index页面制作页面的header、footer、menu。我制作原型字体一般都设的是“微软雅黑”,在制作原型开始,设置一下元件默认编辑样式,以后就不用再修改了。

(2)header、footer、menu区域都制作完成,接下来就是在menu区域完成一级菜单,制作二级菜单,需要创建一个动态面板,在menu区域旁边拖入一个动态面板,先制作好一级菜单和二级菜单的元素,事件在制作完成再添加。

这里,制作一级菜单的交互样式不再详述,请参考相关文章链接。

制作二级菜单,有几个一级菜单,就给二级菜单的动态面板添加几个state,分别在state里添加二级菜单元素。

菜单包括:用户管理(个人用户管理/企业用户管理)、系统设置(管理员管理/角色管理/权限管理)、客服服务(咨询管理/评论管理/投诉管理)、平台运营(基本设置/广告管理/统计报表)

其中,个人用户管理的元件命名为btn1,管理员管理的元件命名为btn2,咨询管理的元件命名为btn3,基本设置的元件命名为btn4,后面设置交互事件的时候会用到。

需要说明的是,在制作二级菜单元素的时候,交互样式跟一级菜单的交互样式大同小异,主要是“设置【选择组】”,每个state的菜单设置选择组命名不可相同,我们需要每个state中的二级菜单其中一个为选中状态。

(3)这时,一级菜单和二级菜单的元素,以及交互样式都设定好了,一般在后台管理系统都有个位置导航、时间、管理员、退出登录按钮。在后台原型里,header、footer、menu区域都是不变的,所以我们需要添加一个内联框架,此处链接不同的页面。在位置导航添加了两个Lable,分别命名为firstLable、secondaryLable,后面设置交互事件的时候会用到。

(4)现在,原型所有的元素都已确定完成,现在到最重要的步骤了,交互事件。首先设置一级菜单的交互事件,选中“用户管理”的图标按钮,设置二级菜单动态面板状态为“用户管理”,选中当前元件、个人用户管理btn1,设置firstLable、secondaryLable的值分别为用户管理>、个人用户管理,最后需要在内联框架里打开个人用户管理页面。

其他的一级菜单照此事件添加。

选中“个人用户管理”按钮,设置选中当前元件,设置secondaryLable值为“个人用户管理”,在内联框架里打开个人用户管理页面。

其他的二级菜单做相应的改变就可以了。

最后,模板就制作完成了。

Axure RP7.0制作网站后台管理系统模板(一)相关推荐

  1. CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)

    CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

  2. CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)...

    CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

  3. 《特别推荐》10套精美的免费网站后台管理系统模板

    大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息.管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员 ...

  4. 10套精美的免费网站后台管理系统模板

    Admin Panel Template 这个后台管理模板的导航设计非常漂亮,头部还有未读的短消息和提醒的条数显示. 在线演示    PSD下载    HTML&CSS下载 Charisma ...

  5. MFAN通用企业网站后台管理系统模板

    介绍 MFAN通用企业网站后台管理系统模板基于layui制作,响应式设计,自适应分辨率,兼容PC端和移动端,全套模板,包括登录.前台菜单.后台菜单.文章管理.单页管理.邮件系统.个人信息.系统设置等H ...

  6. 功能强大的html网站后台管理系统模板代码下载

    原文:功能强大的html网站后台管理系统模板代码下载 源代码下载地址 视觉效果不错的后台模板,很完整用于后台开发.. 由最代码官方编辑于2016-7-4 9:29:43

  7. 10设置精美的免费网站后台管理系统模板

    虽然转移.但好东西不应该是沉默 原文地址:http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.ht ...

  8. 10款网站后台管理系统模板_bootstrap网站后台模板_html后台模板下载(一)

    响应式电子商务后台管理ui模板 社交社区博客网站HTML模板 多用途的电商管理后台HTML模板 企业OA系统登录页面模板 Bootstrap聊天应用程序页面模板 炫酷登录注册自由切换页面 学校教育课程 ...

  9. 10款网站后台管理系统模板_bootstrap网站后台模板_html后台模板下载(二)

    实用的企业网站后台页面模板 科技感的登录页面动画模板 Bootstrap餐饮业务管理系统后台模板 虚拟农场区块链后台管理模板 健身app管理后台ui界面模板 实时消费数据监控图表页面模板 云文件存储管 ...

最新文章

  1. Android 开源框架 ( 十六 ) 视频播放器 --- JiaoZiVideoPlayer(JieCaoVideoPlayer)
  2. Mysql的int类型探究
  3. jQuery-处理class属性
  4. Asp.net正则获取html内容
  5. JUC多线程:JMM内存模型与volatile内存语义
  6. boost::serialization模块实现快速二进制归档的测试程序
  7. 小程序----面试题总结
  8. Vue 自定义组件 —— slot插槽
  9. 手写注解实现SpringMVC
  10. java变量和方法的覆盖和隐藏(翻译自Java Tutorials)
  11. Sql 语句:显示 Sql Server 中所有表中的信息
  12. 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro (附源码)
  13. AMPL-最短路选择问题
  14. sht20中写用户寄存器_SHT20 IIC 寄存器概述
  15. twitter sdk android,android – 登录Twitter失败
  16. 跟我学c++中级篇——decay
  17. easyui打印功能实现打印解决方案
  18. Docker系列之三:使用Docker镜像和仓库
  19. 奥运比赛电视直播一览表
  20. python爬虫汽车之家全车型及基本参数入数据库(截止50524个数据)(详解)

热门文章

  1. 微信支付单笔超出额度
  2. Vue 仿蚂蚁森林能量球生成获取组件
  3. 嵌入式视频处理基础(二)
  4. 计算机主机编码怎么查看,cpuz如何查看cpu编码
  5. mkdocs-material - 中文搜索支持
  6. PicklingError: Can‘t pickle <type ‘function‘>: attribute....
  7. 网页上获取摄像头,并截取图像
  8. Panda3D 载入角色
  9. 摩斯电码-打码机练习-微信小程序项目开发入门
  10. 免费下载 [discuz!插件] 网盘伪装成本地附件V8.3