Axure教程

Aure 如何调整线框图的对齐细节?

如果PM对原型的视觉要求比较高,那么画线框图的时候一定要注意各种细节,比如元件相对于页面的位置,和其他元件是否对齐等。接下来通过一些原型实例,给大家讲解一下如何优化线框图的细节。以下方法对单一元件或者选中多个元件都有效。这些功能除了常用工具栏,也可以在菜单栏,和右方的检视视图中找到。设置元件的位置下图中的“昵称”这个文本元件, 需要距离左边框和上方banner一个合适的距离

Aure 8.0 RP:制作一个“美美哒”的滚动条

在实际生产过程中我们发现Axure的动态面板原件可以提供强大的功能,比如滚动条,但是滚动条只能以原生效果展示,无法对其展示样式进行编辑。Axure的滚动条的丑就属于结构性问题,我们无法解决这个问题但是可以绕过,即让别人看到的Axure原型滚动条是我们想让对方看到的滚动条。一、准备素材这里用微信的界面来做展示,准备素材(笔者这里主要用了动态面板和中继器,嗯,在动态面板中充当内

Aure 组件重写系列(三):拿什么来拯救你的表格组件?

在学习了本文的中继器表格之后,你将会十分完美地解决原生表格组件覆盖不到的功能区。一起来看。表格应该是我们非常熟悉的一种数据格式了,在实际开发中,它也是作为系统的一个组件之一在各种场景中频繁出现。在我看来,表格设计在产品原型的中的功能主要有两个:数据陈列。展示一组(全量)真实数据,方便沟通过程中需求双方对真实业务场景的理解。数据模拟。作为产品交互组件的一部分,展示结构及交互样

如何使用 Aure 规范的画出页面的线框图

每个APP原型都是由一个个页面组成,那么每个页面的线框图该如何通过Axure的画出来呢?我希望通过这篇文章,让刚入门的PM可以不走弯路,规范高效的画出每个页面的线框图。画出主要状态的线框图一个页面,可能包含多个状态的显示效果。比如微信APP首页除了常见的下图显示效果,还有点击右上角+的显示效果,还有删除所有聊天的显示效果……但是,最核心的状态应该是用户进入该页面之后,正常清

Aure 系列教程(一):抖音短视频中小元件的交互动效(下)

文章分享了抖音短视频中交互动效的制作方法,一起来学习下。第一章知识点1.1歌曲封面旋转效果1.2喜欢按钮交互效果1.3收藏按钮交互效果 1.4关注按钮交互效果 1.3收藏按钮交互效果1.3.1设计思考图形有两个状态,但是无法像心形形状一样通过填充颜色(选中效果)来实现两种状态的切换,所以我们需要借助动态面板来完成。我们为动态面板建立两个状态,状态一:未收藏,状态二:已收藏。

Aure 原型:1 个原型搞定工作知会

团队中,总会有人没有好的整理习惯,或者记性不好,亦或者你也不想为了这些事情耽误自己的时间。如何能有效的减少这类事情的沟通成本呢?作者尝试制作了一个关于需求沟通的面板原型,一起来看看。“小健阿,那个缺陷管理的后台地址是什么?”“小健啊,98.8活动的需求稿你发给我了么,在哪里看?”“小健啊,上周我们做了哪些需求啊,你整理出来看看”“小健啊,现在XXX在开发什么,好像没什么事干

Aure 之旅:关于 Aure 的冷知识

Axure是头大象,其实有很多不容易被大家注意到的功能。Axure以高度的自由度著称,用好了绝对是大杀器。本篇是系列文章的第三篇,讲讲关于Axure的一些冷门小知识。一、手绘风格的原型其实Axure也是支持手绘风格的。具体设置在Project——>Page style editor我习惯使用英文版,中文版的对照图片找位置就可以了。点进去以后,找到Sketch Effects

Aure 教程:滑动进度条、圆形进度环的复杂交互效果实现方法

滑动条、进度条、进度环,是产品原型中比较常见的进度展示功能。今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果。效果一、可拖动、可显示进度值、可计算多个页面均值的滑动进度条实现效果功能流程分析因为会涉及多个页面的值传递,我们使用Axure中的【全局变量】功能,来临时存放每个进度条的值,这样方便最后一步把5个进度值拿出来再次计算。制作前分析页面:5

使用 Aure 设计中,大型的后台系统原型总结(下篇)

本人结合自己实际的多个后台系统项目经历以及使用Axure的经验技巧,从方便维护和便于复用等角度出发,总结出了这篇关于后台系统原型设计的分享内容,希望能帮助到一些有需要的朋友们。在 使用 Axure 设计中,大型的后台系统原型总结(上篇) 中,我们重点介绍了关于后台系统的框架结构,以及使用Axure搭建自适应框架的应用技巧。在今天的下篇中将争对相关细节进行更深入的介绍,其中的

Aure 之旅:高保真生成随机验证码原型制作

上篇文章 Axure 之旅:不看教程,如何做出自己想要的任意效果? 分析了Axure原型的三个层次:表现层、逻辑层、展示层,今天的这篇文章从这个层次思路入手,继续分享关于验证码的原型设计。上次分享一个本专题的一个开篇,讲诉了Axure原型的三个层次,即表现层、逻辑层、展示层。并给出了一个简单的例子:音量调节。这次将分享一个更为常见的组件:验证码。如下图验证码先说明一下,在实

Aure 8.0:移动端菜单吸附

文章分享了制作移动端广泛应用的菜单吸附设计的一个操作过程,希望对大家有所帮助。如今移动互联网时代愈演愈烈,微信、QQ等社交软件的大幅度应用,加之共享经济的推动,用户使用移动端(手机+pad)的频度越来越大,这就要求产品在满足用户需求的前提下,增强用户体验,让用户发自内心的觉得这个产品好用、实用、方便操作…这样才能更大程度的留住用户。下面是移动端广泛应用的菜单吸附设计,希望对

原型设计:APP 下导航如何通过 Aure 画出来

下导航是APP原型设计中常见的功能,如何快速高效的通过Axure画出来呢?网上有不少文章讲过如何画下导航,要么方法特别复杂,要么步骤并不全面。典型的错误有两个,①使用多个动态面板来嵌套实现下导航。②使用动态面板来区分选中和未选中。但是学会本文你可以100%模拟出微信、支付宝,淘宝,天猫app的下导航原型效果,点击预览效果。接下来我会以微信APP为例,详细讲解每一步骤,学会之

Aure:模拟豆瓣电影 APP 滑动点击切换主页

本文作者用Axure模拟豆瓣电影APP滑动点击切换主页。enjoy~前期准备:手机截屏两张主页图,Photoshop切图截屏不用教了吧,我的是安卓手机 分辨率是1080*1680,和iPhone6 plus一样的分辨率,所以在这里用了iPhones plus的元件当背景。Photoshop不用怕,先沿着标尺拉上几条参考辅助线放大精确到像素OK,这些辅助线是为了等会切图方便快

Aure:模拟微信切换菜单栏

本文作者用Axure来模拟微信切换菜单栏。enjoy~先讲思路主页转换为动态面板,总共4个状态,按钮转换为动态面板,分别两个状态,设置交互,点击白色按钮时,主页动态面板切换为对应状态,当前按钮面板转换为绿色背景按钮状态,其他四个按钮则变成白色背景按钮的状态。再详细解释1. 首先做一个主页(聊天界面),四个等大按钮至于底部并输入文字。2. 将主页转换为动态面板,再添加3个状态

Aure8.0 实例 | 数量编辑器

在诸多购物平台中,包括app端,在下订单是时基本都需要选择购买的数量,此处需要有一个数量编辑器。该数量编辑器的主要特点是,可以通过左右两侧的加减号改变数量,也可以通过中间的数字文本框直接填写。今天,我们一起来学习一下数量编辑器的原型是如何实现的。预览:一、元件准备1、添加三个矩形框,分别取名为“减少数量”、“数量背景”、“增加数量”。“减少数量”矩形框中输入“-”号,“增加

Aure 之旅:不看教程,如何做出自己想要的任意效果?

今天决定开一个新坑,来讲讲产品经理的大杀器——Axure。众所周知Axure是款原型设计工具,应用十分广泛。在国内近年来也有一些创业公司在做原型设计工具,如墨刀、mockplus等,主打简单、易用。但是Axure依然是主流。当然了我并不是说它们不好,其实我都有用过,对于新手来说,确实是很容易上手。但是我想提醒的一点是,很多“易用”其实是甜蜜陷阱,在这些主打简单易用的原型工具

这些年,产品经理们折腾过的原型工具

之前读过一篇关于“什么是全栈设计师”的文章,里面提到所谓的全栈设计师就是能做线框图、原型图,能做视觉稿,能写前后端代码。放到产品设计中,全栈设计师就是能一个人搞定产品开发的所有环节。其中,最原始、最关键的一个环节就是线框或者说原型设计。这个环节的意义就相当于上层建筑的扎实地基。那么打造地基的工具很重要。所以,选什么原型工具,怎么选择原型工具对产品经理们来说就是一个值得思考的

Aure 教程 _ 移动端 APP 高保真原型框架搭建 3_ 弹框提示语 1(附源文件下载地址)

Axure高保真原型,移动端APP底部导航搭建。移动端高保真原型、原型动效库、原型元件库,Axure元件库、Axure元件库、Axure原型设计。原型在线地址:https://pan.baidu.com/s/1qYOBATu(百度网盘)原型屏幕尺寸:375*667px(iphone6/iphone6s/iphone7)一、功能点1、新建元件库,通过元件库反复调用提示弹框;2

Aure RP 8 教程 – 用动态面板实现轮番图

本章主要介绍如何使用动态面板的多状态切换制作轮番图,而轮番图在首页消息和活动的推送以及APP引导页有广泛的运用。案例简介:固定区域循环播放一组幻灯片,圆形分页标签随着播放不同的图片,而对应改变样式。 案例效果: 以下是轮番图的制作流程,请慢慢食用哦。Axure RP 8 教程 – 用动态面板实现轮番图1.将动态面板拉到操作区中。2.,双击动态面板,添加五个状态,并给动态面板

Aure RP 8 教程:指针函数之商品图片放大

本章介绍如何使用指针函数实现鼠标区域的商品的放大,广泛应用于商品细节展示。案例简介鼠标进入商品图标时,商品图标呈现选中状态,同时商品图片相应改变;鼠标进入商品图片时,有绿色半透明矩形跟随鼠标移动,但是不超出商品图片范围;同时,右侧出现绿色半透明矩形所覆盖区域的放大图片;鼠标离开图片时,绿色半透明矩形放大图片消失。案例实际效果原件命名: 图片(用于商品图片):GoodsIma