Axure快速原型设计(第二版).pdf
Design a more usable world 本书介纽 书名 快速原型设计》 作者简介 冻良泳,目前任职于北京某管理软件公司,致力于以用户为中心的软件产品设计,提倡在软件设计开发过程中应 用可用性工程。 (旧址是 为什么要使用 可以让杗面应用软件和网站的改计师创建线框图、流程图、原型和规格说明文档,它比任何当前 其它创健静态原型的工具如 等都要快速、高效,因为它才是真正的专门原型设计工具,并且支持多人协作设计和版 本控制管理。 设计师们渴望有一个专门的原型设计利器,而正是为此目的而精心打造 已经被一些财富大 公司采用,成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 读者受众 本书读者受众包括(也即是 的使用者):商业分析师、信息架构师、可用性专家、产品经理、咨询师、 用户体验设计师、交互改计师、界面设计师等。另外,也推荐架构师、程序开发工程师阅读。 Design a more usable world 为什么要进行原型设计 原型的作用和好处 “没有比制仵 更易取得使用者界面与特殊功能可用性上的一致性了 不只可硝认需求,它更可 赢得顾客的心。” ——阿伦戴维斯和迪安莱芬韦尔 《用需求管理快速交付高质量的软件》的作者( 软件公司) 根据调查报告显小,大约的软件开发不是失败,就是超预算、延期或交付缩水的功能。软件失败或亏损的前 三大原因为: 、缺乏使用者的参与 、需求或规格不完整; 、需求或规格变吏; 传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在,这些需求更是不适用 于日前快速发展的环境。而制作 是个有效的简化文档编制、吸引使用者参与、早期辨认需遗漏、将外 在需求风险降到最低的方法。将大量文字性文档转变为带有注释与工动性的可视画面,如此更能抓住利益相关者 与使用者的注意,让用户在软件开始投入编程前就确认需求 快速原型法( )是一种有效且高效的以用户为中心( )的技术,可以帮 助用户体验专家、设计师、工程师创造更加有用、可用的产品。 目前全球有财富大的公司和重要机构在使用 ,国内的淘宝、雅虎、腾讯、当当等公司的产品经理 也都在使用。 基础簋 在基础篇中,你将完整的学习到关于的基本和高级功能。 第一章介绍 让你初步认识 第节认识 什么是 的完整英文名是 的英文发音是“ Ack sure”,是“ Rapid Prototyping"的缩写,意思 为快速原型设计;是" Professional"的缩写,意思是专业版 是美国 司的旗舰产品,是一个让负责定义需求和规格、设计功能和界面的专家快迩创建应用软件或网站线框图、原 型、规格说明书的专业快速原型设计工只 所针对的专家包括用户体验设计师()、交互设计师()、 业务分析师 、信息架构师()、可用性专家()和产品经理()。 Design a more usable world 在屮设计线框图和原型会使你更加高效;可以让闭队成员一起体验你的设计;向用户演示和交流以确认用 户需求;白动产生规格说明书;让团队进行多人协同没计和对版本进行管理控制;等等。 总之, 会使你以往的工作方式发生变苹: 令进行更加高效的设计; 令体验到动态的原型 冷涓晰有效的交流想法; 工作环境介绍 汋可视化工作环境可以让你轻松忺速的以鼠标拖曳的方式创建带有注释的线框图。不用进行编程,就可以 在线框图上定乂简单链接和高级交互。在线框图的基础上,可以自动生成原和枚式的规格说明书。 以下是 工作坏境的简要说明 B如m“白的nD的P 回日≯岛圆气 应 主单和工具栏 B控件交互面板 My Travel Site 站点地图面板 中口国 是 notations.Al Fir结s Packages I的h Hodd crises e|c。me sgn hn e法“会也话 P 线框图工作区 部件面板 s vegas 控件注释面板 地Be【ssa oHum maddy Rads Bean -「 Seth 性Q 94中·Bg Lw中飞啦的测A的,如d Fage Netas.Ddot W 6 模块面板 页面注释和交互区 snowe complet bet&l9 too 1BB wdth Bao heght 280 主菜单和工具栏 执行常用操作,如文件打开、保冇文件,格式化控伫,自动生成原型和规柊说明书等操作。 站点地图面板 对所设计的页面(包括线框图和流程图)进行添加、删除、重命名和组织页面层次,。 Design a more usable world 控件面板 该面板屮包含了线枉图控件和流稈图控件,如按钮、图片、文本面板、矩形框等,可用这些控件进行线框图 和流程图的设计。另外,你还可以载入已有的部件库(文件)和创建自己的部件库。 模块面板 模块是一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。 线框图工作区(或叫页面工作区) 线框图工作区是你进行原型设计的主要区域,在该区域屮你可以设计线框图、流稈图、自定义部件、模块 页面注释和交互区 添加和管理页面级的注释和交互。 控件交互面板 定义控件的交互,如:链接、弹出、动态显示和隐藏等。 控件注释面板 对控件的功能进行注释说明。 第节线框图及注释 现在我们来认识中与设计线框图有关的各个区域和面板,说明妇何设计线框图和为线框图添加注释。 站点地图面板 在开始设计线框图 或流程图()之前,应该先考虑页面框架,决定信息内容与层次。明确页面框 架后,就可以利用站点地图面板来建立和管理所要设计的页面,添加、删除页面炇对页面层次进行组织。 添加和删除页面 在站点地图面板中,点击面板工具栏上的“ Add Child Page"按钮可以添加一个页面;点击面板工具栏上的“ Delete Page”按钮或在页面上点选右键菜单中的“ Delete Page"选项可以删除一个页面;在页面上点选右键菜单中的 Rename Page"菜单项或鼠标缓慢双击页面可对頁面进行重命名。 Design a more usable world er问P 母會↓中中宮 G9 Home Add child Page i Page 2 Li Page 3 组织页面层次 在站点地图面板中,用鼠标拖曳一个页面到另一个页面上或点击面板工具栏上的" Move Up”、“ Move down"、 " Indent"、“ Outdent"按钮,就可以组织页面的层次和顺序。 命會↓◆宦 H ame 打开页面进行设计 在站点地图面板中,用鼠标在页面上进行双击或点击面板工具栏上的“ Design Page"按钮,打开该页面在线框图区 域中进行线框图设计。 sItemap 区 Home Page 1 日1Ht Pace 1 Page 2 用户名 密码: 确正 Design a more usable world 部件面板(控件面板) 控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件库,如按钮、图片、文本框等。 添加控件 从控件面板中拖动一个控件到线框图区域中,就可以添加一个控件。控件可以从一个线框图中被拷以 然后粘贴 到另外一个线框图中。 操作控件 添加控件后,可在线框图中选择该控件进行鼠标拖曳栘动该控件和改变控件大小,还可以一次选择多个控件进行 移动和改变大小。另外,还可以组合、排序、对齐、平均间距( )和锁定控件。以上这些操作可通过在 控件上点击右键菜单进行,也可以通过选择菜单"Vⅰew > Object"调出的对象工具栏上的按钮进行 编辑控件风格和属性 冇多种方法可以编辑控件的风格和属性: ·鼠标双击:鼠标双击某个控件,可以对控件的最常用的属性进行编辑。例如,双击一个图片控件可以导入一张 图片;双击一个下拉列表或列表框控件可以编辑列表项 ·工具栏:点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。 ·右键菜单:通过在控件上点击石键菜单,编辑控件的一些特定属性,不同的控件这些属性也各不相同。 Wireframe ih A图 Image lext Palel Hyperlink Rectargle Placeholder Hutton lable Fext hleld lext Area List Box Checkb ox Radio BItton Horizon-a Verical Line Button Shape Image Map Inline Fame dynamiC Menu Panel Wertical (Horizonta 查看和搜索控件 控件面板工具栏中,点击" Wireframe"会弹出一个下拉菜单,你可以査看所有控件库,或只看默认线框图或流程图 控件库,或只看已经被加载旳控件库。另外,你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更 新控件库。 Design a more usable world Widgets AL| braries晶 All Librar A閤 ectargle Placeholder Button TExt Field Text area Windowsand containers yidsK Load library Create library o Button Horizontal vertica Lir e Button shape Image Mao In ine fram: Region Edit Library Refresh Lib ary DYnamic Menu enu Rectangle Rounded Beveled Bracket Vertical) (Horizon:al Retangle Rectangle 点" Search”这个搜索按钮,输入想要査找的控件名称,会在面板内列出所有符合条件的控件。 Widgets 国圆 Wireframe图 A閤 abc Text Area Text Field Text Panel 创建自定义控件库 默认的两套控件库 和可能还不能满足你的要求,那么现在你可以开始创建你自己的控件库了。在 控件面板中点击下拉菜单的“ Create library'选项,这时会弹出一个保存对话框让对这个文件进行命名和保存, 会立刻启动另一个执行程序并打开这个刚建好的文件。在新的程序界面中,原本站点地图面板 的位置会被控件库面板 所取代。你可以像页面一样对控件进行新增、删除、排序 Design a more usable world Widgets 园国 All Libraries AllLibraries Wireframe Hyperlink Load library, Create library. Edit Library Refresh Library Button 典 Table Text Field Text Area 像创建页面一样,你可以利用现冇的控件来绘制新创建的控件 idget ubran Email Submission Field W 身會4度昌 B Email Submission Field Emails Submit Date Pick← Courtry Picker 启动时,如果已经把创建好的自定义控件库文件放在 文件夹的“我的文件 Libraries”目录中,则该控件库会被自动加玅到控件面板中。另外,你也可以手动选择你所指定的 文件进行 控件库加载。 使用自定义控件库 新建立的自定义控件库的操作方式就如同其它的默认控件库一样,以拖放 的方式将控件放到画布上 进行画面的绘制。 Widgets Form elements· Address Date Picker Country Submission:Field Picker