• 1.4_29 Axure RP 9 for mac 高保真原型图 - 案例28【中继器-后台管理系统6】功能-原位修改数据


    相关链接


    案例目标

     1. 了解使用中继器,弹窗修改数据的实现方式

    一、成品效果

    Axure Cloud 案例28【中继器 - 后台管理系统6】功能-原位修改数据

    版本更新

     一、修改功能
      1.1 文本框:点击数据位置,进入编辑状态(设备名称、规格型号、生产厂商、购置价格)
      1.2 文本框:失去焦点或键盘按下enter后,更新数据
      1.3 文本框:购置价格会对数据进行校验,需要符合规范才会更新数据,否则弹出提示
      1.4 下拉框:点击数据位置,进入编辑状态(设备类型、所属部门、使用情况)
      1.5 下拉框:失去焦点后,更新数据

    在这里插入图片描述

    历史版本Axure Cloud 案例27【中继器 - 后台管理系统5】功能-弹窗修改数据

     一、修改功能
      1.1 点击修改按钮,标记该条数据,出现弹窗
      1.2 弹窗:鼠标点击清空(Shift+C),清空所有输入框
      1.3 弹窗:鼠标点击更新(Enter),关闭弹窗,并取消标记
      1.4 弹窗:键盘按下Shift+C键,清空(Shift+C) 按钮变为按下的样式,松开Shift+C键,删除被标记的数据数据
      1.5 弹窗:键盘按下Enter键,更新(Enter) 按钮变为按下的样式,松开Enter键,关闭弹窗,并取消标记

    历史版本Axure Cloud 案例26【中继器 - 后台管理系统4】功能-删除数据

     一、删除功能
      1.1 点击删除按钮,标记该条数据,出现弹窗
      1.2 弹窗:鼠标点击确认(Y),删除被标记的数据数据
      1.3 弹窗:鼠标点击取消(N),关闭弹窗,并取消标记
      1.4 弹窗:键盘按下Y键,确认(Y) 按钮变为按下的样式,松开Y键,删除被标记的数据数据
      1.5 弹窗:键盘按下N键,取消(N) 按钮变为按下的样式,松开N键,关闭弹窗,并取消标记

    历史版本Axure Cloud 案例25【中继器 - 后台管理系统3】优化- 3D按钮、键盘操作
     一、简介
      1.1 与上一版本相比,无新增功能。但在页面交互,颜色,键盘快捷操作上做了很多改进,使用体验上有了很大的提升。

     二、背景
      2.1 背景调整为米黄色

     三、按钮
      3.1 增加了立体效果(渐变色 + 外部阴影)
      3.2 增加了鼠标悬停效果(背景变色 + 外部阴影)
      3.3 增加了鼠标点击效果(背景变色 + 外部阴影 + 内部阴影)
      3.4 增加了键盘交互效果(同鼠标点击)

    历史版本Axure Cloud 案例24【中继器 - 后台管理系统2】新增数据
     一、简介
      1.1 除了基本的新增功能,还额外添加了很多快捷操作,都是符合用户操作习惯的。比如:点击弹窗外部,退出弹窗;点击esc退出弹窗;点击enter提交数据等。但输入框中使用tab键切换功能Axure并不能实现,这里我使用alt、shift+alt键代替tab、shift+tab的快捷操作。

     二、共 x 条记录
      2.1 新增数据后 实时显示 当前数据量(使用富文本框 + [[This.itemCount]]函数)。

     三、信息设备列表
      3.1 点击 新增 按钮,新增数据弹窗 显示
      3.2 点击 新增 按钮,信息设备列表部分置灰

     四、弹窗相关快捷操作
      4.1 当前无弹窗时,键盘点击enter -> 新增数据弹窗 显示。(效果等于点击新增按钮)
      4.2 当前有弹窗时,键盘点击esc -> 新增数据弹窗 隐藏
      4.3 当前有弹窗时,鼠标单击弹窗以外部分 -> 新增数据弹窗 隐藏
      4.4 当前有弹窗时,键盘点击enter -> 进行 提交 操作。(效果等于点击提交按钮)
      4.5 当前有弹窗时,键盘点击alt -> 光标焦点进入下一文本框,并选中文本框中的文本。
      4.6 当前有弹窗时,键盘点击shift+alt -> 光标焦点进入上一文本框,并选中文本框中的文本。

     五、弹窗内部
      5.1 点击 提交 按钮,将填入信息新增到设备信息列表中。
      5.2 输入信息时,无需输入设备编号,编号逻辑为 自增
      5.3 点击 提交 按钮,新增数据弹窗 隐藏
      5.4 点击 提交 按钮,更新当前记录条数(共x条记录)。
      5.5 点击 提交 按钮,当前输入信息保留,不清空。
      5.6 点击 清空 按钮,所有输入框内容清空,下拉框变为默认选项。

     六、弹窗内部校验
      6.1 校验:设备名称、规格型号、生产厂商 不能为空
       a) 以上三者之一为空,并执行 提交动作 时,输入框上方提示 字体变红色
       b) 三个(必填)至多有一个处于红色状态。(选项组+选中状态

      6.2 校验:购置价格必须为 >0的数字
       a) 上方校验不通过则 出现提示>0的数字。等待5000ms后,隐藏提示
       b) 校验不合法输入时,除了提示信息,还要将光标放入该输入框。(获取焦点,获取焦点时选中元件上的文本

    历史版本Axure Cloud 案例23【中继器 - 后台管理系统1】框架搭建
     一、框架搭建
      1.1 按照 视频 -> 【中继器实战 xxx】 搭建即可,内容较琐碎。页面基本无任何交互功能,仅设计布局及界面。


    二、素材准备

      使用Axure自带元件。

      完成 案例23【中继器 - 后台管理系统1】框架搭建
      完成 案例24【中继器 - 后台管理系统2】新增数据
      完成 案例25【中继器 - 后台管理系统3】优化- 3D按钮、键盘操作
      完成 案例26【中继器 - 后台管理系统4】功能-删除数据


    三、制作方法

    制作方法分为三类

    1.文本输入框(普通)设备名称规格型号生产厂商
    2.下拉框设备类型所属部门使用情况
    3.文本输入框(校验功能)购置价格


    3.1 文本输入框

    注意:文本框矩形的大小、坐标相同,为了演示,下图中暂时将两者分开

    在这里插入图片描述

    矩形交互:点击矩形后,显示文本框回显数据、获取焦点(鼠标光标)

    在这里插入图片描述

    文本框交互:失去焦点、或按下Enter键后,设置当前行的设备名称的值为 [[This.text]] (文本框文字内容)

    在这里插入图片描述


    3.2 下拉框

    注意:文本框矩形的大小、坐标相同,为了演示,下图中暂时将两者分开

    在这里插入图片描述

    矩形交互:点击矩形后,显示下拉框、回显数据、获取焦点(仅为触发失去焦点动作)

    在这里插入图片描述

    下拉框交互:失去焦点后,设置当前行的设备类型的值为 [[LVAR1]](设置局部变量值LVAR1 = 当前下拉框的被选项)

    在这里插入图片描述


    3.3 购置价格(校验)

    按照 3.1 文本输入框 配置后,再添加校验的逻辑

    首先,由于校验逻辑比较复杂,所以统一由热区移动方式提交

    在这里插入图片描述

    这里校验规则和新增、修改数据时的一致

    在这里插入图片描述


    22/11/17

    M

  • 相关阅读:
    ubuntu无法使用man
    iOS15适配 UINavigationBar和UITabBar设置无效,变成黑色
    本地虚拟机centos7通过docker安装主从redis3.2
    【C++】STL之vector操作
    在ROS平台使用扩展卡尔曼融合里程计与IMU传感器
    37.讲贪心算法:如何用贪心算法实现Huffman压缩编码
    python urllib 爬虫库简单说明
    注意力机制QKV在GAT(Graph Attention Network)的体现
    基于SSM的大学餐厅菜品推荐和点评系统设计与实现
    c++继承
  • 原文地址:https://blog.csdn.net/qq_43529621/article/details/127899435