欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

带拖动轨迹的页面图标菜单设计

发布时间:2017:09:03 05:02:33 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1391个文字,预计阅读时间4分钟
导语
之前在网上看到一款可以任意拖动的图标菜单,效果很是酷炫,于是想用Axure去实现它,经过一番尝试,效果还是很理想的。话说什么是带拖动轨迹的图标菜单,我也说不清楚,请看下面

之前在网上看到一款可以任意拖动的图标菜单,效果很是酷炫,于是想用Axure去实现它,经过一番尝试,效果还是很理想的。话说什么是带拖动轨迹的图标菜单,我也说不清楚,,请看下面的效果图吧。

带拖动轨迹的页面图标菜单设计


带拖动轨迹的页面图标菜单设计

(点击预览)

一、原型解析

首先,这个菜单由五个图标组成,一个主菜单图标,四个二级菜单图标;

其次,点击主菜单可以弹出或收起二级菜单;

再次,拖动主菜单图标时,二级菜单图标会跟随主菜单图标移动并形成运动轨迹。

二、设计思路

关于图标

菜单中使用到的图标,可以直接通过Axure部件库自带的图标,也可以从外部导入png图标

关于点击

点击主菜单图标时,弹出或收起四个二级图标菜单,很容易想到的是利用Axure的“移动”功能

关于拖动

对于拖动来讲,首先第一想到的是要用动态面板,因为只有动态面板才可以增加拖动事件;其次拖动主菜单图标后二级菜单图标跟随移动并形成运动轨迹,则也是利用的Axure的移动功能

三、制作过程

1、准备图标菜单


带拖动轨迹的页面图标菜单设计

这个过程其实没有什么好说的,你可以画五个大小相同颜色不同的圆形形状,也可以导入五张大小相同内容不同的PNG图片(为什么要PNG,因为你要确保你的圆形图标是没有背景色的)。

2、转为动态面板

将图标菜单选中后,点击右键,选择“转换为动态面板”,每个图标菜单需要单独转换,最终会有五个动态面板。


带拖动轨迹的页面图标菜单设计

3、排列图标菜单

将五个转为动态面板的图标(1,2,3,4,5)按照从上到下的的顺序重叠排放在一起,即1放在最上面,2~5的顺序可以随意排列。排列好后就是下面这个样子。


带拖动轨迹的页面图标菜单设计

4、增加点击事件

接下来为代表主菜单图标的动态面板1添加点击事件,要实现的效果就是:开始时点击主菜单,弹出四个二级菜单;然后再点击主菜单收起四个二级菜单,二级菜单在弹出和收起的过程中增加动效。

(1)点击主菜单弹出二级菜单

点击主菜单弹出二级菜单的效果其实就是利用了“移动”动作,当点击主菜单时,移动二级菜单2,3,4,5;另外分别设置移动的相对位置,已保证弹出后的二级菜单是可以均匀排列的,为了使弹出带有动效,可以设置移动动作的动画效果(弹性)和时间(1000ms)。


带拖动轨迹的页面图标菜单设计

上面的过程实现了点击主菜单弹出二级菜单的效果,但实际上并不是在任何时候点击主菜单都要弹出二级菜单,因为在二级菜单已经弹出的情况下点击主菜单,就需要收起二级菜单,所以此时要在上面的动作执行过程中增加一个判断条件,即点击主菜单后,满足某个条件时才会弹出二级菜单。


带拖动轨迹的页面图标菜单设计

这个条件的意思是:主菜单1接触到二级菜单2。想想什么时候会满足这个条件?也就是二级菜单收起时,主菜单1会覆盖在二级菜单2上面,也就满足了这个条件;当二级菜单弹出后,主菜单1并没有接触到二级菜单2,也就不满足这个条件。

(2)点击主菜单收起二级菜单

点击主菜单收起二级菜单的过程其实跟上面点击主菜单弹出二级菜单的过程类似,只是移动的方向相反,另外无需设置额外的判断条件,只需要在单击事件下增加一个 case2 即可。


带拖动轨迹的页面图标菜单设计

这时候预览一下原型,就可以实现点击主菜单图标弹出二级菜单图标,然后再点击主菜单图标收起二级菜单图标的效果了。接下来再来实现主菜单图标拖动效果。

5、增加拖动事件

为主菜单图标的动态面板增加拖动事件,执行的动作就是跟随拖动轨迹来移动五个菜单图标,但为了可以出现拖动轨迹效果,在执行移动二级菜单2,3,4,5动作之间增加等待时间。


带拖动轨迹的页面图标菜单设计

到此为止,大功告成。

以上就是广州网站建设公司——智唯网络为你整理的《带拖动轨迹的页面图标菜单设计》全部内容。如果想要观看网站建设案例:金融行业网站建设案例,以及其他精彩的建站基础知识可直接点击查看。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:10个用户设计测试的技巧

下一篇:浅谈页面字体设计

  • 18900 文章总数
  • 2413547访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信