• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:怎样做低保真轨迹追踪与回放

Axure教程:怎样做低保真轨迹追踪与回放

作者: @唐先生 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure高保真原型图,axure高保真原型,axure低保真原型图,axure高保真,axure高保真app原型等相关知识, @唐先生 希望在学习及工作中可以帮助到您

对于互联网审计系统及公安系统来说,终端的轨迹与回放的意义在于实施随时追踪和记录终端行为轨迹,其目的是为了监控和抓捕嫌疑人。其实,在很多的场合我们都应用到,像共享经济项目(共享单车、滴滴等)都会采集到终端的数据,以至于在平台进行管控。

具体设计如下:

(说明:文中所涉及数字分别为X、Y、W、H)

顺序为:底稿——state1(轨迹按钮及轨迹列表的制作——动态面板1(轨迹列表)——动态面板2()底稿地图+三个水滴显示(动态地图,按照鼠标按下与主页面进入进行用例设置)-动态面板(轨迹线)),state1中包含6个动态面板,其中3个是属于水滴,一个属于轨迹列表,一个属于轨迹线,state1进入即是一个动态页面(此页面用来设置底稿及轨迹按钮)。

预览效果图

制作底稿

制作底稿的目的是为了放置动态面板和按钮部件。

拖入两个矩形,先拖如底稿矩形部件,然后在头部拖入一个矩形部件,底稿为0,40,1000,460,头部为0,0,1000,40,使其处于统一位置即可,我这属于参考;然后,拉入文字标签部件,写:追踪。

底稿,其实就是一个动态面板的state1,在state1下放置的地图,如下:

轨迹底稿及轨迹回放按钮制作

拖入动态面板,并命名为:轨迹,尺寸为:0,40,1000,460(与主页底稿保持一致);然后,命名一个单页的动态页面名称:state1(防止遗忘);

(此举等有了地图后再做,以便有个参考)在当前的底稿上(地图),拉入按钮部件,并命名为:轨迹回放。

制作轨迹素材

从百度地图或高德地图处截图插入到当前页面,已地图作为底稿,拖入动态面板,并建立三个水滴标志,然后,将水滴标志改为动态面板,设置不同颜色;并设置用例:

轨迹点及底稿图

用例设置如下(三个水滴点统一设置,当拖动时的动作):

添加轨迹线

在轨迹点及底稿图中三水滴位置插入动态面板,拖入两根先并进行设置,两根线设置为粗显,颜色任意;短线为:0,0,179,158;长线为:179,0,281,225;然后推出至轨迹/State1位置。

轨迹条件设置

轨迹回放按钮:用例设置——鼠标单击时,并在用例中设置限制如下:

短线设置
长线设置

完成按钮的设置后,即可预览,其中,水滴可在页面中进行移动。

建议

按照整体思路:先放置好动态面板,然后再进行添加素材,最后根据放置水滴的位置再放置轨迹线的动态页面,其中轨迹线的动态页面需在水滴的范围内,轨迹线不能超出动态页面的范围;具体如下:

1、放置动态面板及按钮和下拉部件,使首页先固定;如图:

2、在动态页面state1,插入动态页面及底稿,其中底稿为地图图片素材;(注意:水滴的动态页面需要先放置水滴以后再设置为动态页面,并记录水滴放置的坐标,此坐标有利于轨迹线的显示);如图:

3、轨迹线的放置与设置(具体的设置已经在上面提到)

您可能想查找下面的文章:

  • Axure教程:怎样做低保真轨迹追踪与回放
  • Axure 7高保真还原Web首页布局和交互教程
  • 如何优雅的用Axure装逼?高保真原型心得分享

相关文章

  • 2017-06-14Axure 制作下拉框省市县三级联动
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(上)
  • 2017-06-14Axure7.0教程(一)中继器的使用(1)
  • 2017-06-14Axure7.0实现动态“极验”效果(滑动验证)
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-13Axure教程:12306图片验证码的实现(随机可验证)
  • 2017-06-13三步教你 Axure 原型变身 EXE 程序
  • 2017-06-14Axure原型设计,单读APP原型分享
  • 2017-06-13Axure教程:可使用的计算器demo制作(下)
  • 2017-06-14Axure教程-体验一下 iPhone 6

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:可使用的计算器demo制作(下)
    • Axure教程:微信聊天列表原型制作(一)
    • 用Axure8.0制作简单的登录窗口
    • Axure8.0实例:简单实用的验证码
    • Axure教程 | 图片放大器
    • Axure 7高保真还原Web首页布局和交互教程
    • Axure 原型 | 关于中继器的简单使用及应用的场景
    • banner轮播axure最简易实现及手动切换
    • Axure教程:原型设计之微信朋友圈效果(中继器、动态面板、变量高级用法)
    • Axure教程:原型设计之多用户注册登录

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有