Aure 案例: 亲，给个五星好评呗

商家的五星好评我们在淘宝购物或大众点评点餐时，经常需要对商家的服务进行评价。那么这类应用点击星星进行评分的原型效果是如何实现的呢，本文在这里向大家分享制作这类原型效果的实现过程。准备元件，设置交互样式拖动一个矩形至设计区域，宽和高均设置为50，将其转换五角星形状。连续复制4个相同的五角星，呈水平等距离分布，分别将这个五颗星命名为1、2、3、4、5。拖动文本框至五颗星的下方，

Axure教程 2019年09月23日

【原型设计】百度搜索提示是如何实现的？

百度搜索当我们使用搜索引擎输入关键词的时候，搜索引擎会根据搜索词模糊匹配推荐一些相关的内容在搜索框的下方显示，这里也包含了我们的搜索记录。点击搜索按钮，搜索引擎就会执行搜索，利用爬虫抓取的网页，按照一定的算法返回搜索结果列表。 那么这样的原型交互效果，是否可以通过Axure完成制作了？这就是今天为大家讲解的交互案例，借助中继器实现百度搜索提示的效果。本案例的讲解适用于具有一

Axure教程 2019年09月23日

【Aure RP9 案例】京东与淘宝的商品图片是如何被放大的

摘要：在电商的商品详情页中我们经常会看到图片放大器的运用，我们以京东商品详情页为例来制作这样的原型效果。案例中综合运用了鼠标移入事件、鼠标移动事件，元件的移动、元件的显示/隐藏等交互动作。图1-京东示意图.png| 观察交互首先我们观察京东详情页中的图片放大效果。当鼠标在左侧图片上方移动时，图片上方会出现一个半透明的图层跟随鼠标移动，我们将这个半透明的图层称之为放大镜。同时

Axure教程 2019年09月23日

Aure 教程：如何实现评论的限制与清空

摘要：评论已经作为内容型产品的一个基础功能，那么评论功能中经常使用的字数限制，评论内容清除功能是如何通过原型实现呢？本文就实现这些功能交互的效果来为大家分享设计的思路与方法。准备元件，绘制线框图首先需要准备一个矩形框、多行文本框、文本标签及矩形按钮，并为这些元件命名。（养成命名的好习惯，将有助于交互动作的配置及元件的快速查找）隐藏多行文本框的边框，默认隐藏矩形按钮，矩形按钮

Axure教程 2019年09月23日

【原型设计】手把手教你巧用 Aure 制作图片轮播

通常我们在很多互联网产品的主界面都会看到各类各样的轮播图，那么这些轮播图的交互效果，有没有办法利用原型工具制作出来，现在就介绍下如何利用老牌原型工具Axure制作出多张图片轮播的效果，主要思路是通过页面载入事件、鼠标单击事件利用动态面板之间联动，从而实现多张图片的自动轮播效果。轮播图准备好部件拖动一个动态面板到面板区，为动态面板添加3个状态，每个状态导入相同尺寸的图片；注意

Axure教程 2019年09月23日

Aure RP 9 原型案例：滑块验证码

| 一、概述滑块验证是一种新的交互验证方式，与传统的图文验证码相比，更安全更智能。通常用于注册、登录、密码修改等产品场景中。如图1所示为滑块验证的示意图及元素拆解。图1-示意图.png| 二、交互分析我们来分析上图的滑块验证都有哪些交互效果：鼠标移入滑块上方，显示背景图。鼠标从滑块上方移出，隐藏背景图。拖拽滑块，滑块在滑动区域范围内左右移动。移动滑块时，滑块左侧的滑动区域

Axure教程 2019年09月23日

Aure RP9 案例：可以滑动的菜单

摘要：在PC端的产品中我们会常常见到滑动式菜单，当鼠标移入菜单上方，向下或向右自动滑动弹出子菜单，当页面信息层级较多或功能较多时，在产品设计时经常会用到这种滑动式菜单。今天就和大家分享如下制作滑动式菜单的交互原型。如下图1为滑动式菜单的示意图。图1-滑动菜单示意图.png| 元件准备元件准备首先我们利用Axure系统元件完成线框图的绘制。从元件库拖动四个矩形至设计区域，编辑

Axure教程 2019年09月23日

Aure 原型案例：淘宝手风琴菜单

摘要：手风琴菜单常常可以在PC端的页面中可以看到，无论是管理后台的左侧导航菜单还是个人中心的折叠菜单都可以看到手风琴菜单的身影，今天就和大家分享如何利用Axure RP 9制作可收缩的手风琴菜单。图1为手风琴菜单示意图。图1-示意图.png| 线框图准备拖动三个矩形至设计区域，编辑菜单内容，作为一级菜单，分别命名为系统一、系统二、系统三，如图2所示。拖动三个矩形至设计区域，

Axure教程 2019年09月23日

【原型设计】巧用 Aure 三步轻松搞定图片验证码

图片验证码再一次工作中遇到了产品设计的注册和登录模块，今天和大家聊聊如何利用Axure实现图片验证码的随机切换。以往都为了方便或者说是偷懒每次在设计验证码的时候，总会手工设置几张图片验证码作为动态面板的几个状态，利用动态面板的状态切换，基本也算实现了切换验证码的交互效果，但总觉得缺少了什么，保真度不够。回到正题，首先来分析下需要实现的效果：1、图片中的验证码为数字和字母的随

Axure教程 2019年09月23日

【原型设计】腾讯新闻 按钮, 如何一键上天？

腾讯首页当我们浏览腾讯新闻网页滚动到第二屏时，这时网页的右下角会出现返回顶部按钮，点击按钮页面迅速回到第一屏位置。那么这样的原型效果，如何利用Axure实现呢？下面将为大家详细讲解制作步骤。准备好元件素材首先我们需要搭建一个页面，这里我们摆放七个矩形框用来表达网页的内容栏目，多摆放几个矩形，使得整体网页的长度保持在两屏以上。拖入一个向上的箭头（Axure8.0中已提供）和矩

Axure教程 2019年09月23日

【原型设计】可能是关于 最细致的讲解

探索动态面板什么是动态面板动态面板是Axure中使用频率最高的元件之一，动态面板专门用于设计原型中的动态功能，它可以包含一个或多个状态，每个状态就是一个页面，在这里可以任意编辑，通过控制状态的切换或显示/隐藏来实现一些我们常见的交互效果。特定交互事件动态面板有一些自己专用的特定事件：动态面板状态改变时、尺寸改变时、拖动时、滚动时和载入时。有一些事件是通过其他用例中的动作设置

Axure教程 2019年09月23日

【原型设计】善用母版，让你的工作事半功倍

绘制原型母版基础知识讲解01 为什么要使用母版母版可以用来创建重复使用的各类原型设计元素，并对其进行全局管理，是整个项目中重复使用的元件容器。母版常用于创建页头、页尾、导航、模板和广告等。你可以在任何页面轻松的使用事先创建好的母版，而不必再次辛苦制作或复制粘贴，这就是母版带给我们的便利，你可以在母版的版面对它们进行统一管理。对母版进行的任何修改结果，修改后的结果都会同步到引

Axure教程 2019年09月23日

养成这些习惯，会让你的原型更专业

在原型设计过程中，养成一些良好的习惯不仅可以使得我们的原型更加专业、规范，同时也能够提高我们的设计效率。本文从元件、页面导航、页面样式、母版、用例等多个方面讲述养成怎样的一些习惯，可以快速提高我们的原型设计效率，并且看上去更专业。图片来自网络做好元件命名，方便查找我们知道，原型是由很多个元件以及它们的交互构造而成的。在绘制线框图的阶段，我们应该为每个元件命名，这样有助于我们

Axure教程 2019年09月23日

产品经理们，你们使用过 Aure 绘制矢量图吗？

| 钢笔工具概述要真正提高你在Axure RP工作流的方法之一是为你的团队创建自定义元件库。它可以节省每个人的时间，你会得到更具一致性的项目。可惜的是，目前没有一个好的方法来绘制自定义形状，元件库往往充斥着不同颜色、大小的图片。使用Axure RP 9提供的钢笔工具可以绘制自定义形状。绘制的形状是基于矢量的，可以自由拉伸形状而不降低图像的清晰度。我们也可以灵活调整图像的填充

Axure教程 2019年09月23日

Aure RP 9 高级教程：自适应视图

| 为什么需要自适应视图随着数码科技产品的不断发展，手机、iPad、PC类产品的屏幕分辨率越来越多样化。在进行产品设计时，为每个不同分辨率的终端屏幕设计一套原型界面，既是一项工作量十分巨大的任务，也显得没有必要。因此，我们希望能够通过设计并维护一套原型界面，能够自动兼容多种屏幕分辨率的显示器。Axure 为我们提供了这样的方便，从此以后，交互设计师们就能够高效地创建“响应式

Axure教程 2019年09月23日

Aure 9.0 案例：玩转中继器，让你的原型更保真

上一节我们讲解了中继器的基本原理和使用方法，本文通过几个实际的案例来帮助大家更进一步的掌握中继器的使用方法，感受中继器的强大。在原型设计时，善于利用中继器，可以有效提高原型的保真度。案例一：商品列表页商品列表.png商品列表页涉及的交互主要包含筛选、排序以及翻页，下面我们来看看利用中继器如何实现这些前端交互效果。拖入中继器至设计区域，双击中继器为中继器设置项，在中继器编辑界

Axure教程 2019年09月23日

Aure RP9 案例：那些熟悉的交互，原来都可以用函数实现

上一节我们讲解了Axure RP 9.0为我们提供的函数以及对应的使用说明，本节将通过具体的应用案例来说明函数在实际场景中的运用。| 知乎详情导航首先请大家打开知乎App，点击任意一个问题，进入回答详情页，观察知乎详情页中顶部导航的效果。默认情况下，顶部导航为搜索框样式，向上滚动页面，查看回答内容时，顶部导航发生了变化，变成了提问内容；向下回滚页面至第一屏时，导航栏又变成了

Axure教程 2019年09月23日

Aure 9.0 高级教程：最新最全的函数使用手册，建议收藏

一、概述Axure 9.0为我们提供了大量的函数，正式因为有了这些函数配合各种动作，才使得Axure作出的原型交互更丰富，也是Axure区别于其他原型工具的一个显著特征。虽然Axure提供的函数不多，我们也不需要都记住，记住一些自己常用的就可以了。我们可以将这些函数列表作为一个“字典”工具，使用时再进行翻阅查看。二、 函数分类根据函数的应用范围可以将函数划分为：元件函数、页

Axure教程 2019年09月23日

Aure 9.0 教程：两个案例告诉你，如何运用变量

案例一：简书App顶部tab切换打开简书App，观察发现频道顶部导航“推荐/VIP/专题”的tab切换效果，当我们点击导航菜单，该项菜单被选中，菜单文字变为了红色，同时下划线水平移至菜单项正下方。为了实现这样的交互效果，我们需要为每个导航菜单项设置一个“鼠标单击事件”，为当前菜单添加“选中”动作，为下划线添加“移动”动作。根据刚才的分析思路，下面我们来动手实现这样的交互。0

Axure教程 2019年09月23日

Aure 9.0 高级教程：这是一份详细的变量使用说明书

变量概述变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。变量可以通过变量名访问。在指令式语言中，变量通常是可变的；但在纯函数式语言（如Haskell）中，变量可能是不可变（immutable）的。在一些语言中，变量可能被明确为是能表示可变状态、具有存储空间的抽象（如在Java和Visual Basic中）；但另外一些语言可能使用其它概念（如C的对象）来指称

Axure教程 2019年09月23日