AxureRP使用培训2010-11-22大纲•RP简介•RP基本操作•RP高级技巧•RP使用心得RP引入•通过何种方式表达原型设计最好?•纸质原型很难充分表达各种交互行为•而静态页面,会增加沟通成本•我们需要的也许是针对交互设计的专业软件•RapidPrototyping-快速原型RP引入•容易理解,不用猜,减少项目失败的风险,降低沟通时间•不用等到网页程序都开发好,AxureRP产出的原型页面就可以让使用者提早进行测试了•页面可直接连结,动线容易理解,直接体验原型•以清楚的网站原型来确认所有需求,不担心执行团队没搞懂AXURE将注定改变我的工作方式•决策层:–更加直观的理解系统行为,帮助决策•产品经理:–提高了各岗位间的沟通效率,降低沟通成本,保证项目进程•需求人员:–更加有效的与用户沟通,减少误解,保证需求质量•设计开发:–更加有效的协作沟通,降低沟通成本,减少误解,避免返工•用户:–更加直观的感受系统,尽早反馈用户的需求与系统的不足。学习容易,不需要有HTML技能•会使用PowerPoint的人,大约只要30-60分钟就会使用AxureRP•以拖拉方式建立常用对象,跟PowerPoint/Visio操作方式接近,容易上手不同职位,不同要求•设计师、程序员–要能够读懂交付物,并根据所提供的交付物来完成手头工作•需求提出部门–能够利用AxureRP的各个工具,画出简单的页面布局,并能根据页面布局,进行口述•销售–只要知道如何拿这些文档去忽悠客户就好了大纲•RP简介•RP基本操作•RP高级技巧•RP使用心得RP的工作环境站点地图主菜单和工具栏界面组件(界面工具集)页面注释与页面交互模块区域物件注释互动设计页面导航面板(Sitemap)•页面的添加、删除和重命名•页面组织排序•打开页面进行设计页面导航面板(Sitemap)•Demo–添加、删除页面–页面排序–拷贝页面主菜单和工具栏执行常用操作,如文本打开、保存、格式化控件、输出原型、输出规格等操作随选模式连接线模式控件(Widgets)添加控件从组件中拖动一个控件到界面中,就可以添加一个控制。控件可以从一个界面中拷贝到另外一个界面中。编辑控件鼠标双击:双击控件,可以对控件最常用的属性进行编辑工具栏:点击工具栏上的按钮可以编辑控件的文本字体、背景色、边框等;右键菜单:右击控件可以选择编辑控件的一些特定属性,不同控件属性也不同。控件(Widgets)•Demo–常用控件•文本•链接•图片•按钮•表格•输入框–操作•对齐•置顶•锁使用模块(Master)•模块是可以重复使用的特殊页面。如页首(Header)、页尾(Footer)与导航(Navigation)•只要修改模块,在所有页面中引用这个模块的实例也会随即全部跟着变化;•模块面板可利用文件夹来组织模块,并且可以用拖拉或工具栏的方式排列模块;•在页面中拖入模块后,模块对象回应淡红色遮罩,在页面中模块是不可修改的;•修改模块中的内容只能在模块页面修改。交互设计与物件注释•控件标签相当是给控件起了个名称,用来区分控件;•在交互设计里面可以设计控件执行不同事件;•在Specification里面添加注释,在生成页面中会有标示,点击这个标示会出现注释说明交互设计注释控件标签页面注释和页面交互•在页面注释中的PageNotes面板中可以添加备注内容;•点击Default后面的三角可以添加多个备注面板;•页面交互就是编辑OnPageLoad事件,某块内容在生成页面时不显示,但是点击其他控件事件出现此块内容就要使用OnPageLoad事件并且和动态面板联合使用,开始设置动态面板隐藏,其他控件的事件设置动态面板显示。交互——控件交互•目前AxureRP支持的事件如下:•OnClick:鼠标点击•OnMouseEnter:鼠标的指针移动到对象上•OnMouseOut:鼠标的指针移出对象•OnFocus:鼠标的指针进入文字输入状态(获得焦点)•OnLostFocus:鼠标的指针离开文字输入状态(失去焦点)•OnPageLoad:页面或者模块载入常见的三种事件控件的交互交互——定义链接大纲•RP简介•RP基本操作•RP高级技巧•RP使用心得交互——动态面板(1)•动态面板包含多个状态,每个状态可包含一系列控件。任何时候都只有一个状态时可见的,一般都是默认第一个状态可见;•动态面板的状态可以隐藏、显示和改变;•将动态面板拖到界面后,可以根据需要改变面板大小、位置•使用动态面板的情况:–页面中存某块内容在开始不显示后来显示的情况;–在开始页面加载时不显示后来显示;–Tab页切换;–某块内容随着事件的不同显示位置不同的情况交互——动态面板(2)1、编辑动态面板右击动态面板,选择“编辑动态面板”→“管理动态状态”在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态动态面板实例1、将动态面板从组件中拖到界面中,右击动态面板选择“编辑动态面板”→“管理动态状态”交互——动态面板实例2、设置动态面板标签为“实例”,并新增三个状态:tab1、tab2、tab3,然后点击“编辑所有状态”动态面板实例3、在tab1页面中设置tab1、tab2、tab3三个矩形框,并且为了突出效果可以设置tab1矩形框的颜色为白色(表示选中的是tab1状态),其他两个为灰色。动态面板实例4、在tab1状态页面中设置tab1、tab2、tab3三个矩形框的OnClick事件,以tab1的添加上事件为例说明:(1)选择tab1矩形框,点击交互中的OnClick事件,再选择“设置动态面板的状态转换”,然后选择第三步的“Panelstatetostate”;动态面板实例(2)选择第一步中的“设置实例的状态变化”,然后点击第二部中的tab1动态面板实例(3)选择一个动态面板tab1,点击确定完成事件注明:tab2、tab3矩形框事件如同tab1,只是选择面板状态时选择对应得状态,tab2选择tab2状态、tab3选择tab3状态动态面板实例•5、tab2、tab3状态页面操作如4步骤•6、点击导航上的生成,选择原型(F5),点击确定动态面板设计误区此内容是在面板中的tab1状态里此内容和面板分开的,只是在此内容上面添加了一个动态面板,移动动态面板内容是不会随着面板移动的生成•F5键生成HTML•F6键生成规格说明书doc•CHM文档大纲•RP简介•RP基本操作•RP高级技巧•RP使用心得不足•中文输入法支持不好–遇到不能输入时,请立马放弃尝试•Table功能比较弱,不支持合并单元格•控件属性编辑不方便心得体会•有些交互设计师会对一些布局细节担忧,害怕自己会一直调整对齐和细节。记住,我们出的是可交互的原型,不是最终产品,不需要考虑太多的视觉细节,这些会由前端开发去进行标准的把控•不执着于AxureRP不能实现的业务需求心得体会•AxureRP软件也在不断的完善,有不能实现的效果•一个不能实现的效果,只要不影响项目的进度,不影响与执行人员的沟通,在工作中就不要过分的追求文档说明•在每一个文档首页写上文档说明,包括版本号、完成的部分、名词注释、较上一版更新生成CHM文档有乱码–将生成html文档目录下的后缀为hhc的文件,通过文本文件打开,选择ascii编码的格式另存.–将同目录下的hhp文件,用文本文件打开.将Language键值改为:中文(RPC).–打开cmd窗口,然后定位到C:\ProgramFiles\HTMLHelpWorkshop\hhc.exe.如果没有hhc.exe文件,请到微软上下载htmlhelp.exe文件安装.–hhc.exe命令后带的参数是:hhp文件的路径.教程•《Axure快速原型设计》.pdf•样式库–•在线教程–