原型图axure教程（axure交互原型图怎么做）

本文目录

• axure交互原型图怎么做
• Axure身高标尺原型图怎么制作
• 如何利用AxureRP8搭建简易登录页面原型图
• Axure怎么制作移动端图片轮播原型
• 在线版原型图怎么弄-如何用axure画app原型图
• axure设计图-如何用axure画app原型图
• axure怎么设计手机app的侧边栏原型
• Axure图片上传原型怎么设计
• Axure条件查询的原型图怎么制作

axure交互原型图怎么做

打开Axure8(axure7也一样)，默认是新创建的项目，找到 “动态面板”元件，如下图：
拖动元件到工作区，按照图指示的任意一个地方给动态面板命名：测试面板
双击动态面板元件，出现状态state1,双击进入到state1的：
拖放一个图像元件到state1内，双击并找到准备的图片（红旗），这样第一个状态就好了。
下面第二个状态，注意看图，在右下方的 “概要”栏目内 找到state1右键“复制状态”，这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例，将状态分别命名为：红旗、蓝旗。
然后点击蓝旗状态，将图片替换。
以上步骤完成后，开始交互用例。双击红旗图片，出现如下图所示的交互用例，找到：鼠标单击时，并双击出现用例面板。
选择 元件--》设置面板状态 ，然后按照图示选中 “测试面板”，并为其设置选择状态为：蓝旗。同时设定动画效果。
红旗状态完成后，点击确定，按照下图所示在 case1下邮件复制用例，并粘贴到蓝旗状态下。然后按上一步的操作，将蓝旗点击是的选择状态设置为：红旗。
最后F5预览，并点击图像测试效果

Axure身高标尺原型图怎么制作

身高标尺，大家在生活中都见过。但是要你使用Axure制作一个身高标尺，你会吗？我想很多小伙伴可能都不会！下面就可以跟着详细学习怎么制作吧~对于不同阶段的Axure学习需求伙伴，为大家提供了多套Axure自学视频课，包括原型图基础入门、APP购物车交互教程、支付宝APP交互教程、APP列表页切换教程、移动登录交互教程等可以全方位的为小伙伴们提供基础的功能学习以及上手实操，感兴趣的就去学习体验~

Axure身高标尺原型图制作方法：

1、拖入一个矩形元件，设置宽度：203px，高度：20px，输入内容：“请滑动标尺选择您的身高（cm）”在其下方拖入一个矩形元件，设置宽度：80px，高度：30px，隐藏其边框，命名为“身高”，设置文本颜色：#EB615F，在“身高”元件下方拖入一个垂直线，设置高度：22px，设置颜色：#EB615F，如图：

2、拖入一个动态面板，设置宽度：292px，高度：45px，双击进入动态面板，设置宽度：1114px，高度：45px，再双击点击动态面板，设置身高刻度（0-200），如图：

动态面板最终设计如图：

3、拖入一个矩形元件，输入内容：“您当前身高为：”设置文本颜色：#EB615F，在其右方拖入一个矩形元件，命名为“当前身高”，设置文本颜色：#EB615F，在“当前身高”元件右方拖入一个矩形元件，输入内容为：“cm”,设置文本颜色：#EB615F，如图：

所有元件设计完毕，如图：

点击动态面板进入，对动态面板进行“拖动时”和“载入时”事件进行设置。

1）对矩形元件“当前身高”进行文本设置，如图：

2）对矩形元件“身高”进行文本设置，如图：

3）对当前动态面板进行“移动”设置，如图：

1）对矩形元件“当前身高”进行文本设置，如图：

对矩形元件“身高”进行文本设置，如图：

以上就是羽兔为各位小伙伴提供的“Axure身高标尺原型图怎么制作？”的相关内容讲解了，希望能够帮助到你！学习Axure原型设计，教程不怕多，内容不怕详，更多Axure文章等你阅读~要想学会Axure，其实我认为不单止要学理论知识，更有动手操作！所以你如果想综合全面学习Axure，就可以看看的Axure自学课哦！

如何利用AxureRP8搭建简易登录页面原型图

利用AxureRP8来搭建原型图，就不得不提到元件库的使用，元件库对于Axure来说其实在某种程度上相当于工具栏对于平面设计，如果想要在页面上搭建一个简易原型，元件库中元件的使用时必不可少的，就像是搭建一个积木原型就必须要有积木的原理是一样的，好了，且看如何使用元件库当中的元件来搭建一个简易的原型图吧。具体步骤如下：

1、页面。在整个Axure中的左上角偏下的位置，即为页面的位置，一般系统默认是三个，当然也可以复制很多个页面，双击第一个页面，我们再当前页面进行简易原型的搭建。

2、在元件库当中选择矩形2的这一元件，拖动到画布当中，根据自己的要求的尺寸，画出相应的大小，这里选择使用1920*1080尺寸的，也是苹果手机plus版本的分辨率尺寸，可以在如图所示的位置进行相应的调整。

3、选择占位符。占位符一般代表的是原型当中的图片的位置，这里使用占位符代表登录页面当中经常出现的logo之类的信息，当然如果想要使得更美观一些的话，也可以选择使用图片。

4、选择矩形1和文本框两个元件，来进行登录位置的创建显示效果，具体，双击元件可以对矩形元件进行，这里我们选择对矩形设置成登录的字样。

5、单击元件，同时按住Ctrl键，可以复制出一个元件出来，具体，使用这种方法，可以比较方便的创建出来密码的显示效果，具体。

6、创建关键按钮，也就是登录按钮。拖动完成之后，我们将其名称命名为立即登录。具体，创建完成之后，按下F5点击发布，我们就可以使用网页打开自己的原型来看一下展示的效果。

Axure怎么制作移动端图片轮播原型

图片旋转原型经常应用于各大应用的首页，包括文章分享应用、阅读应用、商城应用等。图像旋转、gif、短视频的呈现都能吸引用户的注意力，通过动画效果，保持用户浏览的热情。那么，我们如何使用Axure原型软件创建一个移动端图片轮播原型呢?下面就来教你如何制作!学会Axure，人人都是产品经理！这句话，想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生！而想要完全掌握Axure成为产品经理，可能也并非容易，入门简单，但是交互原理可并不简单！因此提供了系列的Axure自学视频课，可以全面的学习Axure软件基础以及交互原型案例实操~

点击观看视频教程

Axure制作移动端图片轮播原型方法：

图片轮播原型，我们选择使用中继器来制作，为什么使用中继器呢？

因为中继器制作完成之后，维护简单，只需要像填写excel表格那样，填写中继器表格导入图片即可。交互自动实现，复用性高，维护成本低，以后项目也可以用到。

中继器内原件及摆放：图片+文字（非必要），图片大小自己调整即可，如下图摆放：

2.中继器表格

我们只需要设置3列：

picture：需要显示的图片，鼠标右键导入，或者ctrl+v粘贴

title：标题文字（非必填）

number：数据（这个根据实际需要设置，非必填，例如文章内容可以显示阅读数，直播的话可以显示在线人数）

3.主要交互

设置文本：中继器每项加载时，把title列和number列的文字设置到对应的标题和数据文本。

设置图片：中继器每项加载时：设置图片为item.picture。

滑动事件：我们用移动这个时间来做，移动的距离就是图片的宽度（如果是上下滑动就是高度）+两图之间的间距（间距可以为0）。

例如：往左滑动300，x就填-300；向右滑动300，x就填300；向上滑动300，y就填-300；向下滑动300,y就填300。

自动循环事件：自动循环我们用动态面板来做，动态面板新建state1和state2，载入时设置动态面板转台自动循环，间隔为3s（根据实际设置，这个是几秒换一张图），动态面板转态变更时触发上面的滑动事件即可。

以上就是关于“Axure怎么制作移动端图片轮播原型?”的全部内容精彩分享了，希望能够帮助到你！更多Axure精彩分享，尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话，那我不妨建议你直接学习体验一下我们的Axure自学自学课，专业讲师授课，可以从基础的知识点开始学起，逐步深入掌握哦~

热门课程推荐

在线版原型图怎么弄-如何用axure画app原型图

Axure：超级好用的在线原型管理工具--Axhub

OMG,炒鸡好用的在线原型管理工具-Axhub,它来喽!话不多说,上链接:

1.通过SVN在线管理原型图

2.支持多人协作

3.支持通过链接分享原型图

将链接复制到网页打开,输入信息完成注册,登录

根据需求,创建“我的项目”(仅自己)或“与我协作”(支持团队共同)项目

复制在线原型图SVN地址,打开Axure,点击“团队-获取并打开团队项目”,将SVN地址贴到“团队目录”,选定本地存放的目录,点击“获取”

若要在本地进行,可在需菜单出右键,点击“签出”,即可签出本菜单;若需签出全部,点击“团队-签出全部”按钮

本地完成,点击“签入”可上传至SVN(团队协作同理)

点击“分享”按钮,复制原型地址,可分享给别人查看

1.使用InspirationMaps:InspirationMaps是一款强大的思维导图工具,可以帮助用户简化产品原型设计过程。它可以帮助设计师一眼望穿一个思维,从而加速产品原型设计流程。

2.使用MockplusIpad:MockplusIpad是一款专为iPad开发的原型设计工具,它可以帮助用户迅速创建任何类型的产品原型。此外,它还支持实时预览和即时交互,帮助您轻松查看设计效果。

3.使用OrigamiStudio:OrigamiStudio是一款极其强大的iPad原型设计工具。可以帮你在散开的界面元素之间创建复杂的动画效果,让用户一眼望过产品的设计效果和操作流程。

前段时间跟大家介绍了一个软件BalsamiqMockups,一个可以简单画出的手绘原型图的软件,操很简单!后来有朋友问我Axure可以画出手绘效果的原型图吗?答案的肯定的,只不过没有BalsamiqMockups那么手绘,但是也可以改善一下Axure里总是横平竖直的视觉感受!其实Axure从6.0开始就加入了手绘风格。在线框图(PageFormatting)里有个页面样式器(Sketchiness)的选项,可以设置手绘风格的“扭曲度”。默认是0,数字越大画出的线越扭曲,个人建议50为宜,然后选个卡通点的或者手绘字体,线宽选择+1。

axure设计图-如何用axure画app原型图

如何利用AxureRP8设计出简单的星型图形

可以按照下面的步骤来画简单的星型图形:

所需工具:AxureRP8

步骤:

第一步,点击开始按钮,找到“AxureRP8”软件,打开该软件,如下图所示:

第二步,从基本元件面板中拖曳一个元件“Box1”到窗口,如下图所示:

第三步,用鼠标选中该元件,出现了圆点,然后点击圆点出现各种图形窗口,如下图所示:

第四步,在第三步图形窗口选择“星型”图形,如下图所示:

第五步,选中星型图形,鼠标右键,点击转换成图像,如下图所示:

多学习,多练手

画好原型后

1.下载Axure

2.如果是给itouch或者iPhone用的,比较好办,直接用320×480的分辨率画好辅助线,然后画原型

3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4.设置说明见下图:(页面大小显示我的这个设置是按320×480的大小,默认不缩放)

5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)

6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏)

另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁。

在Axure中也有统计图表,主要功能是各种数据处理,统计和分析。主要有2种方法设计统计图表

【1】利用excel设计统计图表

1.利用execl做一个表格,并将做成图表

2.将图表截图保存,并打开axure

3.通过图片元件将学生成绩统计图导入到Axure

【2】利用HighCharts设计统计图表

1.打开axure,并利用内联框架加载

2.添加链接--选中双击弹出链接属性

3.HighCharts文件夹要跟生成的文件夹放在一起。

4.HighCharts文件夹

【说明】

1.利用excel设计统计图表,这个是静态的是不能修改的。如果想要动态的图表就需要利用HighCharts

2.利用HighCharts设计统计图表时,需要注意一点,这个需要按F8(生成网页)才有效果,这个是预览不了的

axure怎么设计手机app的侧边栏原型

axure想要设计一款手机app的侧边栏，该怎么设计呢？下面我们就来看看详细的教程。

1、我们先打开我们的axure软件，点击新建，然后将我们的手机模型拖拽进我们的axure，点击我们的动态面板将其往窗口拖拽。如下图

2、创建好我们的动态面板之后，按住ctrl+c将其复制下来，然后双击我们的外层动态面板下面的state1，然后按住ctrl+v将我们的外层动态面板复制下来

3、然后双击我们的内层动态面板下面的state1，然后点击矩形，并将其图案拖拽到我们的内层动态面板中，调整好位置，并给其填充颜色。

4、在拖进一个占位符，并调整其位置，如图所示。

5、然后点击我们导航栏上面的外层，并将我们的内层图案拖拽平移一段距离，如下图。

6、然后点击矩形，用来量我们外层和内层之间的距离，方便我们的侧边栏的移动。如下图。量出距离之后，即可将其删掉。

7、点击我们导航栏的内层，然后在我们选中我们刚才的占位符，然后点击我们的鼠标单击时选项，如下图。

8、进入我们的单击鼠标时之后，点击移动，勾选内层，然后在下面的y内输入我们刚才量出来的距离，即-134

9、点击上面的添加条件选项，选择变量值、！=0，然后点击确定。

10、再次重复第八和第九步骤，y值改为134，其他不变，然后点击上面的添加条件选项，选择变量值、==0，然后点击确定。

11、然后再次点击我们的case1，找到并点击下面的设置变量值，勾选变量，然后将变量值设为0，点击确定，case2我们也重复此动作，只是在设置变量值时，不设为0即可。

12、最后，我们可以预览我们做出来的效果了，我们按住F5，或者点击上面的预览，进入网页之后，我们上下滚动鼠标即可看出我们的效果了。

Axure图片上传原型怎么设计

现在的网站或者APP都有图片上传的功能，并且还可以进行自动的预览！而我们想要在Axure原型软件里面制作出来这样的一个原型效果，应该怎么操作呢？下面将通过具体的操作步骤教程来教大家怎么进行Axure图片上传原型设计！对于准备自学或者正在自学Axure的小伙伴，那么我建议你学习体验的Axure自学视频课，0基础到案例实操，全面学习~

Axure图片上传原型设计的方法步骤：

首先在页面上放置3个元件：1个文本框，2个矩形。

文本框记得设置输入类型为“文件”：

中间大的矩形选张图片作为填充背景：

二、第二步：设置ID

给这3个元件设定ID，分别是：fileChose、changeIMG、fileTypeField。

三、第三步：添加交互动作1.fileChose，文本框

主要脚本代码写在了这个元件上，通过Javascript模拟了文件选择动作。选中文本框以后，添加一个“隐藏”交互动作，当隐藏时，打开链接到URL，然后把javascript代码贴进去。

上一个教程的时候也有朋友问我，这里执行JS脚本为什么用隐藏的交互，而不是直接“载入时”。

主要是考虑复制元件使用时，JS会有冲突，所以通过主按钮做了一个刷新，具体的我在下一篇文章做扩展应用时会用到，你也可以暂时做成“载入时”交互。

这里加了一个在文件加载前识别常规图片格式的判断，如果不是PNG等，会停止加载并弹警告。

大家最喜欢的拷贝代码环节：

*前面提到浏览器安全限制，无法直接访问本地文件，所以这里是通过以下这段代码解决的：

原理就是将文件读取为DataURL，一段以data:开头的字符串。DataURL是一种将图像与html等格式的小文件直接嵌入文档的方案，这个玩法估计前端开发的同学会比较熟。

记得确认设置了矩形的填充为图片。添加一个单击动作，填入代码：

同时设定移入移出的交互，切换fileChose文本框的隐藏状态，以便根据交互动作重载JS脚本。

3.fileTypeField，矩形

这个是用来展示上传图片的格式的文本，非必要，没有交互脚本。

通过创建动态面板，把不需要显示的元件隐藏。

为了让元件看起来更美观，我们可以通过动态面板的可见区域的设置完成这个，把文本框拖到范围以外，并且记得把动态面板的“自适应内容”的勾去掉，这样文本框就看不到了。

以上就是关于“Axure图片上传原型怎么设计？”的全部精彩内容分享了，希望你能从中有所收获哦！如果觉得一篇文章不够尽兴，那么Axure相关文章可别错过！总而言之，学习道路，单一知识是很难成就自我全面发展的！想要全面精通擅长一个技能，那么学习也得全面！来，全面学习Axure，综合获取知识点，快速有效促成独立自主原型设计~

Axure条件查询的原型图怎么制作

条件查询是常用的函数，今天我们就来看看如何实现条件查询。通过本练习，您可以了解局部变量和中继器。备注：为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课，视频教学，知识点清晰，方便快速地掌握~

Axure条件查询的原型图制作方法：

1、拖入两个输入框from和to到画布，作为年龄上下限输入框；

2、拖入一个查询按钮；

3、拖入中继器，显示用户列表；

4、设置中继器里面的列和数据；

交互设计

1、中继器初始化：设置中继器的每项加载函数，分别设置中继器里面对应的列值；

2、设置查询按钮的点击事件：

到了这一步，条件查询就算做好了

以上即是关于“Axure条件查询的原型图怎么制作？”的分享内容了，希望能够帮助到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴学习Axure都选择了在网上学习，但是很多都是东拼西凑的学，以致于学习到和实际操作的可能就有所出入了~所以学习Axure，还是系统化比较好！选择的Axure自学视频课，相信能够给予你知识的收获以及动手实操的经验~