Axure教程

  • Axure教程:跟随鼠标移动的导航菜单特效

    本篇教程将展示如何使用Axure制作一个可以跟随鼠标移动导航菜单特效,enjoy~   一、最终效果 二、制作过程 我们先了解一下本教程中用到的元素:菜单按钮+菜单背景+跟随背景移动的色块。 下面我们开始制作,首先将菜单按钮+菜单背景+跟随背景移动的色块排列至固定位置。 如下图所示: 在这里大家可能发现:同时出现了三个蓝色背景块,我们这么做,主要是...

    2018-12-01
    460
  • Axure教程:QQ音乐播放页制作

    离上一次发文到现在,已经很久没有写了,趁着这两天心血来潮,临摹一个 QQ 音乐的播放界面,因为个人能力有些不足,在这里还要感谢 Phoenix 老师、牧逸的指导,我才能够把整个效果做完 !!! 本次教程面向于有一定基础的 Axure 使用者(本文只讲解制作流程,不包含细节内容,因为都写的话实在是太多了,见谅!!),如果觉得有点难的可以看我前面的一些教程。 先...

    2018-10-02
    785
  • Axure:显示/隐藏中的推动和拉动原理分享

    本文是关于Axure中,显示/隐藏中的推动和拉动原理分享,一起来看看~ 直接上推动和拉动元件的定义: 注意点: 被推动元件的坐标需>=显示元件坐标? 推动的距离正好是,显示元件的高度或宽度? 被推动元件必须跟显示元件推动方向范围内有一定的相交? 虽说是定义,不说还好,很多小伙伴还能理解推动和拉动。分享完定义,估计晕倒一片! 我们先看看,显示隐藏的推动和...

    2018-09-25
    459
  • Axure教程:广告图片自动轮播+点击切换

    广告图轮播在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换,底部有已制作好的原型文件下载,废话不多说,咋们现在就动手实现。 首先看一下我们最终想要的效果: 一、制作自动轮播 1、选中图片右键转换为动态面板,同时在动态面板中添加第二张和第三张广告图。 如下图: 2、点击页面空白处,设置页面载入时事件,选择 设置动态面板 效果,选择b...

    2018-09-17
    426
  • Axure设计:百词斩单词翻转还原效果实现

    几天突然看到运营喵推送文章,原型设计:百词斩单词翻转还原效果实现,作者xuruiuiui,仔细看了下文章,发现作者是用墨刀这个软件做的,且是点击效果和百词斩首页还是有点差别的,然后一时手痒,自己重新用Axure做了下这个原型。 百词斩官网效果如下: 用Axure做的百词斩原型录屏。 以下是我制作该原型的步骤: 工具:Axure 1、选取组件:动态面板,动态面...

    2018-09-14
    728
  • Axure:以秒表计时为例,看如何停止及继续循环

    本文作者将尝试用两种方法来实现【秒表计时】功能,探讨一下如何实现:循环的开始、循环的结束、循环的继续。enjoy~ 在原型设计过程中,有一些常用的交互效果,涉及到循环,例如: 轮播图一直轮播 60s后重新获取手机验证码 时间显示 秒表计时 播放/暂停 而“重新获取手机验证码”又涉及停止循环,“播放/暂停”还涉及到继续循环 今天,我们尝试用以下两种方法来实现【...

    2018-09-09
    440
  • Axure:如何实现Banner导航悬浮顶部效果

    本文内容适合初级Axure同学学习,Axure高手有更快捷的方法可达此效果欢迎评论留言,一起交流学习~ 背景 相信大家在工作中遇到这样的一个难题,绞尽脑汁,尝试N种方法,还是没有做出很流畅的悬浮效果。 曾经作者也遇到这样难题,今天我将带领大家一起学习,一起解决这个难题。 这是一个什么难题? 请查看下图: 网站头部,整站导航;页面下滑时提起,悬浮置顶效果很好做...

    2018-09-04
    501
  • Axure教程:天气APP及色彩主题的切换

    本文主要介绍了用Axure制作高保真天气APP以及色彩主题切换~ 一、效果展示: 原型体验地址:https://p5eysh.axshare.com/#c=2 二、操作分析 点击index页面的上箭头按钮,天气详情上滑出现在屏幕底部,中间的信息移动到右上角,上箭头上移变成下箭头。 天气详情,点击左右箭头可以查看未来9天的天气。 点击右上角的更多页面,进入色彩...

    2018-09-04
    702
  • Axure:APP图片动态切换场景

    本文主要介绍了APP中图片动态切换的运用,一起来看看~ 效果图: 操作分析 鼠标向左/向右滑动,图片动态切换至下一张/上一张,且当前图片尺寸变大,清晰度由透明变不透明。 图片上面人物简介以上滑的形式切换。 关键要素 动态面板 准备阶段 1、首先拖入一个矩形,设置其宽高为375*667,取消边框,设置阴影(偏移x:0,y:0,模糊:20,颜色:默认灰色)作为A...

    2018-09-03
    392
  • Axure设计:双向列表带计数选择

    列表框左右双向选择效果在互联网平台中应用非常多,从左侧的待选项中选中选项移入右侧,从右侧的已选项中取消选项移入左侧。作者将通过这篇案列分享,教大家使用Axure制作实现“双向列表带计数选择”。   实现效果 双向列表均为单项选择,不支持多选或全选; 移入选项、点击选项时分别有文字颜色或背景色的变化,突出选项; 如果左侧选项没有选中,点击向右选择时,...

    2018-09-02
    1.7K
  • Axure教程:制作进度条的简单方法

    看到大家在制作进度条的时候都喜欢用函数去实现,函数的实现方法虽然精准,但是函数复杂导致耗时耗力。在能够实现相似效果的情况下,我选择使用懒人的方法好了,动态面板走起~ 效果图:   教程镇河妖 1、创建基本元件 2、为面板各状态编辑不同进度的进度条 3、回到首页,为按钮编大招 4、没错,就是这样就结束了,来呀预览呀

    2018-09-01
    495
  • Axure原型设计:活动抽奖转盘

    生活中在购物的时候经常会遇到一些可以抽奖的活动,很多时候都采用转盘抽奖的形式,抽中奖自然很开心啦,但是这个转盘原型是怎样做出来的呢,马上来看下吧! 先来个完整图,所有的布局结构,如下图: 步骤一:搭建组件 “转盘”:一个300×300白底黑框的圆形(大小适中就可以),一条垂直线,一条45度垂直线,一条水平线,一条45度水平线,四条线组成8等份,放置在圆形的正...

    2018-08-30
    449
  • Axure:PC端常见图片展位悬停效果

    再重新看一下我们要实现的效果: 优酷视频列表 – 悬停时有阴影 当当网商品列表 – 悬停时连线变化 所需要元件:图片元件 * 1; 涉及交互事件(用例):无; 涉及动作:无; 涉及动画:无; 关键设置:(元件的)交互样式。 元件的“交互样式” 我们在文章 Axure:巧用交互样式实现多tab切换效果 中使用过元件的“交互样式”。 目前,axure支持大部分的...

    2018-08-29
    380
  • Axure教程:以微信为例,模拟内容的滚动浏览并触底反弹效果

    无论是APP还是网站,上下纵向浏览或者左右横向浏览是非常常见的,除此之外,大家肯定也都注意到了一种情况一种现象:当内容浏览到底部时,继续下拉页面会出现触底反弹,顶部也是如此。今天我们以微信聊天记录为例,一起来探索这种浏览方式的实现方法。 效果图奉上 原理:拖动面板沿轴移动来实现浏览,结束面板拖动时,如果面板离开档板,将会移动(反弹)回合适的位置。 设计步骤 ...

    2018-08-22
    544