【最佳实践】设计一个带交互的Axure通用管理后台框架

那么这次我分享使用不要钱的ElementUI标准规范的元件库，一步一步的设计一个通用的管理后台原型框架。

第一步

下载ElementUI元件库

1. 打开下面的链接，下载元件库https://new.pmmaster.co/1032.html
2. 下载后，先打开Axure，然后双击元件库，出现下面的弹窗，根据自己的情况选择元件库的位置
3. 
4. 打开Axure，查看元件库列表，显示加载中，等待安装完成

   

5. 安装完成或，显示所有元件

已经有很多设计好的元件，后续设计功能也可以直接拿来使用

第二步

搭建后台框架

• 拖放admin 元件，放到画布上

• 注意元件要跟画布对齐，坐标是0,0

• 按F5，预览原型，发现两个问题，整个画布是居中对齐，然后有空白出，说明屏幕宽度大于整个框架的宽度

  

• Admin元件包含了三个部分

  • 顶部面板，包含面包屑，头像

  • 左边导航，包含logo和二级菜单

  • 内联框架，用来根据菜单的点击，显示对应的功能页面

• 设置画布居左显示

• 设置页面尺寸，我的屏幕是标准的27寸屏幕，1080分辨率，所以我设置画布宽度为1920，选择“WEB”
• 你要根据自己的实际情况去设计宽度，比如你是给程序员看的，他们的PC电脑屏幕都是1080分辨率，那你就设置1920的宽度，如果他们都是笔记本，那你需要去问下他们的分辨率是多少，然后调整为对应的宽度

• 调整顶部面板和内联框架 的宽度，让他们跟画布的左边对齐即可

• 元件命名，方便查看
  

• 给菜单面板命名，方便查找和定义

• 给内联框架命名，方便查找和定义

• 设置主框架的页面交互，来控制菜单面板和内联框架的高度，避免出现超过屏幕的高度，导致出现一个主页面的滚动条

  • 按步骤设置菜单面板的交互

设置最关键的一部，设置菜单面板的高度为屏幕高度，但是宽度固定的，不需要设置，留空白即可

这个交互的意义就是，当浏览器发生变化时候，宽度不变，高度跟着屏幕一起变。

• 按步骤设置菜单面板的交互

一样的宽度不变，高度为屏幕高度，减掉50，50是顶部面板的高度。

内联框架的Y坐标调整为50，宽度设置为1740，菜单的宽度是180，总宽度就是1920

• F5预览，完美的跟屏幕一样宽，导航菜单也是自带的交互效果，面包屑也能跟着点击进行切换显示，但是内容是空白的，需要我们后面设计好关联上即可
• 当页面内容没有超出屏幕宽度的时候，就不会显示滚动条，当内容超出时，只会显示内联框架的滚动条，不会出现屏幕的滚动条，因为内联框架的高度和顶部高度是不会超出屏幕高度的
• 最后实现的效果就是，整个原型的高度会跟着屏幕去自动适配

第三步

改造导航菜单

现在的导航菜单是自带的，但不是我们的功能，按电商功能做两个二级菜单功能

• 用户管理

  • 用户列表

  • 用户分组

  • 用户标签

  • 用户等级

• 商品管理

  • 商品列表

  • 商品分类

设计的详细步骤如下

• 先把一级菜单和二级菜单的名字对应改过来，注意的是，每个二级菜单组都是一个动态面板，都有两种状态，一种是展开状态，一个是收缩状态，两种状态都要改下菜单名称

• 修改一级面包屑的显示文本，如图，把“基础”改为“用户管理”，记住所有二级菜单都改一遍，每个二级菜单对应的一级菜单是不同的，不要改错了

• 调整面包屑的文本宽度，要能显示出四个字，根据自己需求，去控制宽度。并且改为要显示的第一个菜单功能的名称，通常情况下显示的是首页仪表盘，这里是演示

• F5预览，点击二级菜单，显示对应的面包屑，点击一级菜单折叠和展开，完美

第四步

添加功能关联

我们希望点击菜单的时候，能显示对应的功能页面，而不是刷新整个页面，这时候就需要关联内联框架，并且将功能页面都建好

• 先按一级和二级的功能列表，Axure建好文件夹和空白页面

• 每个页面简单的放一个文本，显示功能名称即可，方便识别页面显示是否正确

• 设置内联框架打开对应的功能页面

  • 选中二级菜单，点击交互

  • 这里面的交互都是设置好的，不要删除

  • 看到“框架中打开链接”

• 点击“选择页面”，然后选择跟菜单名称对应的功能页面，选择后保存即可

• 设置内联框架默认显示的功能页面，我们这里设置显示“用户列表”

  • 第一种，双击内联框架

  • 第二种，点击“添加框架目标”

• F5预览，点击对应的二级功能，就会打开对应的功能页面

第五步

功能页面布局设计

因为我们新建页面时，默认了我们之前的设置，统一都会是1920的宽度，那这个时候预览，你就会发现下面多了一条很可怕的横向滚动条，我们希望不要出现横向滚动条，整个页面会更和谐好看。

• 先将功能页面的画布宽度设置为主框架里内联框架的宽度1700，这样就不会出现可怕的横向滚动条了

• 为什么不等于内联框架的宽度1740，因为当内容超出内联框架的高度，就会出现纵向滚动条，而滚动条的显示会大约占用20，这里要把20的宽度留出来，不然会造成横向滚动条的显示

• 另外左右两边留出10的间距，避免挨着边框，很难看

• 画布要一直保持居中显示

• 将页面的填充色，设置为灰色，这样跟主色的白色区分开，间距就明显体现出来

• 因为后台大多是查询功能列表，添加两个布局面板，面板的参数参考下面图片

面板上下之间的间距是10

底部需要增加一个透明的间距20，先复制一个白色的面板，设置高度为20，然后设置填充色为透明

• F5预览原型，记得把axure的导航关闭

运行后要从后台框架点击进去，才能看到整个框架，之后把顶部的Axure导航关闭

这就是一个完美的框架+功能布局

分享一个小技巧

新建功能页面的时候，不要直接新建空白页面，这样所有的设置都要重新来一遍，很繁琐，可以直接复制已经设置好的页面，然后直接复用所有的设置。

第六步

查询功能设计

我们先从设计一个查询功能开始

• 添加查询条件
• 增加查询操作
• 添加数据表格
• 增加数据操作
• 增加数据分页

• 点击表单模块，会有很多的组件，拖放到上面的面板，修改对应的字段名称即可

• 点击基础模块，有一些基础的按钮之类的元件

• 点击table模块，可以选择一些数据表格，分页的元件

• 设计时，不一定使用element的元件库，可以使用自己熟悉的元件库

注意：这里的数据表格，并非最优最方便的设计，使用了中继器，可以根据实际情况和自己的习惯，使用自己熟悉的组件

• F5预览，一个简单的查询页面功能就设计好了，完美

你学废了吗？看完是不是觉得很简单，下一次我们尝试在原型上加入需求文档的描述，让这个原型更完整。

感兴趣的可以入群

本篇文章来源于微信公众号: 产品教练