![](https://img-blog.csdnimg.cn/20210122215656507.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Axure9实战案例教程-基础篇
文章平均质量分 92
以实战案例的角度,讲解Axure 9 的基础操作,帮助大家从案例中学习原型设计思维,带你快速进入实战阶段!适合一年产品经理、Axure初学者!(提供Axure课件)
默林工作室
互联网产品经理
展开
-
Axure 9 案例教程基础篇之课程简介(助你快速进入实战阶段)
◆ 本课程以实战案例的角度,讲解Axure 9 的基础操作(包括有意思、有特色、有难点、有实用的实战案例或使用技巧),帮助大家从案例中学习产品原型的设计思维,带你快速进入实战阶段!!原创 2021-01-27 16:49:37 · 4664 阅读 · 2 评论 -
Axure 9 实战案例,基本元件的应用 1,用矩形与标题设计视频封面
Hello,大家好!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>本专栏旨在以实战案例的角度,讲解Axure 9 的基础操作,帮助大家在一个个的案例中,学习产品原型的设计思维,带你快速进入实战阶段。这里专讲有特色、有难点、有实用的Axure实战案例,适合1岁左右的产品经理,或Axure刚入门不久的同学,希望在接下来的教程中,与大家一起学习成长。随着抖音的出现,带火了视频剪辑。一段流量火爆的短视频,离不开一个吸人眼球的视频封面。专栏的第一课时,为大家带来一个有趣的教程,就是用Axure来设计一原创 2020-12-16 16:33:50 · 2073 阅读 · 0 评论 -
Axure 9 实战案例,基本元件的应用 2,使用选择形状绘制圆形饼图
在我们原型设计过程中,尤其是网站后台系统管理原型,图表是一种常见的设计;本篇将教大家,如何用基本元件画一个圆形饼图。这里我们找来了一个真实饼图,用作蓝本进行绘图。从图片中可以看到,一个饼图的组成部分包括:饼形、图例、提示。下面就来给大家讲解一下绘图步骤。首先拖入一个圆形,设置为合适大小,修改边框为0(这可可减少要修改边框颜色的步骤),点击填充颜色进行颜色的填充修改。继续拖入一个圆形,同样进行...原创 2020-12-18 14:54:35 · 3665 阅读 · 0 评论 -
Axure 9 实战案例,基本元件的应用 3,巧用水平分布绘制面积图表
上一篇讲到了如何绘制饼形图表,本篇将继续教大家绘制图表,就是如何用基本元件画一个面积图表。这里我们同样找来了一个真实图表,用作蓝本进行绘图。从图片中可以看到,一个面积图表的组成部分包括:数据区、数值轴、分类轴、网络线、图例。下面就来给大家讲解一下绘图步骤。首先拖入一个文本标签,修改文本标签的字体、大小、颜色,设置为右侧对齐(这是为了后面输入多行数值时,都能靠右对齐);然后双击文本标签,修改...原创 2020-12-18 21:46:40 · 1745 阅读 · 2 评论 -
Axure 9 实战案例,基本元件的应用 4,善用变换形状绘制APP扫码页
上两篇教程我们讲到了图表这种常见的设计,本篇将带给大家另一种常见的设计,就是手机扫码界面。这里我们找来腾讯TIM的扫码界面,用作蓝本进行绘图;大家可以看到,扫码界面主要组成包括:遮罩层(半透明)、扫码窗口(全透明/镂空)、扫描线、扫码框、提示语。下面就来给大家具体讲解一下,如何绘制手机扫码的遮罩与窗口效果。为了节省时间,我们事先把半透明遮罩层绘制好了,即大小为375×812像素的50%透明...原创 2020-12-21 16:53:50 · 1386 阅读 · 1 评论 -
Axure 9 实战案例,基本元件的应用 5,利用情形实现B站图文登录验证
本次课程我们继续来学习一下,基本元件的应用。在前几篇教程中,我们讲到了一些常见的设计,比如图表、扫码,大家都掌握了吗?本篇将给大家带来一点不一样的,先来问大家一个问题:你知道最常见的登录验证是什么吗?不错,是验证码(相信大家都猜到了)。那么其他的登录验证,你知道有哪些呢?比如下面图片中的这种方式(B站的图文登录验证),你是否见过?大家可以看到,B站的图文登录验证效果主要组成包括:1)点击文字时显示排序号2)点击按钮,判断点击...原创 2020-12-22 18:04:49 · 1371 阅读 · 7 评论 -
Axure 9 实战案例,动态面板的应用 1,导航栏如何实现100%宽度
这一节,我们首先来讲解一下,顶部导航栏怎样才能自适应窗口宽度,也就是实现100%宽度。为了节省教学时间,这里提前把导航栏的基本要素设计出来了,下面开始讲解。在导航背景上点击右键,在弹出菜单中选择“转换为动态面板”。我们再次在导航背景上点击右键,这时候可以看到,弹出菜单上多了一些选项。因为这是动态面板,我们可以对它进行很多设置,这里我们选择1...原创 2020-12-15 17:18:20 · 3959 阅读 · 1 评论 -
Axure 9 实战案例,动态面板的应用 2,APP发布界面的键盘交互
本次课程我们继续来学习一下,动态面板的应用。前一篇我们讲到了导航栏的背景设计,通过学习如何实现导航栏背景的100%宽度,相信大家已经掌握了一些动态面板的妙用;本篇我们在动态面板的基础上,增加一些其他交互,难度开始提高了哦。那么本篇我们就来讲解一下,如何在APP发布界面实现开关键盘?我们先来看一下完成效果图:大家可以看到,当折叠键盘时,文本域变高、添加位置向下移;当展开键盘时,文本域复原、添加位置复位。下面来给大家讲解一下实现的步骤。...原创 2020-12-23 19:32:41 · 1960 阅读 · 3 评论 -
Axure 9 实战案例,动态面板的应用 3,京东的拖动拼图登录验证
本次课程我们继续来学习一下,动态面板的应用。在之前的教程中,我们曾经讲解过B站图文登录验证的原型设计课程(了解更多),那是属于基本元件的应用;本篇我们从动态面板的应用的角度,来讲解另一种登录验证的原型设计,那就是京东拼图登录验证。我们先来看看真实的效果图,大家可以看到,拼图登录验证效果主要组成包括:①拖动滑块时,拼图碎片与蓝色进度条会跟随移动②拼图失败时,滑块会自动复位③拼图成功时,蓝色进度条会到达最右端,显示拼接成功,并且登...原创 2020-12-30 17:19:33 · 2303 阅读 · 1 评论 -
Axure 9 实战案例,动态面板的应用 4.1,省市区三级联动下拉菜单(重制简易版)
Hello!欢迎来到Axure 9 实战案例教程专栏。本次课程我们继续来学习一下,动态面板的应用。本篇我们来讲解一下,如何绘制省市区联动下拉菜单(重新撰写简易版)。下拉菜单初稿为了节省时间,这里提前把下拉菜单初稿准备好了。我们的思路是:①当省份选择【北京】时,城市菜单切换为北京状态;②当城市菜单选择【北京市】时,区县菜单切换为北京区县。原创 2023-02-13 17:24:27 · 3230 阅读 · 1 评论 -
Axure 9 实战案例,动态面板的应用 4.2,省市区三级联动下拉菜单(进阶版)
本次课程我们继续来学习一下,动态面板的应用。本篇我们来讲解一下,如何绘制省市区联动下拉菜单。我们先来看看完成效果图,大家可以看到,省市区联动下拉菜单的交互主要包括:①初始状态时,省份菜单显示,城市菜单和区县菜单不显示;②选择省份时,城市菜单显示,区县菜单不显示;③选择城市时,区县菜单显示;④切换省份时,城市菜单复原,区县菜单不显示;⑤切换城市时,区县菜单复原。为了节省时间,这里提前把下拉菜单初稿准备好了。下面来给大家讲解...原创 2021-01-10 12:32:32 · 5249 阅读 · 2 评论 -
Axure 9 实战案例,动态面板的应用 5,官网首页自动轮播广告
本篇我们来讲解一下,如何运用动态面板绘制首页自动轮播广告。我们先来看看完成效果图,大家可以看到,首页自动轮播广告的交互主要包括:①默认状态时,从第1~5个图片循环轮播;②广告轮播时,指示器定位到对应圆点上;③点击指示器圆点时,切换至对应图片,随后又继续自动向后轮播。为了节省时间,这里提前把轮播广告初稿准备好了。下面来给大家讲解一...原创 2021-01-27 10:55:34 · 1615 阅读 · 0 评论 -
Axure 9 实战案例,动态面板的应用 6,导航菜单栏的手风琴效果
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果。我们还是先来看看完成效果图,大家可以看到,手风琴菜单的交互主要包括:①点击菜单1~3时,可展开或收起内容区域;②点击收起菜单1~2时,其余下方菜单均向上移动;③点击展开菜单1~3时,其余菜单均收起(即手风琴效果)。菜单初稿一如既往,这里提前把菜单初稿准备好了。下面来给大家讲解一下手风琴效果的实现步骤。原创 2022-09-02 16:14:28 · 2538 阅读 · 0 评论 -
Axure 9 实战案例,交互事件的应用 1,APP列表页的多选交互
上两个章节我们一起学习了基本元件的应用,与动态面板的应用,本章节我们来重点讲解交互事件的应用。本篇课程我们首先来学习一下,选中事件的应用,如何绘制APP列表页多选效果?我们先来看看完成效果图,大家可以看到APP列表多选效果主要组成包括:①点击圆形时,显示选中状态;②再次点击圆形时,取消选中状态;③选中任何一个圆形时,启用完成按钮;④没有选中圆形时(默认时),禁用完成按钮;⑤点击全选按钮时,选中全部圆形,按钮文本变为取消全选...原创 2021-01-17 21:44:46 · 2922 阅读 · 4 评论 -
Axure 9 实战案例,交互事件的应用 2,APP列表单选限制交互
本篇课程我们就来学习一下,选中事件的应用,如何绘制APP列表页单选限制效果。我们先来看看完成效果图,大家可以看到APP列表单选限制效果主要组成包括:①点击矩形时,显示选中状态;②再次点击矩形时,取消选中状态;③切换矩形时,选中当前元件,并取消选中其他元件;④选中任何一个矩形时,启用完成按钮;⑤没有选中矩形时(默认时),禁用完成按钮。......原创 2021-01-18 19:08:12 · 1491 阅读 · 0 评论 -
Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入
上两篇教程,我们讲解了选中事件的应用,不知道同学们掌握了没有呢?如果掌握了,那么本篇我们就来讲解一下另一种交互事件,焦点事件的应用,绘制APP支付密码键盘输入效果。我们先来看看完成效果图,大家可以看到APP支付密码键盘输入效果主要组成包括:①页面载入时,获取输入框1为焦点;②点击键盘时,自动输入对应数字;③当焦点框输入数字后,焦点自动跳至下一框;④删除时,当焦点框被清空时,焦点自动跳到上一框。为了节省时间,我们提前把设置支...原创 2021-01-19 17:55:56 · 1283 阅读 · 0 评论 -
Axure 9 实战案例,交互事件的应用 4,点击按钮显示波纹特效
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>在年前(2020年)小默曾绘制过一个Axure作品,里边有一个点击按钮显示波纹特效(点击了解更多),有不少同学询问如何实现。那么本篇我们就来讲解一下这里用到的交互事件,以显示隐藏事件与等待事件的应用,绘制按钮的波纹特效。我们先来看看完整效果图,大家可以看到按钮点击效果主要组成包括(由于整个作品比较复杂,这里我们只拆解按钮点击效果这部分交互):①点击右下角的圆形时,以波纹特效打开菜单;②波纹扩大时,中心的+号会旋转;③波纹只能填原创 2021-01-23 22:05:39 · 1682 阅读 · 0 评论 -
Axure 9 实战案例,母版的应用 1,使用母版绘制APP导航菜单
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>前几章我们分别讲解了Axure基本元件、动态面板、交互事件的应用,相信同学们的Axure实战能力已经有了一定的提高,那么在基础课程的最后一章,我们接着来讲解一下Axure母版的应用。在原型设计工作中,擅于运用母版,可大量减少设计时间,以及压缩RP文件大小;尤其是在设计导航菜单时,运用母版会十分省时省力;所以本篇教程我们就以微信为蓝本,来讲解一下,如何运用母版绘制APP导航菜单。我们先来看看微信的效果图,大家可以看到微信导航菜单的主要原创 2021-02-03 15:57:47 · 2823 阅读 · 1 评论 -
Axure 9 实战案例,母版的应用 2,运用母版交互绘制Tab页签
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>上一篇教程我们讲解了运用母版绘制微信APP的导航菜单(点击阅读该教程>>),本篇教程我们继续来讲解一下另一种菜单——Tab页签菜单,这一类菜单更多是应用在APP的顶部,例如TIM的联系人页面。上图为TIM的联系人页,大家可以看到该页的主要交互组成包括:①点击菜单时,会选中当前菜单;②点击菜单时,指示线会移动到相应菜单的下方;③点击菜单时,跳转到相应页签/页面。为了节省时间,我们提前把TIM联系人页的Tab页签菜单初稿准备好了原创 2021-02-07 18:07:03 · 2739 阅读 · 4 评论 -
Axure 9 实战案例,母版的应用 3,用母版绘制高逼格APP原型
Hello!欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>不知道从何时开始,在APP原型设计中,产品经理们都喜欢套一个仿真手机框,别说整体看起来确实高逼格很多。本篇我们就来给大家讲解一下,如何运用母版绘制高逼格(bao zhen)的APP原型,藉此一起来学习母版里更多的功能。事前我们需要明确一点,目前一般常用的(IOS端)APP原型的尺寸为375×812,这是基于在当下全面屏时代,以iPhone X的分辨率(1125×2436)为参考的,375×812正好是1125×2436的三分之一,俗原创 2021-02-12 19:21:02 · 3407 阅读 · 0 评论