案例教程 - Axure中文学习网

这个是一个自定义搜索组件，可实际应用于用Axure做高保真个人网站，集合常用的搜索在一起，可以灵活切换如：百度、搜狗、必应、谷歌、知乎、bilibili、微博、豆瓣等 ... Axure中文学习网 文章 文章用户商铺文档圈子 {{userData.name}}已认证 文章 评论 关注 粉丝 ￥{{role.user_data.money}} {{role.user_data.credit}} 您已完成今天任务的 私信列表所有往来私信财富管理余额、积分管理推广中心推广有奖励NEW任务中心每日任务NEW成为会员购买付费会员认证服务申请认证NEW小黑屋关进小黑屋的人NEW我的订单查看我的订单我的设置编辑个人资料进入后台管理 登录 快速注册 全部标签 案例教程 Axure教程：用中继器做一个漂亮的系统首页 Axure中继器初级教程：用中继器做一个漂亮的系统首页展示内容 案例教程7.7k1 黄老师20年11月27日 Axure学习笔记：自定义搜索，模拟真实网站搜索 这个是一个自定义搜索组件，可实际应用于用Axure做高保真个人网站，集合常用的搜索在一起，可以灵活切换如：百度、搜狗、必应、谷歌、知乎、bilibili、微博、豆瓣等网站搜索。

案例教程4.1k0 黄老师20年11月27日 Axure中继器教程：使用中继器实现菜单及tab页签联动的展示 一、效果展示效果如下：二、绘制元件1、【中继器1】：命名为“菜单”，将中继器中的矩形命名为“菜单矩形”，矩形大小设置为230*184。

备选数据的列：id，menu，url。

添加的备选数据如下：2、【中继器2】：命名为“页签”，将中继器中的矩形为“页签矩形”，矩形大小设置为120*30。

备选数据的列：id，menu。

不设置备选数据。

设置矩形“页签矩形”的交互样式：选中设置为紫色背景，白色字… 案例教程6.8k0 小璐20年11月6日 Axure中继器初级教程：用中继器做一个漂亮的系统首页展示内容 今天和大家分享如何在axure里，用中继器做一个漂亮的系统首页。

大家也可以把这边文章当作中继器的初级教程，本教程中就讲到设置文本、图片、筛选这几个常用的交互事件；希望通过这个案例，能让大家学会用中继器。

原型效果介绍：本文所涉及的原型预览地址：http://demo.axureshop.com/?url=http://cloud.axureshop.com/y6yztl&buyurl… 案例教程3.3k0 黄老师20年11月3日 教大家用Axure制作与系统时间匹配的时钟 大家好，我是大马猴，今天给大家带来一个可以与系统时间匹配的时钟。

话不多说，先上动画效果展示：教程开始：一、先准备需要的组件，1、指针（秒针、分针、时针）大家可以用场举行代替，也可以下载自己喜欢的样式。

2、然后准备圆形4个，前3个大小随意，但是这3个圆形尺寸要一致，第四个要小一些，可以把指针尾部都盖就可以。

3、动态面板一个，state1，复制一个，state2，用于改变状态。

4、几个矩… 案例教程7.5k0 黄老师20年7月4日 Axure高保真滑动拼图解锁实例教程 大家好，我是大马猴，又见面了，今天给大家带来一个滑动拼图解锁元件，及2段教程。

如果大家对我的教程及作品感兴趣，可以到我的商城店铺去看看其他作品，都是高保真制作。

商城地址https://www.axureshop.com/shop/3602欢迎大家一起交流学习效果演示（教程在下面）一、滑动教程：1、首先准备5个元件（看个人喜好，5个矩形也是可以的，起名字也随意，大小按照下方给的数值来参考，… 案例教程7.1k0 黄老师20年2月21日 Axure神奇操作实例-通过循环模拟弹幕 在前两讲中我们讲解了如何通过元件的触发交互或者通过外部动态面板介入来实现循环的效果，那么本次教程趁热打铁，我们讲讲解如何通过循环来模拟页面的弹幕功能，先看下最终实现的效果。

交互解析按照一贯以来先思考后动手的习惯，我们来看下这个效果设计到哪几方面的内容：模拟自己填写的内容发送功能（包括按钮的禁用与启用等）模拟除本人以外的其他用户发送内容的功能模拟弹幕的自动滚动那么我们来分析下这三个功能如… 案例教程7.4k0 黄老师19年11月3日 2、移动端查看——Axure使用交互 写在开头：相信许多产品新人在用Axure做完原型之后，都会遇到过这样一个问题：想在手机移动端做展示，但是却因为各种原因无法正常显示出来，本次教程就以iphone6作为材料进行讲解（因为本人用的就是iphone6，其他品牌机可以按照下面原型尺寸进行设计试用） 开始原型设计一、确定原型尺寸就像ios系统的iphone一样，虽然所分的系列、分辨率不同，可原型尺寸却很有规律（原… 案例教程15.1k0 老Y18年10月12日 1、雷达效果——Axure实用交互 写在开头：只是较为基础的交互动画教程，目的是呈现出更为直接的视觉感官。

个人感觉，工作之余研究使用Axure的逻辑关系，也是种不错的放松渠道。

首先，来看一下动画演示在线演示地址：案例演示 元件图形样式、颜色、展示的文字都可以根据自身喜好进行修改。

 开始原型设计一、创建所需元件图形1、首先需要在画板上创建一个100*100的矩形元件，并点击图形右上角的改变形状，选择心的图… 案例教程13.8k0 老Y18年10月10日 Axure案例：用中继器实现便捷好用的3级菜单 提示1：本篇教程可能不太适合新手，以及不了解中继器、全局变量、系统变量等使用的…新手提示2：文字其实不多，截图太多，所以看上去很长，也可直接翻到末尾查看所有的用例，其实并不多之前有介绍过使用中继器制作2级菜单，可以看出，使用中继器完成类似的多重复列表时比较便捷，至少比在N层动态面板来回切不断复制要轻松一些。

这回我们尝试换一个思路来完成3级菜单。

该思路两样适用于制作2级菜单，甚至更多层级的菜单… 案例教程28.2k0 牧逸18年9月27日 Axure教程：广告图片自动轮播+点击切换 广告图轮播在日常的原型设计中是最常见的了，今天和大家分享如何制作自动轮播+手工点击切换，底部有已制作好的原型文件下载，废话不多说，咋们现在就动手实现。

首先看一下我们最终想要的效果一、制作自动轮播1、选中图片右键转换为动态面板，同时在动态面板中添加第二张和第三张广告图。

如下图2、点击页面空白处，设置页面载入时事件，选择设置动态面板效果，选择banner图片动态面板，把状态设置为Next… 案例教程22.7k1 yichen18年9月17日 Axure案例：超逼真模拟注册登录 注册和登录作为互联网产品的一项基础系统功能，本文将从原型及交互设计的角度讲述如何实现这两项基础功能，如果想学习注册和登录的产品功能设计，可以参考我之前写的一片文章《创业公司新产品的注册登录如何设计》注册期望交互效果账号账号输入框只能输入11位数字，超过11位则无法输入假设手机号13301182876已被注册，则提示：该账号已被注册假设输入11个1时，系统判断不是手机号，则提示：请输入正… 案例教程26.8k0 努力拼搏的80后18年9月9日 Axure案例：电商购物车 购物车功能已经成为各类电商系商品的一个基础功能，那么关于购物车页面的一些交互功能，如何通过原型设计去完成呢？本文以京东购物车为实例，将重点讲述关于购物车页面的交互用例设计。

演示地址：http://ggi20l.axshare.cn/#g=1&p=购物车观察交互通过观察，不难发现京东购物车页面主要有以下交互：1）全选：点击全选按妞时，所有商品被选中2）数量：点击加号，数量+1，点击… 案例教程24.8k0 努力拼搏的80后18年8月21日 Axure案例：用中继器做一个2级折叠菜单 之前看到过很多介绍制作2级菜单的文章，大都是制作N个子菜单，隐藏后待适当时机（点击）再显示。

看着密密麻麻的N个隐藏元件，实在头大，是否有更简洁清晰一些的原型呢？当然有了！今天就带大家用中继器来尝试完成一个2级菜单，一起来看看吧。

先看看效果第一阶段：准备基本素材元件1、拖拽1个中继器到主操作区域，如下图2、双击中继器，进入编辑中继器内的元件2-1、删除默认的矩形2-2、增加4个矩形，… 案例教程38.4k1 牧逸18年8月21日 Axure案例：QQ音乐播放页面 摘要：本文通过讲解制作QQ音乐交互原型的过程，了解如何实现旋转、计时器以及拖动等常见的交互效果。

案例中综合运用了动态面板的循环、状态改变、拖动、文本改变以及旋转等事件，通过本案例的讲解，相信大家对于动态面板等高级元件的综合运用又会有一个新的认识。

观察交互效果通过观察我们发现本案例中主要有以下3个交互效果：播放音乐时：•开始播放，按钮切换为暂停•唱片顺时针匀速旋转•进度条水平向右逐… 案例教程22k0 努力拼搏的80后18年8月1日 Axure案例分享：产品新人也可以轻松设计微信原型 导航主界面微信作为我们日常使用频率最高的App产品，每天的启动次数与使用时长几乎占据了使用移动终端的一半时间。

学习产品设计的你，有没有想过有一天我们自己也可以设计出可交互的微信原型界面。

微信是一个超级庞大的App，由于时间原因本文只讲解到微信的二级页面，更深层次的页面不再展开，线框图的使用也不在此文中详细讲解，重点讲解如何通过Axure实现相关交互效果，讲述实现过程中的思路和方法。

我们先来了解… 案例教程33.8k0 努力拼搏的80后18年8月1日 Axure教程：和我一起设计简书App 简书本文通过还原简书App原型的过程，进行了大量的交互设计。

在原型制作过程中，几乎实现了最常见的交互效果，主要包括：轮播图、换一批、table切换、滑动开关、分享、toast提示、计数、清空、排序、置顶，还有各类函数、动态面板、中继器的灵活运用，以及全局变量在跨页面场景下的使用。

本文将会分享实现这些交互效果的设计思路与方法，希望能够帮助到有需要的同学在原型设计的道路上更上一层楼。

一、简书是什么… 案例教程27k0 努力拼搏的80后18年8月1日 Axure动画教程之“水波涟漪” 学会一个小案例，是为了丰富我们的交互原型设计，您可以在此基础上变换出层出不穷的效果！最近在做一个视频通话的项目，刚好需要连线效果，就设计了个“水波涟漪”的效果，先看一下演示。

演示地址：水波涟漪演示 效果大家看到了，很简单，就是一个涟漪的加载效果；颜色将就看吧，不好看你自己调下。

 开始画原型一、画涟漪的波纹圈1、首先画四个原型，背景透明，边框调到最粗，颜色白色，名… 案例教程18.7k0 skyline18年7月19日 AxureRP中通过JS代码改变文本框类型 在AxureRP中通过JS代码，可以实现对元件属性以及变量的操作。

当然，这么深入的内容不适合广大的AxureRP使用者。

如果对JS有一定的了解，倒不妨结合一下，将一些复杂的交互简单化，形成可以重用的元件库，分享给大家使用。

实际上，AxureRP这款软件，它的目的也是不用编写一句代码，实现所需的原型。

接下来，说一下我要分享的内容。

因为时间有限，只为大家分享一个元件。

这个元件，就是我们经常… 案例教程12.5k0 小楼一夜听春语18年7月19日 中继器实现某一行前后插入行的操作 提示1：本篇教程不适合新手，以及未掌握中继器、动态面板、全局变量、局部变量、系统变量等使用的…新手。

提示2：本篇教程中，动作设置的具体细节，请参考文末源文件。

我们知道中继器可以实现列表，对于平常所见到的表格可以非常容易的实现。

并且，还可以通过中继器的一些交互动作实现添加、删除、更新、筛选与排序的操作。

但是，没有插入行的操作。

偶尔会在某些群里看到有人提出这样的需求：我要插入啊！… 案例教程15.1k0 小楼一夜听春语18年6月28日 Axure8.0制作水平方向上一直来回移动的箭头 本人是一名原型设计爱好者（自学了1个月左右），自己琢磨了一些小东西，分享给大家，大神路过别喷！1，分析要做到箭头来回平行移动，需要解决两个问题（1）箭头怎么实现移动（2）箭头移动后如何实现来回一直移动2，元件准备在元件库中拖一个矩形，转变为自定义形状箭头，命名为slider-jt，再从元件库中拖两个热区放到合适的位置，命名为hot1和hot2，热区作为箭头移动的界限3，添加交互为s… 案例教程13.7k0 装出男人味18年6月26日 Axure教程之美化单选框复选框按钮 先看下视觉效果（想怎么好看，完全看你的个人设计水平）图层原件复选按钮单选按钮开始制作，两种选框图层元素的是一样的，此处不做重复，拿复选框作案例1、首先从元件库，拖一个复选框进来随便起个名字，这里我起的名字叫“原件”，并且将原件设置为隐藏2、画个圆角矩形，颜色随意，你自己喜欢起名为“背景”（叫什么不重要，重要的是方便）3、画个选中状态从元件库Icons里拖一个对号进来，起名为“… 案例教程27.6k0 skyline18年6月26日 axure教程之画百分比环形图 最近，一直在画原型，遇到问题解决问题，有时间我会记录一下分享给大家，希望能帮到你。

在app原型设计时，百分比环形图是我们经常要用到的一种图形，那么用axure如何设计呢，可能你会去网上截个图代替一下，其实没必要，用axure可以很轻松的画出环形图，下面分享给大家。

软件版本：AxureRP8先看下效果完成此图，一共分三层：看到这里，我想很多人应该已经明白如何画了；下面看下步骤！第一步，… 案例教程23.9k0 skyline18年5月27日 Axure实例教程：动感切换登录注册面板 好久没有做了，今天做一次！使用AxureRP8中的一些基本功能，我们实现一个动态切换的登录注册面板。

效果图：有没有感觉很滑、很爽的样子？接下来，例行公事。

先做分析，再实现步骤。

问：用户做了什么？答：用户点击了两个标签。

问：给用户什么反馈？两个顶部的标签被【鼠标单击时】要完成以下动作：被点击的标签需要放大尺寸，而另外一个标签需要缩小尺寸。

与上一个动作同时，登录注册面板要对应的切… 案例教程22.9k0 黄老师18年2月14日 ❯ 解锁会员权限 开通会员 解锁海量优质VIP资源 立刻开通 个人中心 购物车 优惠劵 今日签到 有新私信 私信列表 搜索 扫码打开当前页关注本站公众号 返回顶部 幸运之星正在降临... 点击领取今天的签到奖励！ 恭喜！您今天获得了{{mission.data.mission.credit}}积分 今日签到 连续签到 {{item.credit}} 连续{{item.count}}天 查看所有 我的优惠劵 ￥优惠劵 使用时效：无法使用 使用时效：之前 使用时效：永久有效 优惠劵ID： × 限制以下商品使用： 限制以下商品分类使用： 不限制使用： [{{ct.name}}] 所有商品和商品类型均可使用 删除 详情 没有优惠劵可用! 购物车 : × 删除 购物车空空如也! 清空购物车 前往结算 您有新的私信 没有新私信 写新私信 查看全部 文章 评论 关注 粉丝 个人中心 我的订单 认证❯ 未认证 任务❯ 今日任务完成 升级❯ 财富❯ ￥余额：{{userData.money}} 积分：{{userData.credit}} 圈子教程授权 搜索菜单我的 发布文章 创建圈子 发表话题 提交工单