axure教程(十)如何用axure_rp画流程图
- 格式:docx
- 大小:161.60 KB
- 文档页数:7
1介绍互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)。
而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整而准确的表述给UI、UE、程序工程师,市场人员,并通过沟通会议,反复修改prototype 直至最终确认,开始投入执行。
进行产品原型设计的软件工具也有很多种,我写的这个教程所介绍的Axure RP,是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。
同时,此软件也在产品经理圈子中广为流传。
之所以Axure RP得到了大家的认同和推广,正是因为其简便的操作和使用,符合了产品经理、交互设计师们的需求。
在正式谈Axure RP之前,我们先来看看做产品原型设计,现在大致有哪些工具可以使用,而他们的利弊何在。
纸笔:简单易得,上手难度为零。
有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。
但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。
Word:上手难度普通。
可以画wireframe,能够画页面流程,能够使用批注与文字说明。
但是对交互表达不好,也不利于演示。
PPT:上手难度普通。
易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。
但是不利于大篇幅的文档表达。
Visio:功能相对比较复杂。
善于画流程图,框架图。
不利于批注与大篇幅的文字说明。
同样不利于交互的表达与演示。
Photoshop/fireworks:操作难度相对较大,易于画框架图、流程图。
不利于表达交互设计,不擅长文字说明与批注。
Dreamweave:操作难度大,需要基础的html知识。
易于画框架图、流程图、表达交互设计。
不擅长文字说明与批注。
以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototype design的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。
本篇包含56种常见的基础操作,初学者应在掌握本篇内容后再进行实战案例篇的学习,以免产生学习障碍。
同时,建议具备一定基础的读者学习本篇中相对生疏的内容,并加以掌握。
本文目录基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏正文基础1. 添加元件到画布在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
(图1-1)基础2. 添加元件名称文本框属性中输入元件的自定义名称,建议采用英文命名。
建议格式:PasswordInput01或Password01名称含义:序号01的密码输入框格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。
(图1-2)基础3. 设置元件位置/尺寸元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
(图1-3)x:指元件在画布中的x轴坐标值。
y:指元件在画布中的y轴坐标值。
w:指元件的宽度值。
h:指元件的高度值。
在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。
(图1-4)基础4. 设置元件默认角度方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。
(图1-5)方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。
(图1-5)基础5. 设置元件颜色与透明选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。
(图1-6)基础6. 设置形状或图片圆角可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。
axure10使用方法Axure 10使用方法一、概述Axure 10是一款流行的原型设计工具,用于创建交互式原型和界面设计。
本文将介绍Axure 10的基本使用方法,以帮助用户快速上手并提高工作效率。
二、安装和启动1. 下载Axure 10的安装程序,并按照提示完成安装。
2. 启动Axure 10,在欢迎界面选择新建项目或打开现有项目。
三、界面概览Axure 10的界面主要由以下几个部分组成:1. 工具栏:包含各种常用工具和命令按钮,可用于创建和编辑原型元素。
2. 主视图区域:用于显示当前页面或组件的编辑区域。
3. 交互控制台:用于添加和编辑交互动作,实现页面之间的跳转和交互效果。
4. 组件库:包含各种预定义的UI元素和交互组件,可用于快速创建原型。
5. 属性面板:用于编辑所选元素的属性和样式。
6. 页面管理器:用于管理项目中的各个页面,可进行页面的添加、删除、重命名等操作。
四、创建页面1. 在页面管理器中点击“新建页面”按钮,输入页面名称并确认。
2. 在主视图区域中开始设计页面布局,可使用组件库中的元素进行拖拽和放置。
五、编辑页面1. 选中页面中的元素,可以通过属性面板编辑元素的大小、位置、颜色等属性。
2. 在工具栏中选择相应的工具,如文本工具、形状工具、图像工具等,进行元素的创建和编辑。
3. 使用组件库中的元素或自定义组件,可以快速创建复杂的界面元素。
4. 在交互控制台中添加交互动作,如点击、滚动、拖拽等,实现页面之间的跳转和交互效果。
六、创建交互动作1. 选中某个元素,在交互控制台中点击“添加动作”按钮。
2. 选择相应的触发事件和目标动作,并设置相应的参数。
3. 可以通过拖拽连接线来创建多个动作之间的逻辑流程。
七、预览和测试1. 在工具栏中点击“预览”按钮,可以查看当前页面的交互效果。
2. 在预览模式下,可以进行真实的交互操作,测试原型的可用性和用户体验。
八、导出和分享1. 在工具栏中点击“导出”按钮,选择要导出的文件格式,如HTML、PDF等。
axure rp10 操作流程Axure RP10是一款强大的原型设计工具,可以帮助用户设计和创建交互式原型。
本文将介绍Axure RP10的操作流程。
第一步,安装Axure RP10。
首先,用户需要从Axure官方网站上下载Axure RP10的安装程序。
下载完成后,双击安装程序,按照安装向导的指示进行安装。
可以选择安装的目录和其他一些设置。
安装完成后,就可以打开Axure RP10了。
第二步,创建新项目。
打开Axure RP10后,用户可以看到一个欢迎界面,提供了一些快速启动的选项。
用户可以选择创建新项目来开始设计原型。
在新项目对话框中,用户可以设置项目的名称、保存位置和默认分辨率等信息。
点击“创建”按钮后,一个新项目就会被创建出来,并且会自动打开一个新的页面。
第三步,设计页面布局。
在Axure RP10中,页面是构建原型的基本单位。
用户可以通过拖拽和调整页面上的各个元素来设计页面布局。
Axure RP10提供了丰富的界面组件,用户可以从组件库中选择并拖拽到页面上。
用户可以通过选中元素,然后使用拖拽或者调整属性来调整元素的位置、大小和样式。
第四步,添加交互行为。
Axure RP10可以帮助用户创建交互式的原型,通过添加交互行为,用户可以模拟用户与原型的交互过程。
用户可以通过右键点击元素,然后选择“交互”来添加交互行为。
例如,用户可以给按钮添加点击事件,当用户点击按钮时,可以跳转到另一个页面或执行其他操作。
第五步,创建动态效果。
除了基本的交互行为外,Axure RP10还提供了创建动态效果的功能。
用户可以给元素添加动画效果,例如淡入淡出、移动和旋转等。
用户可以通过选中元素,然后点击“动画”选项卡来添加动画效果。
用户可以选择不同的动画类型和参数来创建自定义的动态效果。
第六步,预览和测试原型。
在设计和编辑原型的过程中,用户可以随时预览和测试原型的交互效果。
点击工具栏上的“预览”按钮,Axure RP10会自动打开一个预览窗口,用户可以在其中模拟用户的操作过程。
最新Axure使用_详解(优选.)rd一.认识Axure的软件界面Axure的软件界面总的来说,可以分为9大模块1. 菜单栏:和大部分的软件界面一样,都是一些常规的文件、编辑、视图……2. 工具栏:是页面进行编辑的一些快捷操作,主要有字体设置、大小设置、页面显示大小和Axure本身自带的一些快捷操作等3. 站点地图:呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作4. 部件区域:组件集中地带:矩形组件、图片组件、动态面板组件……使用方式是直接拖动部件到页面编辑区域5. 母版区域:共用,复用6. 页面编辑区域:拖动相关的部件进行线框图编辑和交互具体的实施7. 页面交互区域:8. 部件属性区域:组件的注视、组件的交互、组件的属性编辑9. 动态面板区域:设置动态面板的可视与隐藏二.生成网页原型的三种方法方法一:菜单生成法路径:生成——原型——弹出框如图:方法二:工具栏,快速按钮生成法方法三:快捷键生成法:直接按键盘F5,即可生成网页原型弹出框:无论使用上面哪一种方法生成原型,最终都会弹出以下这个弹出框(如图)我们需要做三步动作:1. 目标文件夹:即我们要生成的网页原型文件要存放的位置,默认存放在我的文档》我的AXURE RP原型文件夹中,如果你不想放在默认的位置,也可以点击进行自定义存放。
2. 选择浏览器或者不打开,一般选择默认浏览器3. 点击“生成”按钮,生成网页原型,生成过后,如果你选择了默认浏览器,软件会直接启动你的浏览器,并打开生成的原型页面,如图:一个简单的登录窗口,就生成了!你也试试吧!三.如何关闭IE浏览器在生成原型时候的安全警告一般情况下,如果你的浏览器是IE的话,在每次生成网页原型的时候都会弹出如下安全警告,如图:暂时性去除方法:单机鼠标右键,选择容许阻止内容彻底的方法:工具——internet选项——弹出窗口——选择高级——把允许活动内容在我的计算机上的文件中运行”,打上对勾点击“应用”即可。
Axure学习笔记软件中有不完善的地方,要靠自己的经验来规避和克服,还算好用。
熟练了Axure,对软件设计文档的编写大有帮助,因为可以有一些界面图出来。
画界面图时多用Axure,画流程图时多用Visio,为的是熟练Axure,并且Axure画界面要简便许多,节约时间。
(四)范本复用masters和sitemap面板很相似,文档操作也一样,它们的本质区别是,sitemap里的档是最终展示页面,masters里的文件却只是一个模块,是页面的一个部分。
masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。
masters 的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。
这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。
master的档就相当于这段被调用的页面程序。
dreamweaver也有类似的功能,就是template,可以参照理解。
一、功能条master的功能条功能基本和sitemap一模一样,功能也基本一样。
唯一不同的是master可以创建档夹,可以通过档夹收纳不同的档,因此唯一不同的就是第一个功能按钮,功能作用是增加一个档夹。
behavior是行为的意思,这个功能是axure升级到4版本后加入的,是针对master的不同使用情况而添加的一个功能,也是要重点介绍的功能。
1、normal:普通档。
就是一般的复用档。
是默认创建的复用文件。
2、place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。
这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
3、custom widgets behavior:自定义模块。
这类模块就类似于自创了一个widgets。
Axure基本使用指南目录原型工具的选择 (1)axure文件的使用 (2)axure文件的制作与生成 (4)文档管理(Document) (6)模板复用(Templates) (10)Widget工具 (14)注释annotations (19)交互interactions (26)Axure RP Pro5.5中文翻译教程 (30)原型工具的选择纸笔:简单易得,上手难度为零。
有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。
但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。
Word:上手难度普通。
可以画wireframe,能够画页面流程,能够使用批注与文字说明。
但是对交互表达不好,也不利于演示。
E xcel:上手难度普通。
易于画表单类的页面,易于做批注,但演示效果一般。
PPT:上手难度普通。
易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。
但是不利于大篇幅的文档表达。
Visio:功能相对比较复杂。
善于画流程图,框架图。
不利于批注与大篇幅的文字说明。
同样不利于交互的表达与演示。
Photshop/fireworks:操作难度相对较大,易于画框架图、流程图。
不利于表达交互设计,不擅长文字说明与批注。
Dreamweave:操作难度大,需要基础的html知识。
易于画框架图、流程图、表达交互设计。
不擅长文字说明与批注。
以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototype design的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。
比如使用纸笔,更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路,及时的画出来,是再好不过的方法。
而word则适合在用文字详细表达产品,对产品进行细节说明时使用,图片结合文字的排版,是word最擅长的工作。
一. 認識Axure RP1. 什麼是Axure RP2. Prototype的效益3. Axure RP可以幫助哪些人4. 如何學習Axure RP的操作1. 什麼是Axure RPAxure的發音是”Ack-sure”,RP則是”Rapid Prototyping”快速原型的縮寫。
Axure RP Pro是美國Axure Software Solution公司的精心傑作,如果你本身是軟體專案經理,Web產品經理,或網站企劃工作者,那麼你不能不知道這套軟體。
Axure RP是一個快速繪製Wireframe 和Prototyping的工具,主要用來定義應用程式的需求與規格,以及設計使用者介面與功能,使用者包括User Experience Designers、商業分析師、資訊架構師、Usability Expert與產品經理等專業人士。
.在Axure RP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者,以確保在有限的專案時間與資源下,開發出有用和可用的應用程式。
傳統上,製作prototype 不但昂貴而且費時,讓程式設計師很難在開發過程中搭配合作。
商務專家(Business professional)也不斷的在使用簡報與圖示的工具建立prototype 和持續對製作過程與結果不滿意之間掙扎著。
為了要能有效且快速的建立prototype,Axure RP 結合了廣受歡迎的簡報與圖示工具中簡易操作的特性和其他必要的功能。
這樣一來,商務專家就可以在不需要大量的文件製作下快速的建立prototype,而專案成員與專案關係人也可以在不中斷開發的情況下輕鬆完成prototype。
Axure RP很容易上手且絕對值回票價的,所以當專案成員在第一個專案中使用這個工具時就會發現他們的投資已經得到了顯著的回報。
不只省下了在收集與溝通需求上的時間與成本,同時也降低了改善需求時的重工。
使用Axure进行思维导图与用户流程设计在设计和开发过程中,思维导图和用户流程设计是非常重要的工具。
它们帮助我们理清思路,将复杂的概念和流程可视化,使得团队成员更好地理解和沟通。
而Axure作为一款功能强大的原型设计工具,可以帮助我们更加高效地进行思维导图和用户流程的设计。
一、思维导图设计思维导图是一种以中心思想为核心,通过分支和关联来展示思维和信息的图形化工具。
在设计过程中,我们可以使用Axure来创建和编辑思维导图。
首先,我们需要明确思维导图的主题或中心思想,然后通过添加分支和子分支来展开思路。
在Axure中,我们可以使用文本框、箭头和线条等工具来绘制思维导图。
我们可以通过拖拽和连接这些工具,快速创建分支和关联。
同时,Axure还提供了丰富的样式和颜色选项,可以帮助我们美化思维导图,使得它更加易于理解和阅读。
在设计思维导图时,我们需要注意以下几点。
首先,思维导图应该具有层次感,主题应该位于中心位置,分支和子分支应该按照逻辑顺序展开。
其次,我们可以使用不同的颜色和样式来区分不同的分支和关联,以增强可读性。
最后,思维导图应该简洁明了,避免过多的文字和细节,以免造成混乱。
二、用户流程设计用户流程设计是指通过图形化的方式展示用户在使用产品或服务时的操作流程和交互过程。
它帮助我们更好地理解用户的需求和行为,从而优化产品和提升用户体验。
在Axure中,我们可以使用交互元件和链接来创建和模拟用户流程。
在设计用户流程时,我们需要明确用户的目标和需求。
我们可以通过用户调研和分析来获取这些信息。
然后,我们可以使用Axure来创建用户流程图。
首先,我们需要确定用户的起始点和结束点,即用户进入和离开产品或服务的路径。
然后,我们可以通过添加交互元件和链接来模拟用户的操作和交互过程。
在设计用户流程时,我们需要注意以下几点。
首先,用户流程应该简单明了,避免过多的步骤和冗余的操作。
其次,用户流程应该符合用户的习惯和心理预期,避免让用户感到困惑和迷失。
axure教程(十)如何用axure rp画流程图?
axure发表于232天3小时43分钟前
来源:标签:axure rp画流程图axureAxure教程
axure系列教程这一章的主要内容是讲述如何用axurerp画流程图:
1. 流程图
2. Flow Widget
3. 建立流程图
4. 关联网页
5. 输出流程图
6. 秘技(Quick Tips)
1.流程图
流程图可以用来表达各式各样的流程,包括:Use Case(用例)、商业流程与网页流程,在Axure RP中,流程图常被用来提供一个高阶视角(high level view)来看网页设计可以达成的工作。
在Sitemap窗格中的网页标示图案,预设为网页形状的ICON,您可以在Sitemap中的网页上按鼠标右键并选择「Diagram Type->Flow」,将网页标示图案设定为流程图ICON。
不过,这不是建立流程图所必要的动作。
这个动作与绘制流程图没有关联性,只是用来辨识这个页面放置流程图或线框图。
2. Flow Widget
按下Widgets窗格工具列上的「Flow」可以找到各种流程Widget。
在Widgets 窗格中有各种形状的Widget可以用来代表不同的流程步骤,如果您找不到适合的形状,也可以使用Image Widget来代替。
依惯例,在流程图中不同的形状的图形分别代表着特定的意义,但是Axure RP 并没有限制这些图形的使用,一般来说,只要您的客户看的懂就是最好的规则。
3. 建立流程图
就像Wireframe Widget一样,Flow Widget也可以直接从Widgets 窗格中拖拉到Wireframe 窗格,然后透过工具列或快捷菜单(Context Menu)来编辑样式与属性,如果要改变流程形状的话,可以按鼠标右键并选择「Edit Flow Shape」子选单中的项目。
连接线
Flow Widget和Wireframe Widget最主要的不同就是Flow Widget具有可以附加连接线的连接点。
想要加上连接线的话,请先按下工具列上的【Connector Mode (F11)】钮,将Wireframes 窗格改变为Connector Mode,若是要将Wireframe窗格切换回Pointer Mode的话,则请按下【Pointer Mode (F9)】钮。
切换到Connector Mode后,在Wireframe 窗格中按一下鼠标左键并拖曳,就可以画出一条连接线。
若是要连接两个Flow Widget的,请在其中一个Widget上的连接点按住鼠标左键,拖拉连接线到另一个Widget上的连接点后放开鼠标,就可以新增一条连接线;您也可以利用拖曳连接点的方式将已经建立好的连接线附加到另一个Flow Widget的连接点上。
连接线也可以套用线条末端(例如:箭头)与线条样式(例如:虚线),只要先选好您要设定的连接线,再使用工具列上的Line Pattern 与Line Ends按钮即可。
4. 关联网页
Flow Widget可以关联到任意指定的一个参考网页,一旦指定了关联网页,Flow Widget 上会显示这个网页的名称,而在Prototype中,这个Flow Widget与网页间会自动建立Hyperlink连结。
从Sitemap窗格中,将任一网页拖拉到Wireframe窗格中,也会建立一个以这个网页当作关联网页的Flow Widget。
Flow Widget 上的关联网页可以透过在Widget上按鼠标右键,并选择「Edit Flow Shape->Edit Reference Page」来编辑或清除。
5. 输出流程图
在Auxre RP绘制的流程图,可以输出成图档或网页。
输出成图档:
选择「File > Export to Image」,就可以把单独这页流程图转成图档。
如果您想把流程图放到Powerpoint或Word文件,可以直接全选整个Axure RP流程图,以Coyp/Paste 的操作方式贴到Powerpoint或Word文件中。
输出成Prototype:
是的,流程图可以直接在浏览器上观看。
输出流程图到Html Prototype方式跟输出其它网页到Prototype相同,请按下Axure RP软件上方主功能选单「Generate」菜单,选择「Prototype(F5)」即可。
6. 秘技(Quick Tips)
秘技一. 固定连接线,取消自动绕图:
在预设的情况下,连接线会自动绕过中间阻碍的Widget来连接两个连接点,为了避免连接线或Widget移动时连接线不断的自动改变路径,您可以按鼠标右键并选择「Edit Connector->Do Not Autoreflow Connector」来停止这个功能。