【A020】页面模块水平左右滑动 前言在APP端中左右滑动的交互方式十分常见,在有限的区间内可以放置更多的内容。准备Axure 9(或Axure 8、10)软件已安装。掌握基本的软件使用。本教程知识点初级的动态面板使用。拖动触发的移动的交互事件。移动边界计算。详细教程功能鼠标右击可以将组件内容进行左右拖动。组件内容左右拖动有对应的边界限制。制作方式1、基础动态面板版本基础样式可以将展示内容嵌套在动态面板中,利用动态面板的水平滚动进行功能实现。制作时,需将动态面板的尺寸调
【A021】Axure制作气泡闪动图 前言在一些常见的大屏可视化中,均会以闪动的气泡作为一些提示符,进行动态的提示。准备Axure 9(或Axure 8、10)软件已安装。掌握基本的软件使用。本教程知识点交互动效延时填充的渐变样式连续动态的交互实现详细教程功能实现目标元件在界面中持续的动态变化。制作方式(以均匀变化为例)1、利用元件的载入交互,设定元件的尺寸变化。尺寸的设置,相对于原始的尺寸进行变化。例如设置尺寸比原始尺寸小,则先进行变小的动效。中心点选择,中心点绝对了以什么为中心
【Axure10】原型浏览器预览界面功能说明 前言原型的预览界面是Axure的重要组成之一。其实在原型预览的界面也存在一些比较实用的功能。正文预览页面基础布局通过在默认状态下,软件的预览页面会默认展示原型的页面菜单栏。功能1:隐藏菜单栏,扩大展示面积我们可以通过左上角的收缩功能隐藏对应的菜单栏,或在软件发布设置提前设置隐藏。功能2:调整画布缩放比例原型界面比例快速调整在Axure中,提供了预览页面画布的缩放比例,默认比例是按照100%展示的。在右侧的菜单栏可以进行比例调整。注:Axure 9 版本无比例调整。Default
09.加载进度条 加载进度条在PC端的文件上传、下载,APP端的部分进度展示都是不可缺少的一部分。准备Axure 9(或Axure 8)软件已安装。(注:本案例使用Axure 9制作)掌握基本的软件使用。熟悉函数知识(获取元件基础属性)。熟悉动态面板。本教程知识点基础函数应用。基础动态面板应用。详细教程–手机端滚动选择器本文以手机端APP更新页面下载进度为例,展示基础的加载进度条与下载进度。功能点击立即更新,展示下载进度条,同时进度条进行进度展示和当前进度百分比展示。制作方式1、.
08.左右时间交叉线 前言时间线的连续性的展示,可以更加友好的展现发展的时间节点。本文利用中继器实现简单的时间线流程准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。本教程知识点初级的动态面板使用。初级的页面交互事件、元件交互事件使用。中级中继器使用。详细教程功能展示时间线,数据可通过中继器进行维护制作方式以简答的纵向时间线为例进行制作。1、搭建基础的页面组成数据部分由中继器包裹动态面板将数据分为左侧与右侧区分数据内容中包括背景垂直
07.简单音频播放动效 动态的展示能够形象的吸引眼球,本次案例制作一个音频播放的动效。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。熟悉动态面板。本教程知识点基础动态面板应用。元件移动衔接。移动边界值的判断。详细教程本文以音频播放声纹为展示动,点击播放,声纹向左移动,点击暂停,声纹停止移动,点击删除按钮,声纹停止移动为案例进行逐步讲解。功能实现音频声纹的播放控制。制作方式1、搭建基础的框架音频模拟展示区域(动态面板)控制器:两个状态的动态面板,利用动态面板.
06.基础穿梭框 穿梭框组件是前端框架中常见的一种数据选择方式,可以动态可视化的展示数据的归属。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。熟悉中继器。本教程知识点选项组:选中效果互斥。中继器函数。详细教程本教程源文件提供了通过全局变量传参和局部变量传参的两种方式实现。本文以局部变量传参进行实现(相对简单易懂,且方便后期成为组件复用)。功能可以选择待选区域数据添加至选中区域,同时可将选中区域数据移除(恢复至待选区域)。制作方式1、搭建基础的框架中..
05.拖动等级调节 拖动调节一般在手机端主要用于快速的数值调节,主要用于音量的调节、播放进度调节、亮度调节等准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。熟悉函数知识(获取元件基础属性)。熟悉动态面板。本教程知识点基础函数应用。基础动态面板应用。详细教程-- 拖动等级调节本文以简单的基础拖动为例。功能鼠标点击滑块可自由在滑轴上拖动,并且展示大小等级(共10级)。制作方式1、搭建基础的案例框架。注意进度和底色需要高度一致,且左对齐。滑块需要涉及动态面板的.
04.手机端滑动选择器 滑动选择器在手机端是一个比较常见的组件,主要用于多数据情况下的选择。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。掌握基础的动态面板知识。本教程知识点进阶的动态面板使用。基础函数应用。基础中继器应用。详细教程–手机端滚动选择器本文以基础的单一选择为例(多选择可以将滑动区域、数据集模块进行复制,调整滑动区域、数据集宽度即可)。功能鼠标拖动滑轮进行数据选择,滑动结束后,选中数据居中。制作方式1、制作基础的静态模块(注意元件命名,本案例涉及局部.
03.上下滚动切换 上下滚动切换是APP中常见的交互之一,通过动态的交互,能够更好的引导用户的视觉。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。本教程知识点初级的动态面板使用。矩形、文字元件。详细教程–上下滚动切换功能界面加载后,内容进行上下滚动交互切换。制作方式本文以搜索栏提示的上下滚动为示例。做两种状态的切换。1、制作基础切换内容(本质为动态面板)。创建两个动态面板状态。2、制作填充动态面板状态内容。制作辅助样式。若需要交互,使用鼠标单击事件。.
02.进阶轮播图 上一篇文章给大家介绍了基础的轮播制作,适合于大部分,今天小编带领大家实现进阶的轮播图实现效果。例如轮播进度指示、快速跳转、鼠标移入暂停轮播等等准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。本教程知识点初级的动态面板使用。初级的页面交互事件、元件交互事件使用。鼠标移入移除动态面板状态切换图片元件、矩形、SVG图标等元件使用。详细教程–进阶轮播图功能鼠标移入暂停轮播、鼠标移除继续轮播。点击切换上一张轮播图、点击切换下一张轮播图。.
01.基础轮播图 前言轮播图在手机端和PC网页官网、H5页面是比较常见的组件,今天小编带领大家一步步实现基础轮播图的效果。同时进行轮播图相关的扩展进行说明。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。本教程知识点初级的动态面板使用。初级的页面交互事件、元件交互事件使用。图片元件、矩形等元件使用。详细教程–基础轮播图功能自动滚动:页面载入交互点击跳转:元件单击交互制作方式以三张轮播为例,使用Axure 8为例。1、在元件库中拖入动态面板于绘图区域。2、
48.【Axure 10 】说明(注释)区域-元件注释 元件说明设置编辑元件注释(说明)元件注释分为三种类型文本:注释内容支持对应的自定义文本输入。文本类型注释支持文字样式的设置。选择列表:注释内容只能选择已进行提前添加的内容。数字:注释类型只能添加数字类型(注:系统虽然表示为数值,实际也可以输入文本内容,与文本最大的区别在于无法修改注释内容的样式。编辑元件字段集对元件注释内容进行分组处理,每个分组中可以配置对应的注释类型:文本、选择列表、数字。方便在编辑页面进行快速过滤。注释说明一个元件可以添加多个注释,每添加一个注释会自
47.【Axure 10 】说明(注释)区域-页面注释 注:在预览时,显示注释说明内容需手动点击打开。页面注释设置编辑页面注释进行页面注释的字段添加,每添加一个,在页面注释区域就多一种类型。可以通过新增,设置页面的基础说明。例如概述、主要功能、版本等等。此处页面注释的字段内容均为文本格式,支持自定义文本样式。添加页面注释可以在已设置好的注释位置添加对应的注释内容。添加页面注释可以在已设置好的注释位置添加对应的注释内容。...
39.【Axure 10 】软件交互功能-启用情形 命名进行交互事件的命名,在命名后,存在多个交互事件在预览与展示是可以展示对应的交互名称。方便快速选择交互逻辑。此处进行交互提示,在设置启用情形时为同一交互动作不同结果才会展示。若添加了对应互斥的条件,系统会自动判断进行跳转。命名可以方便进行部分交互事件的后期修改定位。匹配模式完全匹配设置的所有的条件全部满足时,才会触发交互动作。任意匹配只需设置所有的条件满足其中一个就会会触发交互动作。条件设置一些前置条件。通过设置条件来对交互动作进行约束。类型设置对应的用于对比的类.
38.【Axure 10 】软件交互区域整体说明 交互区域概要说明交互区域的各种交互动作的互相联动时Axure作为原型软件的灵魂,虽然有大多数的在线软件实现了在线编辑的等各种功能,但是在交互的灵活性与便捷性上,完全无法与Axure媲美。启用情形+交互事件+交互动作三个部分构成了整个原型的交互逻辑、启用情形是触发的前提条件,交互事件是执行的动作,交互动作是执行动作的结果。简单来讲:通过交互事件在启用情形下,可以触发特定的交互动作。交互动作就是最终的执行条件。关于交互区域内容说明交互区域介绍对于交互区域,进行了功能层面的介绍。但是由于交互区域相对