hfge.dark管理后台组件库介绍及使用说明

axure商城
  • 版本:1810
  • 设计制作:【颢丰阁】·丰
  • 适用版本:Axure RP 8
  • 更新时间:2018-10-31

主要功能说明

  1. 所有页面通过内联框架进行调用,配置完主框架后,内容页面无需配置其他菜单、弹窗、消息提醒、导航、页头、页尾等内容
  2. 暗黑系管理后台风格
  3. 自适应浏览器大小
  4. 自动展示面包屑
  5. 多事件的支持错误信息提示的登录框架
  6. 右上角浮动信息提示
  7. 左下角站内消息提示
  8. 全局弹窗组件
  9. 多集动态菜单框架
  10. 支持动态效果的页面Tab组件
  11. 支持动态效果的开关切换组件
  12. 支持动态效果的基石查询组件(包含多选和单选)
  13. 支持动态效果的复选组件
  14. 支持动态效果的滑动条组件
  15. 支持动态效果的列表式多选组件
  16. 支持动态效果的列表式单选组件
  17. 支持动态效果的下拉菜单
  18. 支持动态效果的下拉选项
  19. 常用静态组件:普通信息提示、重要信息提示、按钮、文本框、表格

组件演示地址

点击此处查看组件演示

http://demo.hfge.net/hfge.dark.1810/

开始使用

下载并导入组件

点击此处下载

http://demo.hfge.net/library/hfge.dark.1810-2.rplib.zip

下载完成后,解压缩,得到文件:hfge.dark_1810.rplib
打开Axure RP 8,在左侧元件库中点击:菜单 > 导入元件库……

选择刚解压缩出来的文件:hfge.dark_1810.rplib,导入完成后,看到新添加的元件库,下面就可以开始使用了。

全局设置

在正式开始使用之前,需要先做一下全局设置。
在菜单中找到:项目 > 页面样式编辑……
配置背景色:#242635

创建登录页

新建一个页面,命名为Login,在我们导入的组件中找到登录窗口,拖动到页面中,建议直接放到左上角0,0的位置,可以预览看一下,整个登录窗口会自动在页面居中展示。

修改提示信息

  1. 主窗口中双击新添加的组件,双击打开动态面板中的State 1状态;
  2. 选中登录按钮,在右侧属性栏中可以看到不同的触发事件;
  3. 双击用户名密码正确用户密码错误权限未开通即可修改对应的事件;
  4. 修改事件中的ErrMsg的值即为错误提示信息;
  5. 建议新增其他事件的时候,直接复制某一事件,进行修改即可保留交互方式。

创建主页面

  1. 左侧页面栏位中双击index,或创建一个新的页面,并双击打开;
  2. 在左侧元件库中找到页面框架-页面主框架,并拖动到主页面,放置到新页面中0,0位置;
  3. 现在可以直接点击预览看一下初步的效果了;
  4. 可以选中初始化说明的动态面板,点击删除,并开始下一步的使用。

主框架主要功能区域

为了跟模块化的进行设计,主框架中整合了众多的常用功能,为了更好的使用,请勿删除这些组件。

设置按钮的小红点、面包屑的背景、内联框架,请勿删除,如果不需要使用,请设置为隐藏即可。
框架中所有已经设置为组合的组合,请勿解除组合,有可能导致部分效果无法使用

菜单设置

一级导航菜单

修改导航图标

  • 如果要替换图标,请下载SVG格式(推荐从http://www.iconfont.cn下载)
  • 双击需要修改图标的选项,编辑选项的组合,可以看到如图所示:
  • 下载后的图标,拖动到页面中(在图标的组合里)
  • 在右侧的属性栏中点击转换SVG图片为形状
  • 点击交互样式设置中的鼠标悬停,在弹出窗口中配置鼠标悬停选中样式,勾选线段颜色3BB19C线宽:4,如图所示:
  • 点击样式标签,找到填充,修改颜色为E6E6E6
  • 修改新的图标宽度为20(建议锁定长宽比例进行修改)
  • 把原图标删除,把新图标放到该图标居中的位置(再次强调,不要解除组合,解除后将导致诸多菜单效果失效等问题

修改导航名称(将影响导航的浮动提示组件)

直接选中一个导航按钮(组合),修改其组合名称即可,修改完成后,浮动的菜单名称提示会自动显示为导航按钮的名称。

导航按钮的增减

删除导航按钮,建议从下往上删除,不要从中间删除,否则需要修改按钮的交互事件。

  • 删除按钮直接删除即可。
  • 增加按钮,请选中最后一个按钮,直接复制、粘贴,形成一个副本
  • 将复制出来的新组件,拖动到其他按钮的下方,请务必对其
  • 修改该按钮组合的鼠标移入时事件,双击其中的移动事件,在弹出窗口中修改Y坐标原有值+50(如:原来最后一个按钮图标的Y坐标为310,则在其下方的按钮Y坐标修改为360即可)。

二级菜单的配置

双击二级菜单的区域,打开动态面板可以看到里面的动态面板状态列表

列表名称跟到场菜单的名称一一对应

icon1状态为二级菜单模式
icon2状态为带有三级菜单的二级菜单模式
setup状态为底部菜单模式

编辑二级菜单

  • 复制icon1,修改面板状态标题为需要关联的一级菜单(即图标)的标题,进行一一对应
  • 双击打开新创建的面板状态,可以看到菜单项
  • 修改每个菜单项的名称和需要跳转(在内联框架中打开的页面)
  • 新增菜单项,请在菜单组合中复制一个菜单项的副本,进行修改

编辑带有三级菜单的二级菜单

  • 复制icon2,修改面板状态标题为需要关联的一级菜单(即图标)的标题,进行一一对应
  • 双击打开新创建的面板状态,可以看到一个菜单项的动态面板,双击查看动态面板中存在收起展开两个状态,分别修改这两个状态中菜单项的文字和连接的目标页面(同编辑二级菜单)即可
  • 新增二级菜单组,只需要复制这个动态面板,并放置在该动态面板的下方对齐,采用相同的方式进行编辑即可

统一弹窗组件,所有内容页中不需要单独设置弹窗,统一在主框架中配置,即可实现所有内联页面中的弹窗事件触发

在主框架中有一个隐藏的动态面板组件,位置见主框架主要功能区域

  • 双击打开这个动态面板可以看到这个动态面板预制的两个状态,复制一个,修改标题为你需要触发的动作,例如:保存设置
  • 双击打开它,编辑其中的内容,譬如我们修改成如下:

注意:动态面板的状态中的按钮动作,请勿删除,但可以增加您需要的事件;面板状态标题一定要跟你触发时调用的动作名称保持一致。

实战演示

之前我们已经完成了基础框架的配置,现在我们假设我们要打开的内容页面为page1,现在创建并打开page1是一个空白页面。
我们需要在主框架中的内联框架中关联这个页面。
双击页面栏中的index,打开主框架,在中间内容区域双击内联框架组件,在弹出窗口中选择page1,表示index页面打开时,在内联框架中默认加载page1
我们在页面page1中拖入我们的组件,来进行演示。

Tab组件

Tab组件支持鼠标悬停效果、选中效果,选中项默认仅有一个

  • 使用时,只需要修改tab的标题项即可
  • 删除标题项可以直接删除
  • 增加标题项只需要复制最后一个,往后排列,并调整相应的位置即可
  • 一般tab标签与动态面板搭配使用

状态切换组件

状态切换组件,支持在开启和关闭状态之间进行切换,默认为开启状态,如果希望默认为关闭状态,可以在属性栏中将选中状态去掉即可

  • 使用时,可以修改开启和关闭的默认文字和附加动作
  • 分别编辑交互动作中开启和关闭动作即可
  • 请勿删除条件判断

即时查询-多选组件&单选组件

多选组件支持在文本框中输入文字,下方展示查询结果,通过键盘敲击回车,即增加一个项目,最多支持3个项目,点击任意项目即可删除该项目,如果该项目不是最后一个项目,则后面的项目会自动前移动。
单选组件与多选组件雷同,不再赘述。

  • 直接拖动到页面中使用,可以修改提示文字信息

复选框

Axure自带的组件比较丑陋,增加了个自制的,直接拖入页面中使用即可,可修改成自己想要的文字,如果默认为选中,则直接在属性栏中选择选中即可。

滑动条

直接拖入页面中使用,支持鼠标拖动事件,支持同步显示数值百分比,由于长度计算的问题,不建议修改长度,如果要修改长度,可自行研究其组件的各项数值配置。

下拉菜单&下拉选项

支持点击按钮展开菜单/选项列表,选中后收起菜单/选项,并修改当前组件标题文字,直接拖入使用即可。

其他组件

均直接拖入使用即可,不再赘述。

由于Axure 本身的问题,如果拖入的组件存在白底的问题,请将白底的背景色直接去掉即可。

触发站内消息

我们以点击按钮触发站内消息为例,消息内容为:您收到一条站内短信,请及时查看!

  • 拖入一个按钮,修改按钮文字为:站内消息
  • 在属性栏中,双击鼠标单击时动作,添加动作全局变量-设置变量值
  • 选择msg变量,设置值为:您收到一条站内短信,请及时查看!
  • 完成。当用户点击这个按钮时,主框架中就会弹出站内消息提示。

触发提示消息

我们以点击按钮触发通知消息为例,消息内容为:保存成功!

  • 拖入一个按钮,修改按钮文字为:提醒消息
  • 在属性栏中,双击鼠标单击时动作,添加动作全局变量-设置变量值
  • 选择pop_msg变量,设置值为:保存成功!
  • 完成。当用户点击这个按钮时,主框架中就会弹出提示消息。

触发弹窗

我们以点击按钮触发通知消息为例,消息内容为:保存成功!

  • 拖入一个按钮,修改按钮文字为:保存设置
  • 在属性栏中,双击鼠标单击时动作,添加动作全局变量-设置变量值
  • 选择pop_window_name变量,设置值为:保存设置(我们之前创建了一个弹窗的动态面板,面板状态名称为:保存设置,这个名称一定要对应,否则无法实现弹窗)
  • 完成。当用户点击这个按钮时,主框架中就会弹出我们之前设置的保存设置的弹窗。
5

评论:

2 条评论,访客:2 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)
  1. 先生,您真逗
    先生,您真逗发布于: 

    感谢你的贡献,原型做得非常棒,正是我现在所需要的,不过在实际使用的时候出现了一些bug,怎么都改不好,如果出个制作的教程就好了

发表评论