互联网产品经理必备原型设计.docx
《互联网产品经理必备原型设计.docx》由会员分享，可在线阅读，更多相关《互联网产品经理必备原型设计.docx（36页珍藏版）》请在冰点文库上搜索。
互联网产品经理必备原型设计
互联网产品经理必备Axure快速原型设计
AxureRP可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio,Omnigraffle、Illustrator、Photoshop、Dreamweaver,VisualStudio、FireWorks、GUIStudio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计和版本控制管理。
设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。
AxureRP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。
国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。
为什么要进行原型设计
1、原型的作用和好处
―没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。
Prototype不只可确认需求，它更可赢得顾客的心。
‖——阿伦M.戴维斯和迪安A.莱芬韦尔《用需求管理快速交付高质量的软件》的作者（Rational软件公司/IBM）
根据调查报告显示，大约66%的软件开发不是失败，就是超预算、延期或交付缩水的功能。
软件失败或亏损的前三大原因为：
1、缺乏使用者的参与；2、需求或规格不完整；3、需求或规格变更；
传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。
现在，这些需求更是不适用于目前快速发展的环境。
而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。
将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。
快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-CenteredDesign）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。
目前全球有财富1000大的公司和重要机构在使用AxureRP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。
基础篇
在基础篇中，你将完整的学习到关于Axure的基本和高级功能。
第一章介绍
让你初步认识Axure。
第1节认识AxureRP
1、什么是Axure？
Axure的完整英文名是AxureRPPro。
Axure的英文发音是―Ack-sure‖，RP是―RapidPrototyping‖的缩写，意思为快速原型设计；Pro是―Professional‖的缩写，意思是专业版。
AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一个让负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站线框图、原型、规格说明书的专业快速原型设计工具。
Axure所针对的专家包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。
在Axure中设计线框图和原型会使你更加高效；可以让团队成员一起体验你的设计；向用户演示和交流以确认用户需求；自动产生规格说明书；让团队进行多人协同设计和对版本进行管理控制；等等。
总之，Axure会使你以往的工作方式发生变革：
?
?
行更加高效的设计；进?
?
验到动态的原型；体?
?
晰有效的交流想法；清
2、Axure工作环境介绍
Axure的可视化工作环境可以让你轻松快速的以鼠标拖曳的方式创建带有注释的线框图。
不用进行编程，就可以在线框图上定义简单链接和高级交互。
在线框图的基础上，可以自动生成HTML原型和Word格式的规格说明书。
以下是AxureRP工作环境的简要说明：
1.
主菜单和工具栏执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。
2.
站点地图面板对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。
3.
控件面板该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。
另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。
4.
模块面板模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。
5.
线框图工作区（或叫页面工作区）线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。
6.
页面注释和交互区添加和管理页面级的注释和交互。
7.
控件交互面板定义控件的交互，如：
链接、弹出、动态显示和隐藏等。
8.
控件注释面板对控件的功能进行注释说明。
第2节线框图及注释
现在我们来认识Axure中与设计线框图有关的各个区域和面板，说明如何设计线框图和为线框图添加注释。
1.
站点地图面板
在开始设计线框图（Wireframe）或流程图（Flow）之前，应该先考虑页面框架，决定信息内容与层次。
明确页面框架后，就可以利用站点地图面板来建立和管理所要设计的页面，添加、删除页面及对页面层次进行组织。
添加和删除页面在站点地图面板中，点击面板工具栏上的―AddChildPage‖按钮可以添加一个页面；点击面板工具栏上的―DeletePage‖按钮或在页面上点选右键菜单中的―DeletePage‖选项可以删除一个页面；在页面上点选右键菜单中的―RenamePage‖菜单项或鼠标缓慢双击页面可对页面进行重命名。
组织页面层次在站点地图面板中，用鼠标拖曳一个页面到另一个页面上或点击面板工具栏上的―MoveUp‖、―MoveDown‖、―Indent‖、―Outdent‖按钮，就可以组织页面的层次和顺序。
打开页面进行设计在站点地图面板中，用鼠标在页面上进行双击或点击面板工具栏上的―DesignPage‖按钮，打开该页面在线框图区域中进行线框图设计。
2、部件面板（控件面板）
控件是用于设计线框图的用户界面元素。
在控件面板中包含有常用的控件库，如按钮、图片、文本框等。
添加控件从控件面板中拖动一个控件到线框图区域中，就可以添加一个控件。
控件可以从一个线框图中被拷贝（Ctrl+C），然后粘贴（Ctrl+V）到另外一个线框图中。
操作控件添加控件后，可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小，还可以一次选择多个控件进行移动和改变大小。
另外，还可以组合、排序、对齐、平均间距（Distribute）和锁定控件。
以上这些操作可通过在控件上点击右键菜单进行，也可以通过选择菜单―View->Toolbars->Object‖调出的对象工具栏上的按钮进行。
编辑控件风格和属性有多种方法可以编辑控件的风格和属性：
?
?
鼠标双击：
鼠标双击某个控件，可以对控件的最常用的属性进行编辑。
例如，双击一个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。
?
?
工具栏：
点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。
?
?
右键菜单：
通过在控件上点击右键菜单，编辑控件的一些特定属性，不同的控件这些属性也各不相同。
查看和搜索控件控件面板工具栏中，点击―Wireframe‖会弹出一个下拉菜单，你可以查看所有控件库，或只看默认线框图或流程图控件库，或只看已经被加载的控件库。
另外，你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更新控件库。
点击―Search‖这个搜索按钮，输入想要查找的控件名称，会在面板内列出所有符合条件的控件。
创建自定义控件库默认的两套控件库（Wireframe和Flow）可能还不能满足你的要求，那么现在你可以开始创建你自己的控件库了。
在控件面板中点击下拉菜单的―Createlibrary‖选项，这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存，Axure会立刻启动另一个执行程序并打开这个刚建好的.rplib文件。
在新的Axure程序界面中，原本站点地图面板的位置会被控件库面板（WidgetLibraryPane）所取代。
你可以像页面一样对控件进行新增、删除、排序。
像创建页面一样，你可以利用现有的控件来绘制新创建的控件。
Axure启动时，如果已经把创建好的自定义控件库（.rplib文件）放在Windows文件夹的―我的文件>MyAxureRPLibraries‖目录中，则该控件库会被自动加载到控件面板中。
另外，你也可以手动选择你所指定的.rplib文件进行控件库加载。
使用自定义控件库新建立的自定义控件库的操作方式就如同其它的默认控件库一样，以拖放（Drag&Drop）的方式将控件放到画布上进行画面的绘制。
3.
控件注释
可以为控件添加注释，以说明控件的功能。
添加注释在线框图中选择控件，然后在控件注释面板中为各个注释项（如Specification、Status等）输入文本，即可为控件添加注释。
面板顶部的Label输入框是为控件添加一个标识符（即控件在线框图中的命名）。
自定义注释项通过主菜单‖Wireframe->CustomizeAnnotationFieldsandViews―或点击注释面板头部的―CustommizeFieldsandViews‖或，然后在弹出的自定义字段和视图（CustommizeFieldsandViews）对话框中可以添加、删除、修改、排序控件的注释项。
建立新注释视图在自定义字段和视图对话框中，你还可以建立新的注释视图。
你可在对话框底部的Addnewview后的输入框中输入新视图的名称，点击Add按钮即可添加新的注释视图。
你可以点击Edit按钮，为新的注释视图建立注释项：
然后在Axure主界面的注释面板中，可以看到新建立的注释视图和注释项。
脚注（Footnotes）脚注用于对于线框图和规格书中的控件进行编号标识。
在控件上添加注释或动作后，会在控件的右上角会显示一个带数字的黄色方块，称为脚注。
脚注号码可以增大和减小，可通过控件右键菜单的―Footnotes‖菜单项或工具栏上的和按钮进行修改。
4.
页面注释（PageNotes）
页面注释是对页面进行详细描述和说明。
添加页面注释在线框图区域下的页面注释面板中可以添加页面注释内容。
管理页面注释另外，可以自定义页面注释项，为不同的利益相关者和团队成员提供不同的页面描述说明，以满足不同需要。
比如可以新增―设计师‖、―老板‖等不同类别的页面注释项。
当输出规格文件时，可以指定哪些页面注释项要输出。
要添加页面注释项，点击主菜单―Wireframe->ManagePageNotes‖或点击页面注释面板上的―PageNotesDefault‖旁边的箭头按钮，然后选择―ManagePageNotes‖，将出现页面注释对话框，然后就可以添加、删除、重命名、排序页面注释项。
要在各个注释项间进行切换，可以点击―PageNotes–Default‖旁边的箭头按钮，然后选择想要的注释项进行页面注释。
第3节固定图片的边角
固定图片边角的功能，允许你放大缩小图片时，只对中间的某个区域进行缩放，保持图片的边角不变形。
对于图形控件界面，这种效果会使得图片放大缩小后，仍有效保持视觉上的合理性。
要调整图片的边角固定范围，
在图片以鼠标右键选择―EditImage->PreserveCorners‖。
进入调整边角固定范围的编辑模式之后，在控件的上方及左方个出现两个小箭头，调整这两个箭头位置（上下或左右），就可以决定这个图片控件被放大缩小时的边角固定范围。
指定好图片的边角固定范围后，即使将该窗口图片控件放大或缩小，我们还是可以看到一个很合理的窗口，边角的呈现不致于因图片本身放大缩小而失真。
第4节Axure5.5绘图功能的加强
以圈选模式选取控件（类似Visio/PowerPoint模式）AxureRP默认选取控件的模式是―交叉选区模式‖，也就是鼠标指标点选拖曳所到之处，只要被这个范围碰触到的控件，就会被选取。
现在增加了一个新的选取模式―全选模式‖，使得只有那些完全被鼠标指标所画出的矩形区域包围者才会被选取。
这种软件操作模式就跟操作Visio或PowerPoint一样。
想要改变选取模式，点选工具列的―SelectContainedMode‖按键（如图），或直接按CTRL-F9。
选取群组内的控件（DeepSelectioninGroups）当控件被群组（Group）起来以后，新版AxureRP5.5允许你针对群组中的单一控件进行编辑，增加批注，或设计交互表现，甚至可以移动或缩放群组中的控件尺寸与位置。
要选择群组中的控件是很简单的，只要以鼠标左键去点选你要的控件即可。
位置与尺寸设定面板（LocationandSizePane）位置与尺寸设定面板（LocationandSizePane）取代了先前版本的位置与尺寸对话窗（LocationandSizedialog）。
要开启这个窗格，以鼠标右键在控件上选择―View->LocationandSize‖即可。
当你在绘制画面时，这个面板现在可以维持出现在画面上不会消失，方便随时调整位置与尺寸大小的数值。
这个新功能可以针对单一控件或多个控件一次性的调整，当你想要对齐一群相同特性的控件时，这个功能让你更快设定控件等宽或等高，更容易对齐控件位置。
第5节基本交互设计
本节介绍了设计低保真原型所需要的简单的交互行为，解释了Axure中进行交互设计的基本方法。
1、控件的交互
控件交互面板用于定义线框图中控件的行为，包括定义简单的链接和复杂的RIA行为，所定义的控件交互可以在将来生成的HTML原型中进行操作。
在控件交互面板中可以定义的控件交互由事件（Events）、场景（Cases）和行为（Actions）组成：
?
?
用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；?
?
每个事件可以包含一个或多个场景，场景就是事件触发后出现的一种情况，如点击一个按钮后可以出现两种场景：
一种是进入页面1；另一种是进入页面2；?
?
每个场景中可执行多个行为，例如：
打开链接、显示面板、隐藏面板、移动面板。
事件、场景和行为的关系如下：
目前AxureRP5.5支持的事件如下：
?
?
OnClick：
鼠标点击?
?
OnMouseEnter：
鼠标的指针移动到对象上?
?
OnMouseOut：
鼠标的指针移动出对象外?
?
OnFocus：
鼠标的指针进入文字输入状态（获得焦点）?
?
OnLostFocus：
鼠标的指针离开文字输入状态（失去焦点）?
?
OnChange：
下拉框或列表框中的选项改变?
?
OnPageLoad：
页面或模块载入?
?
OnKeyUp：
按下然后松开键盘上的键大多对象只具备常见的三种触发事件：
OnClick、OnMouseEnter与OnMouseOut。
某些控件可触发的事件有些不同：
?
?
单选框和复选框则具有OnFocus、OnLostFocus事件；?
?
文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件；?
?
下拉框和列表框具有OnChange事件；?
?
页面加载或模块被载入时则发生OnPageLoad；
2、定义一个链接
下列步骤说明如何在按钮控件上定义一个链接：
1.2.首先，拖拉一个按钮控件到线框图中，并选择这个按钮；然后，控件交互面板中鼠标双击―OnClick‖这个事件，这时会出现―InteractionCaseProperties‖对话窗，在这
个对话框中可以选择要执行的动作；3.4.在―Step2‖中，勾选―OpenLinkinCurrentWindow‖动作；在―Step3‖中，点击―Link‖，在弹出的LinkProperties对话框中可以选择要链接的页面或其它网页地址。
除了上面的步骤，定义一个链接的最快捷的方法是单击控件交互面板顶部的―QuickLink‖，在弹出的LinkProperties对话框中选择要链接的页面。
3、定义行为
除了定义简单的链接之外，Axure还提供了许多丰富的行为，可以在任何所触发事件的场景中执行这些行为。
以下是目前Axure5.5所支持的行为：
OpenLinkinCurrentWindow：
在当前窗口打开一个页面OpenLinkinPopupWindow：
在弹出的窗口中打开一个页面OpenLinkinParentWindow：
在父窗口中打开一个页面
CloseCurrentWindow：
关闭当前窗口OpenLinkinFrame：
在Frame框架内打开一个页面OpenLinkinParentFrame：
在父页面的嵌框架中打开一个页面SetPanelstate（s）toState（s）：
为动态面板设定要显示的状态ShowPanel（s）：
显示面板HidePanel（s）：
隐藏面板ToggleVisibilityforPanel（s）：
切换（显示/隐藏）面板的显示状态MovePanel（s）：
根据绝对坐标或相对坐标来移动动态面板BringPanel（s）toFront：
将动态面板移至最上层，让DynamicPanel能够不被其它图层覆盖SetVariableandWidgetvalue（s）equaltoValue（s）：
设定变量的值或控件的值ScrolltoImageMapRegion：
滚动页面到ImageMap所在位置EnableWidget（s）：
把对象状态变成可用状态DisableWidget（s）：
把对象状态变成不可用状态SetWidget（s）toSelectedState：
指定控件选择后的样式SetFocusonWidget：
设定焦点在指定的控件上WaitTime（s）：
等待多少毫秒（ms）后再进行这个动作Other：
显示动作的文字说明
4、定义多个场景（场景说明）
一个事件可以包含有多个场景，以传达多个不同的流程或交互。
例如，可以在一个按钮的OnClick事件中加入两个场景，第一个场景为―如果成功‖并执行第一个动作；第二个场景为―如果失败‖并执行第二个动作。
当在HTML原型中点击按钮时，会显示出这两个场景说明（―如果成功‖和―如果失败‖），点选其中一个场景说明，就会执行这个场景中包含的行为。
使用场景说明虽然也可以表达出交互流程，但如果需要建立一个高保真的原型，则必需在场景中定义逻辑条件：
根据控件中的值或变量值执行行为。
（见第四章中关于逻辑条件的详细描述）
5、页面事件:
OnPageLoad
Axure支持一个页面级的触发事件：
OnPageLoad，这个事件在原型载入页面时被触发。
页面OnPageLoad事件在页面交互面板中定义，为页面OnPageLoad事件添加场景的方式与在控件事件中相同。
（见第四章中关于OnPageLoad事件的详细描述）
第6节模块
1、什么是模块
模块（Maste）是可以重复使用特殊页面。
一些常用模块如页首（Header）、页尾（Footer）与导航（Navigation）。
模块可用在页面中或是其他模块中。
只要修改模块，在所有引用这个模块的页面中的模块也会相应跟着同步更新。
模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率，并使原型易于管理维护。
2、添加、设计和组织模块
在模块面板中可进行模块的管理。
要添加模块，单击模块面板顶部工具栏的―AddMaster‖按钮或在面板中点鼠标右键，选择―AddMaster‖。
可以使用文件夹（Folder）来组织模块，然后通过工具栏、右键菜单或是拖放的方式重新排列组织模块。
在模块上双击可打开模块，像设计页面一样拖放控件到线框图中进行模块设计。
3、页面中添加模块
拖动模块面板中的模块到线框图中，就可以在页面或其它模块中添加模块。
模块添加到线框图中后，根据模块行为会有淡红或灰色的遮罩。
选择菜单―Wireframe->MaskMasters‖，取消该菜单的勾选，就可以移除颜色遮罩。
模块的默认行为（Behavior）是―Normal‖，可以在模块上点击鼠标右键，使用―Behavior‖菜单项将模块行为修改为―PlaceInBackground‖或―CustomWidget‖。
模块有以下3种行为：
?
?
普通行为（Normal）：
模块可以被移动与放置在线框图中的任何地方，对模块所做的修改会在所有模块实例中同时更新。
?
?
背景行为（PlaceinBackground）：
模块应用在线框图中时，会处于线框图的最底层并被锁定。
模块实例中所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。
?
?
自定义控件行为（CustomWidget）：
模块应用在线框图中时，模块实例中的控件与原模块失去关联，模块实例中的控件可以像一般控件一样可以进行编辑，就好像只是进行了复制和粘帖操作。
常用于创建具有自定义属性、注释和交互的自定义控件库，例如：
具有白色文字的蓝色按钮。
第7节HTML原型
1、什么HTML原型
在Axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以基于浏览器的、可互动的原型了。
Axure原型是一些HTML和JavaScript文件，可以在IE6+、Mozilla、Firefox浏览器中运行。
2、配置和生成原型
点击主菜单―Generate->Prototype（F5）‖或工具栏上的Prototype按钮，在打开的ConfigureHTMLPrototype对话框中，可以对原型进行配置和生成。
生成原型的配置选项分为以下部分：
?
?
常规（General）：
在―DestinationFolder‖位置输入HTML原型的存放位置。
由于AxureHTML原型包含多个文件，最好指定一个单独文件夹专门存放这个原型。
?
?
页面注释（Notes）：
对想要显示在HTML原型中的页面注释项进行选择和排序。
?
?
控件注释（Annotations）：
对想要显示在HTML原型中的控件注释项进行选择和排序。
?
?
定交互行为（Interactions）：
设置是否需要总是显示场景描述（case），或是只在多个场景存在的情形才显示场景描述。
?
?
发布（Distribution）：
选择是否发布生成chm文件。
?
?
高级（Advanced）：
选择是否将TextPanel转换成图片，这是旧版本的一个功能，很少使用。
配置完毕后，就可以点击Generate按钮生成原型。
3、重新生成页面
当Axure工程会越来越大时，输出HTML原型所耗费的时间也会越来多，导致速度变慢。
如果只是调整其中一个页面，却要等待整个原型重新全部输出，那就太浪费时间了。
这时为了提高效率，可以只对当前修改的页面进行重新生成。
要对一个页面重新生成，只打开这个页面，然后选择主菜单―Generate->RegenerateCurrentPagetoPrototype（CTRL+F5）‖，回到HTML原型中刷新就可以看到更新的页面了。
4、使用HTML原型
Axure输出的HTML原型的界面可分成三个区域：
?
?
左侧（站点地图）:
是一个页面导航列表，以层级形式展示原型中的页面。
?
?
底部（页面注释）:
显示当前页面的注释。
?
?
中间（线框图）:
显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。
另外，单击线框图中控件旁边的黄色便利贴小图标可以阅读控件注释。
5、发布原型
Axure原型是一些HTML、Javascript和图像文件，可以在主流的浏览如IE6+、Firefox中进行浏览。
所以你的同事和客户不需要安装Axure或任何播放器就可以直接浏览原型。
发布Prototype的方式有很多种：
1、发布到web服务器第一种方式是发布HTML原型到Web服务器上，只要将网址告诉客户、工作伙伴或其他人，他们就可以在浏览器上浏览原型。
2、压缩成ZIP压缩包第二种方式是将HTML原型压缩成ZIP包，然后将ZIP压缩包传递给相关人员。
其它人通过ZIP压缩包便可以直接在自己的计算机上浏览H
升级会员 