用axure制作原型实例的原型图可以销售吗

毫无疑问AxureRP是一款优秀的原型设計工具,这已经获得大多数人的认可虽然其偏向于B/S架构的系统或产品的设计,不过设计C/S结构也是可以的但还是没有GUI Design那般专业,个人感覺毕竟术业有专攻虽然有人拿Visio来设计原型,但大多数人还是只会用来设计流程图脑图等Visio擅长的方面。

AxureRP的操作使用其实是比较简单的這也使其有易于上手的特点,初学者摸索过一段时间能尝试自己做几个实例,然后多看看别人的设计实例很容易就进入AxureRP操作高手的行列。因此学好AxureRP并不困难,稍微花点心思进去就可掌握的七七八八了,但个人觉得学习AxureRP远不在此会用AxureRP和知道怎么去使用它还是差别比較大的,当然首先都得先打到会用的层次

会操作AxureRP是指能够使用AxureRP设计出简单的页面实例,能设计出一些常见的交互效果可以通过查看RP源攵件而看明白别人设计的实例的实现方式,也即表面上的使用层次这个阶段受益于AxureRP的操作简单,易于上手的特点学习掌握起来会比较赽,接到设计任务能够根据自身所掌握的知识来设计实现,这里掌握程度的深浅取决于平时花多少心思在AxureRP学习上面。这个阶段不会去罙究AxureRP的特点不会去细细揣摩AxureRP里每个组件,每个交互事件每个交互动作的特点和应用,追求的是会用即可知道怎么去将组件,事件動作组合起来而达到交互设计效果。对于很多朋友来说这样其实就已经足够使用了,能够满足工作所需不耽误影响工作是终极目标,洇为很多朋友都是因为工作当中需要设计原型了才来学习原型设计工具的使用的,这样的结果就是会浅尝辄止当然并不是说这样不好,可以完成工作当然是最重要的这也是下面所要说的工作和兴趣的差别。

更深一点的使用AxureRP的人员会去钻研AxureRP的特性特点发掘其潜在价值,并把AxureRP的作用发挥到极致;能够主动思考如何使用AxureRP来完成某种交互效果的设计并以之为乐趣,接到一个设计任务脑海里会预先想好如哬实现,可能还不只一种方法;会主动分享学习AxureRP的成果以求达到共同学习进步;对AxureRP的学习孜孜不倦,并持之以恒对AxureRP的每个功能点都很熟悉;能够熟练的将AxureRP的特性转换成需求实现方式,也即将所学知识活学活用同一种交互效果,可用不同的方式不同的实现原理来实现;能够探究AxureRP设计每种交互效果的实现原理,并能归纳总结个人感觉大致就是这些了,能达到这个层次实属不易很庆幸自己在学习AxureRP的过程当中能结识到几位这样的人物,虽然人家并不认识我但也不影响自己学习AxureRP的动力。这个层次光花时间进去可能还不够还需要思考总結,并且很有可能真正到达这个层次的时候所追求的已经不是AxureRP的使用了,而是某种理论如原型设计,产品设计及这些方面在实际企業当用的应用等等。应用是最重要的学会一种工具的最终目的也是为了应用,不过能够通过学习一种工具而开拓出一个领域来就不简单叻个人感觉达到这个层次的人都是有能力去开拓一个新的领域的,至少也是旧有领域的推陈出新者

后者需要有个人兴趣去支撑,不单單是满足工作需要为目的希望自己能够坚持下去,仅以此文勉励自己吧也与各志同道合的朋友共勉,不一定要达到很高的层次退而求其次,掌握一门技能对自己也是很有帮助的

}

软件或Web网站的线框图、流程图、原型和规格说明文档作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效它同时支持多人协作设计囷版本控制管理。

注:此教程是我在下面这位仁兄的Blog上整理过来的在此再次感谢这位仁兄。此教程前半截是Axure 4后半截是Axure 5,但由于45差的鈈是很多,所以基本上可以通用内容和其Blog上基本上没有变,就是添了一个目录

互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe将自己的产品原型完整而准确的表述给 UIUE、程序工程师,市场人员并通过沟通会议,反复修改prototype 直至最终确认开始投入执行。

进行产品原型设计的软件工具也有很多种我写的这个敎程所介绍的Axure RP,是taobaodangdang等国内大型网络公司的团队在推广使用的原型设计软件同时,此软件也在产品经理圈子中广为流传之所以Axure RP得到了夶家的认同和推广,正是因为其简便的操作和使用符合了产品经理、交互设计师们的需求。

在正式谈Axure RP之前我们先来看看做产品原型设計,现在大致有哪些工具可以使用而他们的利弊何在。
纸笔:简单易得上手难度为零。有力于瞬间创意的产生与记录有力于对文档即时的讨论与修改。但是保真度不高难以表述页面流程,更难以表述交互信息与程序需求细节
Word上手难度普通。可以画wireframe能够画页面鋶程,能够使用批注与文字说明但是对交互表达不好,也不利于演示
PPT上手难度普通。易于画框架图易于做批注,也可以表达交互鋶程也擅长演示。但是不利于大篇幅的文档表达
Visio功能相对比较复杂。善于画流程图框架图。不利于批注与大篇幅的文字说明同樣不利于交互的表达与演示。
Photshop/fireworks操作难度相对较大易于画框架图、流程图。不利于表达交互设计不擅长文字说明与批注。
Dreamweave操作难度夶需要基础的html知识。易于画框架图、流程图、表达交互设计不擅长文字说明与批注。

以上这些工具都是产品经理经常会使用到的,泹是从根本上来说这些工具都不是做prototype design的专门利器,需要根据产品开发不同的目的不同的开发阶段,选择不同的工具搭配使用才能达箌表达、沟通的目的。

比如使用纸笔更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用通过图形快速表达自己的产品思路,及时的 画出来是再好不过的方法。而word则适合在用文字详细表达产品对产品进行细节说明时使用,圖片结合文字的排版是word最擅长的工作。而ppt自 然是演示时更好visio则可以适用于各种流程图、关系图的表达,更可通过画use case 获取用户需求PS/FW是圖片处理的工具,DW则是所见即所得的网页开发软件这些是设计师的看家本领,对于普通的产品经理来说需要耗费太多的精力去 掌握。

其实每件工具每个软件,在创造它的初期软件设计师们都给它赋予了性格、气质。因为每个工具的产生都是为了满足人类的某一方媔需求。比如锄头是锄土的起子是起螺丝的,电熨斗是烫衣服的但是不同的工具都有自己的工作领域,在其他领域它并不擅长而以仩的软件在创造的初期,并非为了帮助产品经理、ue完成产品原型设计因此他们都不能在prototype design 这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下为满足prototype design创建的需求,应运而生

Axure RP 能帮助网站需求设计者,快捷而简便的创建 基于目录组织的原型文档、功能说明、交互界媔以及带注释的wireframe网页并可自动生成用于演示的网页文件和word文档,以提供演示与开发

· 快速创建带注释的wireframe文件,并可根据所设置的时间周期软件自动保存文档,确保文件安全

· 根据设计稿,一键生成一致而专业的word版本的原型设计文档

说到这里相信很多人已经激起了興趣,但是在开始学习之前我认为我们还是有必要先了解一下软件短短的历史,创造这一软件的公司—Axure Software Solutions, 以寻求获得帮助。

1、链接指向箌图片确定热区(即页面锚点)

这个功能其实就是同一页面的跳转,跳转对象就是页面中的锚点实现的效果就是通过点击链接,跳转到本頁面的特定锚点区域对页面长度较长的页面表现,有重要的作用

就是设置面板出现的位置,移动面板到确定位置通过添加交互命令後,选择Move panel设置移动的位置。

聚焦与失焦事件是增加了两种触发事件发生的动作。

聚焦就是鼠标或者用户的操作指向页面中的特定对潒;失焦就是用户失去对页面中特定物体的控制。我们可以通过设置聚焦和失焦从而设置相应的交互效果。

比如我们做一个关键词搜索关键词输入框就是我们的对象,一般我们会期望当用户进入页面没有进行操作时,默认输入框中显示文字“请输入关键字....”;当用户噭活关键词输入框时就是聚焦输入框,这时输入框中文字消失用户可以开始输入关键字;如果用户不做操作,选择页面其他对象这個时候就是用户对关键词搜索框失焦,我们希望重新显示“请输入关键字....

对于画流程图,是我们经常会遇到的问题我们和程序工程師沟通,用再多的口水也无法挑明的事情,画一张简明的流程图就能很直白的说明关键问题。

有时候你可能会懊恼因为程序员的思維犹如计算机,你告诉他为什么没有用你就告诉他该怎么做,是左是右是01就好了。这个时候产品经理需要的是理性思维,清晰的思路如果你不清晰,工程师大多数会跟着你的思路乱做一团所以多画几个流程,多根据页面需求画清晰的流程就能解决实际的问题。

话不多说本章主要介绍flow里面的工具,因为图形其实很好介绍简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用方式还和以前一样,编号对号入座,咱们来一个萝卜一个坑:


   作用:一般用作要执行的处理(process),在程序流程图中做执行框
   在axure中如果昰画页面框架图,那么也可以指代一个页面有时候我会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩區别然后做说明就好了。
   作用:表示程序的开始或者结束在程序流程图中用作为起始框或者结束框。
   作用:斜角矩形我几乎不使用鈳以视情况自行定义。或者在其他的流程图中有特殊含义,暂不知晓也希望有识之士指点一二。
   作用:表达为一个文件可以是生成嘚文件,或者是调用的文件如何定义,需要自己根据实际情况做解释
   作用:注释或者说明,也可以做条件叙述一般流程到一个位置,做一段执行说明或者特殊行为时,我会用到它
   作用:半圆在使用中常作为流程页面跳转、流程跳转的标记
   作用:控制传递一般囷线条结合使用,画数据传递
   作用:如果画小圆,一般是用来表示按顺序数据的流程
   如果是画椭圆形,很多人用作流程的结束如果昰在use case用例图中,椭圆就是一个用例了
   作用:表示准备之意,大多数人用作流程的起始类似起始框。
   作用:一般表示数据或确定的数據处理。或者表示资料输入(Input
   作用:来自于use case 用例,模拟流程中执行操作的角色是谁需要注意的时,角色并非一定是人有时候是机器自动执行,有时候也可是是模拟一个系统管理
   作用:就是指保存我们网站数据的数据库。
   作用:表示一张图片或者置入一个已经画恏的图片、流程或者一个环境。

基本上axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中,模糊了流程图嘚区别而尽量贴近交互设计时的工作内容。

流程图无疑只是一个表达的工具我们在使用的时候应该根据自己的实际情况使用,而不应該死钻牛角尖非要知道某个图形的通用标准。理解和沟通是第一位的而对于某些具有标准性含义的图形,大家人所共知则我们应该遵循共同的准则,这样就能达到表达的目的

其 实axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供如不规则图形、側面双矩形等,大家可以自己google一下或者baidu 一下很容易就知道大多数情况下,还是自己自定义一下自己的符号标准就跟prd文档加上名词解释┅样,才是解决方法

Axure rpinteraction交互与annotations注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明

交互功能设置的是用户通過不同方式触发页面中元素或者载入页面时,发生的交互动作而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整個页面的说明和交互与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开但是他们的实际功能是一致的,可以一起来说

针对页面和针对页面元素的功能,分别默认处于软件界面的右侧和底侧如下面两张图片所示:


对于交互与注释说明,有必要分開讲述这一节主要讲述annotations,即注释说明

首先,我定义一下对交互与注释说明的解释


Interaction交互功能,用以设置页面中的交互事件如页面跳转、面版跳转。从而实现框架图中不同对象的实际功能在生成html框架页面时,产生相应的对象功能用以演示操作。

Annotations注释说明用以對页面或页面中的特定对象进行说明注释。可以根据实际情况分类编写说明内容比如优先级、功能类型、交互效果、说明等。让程序在開发的时清楚了解该对象或该页面的程序实现详情与细节

那么,现在重点来说注释


你也许看到e文会头大,你也许第一次看到annotations面版中specificationstatusbenefiteffect等一连串的 英文单词脑袋发晕那么我告诉你,你完全不用在意这些单词和选项的意义因为也许它们根本就不适合你,而你可以自萣义一套自己的说明选项

我之所以说你不必去理解,出于两个理由一是因为这些定义,是axure根据一些欧美公司文档中常见的字段归纳出來的他不适合我们的国情和我们自己公司的 实际情况,二则是一个文档中该向你的程序员、设计师表达什么并没有一个完全的框架。伱尽可以根据你要说明的事情以及你们往常的沟通方式来定义。那么现 在看看我们怎么来定义吧。

如图所示我们看到了两个区域:


區域一:Fields:这是管理系统所有的说明字段的,这里定义了针对对象你要说明它的哪些属性这些属性,用什么类型type的文字进行表述

先在湔面的下拉选择框中定义该字段的type类型,有四种类型:


Text文本文字说明字段中用大段的文字进行说明。
Number数字说明字段中只包含数字說明。
Date日期说明字段只有日期
Selectlist选择列表。通过设置特定的选择条件以供选择。

然后在后面的填空框中输入字段的名称比如我想設置一个对页面中对象的开发优先级的说明字段,那么我就可以给这个字段命名为优先级然后点击add按钮,你所设置的说明字段就被添加到下面的字段列表了


管理字段,首选必须选中你要管理的字段

然后可以通过选择右侧的功能按钮,对字段进行管理:


Rename对字段重命名
Move up将字段排列顺序上移一格。
Edit selectlist编辑选择列表中的项目该功能只有当你所选择的说明字段的type类型是selectlist时,你才能选择选择后会弹絀编辑窗口,你可以根据自己的需求填写不同的选择项,Axure定义每一行为一个选择项。

ok之后你就完成了对所选项的管理。

区域二Custom views:這里是定义了我们自定义文件的版本我们可以选择几个常用的说明字段,归纳起来生成一个自定义版本


A)新增用户自定义说明

新增说奣很简单,只要在输入框中输入一个名称点选add,就会弹出一个选择框


你可以通过add field下拉列表选择你的自定义说明中要包含的说明字段项目然后点add添加到你的自定义说明中。


当你都选择完成后点done,就创建了一个你自己的自定义说明
管理自定说明,和管理说明字段一样茬管理前,你必须选中你要管理的自定义说明
Rename对字段重命名。
Edit重新定义此自定义说明中所包含的fields说明字段弹出选择框,供你重新選择
Remove删除此自定义说明。

最后当你即完成了对字段的处理,又完成了自定义说明的生成后点done,你就定义完成了你自己的注释与说奣这个时候,你再选择annotations & interactions你将会看到你自己的自定义说明:


选择后,右侧的注释与说明的字段就都是你自己的了:


2、自定义注释与说明嘚现实意义


那么这些自定义说明到底对于我们有什么现实的意义呢有的,下面我来说明一下

生成演示文档:我们利用axure完成文档的编写後,需要给程序演示那么我们怎么演示呢?


请按下f5会弹出提示框,按照默认设置确定后就会生成html演示文件。你就可以拿这些html文件给程序员、设计师们演示你的文件了。
而我们自定义的这些说明在编写好的时候会出现在如图中的位置:

就是说明面版的激活按钮,點击弹出你的说明文字这样,用户就可以在不明白的时候在页面中调出说明文字一一查看了。

生成word文档:我们也可以生成word的文档的说奣文件这样的文件甚至可以当作PRD文档使用,而说明则会根据label的标签以及编号对应生成table说明文档。

综上所述运用好了annotations,就可以解决好prd攵档中最重要的工作即功能说明。至于设置怎样的注释完全就靠你自己来掌控了。

Ps:页面notes更加简单因为针对页面的说明只能有一段攵本,不存在特殊说明字段的编辑

Axure RP Pro5终于发布了,直观操作上最明显的变化之一就是在命令行多了“share.分享,其次所有窗口可以以浮动形式编辑了为了与时俱进,以后的教程将以Axure RP Pro5为基础来继续写

话说上次功能说到注释annotations,这次就来说它的亲兄弟交互interactions之所以说他们昰亲兄弟,除了因为他们长在同一个面版上更因为他们需要结合起来使用,这样才能清楚的表明功能详情

打个不恰当的比方,如果要說明的功能对象是人那么注释annotations标注的是这个人的基本属性,比如性别、年龄、学历……”交互 interactions则是说明人根据外部条件,做出的回應比如你父母做好饭菜给你,你就吃饭;给你10块钱一个瓶子,嘱托你买酱油你就会一溜烟 小跑去打酱油(这个比喻有点过时,现在嘟不这么买了)当然,我们说的是绝对条件下的绝对反应这就是机器语言。

我们以一条简单的文字链接为例:我们来对它添加茭互行为。

我把交互分为三个部分的:交互触发、交互条件、交互行为这样的区分,其实是参考程序编程的结构而做的这就把程序构荿人性化、语义化了。

这章我着重讲解交互触发与交互行为中的快速链接详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释

交互触发:是发生交互的导火索,说明引起交互的触发动作是什么


    以此文字链为例,交互的触发原因是点击文字链

交互条件:是达成我们目标行为的前提条件如果目标行为只有一个,对触发没有任何条件限制交互条件则可以被忽畧。


    再以此文字链接为例如果对查看文章列表没有任何限制,则不设置交互条件用户点击文字链,直接发生交互行为如果对查看文嶂列表有权限限制,只允许作者查看则触发交互行为的条件就是以文章作者hawking的身份登录
    PS有条件本身就必然会有条件的反面。戓者有多个条件就会有多个条件之外的例外情况。在写文档的时候必须考虑进去,说明清楚这一点最容易疏漏,而造成程序员在开發的时候想当然或者再回来问你。针对这个例子条件的反面就是登录者不是hawking,或没有登录

交互行为:是机器依据触发事件与条件,做出的反应动作或行动

触发主要有两种,一种是页面载入触发一种是鼠标行为触发。


Axure暂时仅支持一种页面触发条件就是OnPageLoad当页面載入时。

如图所示针对我们设置的case事件,axure提供了三个功能


Edit case编辑所选事件。(功能前提选择你索要编辑的事件,比如鼠标选择case 1
Delete case删除所选事件。(功能前提选择你索要编辑的事件,比如鼠标选择case 1

2、鼠标行为触发是当用户使用鼠标操作界面时,引发交互


Axure支歭的鼠标触发行为根据你所选择的对象不同而不同,选择图形、文字、链接会出现三种触发行为:


Onclick当鼠标点击目标时触发交互行为。
OnMouseEnter当鼠标移入目标热区时触发交互行为。
OnMouseOut当鼠标从目标热区移出时触发交互行为。

如果选择的是输入框、多选框等则会出现对应功能的触发行为:

特别的选择下拉框、列表框会出现:


Onchange当所选项被更改时,触发交互行为

而选择我们所编辑的对象后,如果对象之前沒有编辑过交互事件则有两个选项

如果曾经编辑过交互事件,则有三个功能和页面载入触发是一样的,这里也就不再累述

二、交互荇为快速链接


选择好交互触发后,在对交互没有特定条件设置的前提下我们可以直接设置此次触发引起的交互行为。由于链接跳转是網页中最常用的交互行为因此axure特意提供了一个快速链接的功能。

如图所示此面版中有四条可选命令:


你可以通过在hyperlink框中输入链接地址,完成链接导向
注意:链接最好是绝对链接地址,不然就容易出错

本章要介绍的是交互条件。交互条件是axure的学习中的难点也是axure高段進阶功能。其实我们不设置条件直接靠文字说明,也可以完成我们的思想传达如果你设计的原型文档,能模拟真实的交互环境当然僦非常优秀了。

但是我要强调一点观点,传达思想是首要的工作传达思想也是有成本的,如果为了传达思想要耗费更多无意义的劳动损耗更多的时间,增加更多的沟通难度不要也罢!我个人觉得,我们在做原型设计的时候有没有必要把页面模拟到和真实情况一模┅样,这个还值得探讨

言归正传,开始来说设置交互条件

一、进入 交互条件设置

通过这个面板,我们要表达我们伟大的交互行为面板告诉了我们三步策略:

描述后的input输入框,可以编写事件的名称或者事件的描述文字,以供生成html页面展示时标注此事件也供生成需求攵档的时候辨识此功能功能。

Add condition if necessary)增加条件(如果需要的话)这就是这章所要说的重点内容,为我们要创建的交互事件设置前提条件。我想axure在这里添加这么一 句话,也许同样是在提醒我们我们把交互做到如此之细,是否真的必要思考清楚了目的,考量准确了我们需要投入的精力再开始做这一步。我想会清晰很多

第二步与第三步,就是我下一章要说的交互行为或者叫交互动作也可以。第二步昰选择我们要进行的动作第三步则是为我们的动作设置具体的参数。这些我们稍后再看还是先来了解下,我们可以怎么设置条件

二、条件设置的功能与细节

条件设置窗口也分三个部分:

A、满足条件类型选择与条件清理

另外,如果我们对我们设置的众多条件都不满意想全部删除重新设置,clear all 就是为了满足我们这一需要的按钮

a)增加条件与删除条件。
初始默认我们只有一个条件通过点击条件末尾的“-”“+”按钮,我们可以删除、添加新的条件

注意:在设置条件前,需要给条件所涉及的widgets对象设置label名称因为条件设置,需要用label定位widgets

条件设置分五个部分,但是其实只需要将其看做三个部分为什么这么说呢?这是我的深刻教训我在写这篇攻略的时候走了一段比较长的彎路,最后才发现自己的错误所以也非常希望朋友们不走我一样的弯路。下面且听我道来

我最开始把条件设置看做5个部分,1是作为条件类型的设置则2是设置要比较的对象,3是比较方式然后根据你选择的对象,后面45会分别出现不 同的可比较条件或设置条件这样理解是没有错的,但是就绕了一个非常大的弯路而且表述起来要逐条罗列,非常繁琐所以一开始,我根据1可能出现的六种类 型画了6个夶表格,企图把所有的情况囊括做了很多无用功。

现在我们尝试把它理解为三个部分那么怎么理解呢?
细心的人可能发现了3是设置嘚比较方式,可以是等于也可以是不等于,或者是大于小于而左右两边是被比较的两个对象。

对了这就是关键,12设置的是条件的仳较方我们把它看做a45是条件的被比较方我们把它看做b,而3就是比较方式而我们要做的工作就是设置ab的关系。

但是设置比较关系是有原则的就是数值可以和数值比较,区域选择状态可以和区域选择状态比较我们不可能设置让一个变量,等于一个区域被选择的狀态所以根据a的不同,b的可选项也会相应的改变但是他们的内容基本上是一致的。

多项选择(checkbox)、单项选择(radio button)注意:这里会显示頁面上的多项选择、单项选择的label名称,所以做页面工作的时候要保持有效命名label的好习惯,以下不再累述 

此项目只能与选择状态比较,戓者value of variable变量值比较不能与其他类型的对象比较。这是最特殊的一项以下不再做强调。 

如果你设置了其他变量这里会提供选择 

这里会提供文本输入框input、文本框text供你选择 

当a比较对象是list时,这里是选择状态当a的比较对象是数值时,这个数值由用户自定义设置 

此选项根据条件设置情况只出现在b。 

以上列出了可操作的对象情况大家可以自行研究一下,写得有点不太形象有机会我再专门做实例来说明。其实佷简单朋友们可以自己做一两个例子,把 所有的wigets拖到页面里并根据各自的情况命名label,然后一条条的选择操作一下就清楚了,我这里主要提的是一个理解的方法条件含义的说 明。

以上内容大家可以对照着参考学习。

C、自动生成对条件的文字描述

条件的第三部份基本仩不需要我们手动设置在进行第二步条件设置的时候,这里会自动生成描述性的英文即便是可以选择的部分,也会提示链接让我们點击链接,手动选择所以这里的重点意义,在于生成prd文档的时候会生成条件的说明文字。

三、综合谈一谈设置合理的条件

好了,交互条件设置基本上说完了可能会有一些不清楚,因为这里的条件设置会涉及到部分的程序的内容而且条件设置有点绕,有点晕但是夶家没有必要那么着急,一方面因为如果你针对我的文字多对应操作一下就很容易了解,另一方面因为我现在要说的还是条件设置不偅要。

为什么条件设置不重要我要提出我的几点理由:

1、设置过于复杂的条件,做成的展示文件可能根本没有用途。
程序员可能根本鈈看即便看也容易遗漏细节,仍然需要你与他沟通

2、你需要花费过多的时间。
这无形中提高了你的开发成本对于你的项目是不利的。

3、花哨的展示脱离了产品策划的精髓。
   我相信我们可以想象到的交互效果,要用现在的axure做出来肯定是不可能完全达到的,这也才昰我们创造力的价值体现而那些可以达到的效果,也没有 必要我们费劲心机的让它在策划阶段就实现作为交互设计师,更多应该关注功能是否满足用户需求提高用户使用效率;作为产品经理应该更多的关注产品的生命 线、竞争力。

由上所以我一再强调,除非必要嫃的不用研究得太深,表现得太细致这只是个工具。可能你不太同意那也没关系,我们可以交流提出你的思想,让我们碰出火花!

終于来到交互行为了交互行为的学习会稍微简单一些,因为基本上都是逐一的选择实现而展示内容也是我们在浏览网页的时候见过无數次的。不过在讲解这个之前我想我们可以回顾一下交互这一小节的所说的三部分:交互触发、交互条件、交互行为。然后我们可以进荇一些胡乱的联想(我喜欢干这些无厘头的事情….我觉得对开拓思路有益。)

我一开始觉得这有点像初中学的神经反射当触发了网页之后,我们经过数据传递与处理根据条件内容,进行有效地反应

后来我又想到了信息的处理,交互触发是设置我们要传递的信息内容;交互条件是设置我们对信息的处理方式;交互行为是反馈我们的信息处理结果

再生活化一点,就想到了一个简单的场景一个男生强吻了怹喜欢的女生,这是我们所说的交互触发;女生衡量了一下发现这个男生邋遢、猥琐,这是交互条件;女生愤然给了男生一个巴掌这僦是最后的交互行为了。

或者我想我们也可以把它理解成为一个因果条件关系,因为….满足….所以….哈哈~也许还有更多的联想,不知噵你是怎么理解的如果有兴趣的话,可以写下来跟在我的文章后面,肯定很有意思期待朋友们的参与。

完成联想那么我们继续来看,在设置好触发内容与判断条件后我们可以跟用户展示些什么,我想大家肯定都迫不及待了!但是我不得不先泼一点冷水因为你可能会经受挫折!

我们可以干什么呢?交互设计师和产品经理想干很多事情你可以想象,但是很多情况下无可奈何因为你要干的事情,需要受到技术条件、浏览器、用户端等等条件的限制而现在我们要用axure rp表达出来,我们又受到了axure的限制这就使得我们往往“可想而不可忣”。

是不是有点郁闷呢这是很多产品经理、交互设计师喜欢问的问题“那个效果怎么做”、“这个效果怎么做”、“这个效果我都做鈈出来怎么办”。我希望你不是个制作者你应该是个设计者!你需要明确一条,axure rp 只是个工具因此使用或不使用它,或使用它多少的功能应该由你控制,而不能让它控制了你的思维让自己成为工具的奴隶。

这就像很多学习绘画而成为制作者的人出现的问题是一样的過分的追求ps3d maxai等工具的掌握,让自己成了工具的奴隶却忘记了最有价值的是自己的头脑,是闪光的idea这是我毕业设计时学到的一课,峩觉得我终生受益所以我也希望跟大家有个共鸣。

但是我这么说并不是说学习axure能干什么不重要,恰恰相反!扎实而基础的掌握axure所有的功能才能让你在做表达的时候游刃有余。你才能知道什么时候,需要做什么工作;什么情况下需要做怎样的表述。那么我们还是紮实的一一学习,我们到底可以用axure 表达什么交互行为吧

现在我们就继续上一章的内容 说一说

可以说,step2是我们选择要进行的动作而step3是我們要对动作设置参数,通过点击选择或者输入文字数据,控制动作具体的内容下面我们一个一个动作来分析说明:

2.1点击link弹出link properties链接属性對话框,主体内容与动作1的参数一致由于是在新窗口中打开链接,因此该链接属性中没有重新载入当前页与返回浏览前一页的设置。

哆项选择中的toolbars工具栏、menubar菜单栏、scrollbars滚动条、directories目录条、location bar地址栏、resizeable窗口大小可拖动改变、status状态栏、center screen位于中心等多选框用于设置在打开的窗口中這些功能是否可用。选择则表示可以使用不选择则表示不可使用。

右侧的数值用于控制所打开窗口的width高度、height宽度以及距离屏幕左上角嘚left左边距、top上边距,数值按照像素进行度量

注意,高宽只包括内容区不包括整个windows。而边距也是以所打开窗口的左上角与桌面左上角嘚距离作为参考依据。

Step1select frames选择你要操作的框架如果页面中有多个框架,你也可以多选

step1:select panels选择面板。通过点击选择你要操作的页面你想偠控制的面板。

Step2edit actions description编辑动作描述也就是编辑你的面板将做什么样的状态变化,这里通过点击状态界面的名称“1”    弹出select panel state选择面板状态窗ロ,列表出你多选面板所包含的所有状态名称你可以选择一个作为想要获取的目标状态。

参数:通过点击panel进入selects panels面板选择窗口通过鼠标選择你要显示的面板。

参数:通过点击panel进入selects panels面板选择窗口通过鼠标选择你要隐藏的面板。面板同动作7

参数:通过点击panel进入selects panels面板选择窗ロ,通过鼠标选择你要控制的面板面板同动作7

动作:move panel(s)移动面板将你想控制的面板,移动到某一坐标位置

step1select panels选择面板。通过点击选擇你要操作的页面你想要移动的面板。

选择to是将工具的位置移动到(x,y)坐标,原坐标以窗口左上角作为起始坐标;

选择by是在工具的所处的坐标基础上,做(x,y)的累计移动即以widget工具当前所处的坐标作为起始坐标进行移动。

此窗口的值设置与Hawkings Axure RP Pro 5原创教程:(九)交互interactions(Φ)中条件设置窗口的值基本一致大家可以参考文章九的表格。唯一不同的是中间条件不可选择,只能是equal to也就是只能设置为等值。

洏此文档中有一个不同的选项情况是:

text on widget工具上的文字通过下拉选择你所要控制的widgets上的文字变化。不过这似乎是我上篇文章漏记了的如果是漏了的话,那就补回来吧

参数:点击link进入link properties链接属性设置窗口,属性设置内容和动作2的链接属性一致

首先,你必须确保你所控制的頁面中已经包含了widgetimage map region”这就类似于html页面中的map area同时你必须保证给它取了一个名字,并在label中进行了设置

options菜单中的三个选项,是控制你滚動的具体方式:

动作:enable widget(s)使工具可用此功能就是使得目标工具的功能可用。

动作:disable widget(s)使工具不可用此功能是是的目标工具的功能不可用。

动莋:other其他通过文字表述其他你想实现的操作。

好了交互部分终于写完了,不知道对朋友们是否有帮助如果有什么意见和感想请尽管留言吧,我很期待与大家的交流

要问如何引入Axure RP,其实没有一个准确的答案为什么这么说呢?因为没有哪一条途径是适合所有公司的鈈同的公司情况不同,人员组织不同、产品研发流程不同、交付物的表现形式也不同每个公司,都会在自己的发展壮大的不同阶段调整自己的企业文化,组织结构甚至战略目标。因此要问如何为自己公司引入AxureRP,首先还是应该从自身出发才能为自己找到最合适的途徑。

那么我想结合我的工作经验,用五WH的决策分析工具来为我们今天的议题,指引一条路当我们要为我们的企业引入axureRP时,我想峩们需要首先问自己以下几个问题:

What,我们引入的到底是什么

Who,我们企业情况如何(我的企业是谁)

When,我们该何时引入

What,我们引入嘚到底是什么

也许你觉得,这个问题很好回答是呀,不是很明显么我们引入的是这款叫做AxureRP的软件,我们就是要丢掉以前的原型设计方式以后都用AxureRP来做我们的产品设计。但是仅仅用AxureRP加入制作流程就是我们的初衷么?

如果一个公司在引入AxureRP时领导层也没有重视这件事凊,既没有说要大家尝试使用也没有说不做考虑。这时一旦有的人在做产品设计的时候,自己私下尝试使用跟设计师、程序员沟通嘚时候生拉硬套,试图强行加入新的开发流程一方面会出现由于刚刚接触这个软件,用起来并不是那么得心应手产品设计花费的时间周期加长,另一方面会出现各部门的执行人员,都不能适应这一新的变化也不愿意同时面对两种不同类型的开发文档,因此导致沟通鈈利影响工作的进度和质量。

很明显AxureRP只是一个工具,就跟我们画画可以用毛笔、钢笔、铅笔、水彩笔、碳精条等等不同的工具一样峩们要完成产品原型设计也可以用其他的软件工具,所以如果我们仅仅是为了引进一个新的软件那么很可能让我们的工作陷入另一种难堪的境地,这不是我们真正要引入的

那么我们到底要引入的是什么?无疑我们公司曾经出现的这种问题,并不是我们期望的局面我們关注AxureRP的初衷是它在制作产品原型时所体现的便捷与速度,在进行产品展示时所体现的简单与低成本如果AxureRP给我们带来更多的麻烦与问题,那么那岂不是毫无意义我们是要引入AxureRP,但是我们是期望引入它之后我们产品设计更合理,流程更简单沟通更方便,降低成本提高效率。而这些不是一个工具可以解决的是一个高效的、优秀的、科学的产品研发流程,才能解决的问题

所以,简单点说我们引入嘚,是以AxureRP为产品设计工具高效而科学的产品研发流程。

Who我们企业情况如何?

一个公司的发展跟一个人的成长是一样的。面对千差万別的事情不同的人会有不同的处理方法;而人处于不同的年龄阶段,对于同一问题的处理方式也会大相径庭。而无一例外的是人们處理事情的方法无外乎来自两种途径,一是别人的经验包括老师的教导,书本学到的知识一些大师整理与归纳的定理和方法论等等,這些都是别人的经验第二就是自己的经验,这是我们在遇到具体的问题时通过思考与处理后,自己从成败中总结的理论

公司也是如此,自己的经验就是在项目研发中累积而成,比如我们常说麦肯方法麦肯的理论。这是麦肯公司这么多年的广告客户服务中不断总結累积的方法论,这就是麦肯的经验我们可以拿来借鉴,但是是否符合我们自己的公司那又另说了。我们不可能随便拿微软这样的软件巨擘的研发流程去套一个只有56人的小项目组。所以想要建立高效的产品研发流程,我们就必须认清自己公司的真实状况以及所處的阶段,也就是明白我们自己是谁

要引入axureRP,我们必须认清公司的哪些情况呢我想,可以从以下几个方向着手

一个公司的规模大小,决定了这个公司解决问题的方式以及工作复杂程度。

小公司人员较少一个人身兼多个职位,承担多种任务所设的岗位相对较少,鋶程也比较简单因此船小好调头。

大公司流程复杂部门繁多,各个部门之间的关系协调是最大的成本损耗因此轻易是不能改变自己嘚工作流程的。

不同的公司会有不同的部门结构,也会组织不同的部门关系人员关系。有的公司产品经理是向技术总监汇报;有的公司则直接向运营总监汇报;还有的公司则会专门设置产品总监这一职位,与其他部门做平行处理

这些不同的人员结构与关系,从表面仩看带来的就是不同的汇报流程,而实质上则是公司权责利益的表现。也说明了公司是由技术主导还是由市场主导电子商务网站,往往是市场主导的公司如麦考林、蓝谬,除非规模发展到amazon这样而百度、google则是很明显的技术主导的公司。很显然因为主导力不同,人員结构与关系的不同则影响到流程改进的方式和步骤。也就影响到引进新的或者优化产品研发流程的步骤与方式。

要优化流程必须叻解现在的流程。因地制宜的解决问题由于不同的公司情况不同,因此这一步必须在了解公司人员结构与关系之后我们明确了不同部門不同人员的职责与职能,自然就能很清楚的梳理产品研发的不同阶段不同相关人员具体负责什么工作。这样也就能清楚的知道,从哪里下手引入axureRP了。

第三问是我们为什么要引入AxureRP没有目的性的事情,不会取得有价值的结果也不会有成就感,当然也就很难了解我们偠做什么因此,树立目标是很重要的

引入AxureRP的原因是多种多样的,

l    建立高效的需求确认流程外部,对客户;内部对需求部门。

这里峩想重点说明一下建立高效的需求确认流程这一点

初步洽谈客户,一般是公司AE以及销售人员的工作他们会拿销售材料去与客户洽谈。泹是一般的图片与文档并不是特别直观很多电子商务平台表达自己平台功能强大的方法是罗列很多功能,ERPCRM等等有用的没用的都拿出来功能表动不动就几十上百,看得人晕头转向但是如果用AxureRP,将平台功能做成html进行形象的展示,就会显得很直观但是同时耗费的人力粅力也很小。而且如果平台功能不断完善的同样也可以在RP的产品文件上进行功能完善和补充,甚至也可以把不相关的功能板块去掉

洽談签订合同后,我们就开始与客户接洽获取客户需求,设计产品的功能与UI界面正式走入执行层面。但是如果用传统的方式与华泰电子商务保险公司确定需求时间周期将会非常之长。为什么会这样呢

传统的需求确认,我们会首先根据用户的需求设计产品功能然后将產品功能做成静态产品线框图交给设计师,然后由设计师做成设计图片交给客户确认其中涉及到相关的人员就达3个以上。因此一旦客户提出修改意见每次需求修改都要走一遍所有流程。如果一旦不走流程只是领会意思,难免不会偏离方向;也会有客户日后变更需求無法与之前所确认需求进行核准的风险。如果遇到比较复杂的产品一来二去时间就无法预估了。

而用axureRP则减轻了很多工作。首先产品設计之初,就不需要设计师参与因为RP导出的HTML文件,可以让整个流程可视化因此我们不必将视觉部分跟信息架构和功能部分一起让客户確定,而且我们交付的还可以是一个可操作的模拟平台,用户能很直观的了解操作功能

这样,我们明确了目标就将我们之前的需求確认流程进行了简单的拆分。初期我们商议确定功能后首先拟定信息架构,让客户确认然后安排UE设计wireframe文档,并生成可视化的html页面提供客户操作,并二次确认最后再安排设计师设计页面,进行视觉部分的确认

其实,新流程的差异就在于axureRP的快速建立规格文档,并产絀html可视化操作的界面实现了交互功能单独确认,大大降低了我们的沟通成本与风险

第四问是将AxureRP用在什么地方,其实也就是用在什么环節上AxureRP可以做产品说明文档,也就是PRD文档;也可以做交互文件也就是HTML交互视觉文件,可以精确到鼠标点击、移过、激活等等页面会做出什么反应;也可以简单的出一个视觉图片仅仅交代布局结构。不同层次的使用可以有不同的人来做,也会涉及到沟通的模式会有不同因此我们只要找到不同的环节,需要做何种应用而AxureRP是否能够有效,就能解决AxureRP用在什么地方比如:

When,我们该何时引入

(我们这里只考慮有足够规模有完整研发流程,分工细致的公司)

何时引入AxureRP是对公司成本的一个评估工作后进行的决策。也同样是对之前问题回答之後我们再考虑的解决方案。

如果现有的产品研发方式已经很优秀且工作流程很合理,同时公司规模太大涉及部门太多,我们为何还偠导入AxureRP呢所以在没有任何问题的情况下,我们应该有魄力的否决这个方案放弃引入AxureRP

其实引入axureRP的时间对于公司是一个总体概念,自嘫是从意识到现有的产品研发方式有问题而AxureRP能对其进行优化的那一刻,就会开始引入的行动但是对于大型公司,这种改变是有风险的所以只有对于具体的项目,或者产品的不同阶段才会有具体的时间。因此我们从公司项目的具体情况与处于的具体阶段考虑引入的时間

135类项目,由于关系到项目成败而且非常紧急,建议不要考虑尝试对于246类项目,虽然具备一定的风险但是可以根据风險情况,以及项目时间情况做有效的尝试;7类项目,由于成本很大但是风险小,时间周期长可调整的机会多,因此可以慢慢渗透視情况调整;而8类项目,则是做尝试的最佳项目因此不妨马上开始。

明确了所有问题后我们就该问如何执行了。基本上在一个成形嘚项目组,或者在一个系统组织的公司内执行的方式步骤,都很相似:

每个公司应该制定统一的规范模板明确哪一步流程,文档制作甴谁来完成必须达到哪一个标准。(三类标准简单的图标、带交互的html演示、wordprd文档,某些公司可以用到csv

这一步相对简单组织相关囚员学习如何看懂RP产生的规格文档。

5、    各项目组建立统一的RP文档开始统一编撰产品规格文档,按照新的研发流程严格操作

附录:可以根据产品销售、演示需求,制定特定的UE角色专门执行设计初步的演示文件。

二、不同角色的人员如何使用AxureRP软件(Axure RP可以帮助哪些人)

首先,对于AxureRP软件的掌握可以分成三个层次。

而设计师、程序员主要是要能够读以上三类交付物并根据所提供的交付物来完成手头工作;洏需求提出部门的人员,不妨达到普通级别的使用就可以如果不能达到,也不需要做出硬性要求而销售、AE则更简单,只要知道如何拿這些文档去忽悠客户就好了能不能做,都无关紧要了

三、不执着于Axure RP不能实现的业务需求

设计师经常执迷于使用photoshop去完成一个高难度的效果。比如说不断的向自己提出挑战,强迫自己用photoshop去做金属效果去画白布上的冰块,去研究各种不同滤镜来做同一个物体形象因为过汾的执着,在工作中有如走火入魔一般往往忘记了项目的工期,而且一再的向负责人拖延就好像武侠小说里面痴迷的武痴一样,不达目的誓不罢休

其实这对钻研,对技术的提高是很有好处的但是需要学会适可而止,而且要学会目标导向业余的时间,个人研究是毫无对错可言的,这叫做钻研

但是在工作中,要明白AxureRP设计的产品原型,只是一种设计方式而已我们利用它的主要目的,是为了沟通是为了更好、更快的完成手中的工作。而不同的产品原型设计方式也有自己各自的优点,需要活学活用因此一个不能实现的效果,呮要不影响项目的进度不影响与执行人员的沟通,在工作中就不要过分的追求或者,直接用文字用语言表述,可以更好的提高效率降低成本,也不妨如此

而且,网络技术发展日新月异很多新的技术形式,表现形式出现并不见得AxureRP就一定可以表现,这是正常的事凊目前AxureRP软件也在不断的完善,但它的完善也是根据互联网的实际发展情况更新。它是一款产品是根据市场需求完善的产品,有不能實现的效果更是非常正常的事情。

最重点的是作为产品设计人员,交互设计师重要的工作之一,就是务实的创新如果你的创新,現在网络常见的交互方式中没有AxureRP无法实现不是很正常的事情么?所以万不可因为一个工具,而束缚了你奔放的思维想象的空间!

}

系统包括三个部分人员管理包括角色设置、权限分配;用户管理包括用户分析、用户详情、用户标签组管理;消息管理包括消息模板、消息发布等功能,可以作为一个簡易的人员管理和消息触达的系统为公司或者组织提供服务。

}

我要回帖

更多关于 axure制作原型实例 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信