Axure交互教程
文章平均质量分 79
Daisy Axure
这个作者很懒,什么都没留下…
展开
-
【Axure交互教程】购物车结算效果
作品名称:滑动拼图验证登录效果作品编号:Case010软件版本:Axure9作品类型:交互案例今天我们制作的是移动端的购物车结算效果,主要涉及的是中继器的使用,全选以及数量的计算。原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case010效果预览:一、中继器数据绑定准本元件1.拖入一个中继器元件,命名为「商品列表」,样式列表中设置布局为垂直,间距为10,填充数据如下:2.双击进入中继器,拖入下图中的所原创 2021-08-04 12:59:36 · 5094 阅读 · 0 评论 -
【Axure交互教程】 可模糊搜索的多选效果
作品名称:可模糊搜索的多选效果作品编号:Case009软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case009本文以豆瓣的添加话题页面为例讲讲如何在Axure9中实现带模糊搜索的多选选择器效果,教程有点长,请耐心观看。交互效果说明1.点击话题列表中的话题选项,上方输入框内显示选择的话题标签,最多可选择5个标签,超出将有文字提示。2.点击输入框内已选择的话题标签的删除按钮,可以删除已.原创 2021-08-04 12:55:05 · 851 阅读 · 0 评论 -
【Axure交互教程】 滑动拼图验证登录效果
作品名称:滑动拼图验证登录效果作品编号:Case008软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case008很多网站都会设置登录验证以防止机器人登录,滑块拼图验证是比较常见的一种形式,今天我们用Axure9来制作一个带拼图验证的完整登录效果。交互效果说明1.在账户密码输入界面点击登录,进行拼图验证,拖动滑块,上方拼图块随滑块同步移动,拼图失败显示文字提示,滑块及拼图返回初始位置;.原创 2021-08-04 12:51:24 · 990 阅读 · 0 评论 -
【Axure交互教程】滑块控制图片放大缩小效果
作品名称:滑块控制图片放大缩小效果作品编号:Case007软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case007图片的放大缩小显示是网站经常见到的效果,在之前的教程中我们已经讲过滑动条的制作方法,今天我们以网站中常见的编辑头像功能为例,使用Axure9制作一个滑块滑动控制图片放大缩小的效果。交互效果说明1.拖动滑块,滑块可在灰色背景条的范围内滑动,并且图片随着滑块滑动的距离等比例放大.原创 2021-08-04 12:45:52 · 715 阅读 · 0 评论 -
【Axure交互教程】 锚点滚动效果
作品名称:锚点滚动效果作品编号:Case006软件版本:Axure9作品类型:交互案例锚点滚动效果即点击锚点,页面滚动到指定的位置的效果,经常与导航结合起来运用。锚点滚动在Axure中有多种实现方式,本案例以左侧固定导航结合热区来讲讲如何实现此效果。原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case006交互效果说明1.点击左侧菜单选项,页面滚动至右侧对应内容板块。2.页面滚动时,左侧导航菜单固定,右侧内容滚动,滚动.原创 2021-08-04 12:41:15 · 1203 阅读 · 0 评论 -
【Axure交互教程】拖动滑块确定评分区间效果
作品名称:拖动滑块确定评分区间效果作品编号:Case005软件版本:Axure9作品类型:交互案例滑块拖动效果是原型设计中比较常见的交互效果,今天我们以豆瓣的评分区间筛选组件为例来讲讲如何在Axure中实现拖动滑块确定评分区间的交互。原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case005交互效果说明1.滑块及评分数值跟随鼠标拖动沿水平方向移动,移动范围不能超出灰色背景条两端。2.拖动滑块时,橙色的进度条宽度随着滑块.原创 2021-08-04 12:32:25 · 549 阅读 · 0 评论 -
【Axure交互教程】图表载入效果(柱状图/折线图/饼图)
作品名称:图表载入效果作品编号:Case004软件版本:Axure9作品类型:交互案例我们在设计原型时会经常使用到图表,给图表加一点载入时的动效会让图表更加生动。今天我们来简单介绍下在Axure中实现柱状图、折线图、饼图载入效果的方法。原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case004柱状图1.拖入一个【矩形】元件,设置初始的高度为:1px,宽度和填充颜色自定。2.矩形上方拖入一个【文本标签】,设置数字文本,初始隐.原创 2021-08-04 12:22:10 · 1044 阅读 · 0 评论 -
【Axure交互教程】利用全局变量实现跨页面传值
作品名称:利用全局变量实现跨页面传值作品编号:Case003软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case003在我们使用Axure进行原型设计的时候,在同一个页面实现点击不同的按钮切换显示不同的内容,可以通过动态面板来实现;如果要实现在a页面点击不同的按钮,在B页面中显示不同的内容应该如何实现呢?本文将介绍如何通过全局变量保存值并进行跨页面传值来实现这个效果。交互效果说明.原创 2021-08-04 12:15:13 · 1138 阅读 · 0 评论 -
【Axure交互教程】 可滑动的标签页效果
作品名称:可滑动的标签页效果作品编号:Case002软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case002标签页式导航是移动端常见的一种导航形式,可以用于让用户在不同的视图中进行切换,今天我们来讲下如何用Axure实现制作一个可滑动的标签页。交互效果说明1.左右滑动查看所有标签。2.鼠标点击时可选中当前标签,同时只能选中一个标签。3.点击位于边缘位置的标签,该标签可移动..原创 2021-08-04 12:07:38 · 837 阅读 · 0 评论 -
【Axure交互教程】 隐藏页面滚动条的3种方法
作品名称:隐藏页面滚动条的3种方法作品编号:Case001软件版本:Axure9作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case001很多朋友在使用Axure制作移动端原型时,希望内容区域在固定的区域内滚动,但是转换为动态面板后,显示滚动条会使美观度大打折扣,本文将介绍3个可以隐藏滚动条的小tips。方法一:使用设备模版素材进行遮挡1.按照下图所示准备好所有的元件,页面排列方式选择居中,这样可以保证预.原创 2021-08-04 11:03:30 · 7641 阅读 · 1 评论