在产品原型设计中，经常会涉及到后台系统原型的设计，如何设计出比较规范的后台系统原型是很多产品同行都会遇到的问题。结合自己在多个后台系统项目中的实际经验以及使用Axure的经验和技巧，从易维护、易复用的角度总结了本次关于后台系统原型设计的分享内容，希望能够帮助到一些有需要的朋友。
1.确定框架结构及布局方案
在开始设计后端系统原型之前，我们需要确定它的框架结构。我们都知道，产品的框架结构相当于产品的骨架。原型设计也是同样的道理。框架确定了，再往里面填充和完善功能模块就会容易得多。后端系统的结构一般是固定的，主要由以下三部分组成：
一般为了操作方便和多个模块间快速切换，后台系统的导航区和功能区都固定在页面顶部或者左侧，主刷新区域只有内容区。所以我的做法是把三部分放在一个框架页面中，用内联页面链接内容区，用导航菜单切换内容页。这种方式有几个好处：
前面提到了后端系统的框架相对固定，因此其布局其实比前端产品更加简单清晰，目前主流的一般都是自上而下的结构或者左右结构，这两种结构一般已经可以满足大部分中大型后端系统的设计需求，实际项目中可以根据需求选择对应的框架。
以下是我用Axure设计的后台系统模板，使用了两种布局方式（仅框架页面不同，内容页面相同），内容区域全部采用内联框架，点击演示地址即可体验。
左、右结构架
图中1为导航区，2为功能区，3为内容区，使用内联框架进行链接。
上下结构框架
图中1为一级导航区域，2为功能区，3为二级和三级导航区域，4为内容区，采用内联框架链接。
2.在Axure中构建结构框架
如果我们已经选定了一套框架和布局方案，那么第二步就是在Axure中创建一个框架页面，开始搭建结构。以上下结构的框架为例，搭建框架时，需要先创建顶部动态面板（包含一级导航区和功能区）、左侧动态面板（包含二、三级导航区）、内联框架。
图中1为顶部动态面板，2为左侧动态面板，3为内容页内联框架
界面中元素的尺寸为：顶部动态面板宽1366px、高50px，左侧动态面板宽200px、高800px，内联框架宽1166px、高800px。这套尺寸没有严格的标准，实际设计时可以根据需要调整。但内联框架的宽度不能小于内容页的尺寸，否则演示时内联框架会出现横向滚动条。另外还需要进行以下设置。
在框架页面的样式中，设置页面对齐方式为左对齐。
在左侧动态面板的属性中设置“自动显示垂直滚动条”。
在内容框架属性中，选择“选择目标框架”，该框架目标为加载时默认的显示页面。同时设置框架滚动条为“自动显示或隐藏”，并勾选“隐藏边框”复选框。
3.使用函数实现框架适配
完成框架结构的搭建，并填写菜单等基础元素后，在演示过程中如果需要实现像真实的后端系统环境一样，框架在浏览器中自适应的效果怎么办呢？这时候就需要利用动态面板的特性以及Axure的功能了。
第一步是处理顶部的动态面板，一般顶部区域都会有背景颜色，可以在动态面板的样式中设置背景颜色。
设置好背景颜色后，需要在动态面板的属性中勾选“100%宽度”，这样在预览时可以在浏览器中看到顶部区域的背景达到了100%填充的效果。
实现框架自适应效果的关键是函数的使用，其原理是在页面窗口大小变化时，获取浏览器窗口的高和宽，通过获取的高和宽值改变左侧区域和内容框架的大小，实现在浏览器中自适应的效果。具体设置方法如下：
在页面属性中设置窗口大小变化事件，使用函数实现自适应效果
以上就是通过动态面板和函数的设置来实现自适应框架效果的方法，有些细节可能需要在设计时进行一些探索，但如果你已经通过此方法搭建了自适应框架效果，那么你可以快速地在其他类似的项目原型中复用它。
4. 使用动态面板和功能快速设置多级菜单
后台系统中一般都会有多级菜单，以上下结构的框架为例，最上面动态面板区域的菜单为一级菜单，左侧的动态面板为与一级菜单对应的二级菜单。此时就需要一个动态面板来实现点击一级菜单时切换二级菜单状态的效果。一般的做法是给一级菜单中对应的组件添加点击事件，将二级菜单的动态面板设置为指定的状态。当有多个菜单时，如果分别设置每个一级菜单的点击切换状态，非常麻烦，但通过该函数，就不需要对每个菜单分别进行设置了。具体设置方法如下：
只需要这两步就可以快速设置多级菜单，这个方法是动态面板结合功能的一个小应用，你只需要灵活运用就可以处理很多类型的交互效果，相信会大大提高你的效率。
本次分享主要介绍后端系统框架的搭建，感兴趣的朋友可以参考其中的方法和技巧。为了方便大家消化和理解一些知识点，我决定将本次分享分为两部分，第二部分我会介绍后端系统原型设计的一些规范和细节处理技巧，同时也提供一个框架模板的源文件供大家参考，有需要的朋友请关注。
Axure 的功能对于初次使用者来说可能有些复杂，但只要理解了它们的设置原理，就能很快掌握。掌握一些基础功能的使用，就能运用到很多原型相关的细节中。本次分享只涉及到一些基础功能的使用，如果需要了解更多功能的使用，可以访问以下链接。
AxureRP 8功能及操作符文档：
