axure原型设计教程

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

AxureRPPro5.6教程目录(一)Axure介绍.......................................1(二)界面与功能.......................................4(三)文档管理...........................................7(四)模板复用.........................................11(五)widgets工具-上.............................14(六)widgets工具-下.............................17(七)注释annotations...........................18(八)交互interactions(上)................26(九)交互interactions(中)................29(十)交互interactions(下)................29(一)Axure介绍互联网行业产品经理的一项重要工作,就是进行产品原型设计(PrototypeDesign)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整而准确的表述给UI、UE、程序工程师,市场人员,并通过沟通会议,反复修改prototype直至最终确认,开始投入执行。进行产品原型设计的软件工具也有很多种,我写的这个教程所介绍的AxureRP,是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时,此软件也在产品经理圈子中广为流传。之所以AxureRP得到了大家的认同和推广,正是因为其简便的操作和使用,符合了产品经理、交互设计师们的需求。在正式谈AxureRP之前,我们先来看看做产品原型设计,现在大致有哪些工具可以使用,而他们的利弊何在。纸笔:简单易得,上手难度为零。有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。Word:上手难度普通。可以画wireframe,能够画页面流程,能够使用批注与文字说明。但是对交互表达不好,也不利于演示。PPT:上手难度普通。易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。但是不利于大篇幅的文档表达。Visio:功能相对比较复杂。善于画流程图,框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。Photshop/fireworks:操作难度相对较大,易于画框架图、流程图。不利于表达交互设计,不擅长文字说明与批注。Dreamweave:操作难度大,需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。以上这些工具,都是产品经理经常会使用到的,但是从根本上来说,这些工具都不是做prototypedesign的专门利器,需要根据产品开发不同的目的,不同的开发阶段,选择不同的工具搭配使用,才能达到表达、沟通的目的。比如使用纸笔,更适合在产品创意阶段使用,可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路,及时的画出来,是再好不过的方法。而word则适合在用文字详细表达产品,对产品进行细节说明时使用,图片结合文字的排版,是word最擅长的工作。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达,更可通过画usecase获取用户需求。PS/FW是图片处理的工具,DW则是所见即所得的网页开发软件,这些是设计师的看家本领,对于普通的产品经理来说,需要耗费太多的精力去掌握。其实每件工具,每个软件,在创造它的初期,软件设计师们都给它赋予了性格、气质。因为每个工具的产生,都是为了满足人类的某一方面需求。比如锄头是锄土的,起子是起螺丝的,电熨斗是烫衣服的。但是不同的工具都有自己的工作领域,在其他领域它并不擅长。而以上的软件在创造的初期,并非为了帮助产品经理、ue完成产品原型设计,因此他们都不能在prototypedesign这件工作上得心应手。而AxureRP正是在互联网产品大张其道的前提下,为满足prototypedesign创建的需求,应运而生。AxureRP能帮助网站需求设计者,快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页,并可自动生成用于演示的网页文件和word文档,以提供演示与开发。没错!AxureRP的特点是:快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成htmlprototype演示。根据设计稿,一键生成一致而专业的word版本的原型设计文档。说到这里相信很多人已经激起了兴趣,但是在开始学习之前,我认为我们还是有必要先了解一下软件短短的历史,创造这一软件的公司—AxureSoftwareSolutions,Inc.该公司创建于2002年五月,AxureRP是这一软件公司的旗舰产品,2003年一月AxureRP第一版本上线发表,至今已经正式发行到了第四个版本,而我提笔写到这里的时候,Axure5.0版本beta版本已经正式提供下载试用,虽然我已经下载使用,但是我想,写教程还是应该先从稳定的4.6版说起,至于5.0版,我们可以伴随着软件一起成长。接下来我会结合图片,分几个步骤分享我对Axure的认识,一、界面与功能二、工具栏三、站点地图四、组件与使用方法五、复用模板与使用六、交互功能与注释七、实例当然,在书写的过程中我会根据具体的情况再进行调整,尽量做到图文并茂,易于理解。写这个教程的目的,一方面为自己熟悉与更加理解Axure,另一方面也鞭策自己完善自己的blog网站,同时也希望以自己的绵薄之力,为希望学习Axure的朋友分享一点经验。由于这是我第一次尝试写教程,难免会出现偏颇,也希望朋友们能够不吝赐教,共同进步。另,为e文好的朋友附上自学AxureRP的几个途径:1、打开软件,按F1调取帮助文档,对照文档学习。2、登录查看flash视频学习。3、登录Axure博客,了解软件最新信息。4、登录讨论组,参与讨论。并提供AxureRPpro4.6版本的下载=downloadForPJBlog(二)界面与功能不论学习什么,打基础是很重要的。关于基础练习,我印象最深的故事是王羲之练习书法的故事,将一池水染黑,需要怎样的毅力?再有就是达芬奇与鸡蛋的故事,一个简单的鸡蛋,达芬奇画了无数次。我相信正是他们的一步一个脚印,才让他们有了后来伟大的成就。故事老套,道理浅显,可是我认为很重要。学习软件,应该先熟悉每个面板,每个基础功能,才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始。一、欢迎界面与功能运行AxureRP后,首先弹出的是欢迎界面,它拥有的功能和其他软件的欢迎界面没有什么特别的不同。功能区1:文档区,这个区域显示用户最近打开的AxureRP文件,用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮,可以创建新文档与打开AxureRP默认文件夹。功能区2:认证区,这个区域显示注册信息。已经注册的用户,显示注册者名称,与已经获得认证的图标。未注册用户,显示注册链接,引导用户完成注册注册。功能区3:AxureRP学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。a、在线学习提供了三个链接:videotutorial:点击后进入视频学习中心,可以通过观看相关的flash教程学习AxureRP,不过都是e文解说。onlinecommunity:进入AxureRP的官方讨论组,在线讨论学习。Axureblog:进入Axure的官方论坛,了解最新资讯。b、帮助文档也提供了两个链接,但是其实起到的是一样的效果,都是打开帮助文档,只是跳往不同的章节罢了。c、问题反馈,通过点击链接可以发邮件到support@axure.com,以寻求获得帮助。在欢迎界面中,Axure还提醒用户,用4.6高版本的软件创建保存的Axure文件,无法用以前的低版本查看。同时,如果我们不希望下次打开软件再看到这个面板,我们可以通过选择“Don'tshowthisatstartup”实现。二、软件主界面与功能关闭欢迎界面后,我们进入软件的主界面,淡蓝色调的ui,并不是很张扬。功能区1:命令区,和我们操作的所有office软件一样,包含文件、编辑、查看和帮助,这些功能大抵是差不多的。table也很容易理解,就是对表格编辑的命令。而Axure特有的几个特殊的命令栏目是a、wireframe:线框,包含所有画原型线框图的相关命令。b、object:包含所有对工作区物体的操作命令,操作放入工作区的所有widgets,包括组合、排序、锁定以及脚注命令等。c、generate:自动生成html演示文件、word说明文档,以及对生成规则进行自行编辑、定义。功能区2:工具栏,基本和office风格一模一样,功能也很容易上手。功能区3:工作区,这就是我们平常操作工具,创建prototype的舞台,将自己的构思在这里释放,将自己的想法在这里展现。工作区的上部显示打开的文件名,可同时打开多文档,进行操作。功能区4:站点地图,AxsureRP创建的文件是模拟真实网站页面关系的,sitemap就是通过树形目录关系,管理所有的站点页面文件与流程图文件。科学的文件关系结构,对有效的演示文档与生成易读的说明文档相当重要。我的操作习惯是先画流程图,然后根据流程图构建页面文件框架,最后才开始页面的具体设置。期间可以将文件分为LOFI(低保真)与HIFI(高保真)两个部分进行分别展示,有利于不同的需求者使用。功能区5:器具箱,囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区,进行操作。对于这里面的对象,我们有必要一一详细了解。功能区6:复用模块区,这里创建的页面文件和sitemap的页面相似,唯一不同的是,master的每个文件,可以当作一个整体,被sitemap反复调用。这个功能就相当于程序开发中的程序复用,用好这个功能,可以减少我们很大一部的工作量。也更容易理解网页文件的关系,了解网页设计师、程序员是怎么构建网站的页面的。功能区7:页面笔记,用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。功能区8:页面载入时的交互功能。通过在这里设置,不同条件下,页面初次打开时的状况。功能区9:注释与交互区。这个注释和交互和7、8不同,7、8针对的是页面,而9针对的是页面中的元素,也就是一个个widgets。功能区的上面部分设置交互条件。通过鼠标点击、滑入、滑出,设置触发的事件,与对应widgets相应的变化。这一部分对没有程序基础的人可能会有一点难度,我稍后会做详细解释。功能区的下面部分是注释部分,用户可以对选定的对象进行详细的注释。Axure已经设置了几个默认的注释字段,但是其实这些默认的注释字段,大家完全可以不使用,因为它可能和你要说明的东西风马牛不相及。那么该怎么办呢?Axure提供了自主设置字段,只要你自己设置好自己常用的字段,然后按照自己的习惯编写就可以了。比如说你要说明对象的功能、优先级、参数,那么你在设置中加入这三个字段就好了。Axure最大的优势就是你设置的这些注释,在生成说明文档时,Axure自动帮你生成PRD规格的表格文档,你可以省去相当大的编号工作,

1 / 40
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功