Axure教程

APP 分段控件功能如何用 Aure 画出来

分段控件是指一组分段按钮,点击之后切换到相应视图。俗称分段器、标签页。典型应用场景 原型画法(无交互)分段控件通常由多个分段组成,每个分段由按钮和图标组成。位于导航栏内部或者下方。(1)先画第一个分段。从“默认元件库”拖动“矩形3”到工作区,修改尺寸为12530,移动到导航栏下方。代表该分段处于选中状态并显示选中样式。(2)再画第二个分段。从“默认元件库”拖动“矩形1”到工

Aure:一个简单的进度条,了解“触发事件”动作

本文通过制作一个简单的进度条,顺便来了解一下“触发事件”动作。先看效果:涉及知识点: “设置尺寸”动作;元件变量:Target;元件属性:height(元件高度)、width(元件宽度);数学函数:math.floor() – 返回小于或等于一个给定数字的最大整数 —— 算法;了解“触发事件”动作 —— 循环关键点;了解“等待”动作 —— 与觖发动作结合使用才能有效循环

Aure 教程:和我一起设计简书 App

本文通过还原简书App原型的过程,进行了大量的交互设计。本文也将会分享实现这些交互效果的设计思路与方法,希望能够帮助到有需要的同学,在原型设计的道路上更上一层楼。本文通过还原简书App原型的过程,进行了大量的交互设计。在原型制作过程中,几乎实现了最常见的交互效果,主要包括:轮播图、换一批、table切换、滑动开关、分享、toast提示、计数、清空、排序、置顶,还有各类函数、

Aure 案例:QQ 音乐播放界面

本文通过讲解制作QQ音乐交互原型的过程,了解如何实现旋转、计时器以及拖动等常见的交互效果。案例中综合运用了动态面板的循环、状态改变、拖动、文本改变以及旋转等事件,通过本案例的讲解,相信大家对于动态面板等高级元件的综合运用又会有一个新的认识。观察交互效果通过观察我们发现本案例中主要有以下3个交互效果:(1)播放音乐时: 开始播放,按钮切换为暂停;唱片顺时针匀速旋转;进度条

Aure 案例:电商购物车

购物车功能已经成为各类电商系商品的一个基础功能,那么关于购物车页面的一些交互功能,如何通过原型设计去完成呢?本文以京东购物车为实例,将重点讲述关于购物车页面的交互用例设计。演示地址:Axure 案例:QQ 音乐播放界面Axure 教程:和我一起设计简书 AppAxure教程:腾讯新闻按钮,如何一键上天?Axure教程:百度搜索提示,你也可以学会Axure教程:用Axure实

Aure 教程:按钮的启用和禁用设计

原型中常要用到按钮的禁用和启用,比如常见的:输入手机号获取验证码的获取按钮,在未输入内容前按钮不可点,输入按钮后,可点击获取按钮获取验证码。那我们本文就一起来看看按钮的启用和禁用设计。如下图: 首先,我们来看看效果没有输入内容前,按钮灰色不可点,输入内容后,按钮变亮,表示可以点击。 设计步骤(1)设计好元件:输入框+按钮。(2)设置按钮的属性: 点击交互样式中的选中,在

Aure:一分钟制作二级折叠菜单

上一篇文章写的 Axure:实现列表上下拖动的方法 ,里面用了一些公式计算有朋友说有点复杂了,今天做一个二级折叠菜单,个人认为算是我看到的所有文章里步骤最简单的实现办法了,如有更简单的欢迎交流讨论~效果如下:步骤如下:(1)准备一二级菜单画4个矩形,填充一些颜色和文字加以标记,如下图。然后选中二级菜单的三个矩形框(1.1-1.2-1.3)转动态面板命名“2ndPannel”

Aure:实现列表上下拖动的方法

如何用Axure实现列表拖动排序?这篇文章《 Axure 教程:列表拖动排序的实现方式 》 提出用中继器可以实现,但是明确指出只能向上拖动。本文有个方法,不仅可以向上拖动,还可以向下拖动。手动实现效果如下:步骤如下,大神轻拍。拖动开始时:记录被拖动条目当前的y坐标值;设置文字便于观察(下同)。拖动时:设置拖动边界;将当前拖动的条目置于顶层;记录拖动时y坐标值;计算拖动距离。

Aure教程:腾讯新闻按钮,如何一键上天?

在一些新闻网页上,到第二屏时,会有返回顶部的按钮,那么这样的原型效果,如何利用Axure实现呢?当我们浏览腾讯新闻网页滚动到第二屏时,这时网页的右下角会出现返回顶部按钮,点击按钮页面迅速回到第一屏位置。那么这样的原型效果,如何利用Axure实现呢?下面将为大家详细讲解制作步骤。 一、准备好元件素材首先我们需要搭建一个页面,这里我们摆放七个矩形框用来表达网页的内容栏目,多摆放

AXURE教程 | 如何实现弹出的提示自动消失

非确认的提示使用AXURE如何实现?一起从文中了解一下吧~如今非确认提示大多使用的提示方式为Toast,即无需交互可自动消失,这类提示不能承载太多内容。例如:“支付成功”、“输入信息有误”、“有8条信息更新”等,属于弱提示一类。这种提示方式使用AXURE如何实现?了解一下其中一种实现方式。电脑系统: macOS v10.13.3AXURE:v8.1.0.3366Step1:

Aure实例:二三级菜单展开/折叠效果的实现

菜单二三级中展开/折叠效果,了解一下。后台系统的管理菜单级联原型设计,一般后台菜单的级别分为2、3级,也会通过结构布局来化解菜单折叠的问题,但是有些复杂系统还是会需要菜单的展开折叠。下面讲一下Axure实现这一效果的过程。 一、准备组件矩形:一级菜单矩形:二级菜单可根据自己的需要进行颜色、大小等区分,将一级菜单和二级菜单排列好。 二、添加交互1、将所有二级菜单转化为动态面板

如何输出一份会表达的交互文档

不同的公司会有不同的工作流程,根据项目、流程等实际情况来设计适合自己的交互设计文档。在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互设计师应该具备优秀的表达能力,不仅是语言方面的表达,交互文档的表达也尤其重要。交互文档是对接上下游岗位,利于协同团队工作的重要输出件

APP详情页如何用Aure画出来

详情页是App原型中比较复杂的页面类型,熟悉它的常用套路有助于快速画出。之前的文章已经讲解了APP常见功能中的页面模板、下导航、上导航、列表页怎么画出来,请继续关注浪子教你画APP原型后续的其他功能模块。APP详情页往往包含上导航,内容区,工具栏三大部分,内容区会因为业务画起来很复杂。所以我们重点来聊聊内容区的画法。常见的详情页类型我们经常遇到的详情页有电商类的商品详情、团

Aure 教程:带放大效果的轮播图

本文作者将结合一个实际案例,来教大家用Axure如何实现这种轮播图,enjoy~提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样:点击预览然后左

不会编程?Aure一样可以做网站

说起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。接下去将分为几个步骤去阐述:1. 这些我们必须知道的小知识axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展

Aure原型如何根据使用场景来设置文本样式

文本是我们画原型的时候肯定会用到的元件,我们PM必须学会根据使用场景来合理的设置文本样式。如果你不懂得如何设置也不会影响工作,但是会导致你的原型看起来很丑不美观和会浪费很多时间。对于有追求的PM来说,原型的美观也是衡量自己能力的体现。建议对照之前的文章《Axure原型如何根据使用场景来设置页面样式》一起学习下我用Axure设计APP原型的经验技巧,以我画的微信APP原型来作

Aure发布到AShare的加密与非加密方案

本文作者给小伙伴分享了一份关于Axure发布到AxShare的加密与非加密方案,enjoy~首先下载Axure软件,安装成功后,做一个项目。项目完成后,选择发布菜单,点击子菜单发布到AxShare,如下图: 弹框中选择登录,没有账号,选择注册,注册后登录,如下图: 填写发布时的名称和密码(允许所有人都能看到不需要设置密码,设置密码后只能密码输入正确可看到项目),如图: 发布

Aure生成的原型html如何使用和备份

当PM完成Axure原型评审后,一定不能忘记备份这些原型html,后续可能需要查询以及技术撕逼。希望通过Axure原型的几种使用场景,让初级PM对它的来龙去脉有个清晰的了解。而不是停留在“我知道”“大概会用”的水平。版本PM会经常修改AxureRP源文件,然后生成不同的原型。但是对外评审的原型应该是唯一的。并且该版本的产品需求文档PRD就是这个原型。请注意两者不能混为一谈。