火星人~艾斯-CSDN博客

原创 Axure教程（中级）：网易云音乐听歌识曲效果模仿

本教程给大家分享一下模仿【网易云音乐】APP的听歌识曲界面效果做法如下，如有雷同，纯属默契： ** 一、页面布局 ** 从左侧元件库拉入一个【椭圆形】，尺寸为100*100，填充色为红色，再复制4个作为声波圆圈。其次，从图表库中拉入一个【话筒】图标，填充色为白色，选中话筒和所有圆圈，居中对齐。状态栏等其他页面元素可忽略，后面分享的文件有，具体页面元素命名如下： ** 二、添加交互 ** 1...

2019-03-11 11:19:45 1323

原创 Axure教程：苹果手机拨号原型

对于我们再熟悉不过的手机拨号键盘，今天来讲解其中的交互效果：当鼠标的悬浮、按下时，键盘的按键背景色发生变化；当点击按下数字字母按钮时，将输入对应的数字，同时显示“添加号码”按钮和“删除”按钮；当点击“删除”按钮时，将删除号码最后面的一个数字；当数字全部删除时，“添加号码”按钮和“删除”按钮全部隐藏。交互讲解一：鼠标的悬浮、按下交互选中12个数字符号按钮，在其【属性】栏中的交互样式，...

2019-11-02 17:15:12 479

原创 Axure教程：淘宝商品图片放大效果

在阅读粉小妞Holly的《Axure教程：商品图片放大效果制作步骤详解（简版）》文章后，发现跟自己的Axure8.0版本不一样，因此，根据教程及本人理解后，给读者补交另外一篇教程；在此，感谢粉小妞Holly作者的分享。效果如下：一、页面布局（1）拉入一张大小为400400和800800的照片；分别命名为小图和大图，并将大图转为动态面板，命名为放大窗口，大小设置为400*400。（2）再拉...

2019-07-08 15:38:46 814

原创 Axure教程（中级）：分类导航菜单高亮条的实现

下面这种分类导航菜单效果，大家都见过，接下来将讲解此实现效果。主要是运用【绝对位置】移动效果和函数[[this.x]]、[[Target.y]]来实现。一、页面布局从左侧拉入一个文本标签，文本为【个性推荐】，宽高为94 *40，行高为40；同理，再复制此文本标签3个，对齐排列，分别为【歌单】、【主播电台】、【排行榜】；选择四个文本标签，在右侧【属性】栏中设置【选中】和【悬浮】的交互...

2019-07-04 11:44:36 926

原创 Axure教程（中级）：banner高亮圆点的优化处理

回想一下，你实现的banner图切换时，圆点高亮的交互效果是不是跟下面类似，出现圆点组跟随图片一起向左滑动的情况，看起来很不协调。是不是在每一个state中都添加了一组圆点的方法，页面如下：其实，正确且简洁的做法应该如下：一、页面布局从左侧元件库拉入一个【椭圆形】作为【高亮圆点】并复制3个，拉入一个【动态面板】作为【banner】，如下：双击【banner】动态面板，再添加3个【s...

2019-06-27 10:35:52 805

原创 Axure教程（中级）：侧导航收缩及展开

在web端的后台管理平台，我们经常看到这样的侧导航。我们来简单模仿一下交互效果，此教程主要是运用动态面板的显隐和推拉动元件的效果：一、页面布局从左侧元件库拉入一个【矩形】作为【模块导航1】，一个【动态面板】作为【二级导航】，宽度设置为一样，如下：双击【动态面板01】，编辑【state1】，添加4个【矩形】作为展开的子导航。如下：为了美观，可以让每个矩形的文字居左，距离左边20像素，...

2019-05-25 11:02:23 1922

原创 Axure教学（中级）：验证码发送倒计时

生活中，我们经常看到网站、APP的注册页面，当点击发送验证码后，会进入倒计时，计时结束后才能重新点击发送。一、页面布局从左侧元件库拉入一个【矩形】作为验证码按钮，两个【文本框】作为手机输入框和短信验证码输入框，如下：首先双击【验证码矩形】，将文本设置为：发送验证码；其次，点击【顶部菜单栏】-》【项目】-》【全局变量】，点击弹窗中的“+”号，添加验证码的【全局变量】，这里命名为：...

2019-05-09 15:23:20 363

原创 Axure教程：（高级）跟随鼠标方向的面板滑动动画

本教程主要是运用【全局变量】获取鼠标坐标参数以及【函数】来判断鼠标入点的方向。当鼠标从元件A的【上、下、左、右】方向移入时，则元件B从对应方向滑进。当鼠标从其它方向移出时，则跟随一起移出，效果如下：一、页面布局从左侧元件库拉入一个【热区】作为鼠标触发区域，一个【矩形】作为描述B和一张【图片A】，宽高尺寸都设置为一样，居中对齐，如下：其次，将【描述B】设置为隐藏。二、添加全局变量点击...

2019-03-16 14:21:31 1056

原创 Axure教程：（初级）导航中的页面切换

一、页面布局 1、从左侧元件库拉入两个矩形作为导航按钮，分别命名为：页面1、页面2； 2、从左侧元件库拉入一个动态面板作为页面内容展示，命名为页面内容； 3、双击动态面板，点击“+”，添加状态2；再分别点击对应的状态，往里面添加任意页面内容；二、添加交互 1、按住shift键，选中两个导航按钮，鼠标右键，选中【交互样式】； 2、设置选中样式：字体颜色为白色，填充色为蓝色； 3、选中导...

2019-03-12 09:40:12 1101

qq_39882270的博客