Axure RP 8 交互原型设计案例教程第11章

精彩Axure教程(中文汉化版)

第 1 页共 31 页精彩Axure教程（中文汉化版）介绍互联网行业产品经理的一项重要工作，就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype 直至最终确认，开始投入执行。进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。在正式谈Axure RP之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。 Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。 PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。 Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。 Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。 Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画use case 获取用户需求。PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在prototype design 这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下，为满足prototype design创建的需求，应运而生。

《AxureRP9网站与App原型设计》教学教案—10支付宝App低保真原型设计

第10章支付宝App低保真原型设计

课时内容支付宝App低保真原型设计课时 6

教学目标通过支付宝App低保真原型设计，学习元件、母版的使用及海报轮播效果、上下滑动效果的制作

教学重点元件的使用、母版的使用、海报轮播效果、上下滑动效果

教学难点元件的使用、母版的使用、海报轮播效果、上下滑动效果

教学设计 1.教学思路：通过一个综合案例学习低保真原型设计方法。

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件

教学内容

10.1 需求描述

利用Axure RP9原型工具绘制支付宝App低保真原型，主要设计几个方面。

（1）利用Axure的母版功能绘制支付宝App的底部标签导航。

（2）绘制“支付宝”界面的九宫格导航布局。

（3）制作“支付宝”界面的海报轮播效果。

（4）绘制“余额宝”界面的布局。

（5）制作“余额宝”界面内容上下滑动效果。

（6）实现“支付宝”界面与“余额宝”界面切换显示效果。

10.2 设计思路

如何进行支付宝App需的低保真原型制作呢？

（1）在进行页面布局，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等元件。

（2）在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页面里可以直接使用，避免重复制作和重复添加交互效果。

（3）海报轮播效果的制作需要进行动态面板的状态自动切换效果设置，设置状态自动切换就可以实现海报轮播效果。

（4）界面内容的上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是用来外层控制显示区域，另一个是用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。

10.3 准备工作

进行低保真原型设计，不要使用截图或者使用过多的彩色，最好使用黑白灰3种颜色。交互设计师或者产品经理在制作完低保真原型后，将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计。视觉设计师会制作界面图片，并且切图，原型里采用什么图片和色调应该交给视觉设计师或者UI设计师来决定。

使用Axure制作交互式原型

Axure是一种流行的交互式原型工具，被广泛用于用户体验设计和前端开发领域。它提供了一系列功能强大的功能，使得设计师可以快速而有效地创建交互式原型。在本文中，我将探讨如何使用Axure制作交互式原型。

首先，我们需要明确交互式原型的概念。交互式原型是指通过模拟真实的用户界面和用户行为来展示产品或应用的设计思路。它可以帮助设计师验证和改进界面的可用性，提供给开发团队一个清晰的开发目标，以及向利益相关者展示产品的功能和流程。

使用Axure制作交互式原型的第一步是创建项目。在Axure的主界面中，可以选择新建项目并指定项目的名称和保存路径。一旦创建了项目，就可以开始设计原型了。

接下来，我们需要构建页面和添加元素。Axure提供了丰富的组件库，包括按钮、文本框、下拉菜单等常用的界面元素，可以通过拖拽和放置的方式快速添加到页面上。此外，Axure还支持自定义组件和外部资源的导入，可以为原型增加更多的细节和交互效果。

在添加页面元素之后，我们可以开始定义交互行为。Axure提供了一系列的交互动作和事件，例如单击、悬停、滚动等，可以通过简单的设置来触发相应的交互效果。例如，可以设置按钮的点击事件，当用户点击按钮时，跳转到指定的页面或显示相应的提示信息。除了基本的页面切换和按钮点击交互，Axure还支持更复杂的交互逻辑。例如，可以设置条件判断，根据用户的选择或输入展示不同的页面内容；还可以模拟表单的提交和验证过程，提供真实的用户体验。

完成交互设计后，可以进行原型的预览和测试。Axure提供了交互预览功能，可以在设计过程中实时查看原型的效果。此外，还可以生成HTML文件，通过浏览器在真实的设备上进行测试和反馈。通过预览和测试，可以及时发现和解决交互上的问题，并不断改进原型的设计。

最后，一旦原型设计完成并经过测试确认无误，可以将原型分享给团队成员和利益相关者。Axure支持将原型导出为可执行文件或生成在线链接，便于与其他人进行共享和查看。同时，Axure还提供了一些协作和版本控制的功能，方便团队成员之间的协作和管理。

AxureRP原型设计与交互制作教学

第一章：Axure RP 简介

Axure RP 是一款流行的原型设计与交互制作工具，其全称为Axure Rapid Prototyping（原型制作）。它具备丰富强大的功能，可以帮助用户快速设计、交互和分享原型。Axure RP 不仅受到设计师和产品经理的喜爱，也被广泛应用于用户体验设计（User

Experience Design，简称UXD）领域。

第二章：Axure RP 的功能特点

Axure RP 提供了多种丰富的功能和工具，以满足用户对原型设计和交互制作的需求。其中包括：

1. 页面布局和设计：Axure RP 提供了简洁直观的页面布局工具，用户可以轻松创建和编辑页面结构，并添加所需的元素和组件。

2. 交互设计：Axure RP 的交互设计功能非常强大，用户可以添加链接、触发事件、创建用户流程等，以展示页面之间的交互效果，模拟实际应用的交互过程。

3. 数据驱动设计：Axure RP 支持用户通过添加变量、数据列表和数据操作等功能来模拟真实的数据交互，使用户能够更好地测试和展示设计方案。 4. 团队协作和分享：Axure RP 具备强大的协作功能，用户可以与团队成员一起编辑项目、共享原型，进行实时的远程协作，提高团队工作效率。

第三章：Axure RP 的使用步骤

使用 Axure RP 进行原型设计和交互制作一般需要经过以下步骤：

1. 确定需求：在开始设计之前，首先要明确项目的需求，包括功能、交互和页面结构等方面的要求。

2. 创建页面：根据需求，在 Axure RP 中创建相应的页面，并进行布局和设计，添加所需的元素和组件。

3. 添加交互效果：利用 Axure RP 的交互设计功能，为页面中的元素添加链接、触发事件、定义用户流程等，以实现交互效果。

4. 设计数据驱动功能：根据需求，添加变量、数据列表和数据操作等功能，模拟真实的数据交互过程。