AXURE在原型設计中的应用技巧-Axure高级应用.docxVIP

AXURE在原型设计中的应用技巧 - Axure高级应用 本文由 HYPERLINK / 我是产品经理：?转自MC论坛 摘要:?交互设计师一般都是出线框图为最终产物，但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本，所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建，?... 　　　　前言　　什么是 HYPERLINK /forum.php?gid=38 \t _blank 原型呢？　　产品原型简单的说就是产品 HYPERLINK /sort/jiaohu \t _blank 设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些 HYPERLINK /ucd/ \t _blank 交互性的元素，使其更加具体、形象和生动。就我个人而言，目前使用频率最多，最高效，交互效果最好的原型 HYPERLINK /forum-36-1.html \t _blank 工具是 HYPERLINK /sort/axure \t _blank Axure。今天给大家介绍一些我在工作中使用axure的经验。主要从交互设计中涉及的三个主要步骤进行说明：　　一、主要页面原型　　在进行主要页面原型设计之前，交互 HYPERLINK /sort/jiaohu \t _blank 设计师需要：　　一份主要的任务流程图（或是用例，一般由 HYPERLINK / \t _blank 产品经理提供）　　一份主要功能列表（一般由产品经理提供）　　网站信息架构（信息架构在一些公司是需要交互设计师来完成的）　　对于前期 HYPERLINK /forum-60-1.html \t _blank 调研结果的理解 　　如何做“主要页面原型”　　1.?在建立项目的初期就开始定义Master　　项目一开始启动，如果可以稍微掌握哪些区块未来将是共享区块，那么就开始建立Master，比如网站的Header?/?Footer?/?导览选单(Navigation)，或者广告版位等等。越早使用，越可以节省其它页面设计的重复工作。　　 Master的定义 　　2.可以应用一些Axure?RP? HYPERLINK /forum-40-1.html \t _blank library　　网上有很多资源，如：/post/6285。也可以自己制作适合产品的library。　　 网上的library资源 　　3.根据“任务流程图”，“功能列表”将主要的页面原型制作出来。　　这时可以包括一些必要的交互动作。一些详细的，比如出错提示等交互可以不用考虑。　　 主要的页面列表 　　用途：　　主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。　　应注意几点：　　1.不要加入视觉设计的元素。着眼于大局，不要纠结细枝末节　　在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧，不要把时间浪费在视觉设计上，那样绝对是得不偿失。　　因为我们的原型方案还没有最终通过，肯定要通过多次迭代才能确定方案，太多的视觉设计就是浪费时间；　　再者，如果原型做的十分逼真，在产品讨论会上，视觉的元素会很快抓住大家的眼球，到时就会有领导来质疑你的 HYPERLINK /ucd/ \t _blank 界面是不是该换成蓝色，按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。　　2.最好在使用axure工具前，用纸和笔画一些纸面原型，整理一下思路。　　3.这个过程应是快速的，迭代的。 二、页面流程图　　在确定主要页面之后，我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法，也有利于思路的整理。毕竟 HYPERLINK /sort/axure \t _blank Axure上面的 HYPERLINK /sort/jiaohu \t _blank 交互点是散的，通过页面流程图，我们可以整理所有的页面上的交互行为，避免遗漏；在向他人展示的时候，也可以一目了然的看出需要的操作步骤是多少。　　我倾向于将主要任务列出来，然后画出所有任务的页面流程图。　　 页面流程图 　　页面流程图要素 　　由于axure中没有斜线，在表现流程的时候有些受限。我会在流程图中表现以下几点： 操作步骤的名称和编号 ? 开始和结束 页面的名字 点击的位置 操作说明和箭头 步骤序号 　　用途　　可以与他人沟通流程、整理思路细化流程。　　应注意的几点　　如果项目时间有限，页面流程可以画在纸上。但还是建议在交互 HYPERLINK /ucd/ \t _blank 设计保留这一步。　　为