Axure_交互式设计实例-精选

Axure 交互式设计实例

前言

什么是原型呢？

产品原型简单的说就是产品设计成形之前的一个简单框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。

就我个人而言，目前使用频率最多，最高效，交互效果最好的原型工具是Axure。今天给大家介绍一些我在工作中使用axure的经验。主要从交互设计中涉及的三个主要步骤进行说明：

一、主要页面原型

在进行主要页面原型设计之前，交互设计师需要：

?一份主要的任务流程图（此处指的不是“业务逻辑流程图”，而是根据“业务逻辑”产生的“任务流程”。任务流程可由产品或是交互出，根据各个公司或项目的具体情况而定。）

?一份主要功能列表（一般由产品经理提供）

?网站信息架构（信息架构在一些公司是需要交互设计师来完成的）

?对于前期调研结果的理解

如何做“主要页面原型”

1. 在建立项目的初期就开始定义Master

项目一开始启动，如果可以稍微掌握哪些区块未来将是共享区块，那么就开始建立Master，比如网站的Header / Footer / 导览选单(Navigation)，或者广告版位等等。越早使用，越可以节省其它页面设计的重复工作。

Master的定义

2.可以应用一些Axure RP library

网上有很多资源，如：https://www.wendangku.net/doc/ae15054199.html,/post/6285。也可以自己制作适合产品的library。

网上的library资源

3.根据“任务流程图”，“功能列表”将主要的页面原型制作出来。

这时可以包括一些必要的交互动作。一些详细的，比如出错提示等交互可以不用考虑。

主要的页面列表

用途：

主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。

应注意几点：

1. 不要加入视觉设计的元素。着眼于大局，不要纠结细枝末节

在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧，不要把时间浪费在视觉设计上，那样绝对是得不偿失。

因为我们的原型方案还没有最终通过，肯定要通过多次迭代才能确定方案，太多的视觉设计就是浪费时间；

再者，如果原型做的十分逼真，在产品讨论会上，视觉的元素会很快抓住大家的眼球，到时就会有领导来质疑你的界面是不是该换成蓝色，按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。

2. 最好在使用axure工具前，用纸和笔画一些纸面原型，整理一下思路。

3. 这个过程应是快速的，迭代的。

二、页面流程图

在确定主要页面之后，我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法，也有利于思路的整理。毕竟axure上面的交互点是散的，通过页面流程图，我们可以整理所有的页面上的交互行为，避免遗漏；在向他人展示的时候，也可以一目了然的看出需要的操作步骤是多少。

我倾向于将主要任务列出来，然后画出所有任务的页面流程图。

页面流程图

页面流程图要素

由于axure中没有斜线，在表现流程的时候有些受限。我会在流程图中表现以下几点：

?操作步骤的名称和编号

?开始和结束

?页面的名字

?点击的位置

?操作说明和箭头

?步骤序号

用途

可以与他人沟通流程、整理思路细化流程。

应注意的几点

1.如果项目时间有限，页面流程可以画在纸上。但还是建议在交互设计保留这一步。

2.为了减少沟通成本，在绘制页面流程图时，最好有一定的规范和标准。

三、完善原型

页面的主要页面和页面流程确定之后，就可以完善原型了。这时可以叫上产品部的同事一起来完成原型的细节工作。

如何完善原型

1. 按照页面流程中所考虑的交互过程，体现在原型上面。出错，提示等交互细节也应有体现。这时你可能会用到变量、层等高级axure技巧。

点击定时操作弹出层的操作

2. 增加说明

选中某个控件，在右边区域可以为此控件增加说明。

增加描述

增加描述后的前台页面，点击黄色图标显示说明提示层

如果对于说明区域的属性不满意，可以修改属性：

修改属性

不过这种增加描述的方式可能会干扰整个页面，很容易让浏览者以为是一个页面元素。也可以采取一种原始的方法为控件增加说明文字：

文字补充说明

3. 为页面编号

当原型不再需要修改时，我们需要为原型页面编号，这样有利于与视觉设计师、前端沟通。

用途

测试、产品需求文档编写参考、视觉设计参考、前端设计参考等。

应注意的几点

1. 不要过于追求技术表现

原型有些交互效果做出来会很花费时间，我建议不要过于追求技术表现效果，可以用些文字来说明交互效果。Axure软件的初衷是快速的设计原型，如果在一些技术方面交互设计师花费很多时间的话，就有些顾此失彼了。还是把真实的效果交给前端去实现吧。

2. 为了减少沟通成本，在完善原型时，最好有一定的规范和标准。

总结

Axure其实只是一种交互工具而已，交互设计最重要的还是想法，工具只是来帮你表现想法的。不必过于追求技术，不必过于追求视觉表现。我们在把握好整个产品方向的同时，应专注于交互流程、页面内交互、布局结构的创新和优化。

下面给大家介绍一些我工作之中记录下来的axure技巧。

1.快速移动页面

大家有没有感觉到，当电脑配置低，页面元素很多的时候，移动页面是一件极其痛苦的事情，有一个好的方法可以解决这个问题：

在非输入状态下，按住键盘“空格”键，界面上的鼠标“箭头”会变成“手”，这样就可以很轻松的拖动页面了。

2.原地复制组件

在axure中“ctrl+c”“ctrl+v”复制粘贴，会错位复制一个组件。怎么解决这个问题呢：

用快捷键“ctrl+d”可以原地复制一个组件。

3.复制动作Copy Case

如下图可以复制动作，就不用一个个的设置这么麻烦了。

4.直接将素材或控件转换为Dynamic Panel（层）

很实用，特别是在制作过程中发现有些东西还是放在层中展现更好的时候，以前得新建一个层，再把它们Copy进去，现在只需要右键需要转换的素材或控件Convert>>Convert To Dynamic Panel：

5.单选群组（Radio Button Group）

您可以一次选取多个Radio Button，按下鼠标右键，并选择“Edit Radio Button>>Assign Radio Group”来设定 Radio Button 的群组关系。如此一来，当这些Radio Button输出到Prototype 时，就会形成真正的单选用户接口。

6.添加定位锚点

类似于网易车库中的定位功能，点击某一字母，页面就会定位到同一字母所在的区域：

用Axure怎么来实现这个功能呢？

a)首先要用“image map region”在页面上定位一个锚点，并命名为“定位锚点位置”：

b)然后再在点击的地方加上链接

如上图，勾选“scroll to image map region”，点击下面的“image map region”，打开对话框：

如上图，选择“定位锚点位置”这一项，选中“scroll vertically only”垂直滚动，最后点击确定。

设置完成，看看效果吧。

7.下拉框（droplist）的条件（condition）

这里讲关于“条件”的简单例子。通过编辑条件，可以表现一些更高级的交互效果。

这个例子的效果是，用户切换左边的下拉框选项，右边的提示文字会随之变化。当选中的是图书时，文本框中的文字是“请输入图书名称或作者”；当选中音乐时，文本框中的文字是“请输入音乐名称或歌手”：

a)首先在页面上添加以下的组件，并给下拉框添加两个选项“图书”和“音乐”：

b)为组件命名

c)为下拉框添加动作

选择“OnChange”

这时会弹出选择交互行为的对话框，如下图。选择add condition：

在条件选择的对话框中如下图设置，设置完后点击ok：

回到选择交互行为的对话框，这时选择下图这一项：

点击上图文本框中的“Variable and Widget value equal to Value”，打开设置变量的对话框，如下图设置：

d)重复以上操作，为下拉框添加case2，效果如下：

好了，制作完成，大家可以看效果了：

条件和变量这一块的功能还需要多多探索，有些功能还是比较强大的。不过在实际的操作中，大多数的富交互效果是很少用到的。

8.恢复文件Recover files

Recover files功能可以帮你找到几天前的文件版本。

点击file>>Recover file，打开对话框，你可以查看最近的文档了：

选择recover就可以恢复当时的文档。

9.利用Axure封装视觉标准

交互设计师一般都是出线框图为最终产物，但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本，所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建，一般很多交互设计师会用Photoshop来实现视觉原型，但是效率和不可交互性还是存在很多问题，所以需要有一套完成的封装来执行视觉标准并且产生可交互的高保真原型。

设计流程及方法

UED设计流程及方法 “用户体验设计”无疑是这两年互联网行业最炙手可热的话题，而从我们成都UCD书友会火爆的现场来看，也的确如此。那么“用户体验设计”为什么会如此火爆呢?这需要从互联网的Web2.0革命说起。 这场革命，代表了互联网应用关注焦点的变迁，从以内容为王的门户型网站时代，转变为以用户为中心的互联网服务时代。以用户为中心的互联网服务，自然就需要以用户为中心的设计。但是要做到真正的以用户为中心的设计却并不简单。 这是什么意思呢?我想用彩程的实际经历对这个问题做出解释。和很多其它软件企业一样，彩程也是从一些中小型的企业网站、电子商务网站开发业务启程的。当时我们开发一个电子商务类网站的流程是什么样的呢? 首先会由超级打杂老妖出马，跟客户沟通，套出用户的需求，然后由费西或是老妖自己，三下五除二的搞一个首页出来，拿去给用户确认，用户如果点头，那么ok，开始做首页的html切图，然后丢给程序员开始开发，同时，美工继续孤军深入，出各种特征内页，切html，交给程序员开发，如此循环往复。而一旦整个项目开始进行，客户就很少再参与其中了。 于是，这个项目持续运行，直到某一天，程序员说：“好了”，这样，老妖满怀希望的冲到客户那里，很想听到客户对网站认可，但实际的场景往往是： 客户抱怨说，这里我明明是想要个Flash广告，但是却只有一张图片;这个订单系统怎么不好用，为什么不参考淘宝来做呢?我还想要个会员系统，每个会员有自己的个人页面。 这个时候，可怜的老妖只能作出两种选择，要么照单全收，ok，哪里有问题我给你改哪里，要么就是耍死皮，但是后面一种情况一般不会出现，因为老妖不愿因为得罪客户而丢掉奶粉钱。所以，这个原本大家都认为很简单的网站项目就这样被delay下去了。 这样的情况出现的次数多了，让公司首脑小s同学很不满意，于是他开始召集大家思考，这是为什么呢?让我们来看看之前我们的流程:

交互设计_教学大纲

教学大纲 （2013-2014学年第一学期） 课程名称： 交互设计 课程代码： GC2012 计划学时： 34 学分： 2 程性质：专业、选修 面向专业：数字媒体技术（移动互联网游戏 开发) 课程负责人： 一、课程的性质、地位和作用 本课程是理论实践课程,所教课程围绕“以人为本”的设计原则，重点讲述人机交互的基本概念和重要意义以及发展历程、软件系统的人 机交互设计原则和方法、网络系统的人机交互设计原则和方法、人机交 互技术与设备、人机交互开发工具与环境，简要介绍人机交互的认知心 理学、计算机硬件的人机交互设计、人机交互技术的发展趋势,并培养 学生利用网络交互设计制作做实际作品的能力。 二、教学目的和要求 1．掌握交互设计及其软件的基本概念、基本结构、工作原理及设计方法，最终了解和掌握其工作原理，具有初步的设计能力。 2．学会使用设计类工具分析、设计，通过全面培养学生的分析、设计、开发、使用能力，提高学生分析问题、解决问题的自主创新能力。 3．通过“课程实验——实验课程——设计训练”循序渐进的训练，锻造学生的数据系统分析、设计、实现能力。 三、课程的主要内容，课程内容的深度、广度、重点、难

点 第一部分：理解目标导向设计 第一章交互设计概论 1.1什么是交互设计 1.2 提出交互设计的背景 1.3交互设计和周边学科 第二章基于UCD的用户需求研究 2.1 UCD的基础设计理论 2.2心理模型和实现模型 2.3用户研究：理解用户需求及搭建用例图第三章提供高效能和愉悦 3.1设计体贴的软件、设计智能软件 3.2改进数据检索，改进数据的输入 3.3为不同的用户需要进行特定设计 第四章设计模式应用及细节应用 4.1外观设计 4.2隐喻—图标的外观设计内涵 4.3习惯用法和启示。 第五章交互细节：鼠标及其操作 5.1直接操作和定点设备 5.2鼠标的选择和拖放 5.3操作控件 5.4对象及链接 5.5思考如何精确定位鼠标 第六章控件及其行为 6.1窗口行为 6.2使用控件 6.3菜单及使用菜单

原型设计第一波：八大指导原则

一切都源自受众，因此我们从解决受众的问题开始。了解谁是受众，就可以确定原型设计需要什么东西、要多少原型设计以及合适的保真程度。 如果受众是我自己、另一位设计师或者工程师，低保真纸质原型、或者应急用的PowerPint或 者HT ML模拟可能就够用了。你可以用这些媒介进行工作并理解这些媒介，它们还能传达观点而且不用花太多精力。 但如果受众是顾客或者高级管理人员，原型可能就需要更多精细。鸡尾酒餐巾纸上的草图可能就不行了。 考虑受众的时候会，应该考虑它们的适合哪种媒介或者保真度。如果他们能理解纸上的粗略图，你也自信草图足以向他们传达概念，就用这个方法。但如果受众搞不懂纸原型，你也很难用纸原型向他们传达概念，就应该换一种媒介或者保真度。 了解了受众的原型意图，接下来进入规划阶段并开始做原型。 原则二：稍加规划——再做原型 软件系统不断迅速变化。稍加规划，然后再做原型，以渐增、迭代的方式展开工作，这样能适应不断变化的环境。 规划阶段所做的工作越多，越能更好地启动工作。当然，回报会递减，一定要用常识来判断需要做多少规划工作。 经常有人问我：“原型设计前需要多少规划工作？”没有什么神奇数字，但我会把最多70%的设计时间花在草图上，然后再开始原型设计。 为什么是70%？有两个主要原因。首先，我的目标是获得受众反馈，因此越快给受众看到原型，就能越快获得反馈。其次，做原型是走查设计的好工具。如果能在纸上画出70%的设计概念，剩下的工作就可以用原型来走查完成。 原则三：设定期望 设定期望是基于名为激发（priming）这个心理学方法。如果激发受众，就能引导他们的注意力和焦点。 提前设定期望，就不会出现对尚未做原型的详细交互或者功能有奇奇怪怪的讨论。不要说不会出现这种讨论，因为它最后肯定会出现。一开始就设定恰当的期望，以后就会很轻松了——虽然这些东西还是不是原型的一部分，但可以加到下一次发布中。 激发受众并设定好期望，然后拿出原型并演示给他们看。不要害怕讨论此时原型中还没有的东西，但尽量集中讨论原型中已有的东西。提醒受众这只是个原型，告诉他们有些东西还没有完全画出来

交互设计笔试题总结

1平面设计工作的流程 1)进行设计需求分析； 2)提供设计构思； 3)收集整理资料； 4)选择相关软件进行制作； 5)根据领导或客户的意见进行修改； 6)成稿。 2用户体验（UE）是一种纯主观的，在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群来讲，其用户体验的共性是能够竟有良好的设计实验来认识到。好的用户体验，是一种“自然”的体验。 一、问答题。 3对用户体验及相关行业阅读过的书籍。 4列出至少5个国内外对应网站 Google VS 百度 Face book VS 人人 Twitter(140字符) VS 微博eBay VS 淘宝 Amazon VS 京东YouTube VS 优酷土豆 groupon VS 拉手网 5 jpg和gif格式的不同点，各自应用在哪些场合。 1).jpg格式是由一个软件开发联合组织制定的有损压缩格式，用最少的空间得 到较好的图像品质。对色彩的信息保留较好，适合应用于互联网和需要连续色调的图像如照片。 2).gif格式是一种基于LZW算法的连续色调无损压缩格式，它的另一个特点是 可以存多幅彩色图像，可以构成最简单的动画。GIF文件支持透明特性，有大量的软件使用GIF图像文件，它还适用于icon图。 3).png格式是基于公共专利压缩算法的无损压缩格式，支持8位和24位图像。 PNG文件也支持透明特性，8位的PNG图片与GIF图片基本相同，24位的PNG

可以支持Alpha透明效果，适合用于需要与背景完美融合场合。 6怎样理解“设计”二字 7好的设计有什么标准 8中国web设计与外国的同行比较有哪些优势和不足。 9说说优秀的设计师需要哪些素质和能力。 10一句话解释交互设计 11比较一般的网页翻页设计和移动平台产品的翻页设计。 12网站首页常常会放大量的分类信息和导航栏，怎样改进并提升用户体验 13为什么现在的网站注册名都要用邮箱地址 二、分析题。 14列出至少5个生活中用户体验不方便的案例，如电梯的上与下。选择上述5个案例之一进行分析并解决之。 15说一下你觉得用户体验最好的互联网产品有哪些，为什么 16近三个月着重观察的互联网产品列表。 17小A是一个交互设计师，某日接到一个任务，设计一个表单，一共只有三个输入框，而且都是必填项。小A就开始犯愁了：如果有一项是必填的，我可以给它加上”*”，那剩下的两项就不是必填的。但现在三项都是必填的，我怎么

交互设计案例分析

交互设计案例分析 交互设计是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式相关的界面。 从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。 通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的。 【案例】 几种交互设计方法

1.UCD设计理想流程 1)发现目标用户群。 2)找到目标用户群的期望。 3)找到目标用户群达成期望的典型行为。 4)根据目标用户群期望设计任务，根据目标用户群达成期望的典型行为设计任务执行流程。 5)绘制原型，并尽可能简化流程。 6)找来目标用户，请用户试用，并根据用户操作行为和评价，不断修改原型。 7)完成设计。 2.系统设计 1)系统设计内容主要包括： a)确定设计方针和方法。

b)将系统分解为若干子系统。 c)确定各子系统的目标、功能及其相互关系。 d)决定对子系统的管理体制和控制方式。 e)对各子系统进行技术设计和评价。 f)对全系统进行技术设计和评价等。 2)系统设计通常应用两种方法： a)一种是归纳法，另一种是演绎法。 b)应用归纳法进行系统设计的程序是：首先尽可能地收集现有的和过去的同类系统的系统设计资料；在对这些系统的设计、制造和运行状况进行分析研究的基础上,根据所设计的系统的功能要求进行多次选择,然后对少数几个同类系统作出相应修正，最后得出一个理想的系统。 c)演绎法是一种公理化方法，即先从普遍的规则和原理出发，根据设计人员的知识和经验，从具有一定功能的元素集合中选择能符合系统功能要求的多种元素，然后将这些元素按照一定形式进行组合，从而创造出具有所需功能的新系统。 d)在系统设计的实践中，这两种方法往往是并用的。

交互设计概述·全

交互设计概述 1.　探索思想 如果我们问，交互设计是什么？?家从 IxDC 的定义中能很快知道答案。 交互设计，又称互动设计（Interaction Design, 缩写 IxD 或者 IaD），是定义、设计?造系统的?为的设计领域。在于定义?造物的?为?式（the “Interaction”，即??制品在特定场景下的反应?式）相关的界?。[]1 很显然，如果根据定义去看，我们应该是云?雾?，根本看不懂它的定义，也?法理解交互设计是什么，又为何如此去定义的。?然，这种?法就不可取。?当?法理解?个东西是什么的时候，不妨问问??，为什么这个东西不是其他什么。 所以与其从正?去理解交互设计是什么，不如进?对它进?质疑与攻讦。当然，我们进?质疑与攻讦的?的，不是为了搞个?新闻，去否定交互设计的价值，?是通过这种质疑，去理解交互设计的合理性，存在的意义，从?加深对于交互设计的理解，在宏观层?去触及交互设计为什么是这样的。毕竟，?个合理的东西，从任何?度进?攻击都不应该会有破绽。 所以，第?件事，我们应该问问，交互设计是不是应该必须存在在世界上的？它的存在是有什么必然性吗？世界上没有交互设计，还能不能正常运作？ 交互设计是如何诞?的？交互设计有什么?？我们为什么需要去研究交互设计？ 只有我们肯定了交互设计存在的合理性，我们才能更好地去理解，什么是交互设计。 2.交互设计存在的合理理性 2.1.界定交互设计的标准是什什么？ 既然我们质疑交互设计存在的合理性，我们?先要做的，应该是界定，什么能够称得上是交互设计？能被称为交互设计的界定标准是什么？因为如果没有这个标准，?切皆可以被称为「交互设计」，那么我们所有讨论的案例、理论、设计都将会是没有意义的。我们出?个问题?问?下： ??瓶?的包装设计能不能被称为交互设计？ ??个栏杆的指?设计设计能不能被称为交互设计？ ?飞机的控制系统仪表盘设计能不能被称为交互设计？

产品原型设计的参考步骤

产品原型设计的参考步骤 在产品的整体研发流程中，需求分析部分结束后，就应该形成明确的产品需求了，而此时要做的，是需要把这些产品需求表达出来，从表达效果来看，原型要好于文档的形式。而设计原型也是讲究方法步骤的，一是要提升原型设计的合理性，避免出现头重脚轻的保真程度不一致的情况；二是要减少原型设计所占用的时间，大家各自的工作时间都是很宝贵的，不可能在原型设计上投入过多的时间，因此掌握一些原型设计的方法和技巧相当必要。 产品的原型设计实现一般区分整体和局部，整体上更多考虑信息架构的设计，如功能结构、导航、菜单、布局排版等方面的，局部上更多考虑功能上的交互设计，如按钮点击、反馈、页面切换、局部模块的整体展示等。从设计实现的角度来看，由总到分逐渐细化的过程是比较适合的。下面从整体和局部实例两个部分来讲解原型设计的步骤。 确定产品的整体结构 犹如现在盖房子时的地基和框架结构，整个结构决定了将来的房型样子，及房子是否稳固。而产品的结构设计则决定了产品未来的功能导航结构。一般来讲，我们在做需求分析的时候，都会把几个主要的功能点抓出来，这几个功能点就可以浓缩一下形成产品的初步功能结构。比如要做一个合同管理的功能，要求实现合同信息管理，合同履约管理，合同统计报表等功能，这里列出来的核心功能点就是主要结构。再比如我们要做一个会员管理的功能，注册和登录是必不可少的功能点，那么就可以将其列为会员管理下的两个基本结构。其实每个产品最终确定下来的一级导航栏里面的各个栏目就是产品的功能结构。 确定产品的布局排版 结构确定了之后，就需要对每一个产品页面进行元素的排版，排版之前，一般都会先对页面进行布局设计的考虑。通常我们做产品设计的时候，都会遵循一些已有产品总结出来的布局结构，比如三行三列布局，三行两列布局等，再如左导航右内容的形式，左内容右导航的形式等，这些都是大的布局结构，是整体页面的布局排版。细分到具体页面内容的时候，就需要对每一个内容块的展示位置进行布局，如企业网站首页的一般内容有图片新闻，通知通告，公司新闻，产品介绍，产品展示等等，我们需要对这些内容块进行一定的设计布局，这里的布局结构取决于设计人员对内容编排的把握，不同的布局会产生不同的效果。如电子商务网站，对内容块和广告块的布局排版就非常讲究，因为不一样的布局，所带来的用户点击量和转化率是不一样的。这种情况下，即对某一类产品的布局把握不好的时候，可以参照已有成熟产品的内容布局，因为它们已经有运营数据在支撑。 确定产品的功能模块 布局排版决定了某个产品功能模块的放置位置，接着就可以一块一块的确定原型设计内容，使其接近于最终产品的展示样式。这个时候就要用到原型设计的实例了，比如图片新闻，我们可以用幻灯片效果来做，比如产品展示，我们可以用跑马灯效果来做，具体采用什么样的交互效果来实现功能块要求展示的内容，取决于产品设计人员的把握、用户的需求及用户体

(完整版)不懂交互设计中的体感交互的话,奉劝您考研还是别考交互设计了

不懂交互设计中的体感交互的话，奉劝您考研还是别考交 互设计了 设计史论前方提醒：3388字| 需花费您9分钟 全新的交互模式正占领我们生活、饮食的方方面面。冰箱、面包机、食谱早已不单是一件古董产品，摇一摇，轻轻敲击等简单的手势，就可以完成交互。在你还没有意识到的时候，智能交互化已经在家居生活方式、创新体验餐厅都得到显现，他们都已经将交互设计融入到用户体验和产品服务之中，已经成为你做出消费决策时，至关重要的因素。正因如此，在设计考研中，尤其是工业设计考研大潮中，有很大一批考生是冲着交互设计这一专业来的，其中不乏众多跨专业考生。那么你在决定考交互设计之前，是否有对交互设计做了足够多的了解。本期文章，史论君给大家介绍一下交互设计中的体感交互。设计史论陪您设计考研体感交互（Tangible Interaction）作为新式的、富于行为能力的交互方式正在转变人们对传统产品设计的认识，探究新型的行为方式。体感交互是一种直接利用躯体动作、声音、眼球转动等方式与周边的装置或环境进行互动的交互方式。相对于传统的界面交互（WIMP），体感交互强调利用肢体动作、手势、语音等现实生活中已有的知识和技能进行人与产品的交互，通过看得见、摸得

着的实体交互设计帮助用户与产品、服务以及系统进行交流。那么下图中的手机乒乓游戏曾风靡一时，它的界面模拟了现实生活中的球桌、球拍，用户通过触摸屏幕控制球拍和乒乓球，改变移动的速度的方向即可改变发球力度和方向。刚接触这个游戏的用户并不能很好地掌握游戏技巧，需要进行一定的学习和摸索。而Kinect sports则与之相反，它通过体感技术捕捉用户的肢体动作、手势，很好地模拟了现实生活中的场景。用户直接用自己原来熟悉的技巧就可以很好地掌控游戏。史论君和大家分享一些精彩的体感交互设计案例让你对体感交互设计有一个全面的认识深入体会下体感交互设计在生活工作中都带来的趣味性、实用性。Xbox ONE 游戏机上图中是目前非常流行的微软（Microsoft）公司出品的Xbox ONE游戏机的一系列体感游戏。玩家需要调动全身的动作进行游戏，使自己真正进入游戏情景。不同的游戏需要不同的身体动作进行控制。 智能“魔镜”上图案例展示了一种全新的试衣体验。这种试衣镜利用增强现实（augmented reality，AR）和微软Kinect 体感外设两种先进的技术实现虚拟试衣，消费者无需试穿就能看到真实的试衣效果。智能驾驶控制系统这是宝马汽车iDrive系统（智能驾驶控制系统）中的手势识别功能，它通过3D传感器检测手势动作，以直观便捷的方式控制信息

游戏的原型设计与实现

游戏原型设计的介绍 一．一般意义上的软件原型 1．什么是原型 1.1原型的定义 原型(prototype)：即把系统主要功能和接口通过快速开发制作为“软件样机”，以可视化的形式展现给用户，及时征求用户意见，从而明确无误地确定用户需求。同时，原型也可用于征求内部意见，作为分析和设计的接口之一，可方便于沟通。 1.2 原型的主要价值 * 原型法主要价值是可视化，强化沟通，降低风险，节省后期变更成本，提高项目成功率。* 对于较大型的软件来说，原型系统可以成为开发团队的蓝图； * 另外，原型通过充分和客户交流，还可以提高客户满意度。 1.3 基本要求 对原型的基本要求包括： * 体现主要的功能； * 提供基本的界面风格； * 展示比较模糊的部分，以便于确认或进一步明确，防患于未然。 * 原型最好是可运行的，至少在各主要功能模块之间能够建立相互连接。 1.4 处理方法 原型的处理方法基本上有2种不同类型，即抛弃型和演化型（不同的软件工程书籍称发不同，实质意义则类似）。 可以抛弃原型，在取得的明确需求基础上重新开始设计与开发；也可在原型的基础上继续开发。一般小项目不采用抛弃型原型，否则成本和代价似乎会偏高。 1.5 表达工具 原型的表达工具可以有很多，如果是演化型的原型，当然优先选用软件本身的开发工具。否则还可以应用各种快速显示的工具，例如，HTML，Powerpoint等等，只要能够充分而形象地表达就可以了。 2．原型在软件过程的地位 软件的根本目的是实现用户的需求，提供用户日常使用，解决用户工作中有所不便的问题，提高其工作效率，改进质量，加强管理控制，最终直接或间接地提高其效益。因此软件开发本质上就是需求的处理和实现，而软件原型对需求确定来说具有非常重要的意义。 原型方法包括2个基本过程，即原型制作和原型评价。 如果从需求角度看软件过程，我们不妨可以把软件过程这样划分：

快速原型设计的方法与制作流程

本技术公开了一种快速原型设计的方法，包括以下步骤：S1.获取点云数据；S2.点云拟合；S3.实体转换；S4.实体补齐；S5.模型设计；S6.3D打印；S7.抛光处理；S8.设计原型测量和验证；S9.原型件试制，本技术通过设计一种快速原型的设计方法，解决了因为客户不是专业设计人员因此存在设计意图多变，需求不严谨，从而导致企业需要制作大量的产品模型验证客户设计的问题，能够直接根据客户提供的现有产品和改进意见采用三维设计软件和3D 打印技术，迅速便捷且低成本的评估客户需求和产品可制造性，从而降低企业的风险，同时也能够使企业能够更加灵活的应对客户的各种定制需求，具有很高的实用价值。 权利要求书 1.一种快速原型设计的方法，其特征在于，包括以下步骤： S1：获取点云数据：将实物原件置于三维扫描仪中，调整环境光线通过三维扫描仪采集实物原件的点云数据； S2：点云拟合：将S1中获取的点云数据导入三维辅助设计软件中，消除噪音点后对点云数据进行曲面拟合； S3：实体转换：对S2拟合后的曲面进行修补和替换，并转换为实体特征； S4：实体补齐：对转换后的实体进行观察，并补齐未扫描完整的数据和内部结构细节，对模型进行调整和补齐； S5：模型设计：按照客户的需求对补齐后的实体模型进行改进，并将改进后的模型采用三维制造软件的评估模块和有限元分析模块，进行可制造型验证； S6：3D打印：使用三维设计软件的3D打印模块将模型数据输入至3D打印机，并采用3D打印机将模型以最接近的材料打印出来，制成多个设计原型；

S7：抛光处理：对S6中打印的所有设计原型进行物理或化学方式的适度抛光处理，消除打印后的毛刺和粗大误差； S8：设计原型测量和验证：将多个抛光处理后的设计原型进行尺寸测量和强度验证，并征求客户改进意见； S9：原型件试制：对S8中验证不合格或客户不满意的重复S5-S8步骤，进行重新设计和验证，对S8中合格的模型，调整相应的生产线进行原型件试制，从而确定是否符合工厂的实际生产条件，并将根据试制件原型件的质量确定是否生产。 技术说明书 一种快速原型设计的方法 技术领域 本技术涉及快速原型技术领域，具体为一种快速原型设计的方法。 背景技术 随着全球化的加速，制造业的竞争越来越激烈，产品越来越向多品种、小批量、高精度、高性能和低成本方向发展，因此要求制造业能够尽量缩短产品的设计和制造周期才能够适应越来越快的市场变化，尤其是当今客户越来越喜欢定制产品，具体为客户提供产品的构想原型或者现有产品的模型，希望相应厂家根据客户需求进行改进和制造，在这一过程中如果按照传统方式，客户每提供一次需求或改进建议都对现有生产线进行调整从而制作产品原型的方式不仅费时费力而且成本大，如果能够采用快速原型的方式就能够解决此类问题。

交互设计实例指导

交互设计指导原则： 为了更好的促进网站体验设计，应遵循以下原则： 一、输入控件的自动聚焦和可用键盘切换输入焦点。 二、可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的。 三、鼠标动作提示和回应： 对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。 四、尽可能早的在客户端完成输入数据合法性验证。 五、根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面（加载提示）。 六、防止表单重复提交处理。

七、页面链接是打开新窗口、使用原窗口还是弹出窗口的原则： 首页上链接可以打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可以使用弹出窗口方式。一般情况下应该使用原窗口，把是否保留原窗口内容的权利留给用户。 八、尽可能少的排列可选项，尽可能少的安排操作步骤： 根据用户操作习惯安排尽可能少的操作菜单选项，同时要保证尽可能少的操作步骤。在不降低功能多样性的前提下减少菜单项和操作步骤是用户友好的设计。 九、操作逻辑无漏洞，保证数据是操作安全的。 十、用合适的方式标识用户和控制登录过程（可直接进入的URL）。 十一、用合适的颜色控制注意力。

十二、被中断的操作是可恢复的。 以上原则有利于避免发生不愉快的操作体验。 假定讨论的WEB页面都是功能正常，也符合美学观点的，但与以上原则有冲突。若发生这种情况，基于“实用的就是美的”观点，建议酌情放弃原先的美学观点与功能设计。 交互设计需要考虑的5个维度： 【易学性】 系统应该很容易学习，这样用户就可以快速开展工作。 【高效率性】 一旦使用即可提高生产率。 【可记忆性】 即使离开一个系统一段时间，之后重新使用这个系统，也不用一切从头学起。

纸上原型设计方法说明及使用规范

纸上原型设计方法说明及使用规范Instruction of Paper Prototyping ALIBABA (CHINA) UED Team 2009 Collected by Li Long

目录 引言 2 1.1 项目综述 1.2 文档说明 1.3 要点说明 什么是纸上原型 3 2.1 原型的定义及作用 2.2 关于纸上原型 2.3 纸上原型与手绘草图的区别 为什么使用纸上原型 6 3.1 我们为什么要使用纸上原型： 3.2 纸上原型的一些弊端 怎样使用纸上原型（使用规范） 8 4.1哪些情况下需要使用纸上原型（适用情况）： 4.2 准备工具 4.3 使用中的注意事项 4.4 纸上原型测试时需注意的要点： 纸上原型设计说明更改和追加说明 12 5.1 更改说明： 5.2 追加说明：

纸上原型设计方法说明及使用规范引言 1.1 项目综述： 此项目的目的是整理、定义、说明“纸上原型”（paper prototyping，简称“pp”） 这一快速低成本的原型设计方法，并把其作为标准化设计工具引入到今后的交互设计 流程当中。 通过在交互产品设计的初始阶段对pp的使用，设计师们可以更快速的构建产品原型， 更早的开始需求确认，更方便的对方案进行沟通测试和修改，从而降低成本、节约时 间、提高项目效率和产品质量。 该项目为期3周，历经火热头脑风暴1次，大小讨论和应用实践n次，在不断的整理 分析和结论迭代验证之后，完成了最终的文档输出。感谢俞头，耿莉，塔瑞，马丁， 宗博，小范，唐唐，若男，张云，金超和所有阿里巴巴中国站用户体验部的同事。 1.2 文档说明： 本文档是对纸上原型定义、特点、应用场景及建立过程的描述、解释以及示例呈现。 1.3 要点说明： ·原型（prototypes）是把系统主要功能和接口通过快速开发制作为“模型”，以可 视化的形式展现给用户，用以征求意见，确定需求。同时也应用于开发团队内部， 作为讨论的对象和分析、设计的接口。 ·原型的根本目的不是为了交付，而是沟通、测试、修改，解决不确定。 ·纸上原型是一种原型设计方法，它应用于交互产品设计的初始阶段。 ·纸上原型具有快速构建、轻松修改、容易操作，关注流程，抛弃成本低的特点。 ·特别注意：纸上原型不是手绘草图。

(完整版)用户体验与交互设计

商业竞争三大动力： 商业模式、技术、用户体验 用户体验： User Experience缩写为UE或UX，指用户访问一个网站或者使用一个产品时的全部体验。 用户体验设计原则： 以此概念为中心的一套设计流程。包括有目标用户设定，满意度的范围和指标设定，用户需求的功能，交互研究，系统反馈和最终的报告和结果。 关于用户： 用户是懒惰的 用户没有耐心，喜欢放弃 用户体验要素： ?功能性 ?有用性 ?易用性 ?可靠性 ?可发现 ?情感因素 ?创造性 ?渴望的 用户体验评估： ?任务方面 ?耗时 ?完成率 ?出错率 ?帮助有效性 ?满意度方面 ?初体验 ?可学性 ?功能 ?易用性 ?速度 ?可靠性 ?综合性 用户体验类型： ?感官体验 呈现给用户视听上的体验，强调舒适性 ?交互体验 呈现给用户操作上的体验，强调易用/可用性

?情感体验 呈现给用户心理上的体验，强调友好性 ?浏览体验 呈现给用户浏览上的体验，强调吸引性 ?信任体验 呈现给用户的信任体验，强调可靠性 用户体验的目的： ?让用户在使用产品时无障碍 ?提高用户对产品的满意度，从而提高忠诚度 ?留住旧用户，发展新用户 怎样开展用户体验： ?划分用户群，确定目标用户 ?走近目标用户，发掘用户需求 ?在用户需求与商业需求间寻求平衡点 ?规划产品的发展策略 ?快速设计、研发、测试、上线及调整 ?始终提供给用户有用的东西 交互设计： 交互设计试图提高产品或系统的可用性和用户体验。他首先研究、了解某类用户需求，然后通过设计来满足甚至超出用户需求。 保证产品功能，同时缩短用户学习曲线 提高任务完成的准确性和效率

互联网产品的交互设计该如何做： ?信息架构 根据自己所在的组织范围内的具体情况，推动商业、内容、用户三要素均衡发展。 信息架构类型： ?静态展示型，例如sina等门户网站 ?交互型，例如开心网等社区网站、淘宝等电子商务网站 ?流程设计 即功能流程设计，例如注册流程、购物流程的封装设计 ?界面设计 又称蓝图设计或原型设计，使用一定工具软件对功能和内容进行组织和表达，目的是直观呈现设计思想，并起到有效的信息传达作用 ?自然语言法： ?概括待表达信息 ?将概括好的信息排序 ?使用界面语言翻译 ?结构图法 ?总结归纳全部待表达信息 ?画树状图 ?画页面草图，Demo ?交互细节设计 重点在于文档化

系统策划：游戏原型设计介绍

系统策划：游戏原型设计介绍 一．一般意义上的软件原型 1．什么是原型 1.1原型的定义 原型(prototype)：即把系统主要功能和接口通过快速开发制作为“软件样机”，以可视化的形式展现给用户，及时征求用户意见，从而明确无误地确定用户需求。同时，原型也可用于征求内部意见，作为分析和设计的接口之一，可方便于沟通。 1.2 原型的主要价值 * 原型法主要价值是可视化，强化沟通，降低风险，节省后期变更成本，提高项目成功率。 * 对于较大型的软件来说，原型系统可以成为开发团队的蓝图； * 另外，原型通过充分和客户交流，还可以提高客户满意度。 1.3 基本要求 对原型的基本要求包括： * 体现主要的功能； * 提供基本的界面风格； * 展示比较模糊的部分，以便于确认或进一步明确，防患于未然。 * 原型最好是可运行的，至少在各主要功能模块之间能够建立相互连接。 1.4 处理方法 原型的处理方法基本上有2种不同类型，即抛弃型和演化型（不同的软件工程书籍称发不同，实质意义则类似）。 可以抛弃原型，在取得的明确需求基础上重新开始设计与开发；也可在原型的基础上继续开发。一般小项目不采用抛弃型原型，否则成本和代价似乎会偏高。 1.5 表达工具

原型的表达工具可以有很多，如果是演化型的原型，当然优先选用软件本身的开发工具。否则还可以应用各种快速显示的工具，例如，HTML，Powerpoint 等等，只要能够充分而形象地表达就可以了。 2．原型在软件过程的地位 软件的根本目的是实现用户的需求，提供用户日常使用，解决用户工作中有所不便的问题，提高其工作效率，改进质量，加强管理控制，最终直接或间接地提高其效益。因此软件开发本质上就是需求的处理和实现，而软件原型对需求确定来说具有非常重要的意义。 原型方法包括2个基本过程，即原型制作和原型评价。 如果从需求角度看软件过程，我们不妨可以把软件过程这样划分： 2.1 需求收集和分析 搜集需求得到需求说明书，了解软件要做什么，做成什么样，解决用户什么问题。 这时候软件公司以书面文档方式提出，例如需求问询表等。 2.2 提供原型并进行评价 制定原型开发计划，根据用户需求及不确定的高风险部分进行原型开发，在内部进行原型评价，请客户进行原型评价，以保证确实反映了用户的真正想法。 2.3 实现需求 当前的软件开发过程常常采用迭代方式进行开发，逐步求精，以降低风险和成本。对迭代的次数，每次迭代的里程碑，要实现的目标，及可提交的成果必须有可验证的清晰的计划。项目管理是一种艺术，迭代规划及里程碑定义都是一种挑战、一种艺术，但项目管理不在本文讨论范围。 2.4 需求变更 需求变更是正常的，也是难免的，应允许用户和开发团队自身对需求进行变更。变更处理的关键在于跟踪和控制，如何使产生的影响应得到控制，这属于配置管理的内容。 3．原型方法的一般过程 基于原型方法在整个需求过程中的地位，我们需要把原型法和需求处理放在一起进行讨论。采用原型法的一般过程如下图所示：

交互设计案例分析

交互设计案例分析 实验三界面设计一般原则的实践案例 【实验目的】 通过上机实践体会界面设计的一般原则，从而增加对相关的界面设计模式的理解。【实验环境】 IE 5.0以上, 可以上网。 【实验要求】 参照实验指导给出的界面设计案例，自己去发现符合界面设计原则的案例。 案例来源可以是任何可以获取到的系统或应用。例：淘宝、百度、新浪、QQ、微信、人人网、相关网关、游戏、移动应用等。 尽可能是找正向案例，如果有合适的反向案例也可。 将“你的发现”记录下，有图有文有真相。 【实验指导】 (一) 界面一致性 设计模式 界面设计在同一个系统内保持一致；界面设计与常用软件、用户使用习惯保持一致 ?同一系统内界面风格保持一致。每种控件的只有一种样式：窗口、按钮、菜单、 对话框等；同一系统内字体、颜色、布局、位置、尺寸、间距等尽可能保持一种格 式。

界面风格（例：菜单组织、快捷键设计等）与常用软件、用户使用习惯保持一致 你的发现 ※导航一般会在页面的左侧和上方，界面风格与常用软件、用户使用习惯保持一致，同一系统内界面风格保持一致。

(二) 快捷方式 设计模式 对常用操作、烦琐的操作、突发状态下的操作、最近频繁操作等提供快捷操作方式。 ?提供快捷方式，更快的操作入口，以减少查找时间。 ?最近频繁使用列表，更快的操作入口，以减少查找时间。 ?操作过程和步骤优化，去除不必要的按钮，以减少交互次数。 ?一键式、打包操作，以减少操作过程的烦琐 ?批处理操作，以减少重复操作。

提供默认值（例：当天日期、用户常用选项等），以减少不必要的用户输入 你的发现 ※发邮件时，发件人自动显示，无需格外备注 (三) 错误处理 设计模式 对容易误操作的、操作会带来不良后果的、重大的错误必须要提供错误处理

产品原型设计工具

产品原型设计工具 推荐： 1.Axure，支持流程图和示意图，但流程图不能直接点击跳转，支持中文，输出 HTML、DOC、JPG格式。 2.iRise，支持流程图和示意图，流程图非常灵活，直接跳转，不支持中文。输 出HTML、DOC、JPG格式。 3.Prototype Composer，功能非常齐全（建立项目、多层次的流程设计、界面 设计、数据流转设计等等）免费使用，但使用复杂度高，支持中文。不支持HTML输出，但可以在演示。 4.GUI Design Studio，GDS可以做WEB原型或者客户端软件原型设计，内置了 很多系统组件，并且自带了流程控制和命令触发判断。 网友推荐： 以前曾尝试找一个很理想的原型图设计工具，但因为条件仓促，总是用Word, 或VISIO就草草应付了，今天看到Scott McDowell 的这篇Visio Replacement? You Be the Judge 。就在这里整理一下，顺便做一个同行调查。 除去我们已经熟知的微软Visio ，下面是一些更针对交互设计的原型设计工具（都付有预览和试验下载）： Axure ?预览动画 ?试用版下载地址

Elegance Tech ?预览动画 ?试用版下载地址iRise

看起来是功能最完整和专业的一套提供，不像一般的软件公司，iRise更注重产品服务和技术支持，所以提供的是一套企业分析和相关咨询服务，并拥有自己的需求管理平台，和交互原型文件阅读工具。 ?预览动画 Serena ?预览动画 ?试用版下载地址

Simunication 目前被使用较多的一款软件，具有简易创建和维护特性的项目模拟工具，从项目经理，界面设计，程序开发到项目测试，通过这个工具，可以 ?预览 ?试用版下载地址 Sofea ?产品特性

交互设计教学大纲.doc

教学大纲 （2013-2014 学年第一学期） 课程名称：交互设计 课程代码： GC2012 计划学时： 34 课程性质：专业、选修课程负责人：李树波 学分： 2 面向专业：数字媒体技术（移动互联网游戏开发) 一、课程的性质、地位和作用 本课程是理论实践课程, 所教课程围绕“以人为本”的设计原则，重点讲述人机交互的 基本概念和重要意义以及发展历程、软件系统的人机交互设计原则和方法、网络系统的人机交互设计原则和方法、人机交互技术与设备、人机交互开发工具与环境，简要介绍人机交互 的认知心理学、计算机硬件的人机交互设计、人机交互技术的发展趋势, 并培养学生利用网络交互设计制作做实际作品的能力。 二、教学目的和要求 1．掌握交互设计及其软件的基本概念、基本结构、工作原理及设计方法，最终了解和 掌握其工作原理，具有初步的设计能力。 2．学会使用设计类工具分析、设计，通过全面培养学生的分析、设计、开发、使用能 力，提高学生分析问题、解决问题的自主创新能力。 3．通过“课程实验——实验课程——设计训练”循序渐进的训练，锻造学生的数据系 统分析、设计、实现能力。 三、课程的主要内容，课程内容的深度、广度、重点、难点 第一部分：理解目标导向设计 第一章交互设计概论 什么是交互设计 提出交互设计的背景 交互设计和周边学科 第二章基于 UCD的用户需求研究

UCD 的基础设计理论 心理模型和实现模型 用户研究：理解用户需求及搭建用例图 第三章提供高效能和愉悦 设计体贴的软件、设计智能软件 改进数据检索，改进数据的输入 为不同的用户需要进行特定设计 第四章设计模式应用及细节应用 外观设计 隐喻—图标的外观设计内涵 习惯用法和启示。 第五章交互细节：鼠标及其操作 直接操作和定点设备 鼠标的选择和拖放 操作控件 对象及链接 思考如何精确定位鼠标 第六章控件及其行为 窗口行为 使用控件 菜单及使用菜单 使用工具条和工具提示 使用对话框 如何设计优质对话框 四、课程的主要实践教学环节 主要实践教学环节分课堂和课后的设计两部分，并且进行分组作业，以任务为驱动，来学习交互设计中一些原则，根据所学的原则应用到实际的制作软件或者相关作品之中。 五、课程的主要教学方法与手段的考虑

使用GUI Design Studio进行原型设计

使用GUI Design Studio进行原型设计 如何制作界面图 在实际开发中，我们常常会用很多工具，绘制界面图。用于描述我们的产品的某个功能对应的界面，将来会是什么样子。 可以使用的工具很多（visio、smartdraw等），也有用excel画框图，来标明程序的各个区域的。其实使用gui design studio，可以很容易的 话界面图。不仅轻松，而且十分的真实，既获得一个很好的效果，也能减少沟通上的一些不便。不仅可以向非开发人员展示，也可以向开发人员展示 你的设计。 1、新建设计 打开gui design studio，其默认会打开welcome工程。由于我们只是做一个界面效果图，所以不会用到工程那一块的功能。我们就直接使用File 菜单下的new菜单项（CTRL+N）新建一个设计。 2、添加界面控件

右边的面板叫设计器面板，它由多个页签构成。分别对应的功能是：工程面板、元素面板、图标面板、注释面板、故事板、备注面板。而我们要用的是第二个面板“元素面板”。在这个面板上分为上下两部分，上部分是一个分类列表，下部分为各个分类下的元素。当你选择一个分类后，下面的面板就会显示该分类的元素。 要将元素添加到设计文档中，有两种方法。1）用鼠标双击要加入的元素 2）用鼠标单选要加入的元素，不要放鼠标左键，将对应的元素拖拉到文档中。

整个设计文档中间有一个红色线条围成的矩形，这个区域代表屏幕区域。在这个区域里的元素，在模拟器运行中将显示在屏幕中，对于不在这个区域的元素将不会显示。那么其他区域到底放什么呢，主要是放置在作为事件等动作，触发后被切换进入屏幕区的元素。 我们拖拉一个窗体作为整个设计的开始，你会发现这个窗体边缘有淡淡的绿色。这个绿色表示是整个设计的主元素，默认的情况studio认为第一个就是主元素。当然你也可以使用F10或使用右键菜单来指明主元素（此时淡绿色会变为深绿色）。主元素是模拟器作为显示的起始元素，也是当该设计作为其他设计文档的组件时候，展现的起始元素。如下图所示： 好了我们模拟一个制作一个登录界面。 双击拖出的主窗体，则会弹出属性编辑器（所有的设计元素，双击后都会弹出属性窗体，当然你也可以选择点右键菜单来完成该工作），我们输入“xxxx 协同办公系统”，其它属性不用修改。依此类推，我们放入标签和文本输入窗，来完成用户名和密码。最后加入一个按钮，将它的文本改成登录。效果如下：

互联网产品经理必备原型设计

互联网产品经理必备 Axure快速原型设计 Axure RP 可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio, Omnigraffle、Illustrator、Photoshop、Dreamweaver, Visual Studio、 FireWorks、GUI Studio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计和版本控制管理。 设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。Axure RP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 为什么要进行原型设计 1、原型的作用和好处 ―没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。Prototype不只可确认需求，它更可赢得顾客的心。‖ ——阿伦M.戴维斯和迪安A. 莱芬韦尔《用需求

管理快速交付高质量的软件》的作者（Rational软件公司/IBM）根据调查报告显示，大约66%的软件开发不是失败，就是超预算、延期或交付缩水的功能。软件失败或亏损的前三大原因为： 1、缺乏使用者的参与； 2、需求或规格不完整； 3、需求或规格变更； 传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在，这些需求更是不适用于目前快速发展的环境。而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。 快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。 目前全球有财富1000大的公司和重要机构在使用Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。基础篇 在基础篇中，你将完整的学习到关于Axure的基本和高级功能。