Axure
文章平均质量分 75
岚月清辉
这个作者很懒,什么都没留下…
展开
-
Axure原型设计:非常好看的柱状图
简单填写中继器内容即可生成柱状图,无需连外网。样式可以自由变换,原型内提供6中常用且美观的颜色,也可以自定义。鼠标移入时能显示具体数据。原创 2024-09-27 09:08:44 · 212 阅读 · 0 评论 -
Axure原型设计:中继器实现评论的增与删
(2)我们将右侧的内容加以修改,在右侧我们把第一行修改为了元件的名字,并都添加了相应的内容,第一列img的位置,右键需要导入图片的位置,会有导入图片的按钮,点击即可。3、添加时给每个控件添加上对应的名字,最好用英文或者拼音表示,比较好记,我在这里分别添加为img,name,time,content。(1)进行了上面的基本操作后,我们需要将右侧的内容,插入到左侧的中继器中,选中中继器,添加用例,多图预警。(2)批量删除思路:复选框被选中意味着此条评论被选中,点击批量删除的时候,删除所有被选中的评论。转载 2024-09-27 09:05:51 · 43 阅读 · 0 评论 -
Axure原型设计:中继器实现对评论的编辑
(2)给添加的元件起名字,需要注意的是,起的名字不可以和之前两个的名字相同,在这里我分别起的名字为:touxiang1,mingzi1,shijian1,neirong1,起什么样的名字都可以,只要不和上面的名字重复就可以。需要注意的是,在编辑评论的时候,我们可能点击多个评论,但最后我们要修改的是最后点击的评论。(1)增加一个编辑的按钮,和一个对应编辑的文本框,思路:用户点击编辑按钮的时候,头像、姓名、时间和评论的内容都进入到对应的编辑处,即第二张图片圈起来的部分。转载 2024-09-27 09:04:42 · 28 阅读 · 0 评论 -
Axure原型设计:用中继器做漏斗图
图表不需要联外网,数据也不是写死的,只需在中继器或表格中填写数据即可自动生成图表,操作简单。大小、颜色、样式、交互可以自由变换。鼠标移入时能显示具体数据。原创 2024-09-27 09:03:40 · 251 阅读 · 0 评论 -
Axure原型设计:轻松制作图片验证码
首先来。原创 2024-09-27 09:02:31 · 238 阅读 · 0 评论 -
Axure原型设计:中继器实现多角色权限控制
包含/不包含,意思主要为前者是否包含后者,适用于字符串间的比较,如“>、<、==”符号适用于数字间的比较。作者菜鸟级PM一枚,第一次写教程类的文章。大家多多提意见,如果感兴趣的同学,欢迎多多交流~所见即所得,高效沟通需求。(1)新增2个页面“login”、“menu”,分别用来登录和登录效果。基本上按照上面的,都是没问题的。(2)首先,在“login”页面增加4个按钮,分别为以下角色。(3)然后,在“menu”页面增加一个中继器,设置如下配置。这里如果需要维护权限,更改菜单后面的字段值即可,超级好用。原创 2024-09-27 09:01:47 · 372 阅读 · 0 评论 -
Axure原型设计:用中继器制作调查问卷/考试试卷
(1)通过中继器问题和答案,简单快捷生成问卷(2)单选题效果(3)多选题效果(4)填空题效果(5)必选题前面会有*标志,没有完成必选题提交时会有对应提示。原创 2024-09-25 09:19:34 · 357 阅读 · 0 评论 -
Axure原型设计:实现分类栏拖动效果
这个蓝色方框是指外面那个动态面板的大小,提示用户预览时只有蓝色方框内的内容会显示出来,假如想要蓝色方框以外的内容显示出来,则需要我们通过设置交互动作——拖动,才能将范围外的内容拖到范围内显示出来。这里首先边界都设定为左侧,但>=-[[This.width-350]],这350很多人不知道怎么来的。其实就是外面那个动态面板的宽度。这里需要注意,转换为动态面板后要将动态面板默认勾选的自动调整为内容尺寸的勾选取消掉!350这个数值就来自这里。这里不需要取消勾选。转载 2024-09-25 09:18:53 · 33 阅读 · 0 评论 -
Axure原型设计:使用动态面板实现轮播图
然而当我们制作一个较大的原型时,项目里面的元件少说也有上百个,当你从一开始没有养成给每个元件命好名的习惯的话,后面再去梳理将会是一件非常麻烦的事情,也不便于后面查看你的项目的人的查阅。(2)轮播图实现起来不难,但是主要考验我们对于项目中每个元件的命名的严谨准确,否则很容易就会把椭圆对应的图片弄混,比如点击第一个椭圆却跳到了第三张图…到这一步我们已经实现了轮播图的自动轮播,但是椭圆元件还只是摆设作用,接下来让我们为椭圆也加入交互。(6)为每个椭圆设置相应的交互动作——鼠标单击时,以及交互样式——选中。转载 2024-09-25 09:17:07 · 57 阅读 · 0 评论 -
Axure原型设计:使用动态面板实现密码可见性切换
(2)设置两个面板,一个面板命名为“不可见”,另一个命名为“可见”2)第二个交互动作,将文本框“不可见”的文字赋予“可见”文本框。(4)编辑“可见”面板,拉入一个文本框,类型为“Text”(3)编辑“不可见”面板,设置文本框类型为“密码”(5)设置“睁眼”Icon的两个交互动作。(7)同理我们设置一下“闭眼”的交互动作。(6)确定之后就可以“预览”看效果了。1)点击睁眼前,输入“123123”1)第一个交互动作,切换面板状态。(1)将文本框转换为动态面板。1)闭眼前,再输入“123”原创 2024-09-25 09:14:21 · 254 阅读 · 0 评论 -
Axure原型设计:知识竞赛/答题app、小程序原型
(1)回答正确:回答正确时,显示答案显示绿色,自动得分(2)回答错误:回答错误时,选择答案显示红色,然后在显示正确的绿色答案,不得分(3)超时:右上角有倒计时,超时没作答,自动显示对和错误的答案,本题不得分(4)自动记分:记录每一题的得分,每一题分数可以在中继器内设置(5)自动评星:满分5星,80-99%4星,60-79%三星,40-59%二星,20-39%一星,0-19%没星。上面分数指的是百分比分数,即得分/总分(6)再来一局:可刷新重新完成(7)返回:关闭该页面。原创 2024-09-25 09:12:45 · 314 阅读 · 0 评论 -
Axure原型设计:简单开关按钮的实现
(1)这是开启Axure绘制原型学习过程中一个非常容易实现的原型,尽管非常的简单,但是作用却很大。目前许多的APP在通知开关用到的样式都是这种开关按钮样式,学会这个,那么你在许多APP类原型中就都可以用到了!(2)虽然简单,但还是要提醒大家,在绘制原型时为每一个元件命好名。图中有两个(椭圆形),你不知道哪个是开哪个是关,那么这就会是一个很大的麻烦。(4)设置“容器”的交互样式——选中——填充颜色。(3)将两个椭圆放到“容器”内合适的位置。(5)设置“关”椭圆的交互——鼠标单击时。(7)将“开”椭圆隐藏。转载 2024-09-25 09:11:25 · 45 阅读 · 0 评论 -
Axure原型设计:进阶版倒计时
如果该教程较难,建议先观看我做的第一个倒计时(简单版),操作步骤更为详细:Axure原型设计:获取验证码倒计时的实现-CSDN博客开门见山,我们先来看看效果↓预览图: 一个命名为“触发器”的动态面板(两个面板状态)、一个命名为“秒”的矩形,并填入文字“10”、一个命名为“分”的矩形,并填入文字“01”、一个命名为“时”的矩形,并填入文字“01”、两个“:”矩形、一个填充色为黄色的背景矩形。(1)设置动态面板交互——载入时这个交互的作用是一直触发动态面板的下一个交互——状态改变时。(2)设置动态面板第二个交原创 2024-09-25 09:10:02 · 794 阅读 · 0 评论 -
Axure原型设计:获取验证码倒计时的实现
1.这里解释一下为什么设置动态面板的第一个交互——鼠标单击时,隐藏了动态面板后要让动态面板每过1S循环切换State1->State2->State1。这个操作的目的是为了触发第二、三个交互——状态改变时,因为动态面板切换了,所以状态改变了,那么系统在判断到“计时”仍>“0”时就会自动减1,从10变成9,过1S又从9变8…(3)在面板2内放置一块相同大小的矩形,并设置矩形内文字为“重新获取”(5)设置动态面板第二个交互——状态改变时(Case1)(7)设置动态面板第三个交互——状态改变时(Case2)原创 2024-09-25 09:07:33 · 282 阅读 · 0 评论 -
Axure原型设计:制作win10滑块滑动调整屏幕亮度效果
默认获取屏幕背景的宽度作为亮度值,因为我用的是400px,按百分比算的时候除以了4,并向上取整,另外值越大,屏幕越亮,因为是用的透明度,值越大越暗,所以要用100来减一下,如下图所示。1)滑块跟随水平拖动,左边x坐标不低于27px,右边不高于438px,根据你画布具体的x坐标进行调整。4) 设置滑块数值的文本,需要逐渐显示效果,400px按百分比取整 ,同时显示可见(默认为隐藏)3)设置背景的尺寸当前滑块值的x坐标-背景在画布的起始x坐标,我的是29px。页面载入时、拖动时、拖动结束时。原创 2024-09-25 09:06:30 · 158 阅读 · 0 评论 -
Axure原型设计:使用动态面板实现收藏/已收藏按钮功能
1.这里可能会有人发现我的元件列表里并没有“空心”五角星Icon以及“实心”五角星Icon,这是因为我用FontAwesome字体代替了它们,至于FontAwesome字体究竟是什么,刚入门Axure的小白可以去网上搜索一下。转载 2024-09-24 10:19:03 · 54 阅读 · 0 评论 -
Axure原型设计:实现商品分享功能
但在操作的复杂度上却并不是最难的,只要逻辑思路清晰,将元件命好名字,归好类。由于该原型内所包含的元件过多,为避免本文篇幅过长,我在这里就不对每一个元件进行详细的陈列,就说一下我的大致分类。这篇文章里,对于简单的操作我就不进行详细讲解,如有不懂的可以观看我以前的文章,也可以评论留言我再给你进行解答。以上就是我所从大到小我的所有分类情况,一个清晰的分类,不仅有利于自己将来在原型里面增添新的元件,也便于其他产品人的查看。3)基础分享操作操作面板摆放美观,无需操作。3)图文面板摆放美观,无需操作。原创 2024-09-24 10:17:15 · 485 阅读 · 0 评论 -
Axure原型设计:实现商品规格选择功能
在制作这个原型案例的时候我也不是先将整个都制作出来了再去将它拆开成几个原型来讲解而是跟文章顺序一样先完成加减功能再完成规格选择功能最后再集合起来完成,就跟建楼一样。这里不对元件进行详细描述,就放一张展示全体元件的图片以及(展示图片)动态面板的三个面板下的内容。》中操作步骤的(1)和(2)去实现点击“选择规格”矩形后显示“选择规格”面板功能。》分别实现规格选择时的提示信息的改变,展示图片的改变。(2)在“选择规格”动态面板下摆放好元件的位置。(5)完工,按F5预览原型操作看看。》实现购买数量的加减功能。原创 2024-09-24 10:10:39 · 428 阅读 · 0 评论 -
Axure原型设计:实现菜单下拉效果
尽管Axure的基础元件库里面已经有菜单项了,但是样式和交互我们不一定喜欢,所以这里自己制作菜单项以满足不同的需求。转载 2024-09-24 10:09:33 · 56 阅读 · 0 评论 -
Axure原型设计:页面三级拖动
本期效果:本期效果是一个三级拖动,第一次点击弹出部分列表,向上拖动时显示完整的列表,向下拖动时显示最低级的列表,效果非常简单,大家先看看效果图:我们使用一个动态面板,为其添加三种状态下的页面,在不同的状态,页面拖动结束时,动态面板切换到目标页面,并且移动到合理的位置,就轻松的实现了一个页面拖级拖动的效果。第一步,我们添加一个手机的框架。第二步,我们添加一个动态面板,里面添加三个状态,分别为一级,二级,三级,为三级创建内容,并创建为动态面板,内容如图所示:第三步:标记出上边三个动态面板的状态单独放置在页面上时转载 2024-09-24 10:07:12 · 33 阅读 · 0 评论 -
Axure原型设计:交互常用按钮组
今天给大家分享一组Axure常用按钮组,喜欢该原型的小伙伴们可以在评论处给我留言哦。原创 2024-09-24 10:04:25 · 203 阅读 · 0 评论 -
Axure原型设计:制作验证码倒计时,并重新获取交互效果
首先,我们还是要明确一个思路,当我们在制作任何一个交互效果时,都需要对这个交互的步骤进行拆分,然后分别把对应步骤代入到Axure的交互设置中,是否可以用某些动作进行一一实现。原创 2024-09-23 09:09:15 · 432 阅读 · 0 评论 -
Axure原型设计:获取验证码倒计时效果的实现
还是那句话,希望大家想一下。想要完成倒计时效果,除了我为大家讲解的这种,是否还有其他方法可以实现呢?Axure作为产品经理的必备工具,不光是帮我们实现了交互效果,更多的是要学会它实现效果的思路,我希望大家能在我的文章中找到自己的进步。原创 2024-09-23 08:52:41 · 407 阅读 · 0 评论 -
Axure原型设计:高保真的评论页
今天的分享就结束了,这个原型做起来可能对初学者会有点难,但是做好之后交互效果齐全,使用也简单,只需要填写中继器表格即可。材料包括,头像,name,text,时间,回复按钮,回复组合(默认隐藏)。benren:如果该值不为空的时候,显示本人头像置顶,设置名称文本=本人的名字。no:载入时按这个升序排列,当然你可以看需求,也可以按date的降序排列;benren:一般为空,填写之后代表这条是本人回复的,将用本人头像和名字。no:按1、2、3排下去即可,如果是回复评论,序号和评论序号一致即可。原创 2024-09-23 08:49:49 · 585 阅读 · 0 评论 -
如何基于用户场景,优化产品原型设计?
步骤①:用户是什么原因(或遇到什么问题),要打开这个页面?步骤②:页面需要提供什么内容,可以帮助用户解决问题。步骤③:这些内容之间,关联度、优先级分别是怎么样。原创 2024-09-20 10:26:49 · 456 阅读 · 0 评论 -
Axure高保真教程:用中继器制作卡片多条件搜索效果
卡片设计通过提供清晰的信息结构、可视化吸引力、易扩展性和强大的交互性,为用户界面设计带来了许多优势,使得用户能够更轻松地浏览、理解和互动。原创 2024-09-18 08:58:14 · 498 阅读 · 0 评论 -
Axure中继器(标记/删除)重复行
利用中继器监听可以非常轻松的标记出或删除掉重复行。知道为什么我一直强调务必要学会中继器监听器的原因了吧?原创 2024-09-18 08:56:30 · 424 阅读 · 0 评论 -
Axure高保真教程:树筛选中继器表格
树和表格是信息系统中两个重要的元件,树结构是一种层次化的数据结构,它以树的形式展示数据的层次关系;表格是一种二维结构,由行和列组成。每一行表示一个记录,每一列表示一个属性。在实际应用中,这两种结构常常会结合使用,以满足不同的需求。原创 2024-09-18 08:55:29 · 294 阅读 · 0 评论 -
Axure PR 标签 设计&交互
3.选中文本框元件,在样式窗格中将按钮元件的宽设置为60,高设置为25,填充色为任意颜色,这里用的是蓝色(#0052D9)输入文本“标签”文本字体颜色白色,居中,线宽为0,圆角半径3。1.复制一个前面做好的可移除标签元件,将填充颜色改为白色,线框为1,线框颜色为浅灰色(#D9D9D9),输入文本“+添加标签”字体颜色为灰色。1.选中动态标签容器,在交互窗格中新建交互,每项加载时,设置文本,标签为“[[Item.Column0]]”2.新建交互,获取焦点时,设置选中,+添加标签为“真”,设置文本当前为“”原创 2024-09-13 14:40:27 · 576 阅读 · 0 评论 -
Axure教程:倒计时和数字累加效果
条件设置:设置页面载入用例。当时大于0且分秒微秒等于0时,则时自动减1,下一级别数字设为59,其它同理。(2)为页面设置[载入时]设置,重复触发部件载入时用例。(1)为需变动的数字部件设置用例,预设好最大值。如果页面中不仅仅只有这个用例,就引用动态面板。所需元件:单独变动的数字用独立部件。(1)为数字部件设置载入时用。(2)为页面设置载入时用例。所需元件:用文字部件。原创 2024-09-12 09:21:42 · 504 阅读 · 0 评论 -
Axure教程:做推拉菜单效果
拖拽一个矩形至页面,调整好尺寸,填充为黑色,设置名称:一级菜单;可以多复制几个,填写为二级菜单。全选三个二级菜单,点击右键,选择转换为动态面板,并设置为隐藏。选中一级菜单,为一级菜单设置交互:切换、向下滑动显示(时间:250)、向上滑动显示、推动和拉动元件。原创 2024-09-12 09:20:38 · 371 阅读 · 0 评论 -
Axure教程:APP下拉刷新效果
让我们来回顾一下整个过程,动态面板至少要保持2个动态,当距离发生变化时切换图片并让图片回到下拉之前的位置上来,距离不变时仅垂直移动。原创 2024-09-12 09:18:48 · 321 阅读 · 0 评论 -
用Axure画出Web后台产品的菜单栏组件
如果页面特别多,可以采用三级菜单栏,即第一级菜单是分类,第二级菜单是分类,第三级菜单是页面。另外Axure左侧页面结构中也需要以相应的分类名称页面名称进行使用,方便开发和测试理解。原创 2024-09-10 08:50:11 · 358 阅读 · 0 评论 -
Axure9原型设计:动态面板&内联框架实现可复用导航页
上次分享的《Axure9原型设计:动态面板实现手风琴菜单》,只是实现了导航栏,但是页面不止导航栏,就像写代码一样,怎么尽可能复用,减少无谓的复制黏贴?那就必须配上内联框架。这次就用动态面板和内联框架实现可复用导航页,而且要尽可能简单。步骤如下:一、拖拉元件摆出首页常见样式的一级菜单,简单起见,直接拖拉,不用放到别的容器里。为了后面交互方便,每个元件都有命名,包括“ⅴ”(命名是个好习惯,为了我们交互时可以清晰看到元件名称,且方便检查逻辑)。拉出动态面板,命名:手风琴二级菜单,设置不可见原创 2024-09-10 08:48:23 · 397 阅读 · 0 评论 -
Axure入门案例系列:简单音频播放动效
多重的动态面板嵌套使用,一定要找对对应事件的动态面板(元件命名很重要)可以利用移动+动态面板作为触发器实现简单的动效交互。本案例也适用于弹幕的样式交互,只需改造对应动态面板的大小与内部文字的位置。原创 2024-09-10 08:43:53 · 268 阅读 · 0 评论 -
Axure教程:中继器实现图片文本信息展示
拖拽文本标签,命名为净含量,字体设置为12号、颜色设置为CCCCCC;单击每项加载时,添加动作如下:设置文本->勾选商品名称->单击fx->插入变量或函数->选择Item.name,其他文本标签也同样和中继器中数据content、price、sale、location一一对应起来。本文以某宝热搜第二名的网红年糕展示页面为例(好有食欲看饿了),首先分析一下每条信息的组成,可以看到是由商品图片、商品名称、净含量、价格、付款人数、店铺名称/发货地点、购物车图标组成,根据这些组件先来搭建中继器。原创 2024-09-10 08:43:01 · 483 阅读 · 0 评论 -
Axure教程:制作一个日志管理原型
今天教大家如果在axure里面用中继器做一个工作日志、工作计划的原型。原创 2024-09-10 08:42:07 · 362 阅读 · 0 评论 -
Axure教程:中继器如何做简单穿梭框
为了将中继器中数据展示在页面中,需要将页面的文本标签和中继器数据进行绑定,操作如下:单击中继器<每项加载时>,设置文字于->勾选剧集->单击fx->插入变量或函数->选择Item.option,按如上操作设置交互用例即可绑定文本标签和候选中继器中的数据。完成以上几个步骤,预览一下,可以看到候选中继器的选项已经展示在左侧候选区里了,接下来需要做的是选中其中一个选项、单击穿梭按钮,右侧增加该选项、左侧删除该选项,下面我们通过逐个步骤来分解操作。中继器列名命名为chosen。原创 2024-09-10 08:41:08 · 398 阅读 · 0 评论 -
如何用Axure画出Web后台产品的列表组件:高级交互
有不少文章讲过列表如何用Axure画出来,但是关于列表组件高级交互的文章却没有,希望通过这篇文章让产品经理能够掌握它。以下4种高级交互案例是独立的场景,但是原型步骤是有一定联系的需要结合起来学习;详见原型。原创 2024-09-10 08:40:10 · 484 阅读 · 0 评论 -
如何用Axure画出Web产品的单选组件?
1、先画字段名。从Axure默认元件库拖动“文本标签”到画布合适位置,双击输入文字“性别”。2、再画选项。从Axure默认元件库拖动多个“矩形1”到字段名后面位置,尺寸修改为合适大小100*30px,然后依次排列。3、设置选中样式。同时选择这些选项,右键点击“交互样式”,在弹窗“交互样式”中切换到“选中”,勾选填充颜色并设置为蓝色#0000FF,勾选字色并设置为白色#FFFFFF,点击“确定”按钮。4、设置选项组。同时选择这些选项,右键点击“选项组”,在弹窗“选项组”中输入任意组名称,然后点击“确定”按钮。原创 2024-09-10 08:38:40 · 487 阅读 · 0 评论