交互设计全档案（共5篇）

第一篇：交互设计全档案

阿里巴巴公司内部资料：交互设计全档案 网址：http://作为交互设计并不适合? 答: HTML是垃圾!许多HTML的限制能通过好的设计来弥补，但是很少有程序员能听从设计师的意见。越过HTML的限制也需要大量复杂的代码!问: WEB将走向哪里？既然HTML是垃圾

答: 更聪明的浏览器!它应当能记住信息，将相关资料写到磁盘上，和服务器交互通信。它应当有更好的交流方式，比如象拖拉、卷动、刷新

问: “往磁盘上写信息”安全吗? “聪明的浏览器记录资料”与隐私权相冲突吧? 答: 对!那是需要解决的问题。但是解决起来并不困难

问: 如果交互设计师做错了一些事情呢？他们在项目中的地位是如此重要，所以很容易毁了所有的事情 答: 如果程序员做错了一些事情呢？ 问: 解雇他? 答: 对，专业人员不能犯错误!问: 对于一个项目中有限的时间及好的交互设计之间的冲突你是怎样看的? 答: 为什么有时间限制? 谁将时间定得这么短? 为什么定得这么短? 他缩短时间是为了什么? 问: 时间就是金钱 答: 浪费了的时间是金钱

问: 老板关心他的钱，我们关心项目

答: 管理者将时间期限定得短是因为他们不知道程序员在做什么。交互设计师能告诉管理者程序员在做什么。交互设计师能给程序员争取更多的时间

问: 我认为交互设计关注的焦点是用户的需求而不是设计

答: 对！!就象我在前面所说的，交互设计和用户界面设计不是一回事!问: 那么谁负责确定软件将要做什么? 交互设计师吗? 答: 交互设计师就是具有能非常好地解答上述问题，以便别人顺利完成任务的人 问: 谁控制过程? 交互设计师吗? 答: 过程应该由管理者来控制 问: 交互设计师的工作职责是什么? 答: 程序的外观和行为应该由交互设计师控制!技术和编码应当由程序员控制!问: 那么请告诉我，交互设计师在一个项目中负责做什么? 他担负什么样的职责? 答: 交互设计师应当负责程序做什么和怎样表达, 我们设计项目的第一部分是针对问题域详细研究项目 问: 交互设计师和项目管理者可以是同一个人吗? 答: 为什么? 为什么让一个领域的专家工作于另一个领域?

下图是CDC招聘交互设计师的工作描述，我将选择其中三点分析。

1、参与产品规划构思

刚开始的时候，我认为交互设计师的任务就是按照产品同事提交的需求绘制原型稿件，其间，我们去和产品同事讨论布局的合理性，操作的易用性，流程的通畅性。

其实不然。一个成功的产品需要团队里的产品经理，设计师，以及开发同事对产品的潜在特性和市场能力有统一的认识并一起维护这种认识。由于对需求了解的不够透彻，也会经常和产品同事在沟通的过程中产生很多不必要的争执。所以，当一个交互设计师连产品最基本的规划方向以及后期的运营目标都不够了解的时候，他又怎么能做到和项目组同事齐心合力的创造双赢的局面呢？

因而说应该更多的参与到产品规划中去，做一个提需求并且做需求的设计师。

2、分析业务需求，并加以分解归纳出产品人机交互界面需求

产品同事很多时候会提出说，这里的数据量没有达到预期，我们要优化它。这个时候，我们首先应该去分析产生问题的原因，比如是用户不懂用？还是不想用？还是别的什么原因？这个时候，我们可能就会介入用户测试的环节了，多跟用研同事学习用户测试的方法、注意事项以及分析方法也是很重要的一个方面。充分了解用户需求和产生问题的根源之后，我们才能提出更好的优化方案。

而在寻找问题根源以及解决办法的时候，我们也可以运用5-whys的方法。5-whys是对一个问题点连续以5个“为什么”来自问，以追究其真正原因。这个方法是丰田公司首先提出的：发现问题的时候，是从表象往根源来推导，而解决问题的对策则是从根源往回推。详见下图示例：

3、参与公司前瞻性产品的创意设计

创意、创新最基本的来说，是源自于生活。《创造突破性产品》中提到“人们不但希望通过使用某种产品来完成或改善某项工作，他们还希望产品能够丰富、增进其生活体验，并且把这种体验联系到个人的某种梦想。”比如QQmusic的桌面歌词，把KTV的体验搬到了显示器上，它很好的满足了当下家庭音响设备趋于完备，大家喜欢没事吼吼的生活方式。再比如DivX player onMac提供了一种在非全屏播放的模式下，将播放器以外的部分整体变暗的体验，与真实的影院无异。

创新源自于生活的一大优势在于，由于用户在生活中已经习惯了的一些体验，当我们把这些体验搬到互联网上的时候，就极大的减少了用户的学习成本，他们可以很快速的学会并使用产品。

创意、创新的另一种方式是类似于苹果产品的流程上“一切从简”，我一直记得第一次使用Ipodnano，却不知道如何关机的经历。在使用传统的MP3时，我们习惯了有一个on/off操作，每次关闭音频播放之后，会提醒自己把键盘锁上。谁都不会喜 欢MP3在某个不小心的时刻被开启，一直播放导致关键时候没电的经历，这就和直板手机放在裤兜里却不小心打出了一通不该打出，更不该被听到的电话一样不爽。而nano很巧妙的回避了关闭电源却忘记锁键盘的尴尬。其实关闭电源的之后用户立刻需要的不正是锁键盘么？既然用户在进行一项操作的最终目的是另一项 操作，那么是不是可以合二为一呢。nano告诉我们，是的！

一切从简的创新在WEB2.0的时代层出不穷，比如以twitter为首的微博客，比如百度发起的“框计算”概念，这些产品都在试图简化所有的用户行为以及思维，一切都让后台来完成吧，你们只需要在那一点点空间做你们想做的那一点点的事情。

创意、创新的第三种方式是体验上“全方位”。正如星巴克提供全方位的喝咖啡服务一样，Google在Searchology大会上提出了“Richsnippets”（富文本）的概念，通过展示一小段网页摘要的方式来帮助用户找到所需要的网页，而摘要的内容可能包括对产品的评价和打分。参见下面几个图示：

那么对于搜索引擎而言，用户可以通过搜索结果中的信息来快速确认某一条结果是不是符合他的搜索期望，从而可以立即跳转到该页面，这不正是搜索产品的目的么？快速而准确的跳转。

创新的思维对于体验设计的重要性是众所周知的，分享给大家一本近期在看的书籍《思维导图》，这本书提供了一系列刺激练习和大量颇具启发性的图片集和演示这种技巧的原创性思维导图。大家共学习共勉之。

什么是交互设计

从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人 ”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机关系，从而可以有效达到使用者的目标，这就是交互设计的目的 交互设计的定义：

简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。

交互设计借鉴了传统设计、可用性及工程学科的理论和技术。它是一个具有独特方法和实践的综合体，而不只是部分的叠加。它也是一门工程学科，具有不同于其它科学和工程学科的方法。

交互设计是一门特别关注以下内容的学科：

1、定义与产品的行为和使用密切相关的产品形式。

2、预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解。

3、探索产品、人和物质、文化、历史之间的对话。

交互设计从“目标导向”的角度解决产品设计：

1、要形成对人们希望的产品使用方式，以及人们为什么想用那个这种产品等问题的见解。

2、尊重用户及其目标。

3、对于产品特征与使用属性，要有一个完全的形态，而不能太简单。

4、展望未来，要看到产品可能的样子，它们并不必然就像当前这样。

总结：交互设计是什么（What is Interaction Design？）

说了那么多“不是”、“不仅是”，现在来总结一下关于交互设计的定义。先来看Alan Cooper对交互设计的经典定义： 简单地说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外观元素的设计和定义。交互设计首先规划和描述事物的行为的方式，然后描述传达这种行为的最有效形式。交互设计是一门特别关注以下内容的学科： ■定义与产品的行为和使用密切相关的产品形式

■预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解

■探索产品、人和上下文（物质、文化和历史）之间的对话（Riemann和Forlizzi）

再来看《Interaction Design——Beyond Human-Computer Interaction》一书中作者对交互设计的定义：

交互设计指的是：设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”

下面是我对“交互设计”的理解/定义：

所谓交互设计，是指设计师对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程，简单说，即设计和定义使用者如何使用一产品达到其目标，完成某一任务的过程。

第二篇：交互设计档案

交互设计师的基本素质

首先，谈谈我个人对交互设计师基本素质的看法。从我个人的理解来看，可以简单归纳为九字诀：“听、看、想、说、磨、做、验、写、讲”（如图1.1）。

图1.1 1）听：做一个交互设计师，最重要的一点就是要懂得倾听（这里蕴藏了一个隐晦的性格属性：谦虚！）。通常情况下，我们不是用户，所以很难 100%代表用户，更左右不了老板，所以我们首先要有听的本事，把来自用户的、老板的、PD的、视觉的、前端的、开发的、测试的、市场的、业界的等各方面的声音都听过来，听进去。

2）看：99%的情况下，交互不是一蹴而就的创造工作，它是站在前人肩膀上不断迭代更新的行为过程。我这里指的“看”是要求设计师能博览、能泛猎，看到好的，见过差的，什么都略懂，交互才能变得很美„„

3）想：交互是思考的输出产物和表现形式。当设计师将之前听到的和看到的内容在头脑中加以整理、分析，经过发散的创造性碰撞和严谨的逻辑论证后，逐渐得到了相对靠谱的交互产物。这个思索分析的过程贯穿于交互设计工作流程的每个环节。

4）说：一个能说会道的人不一定是一个优秀的交互设计师，但一个优秀的交互设计师必然是一个善于准确表达自己想法和观点的人。在这一点上，我坚持交互是一门分享的学科，需要的是开放的性格和良好的沟通技巧。

5）磨：耐心、技巧、热情的综合表现。在一个项目的进程中，不可避免的会面临很多的挑战，优秀的交互设计师善于发挥“磨”的精神，他们怀揣对交互专业的无比热情，以无所不用其极的技巧，耐心的缠死一个又一个质疑方，最终让大家认同并帮助推动设计的实现。通常来说，一个优秀的交互设计师会是一个优秀的Idea推销员。

6）做：交互设计师专业度的核心表现。俗语说得好，是骡子是马，牵出来遛遛。对于交互设计师来说，之前的环节做得再好、再完美，也只是停留在设计师自己的脑子里，游荡于听众们的耳膜间。如果理论落实不到实际，那所有的想法都只是空中楼阁，你之前所有的努力都只是在佐证你的空泛和不切实际。所以我们不仅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是这样认为：“做”决定了一个交互设计师是不是靠谱，决定了一个交互设计师的高度，是一个交互设计师最根本的专业素质。

7）验：用户体验设计，最终是要落实到用户的身上的。客观中立的验证、分析、评估能力是一个优秀交互设计师的重要素质。无论个人还是团队，设计的成果都需要通过精准的测试才能算得上合乎标准，此时，一颗平常心和一双敏锐的眼睛是设计师最需要的。

8）写：分析、归纳和总结能力的综合表现。一个项目，无论成功还是失败，总是有很多地方值得设计师本人或后来人借鉴。交互设计之路不是一座苛求零失误的独木桥，但绝对是一条要求零“重复”失误的单行线。评价一个设计师的专业度，很重要的一环就是看他能不能多犯前人从来没有犯过的错误，并能有效总结给后来人。于是，他就成了大家，路就这样被趟了出来„„

9）讲：演讲能力。这里所指的是在项目后期进行的交流分享。一个专业的交互设计师会站在宏观的高度上，以平和的心态同他人沟通，验证自己先前设计的合理性、全面性和科学性，更好的提高自己的专业能力，为今后的交互设计做好准备。

·交互专业度的具象化表现

刚才讲了很多，但总体来说还是偏理论，还是让人摸不着头脑，虚幻的概念最大的优势在于它的颠簸不破和四平八稳，谁也揪不住它的小辫子。但这不是我的风格，更不是我写这篇文章的初衷，我希望的是抛砖引玉，给大家带来一些真正意义上能直接使用的东西。所以，接下来，我们来些“干货”，玩点简单粗暴的„„

图1.2

根据阿里巴巴目前的产品开发流程（如图1.2），交互设计是大环节中的一个小点，抛开杂乱的干扰信息，单纯考量交互设计师在过程中的参与度，我们就能得到一个理想化的交互设计行为流（如图1.3）：

图1.3 流程没什么好讲的，更没什么好争辩的，无非也就是增加一个、减少一个、偷换概念、细分归纳之类的忽悠。我这里想和大家分享的是流程中每个环节的专业输出物，我有一个激进的想法：如果某人能精准的完成某些公认的标准化输出物，那他99%可以被称为是一个“专业”的75分交互设计师了，剩下的 1%，也许是拼RP„„

这里，我先简单交代一下即将涉及到的流程节点、对应输出物的图形色块的代表含义。

1）流程环节说明（如图1.4）：

图1.4 2）流程环节各输出物说明（如图1.5）：

图1.5 在我看来，一个专业的交互设计师，在一个理想化产品设计的过程中，有一些是属于必须的输出物，有一些属于最好有（推荐）的输出物，还有一些属于可有可无的输出物。同时，根据项目的实际情况和参与角色的分工情况，存在一些交互设计师可能需要负责的输出物，具体细节我将在下面逐一介绍。1）需求获取阶段：

此阶段通常来说会由PD等外部资源发起，输出物主要是FRD文档和时间计划文档，用以描述问题、提出初步目标，假想可能的解决方案、预估资源并梳理时间计划等。当然，对于从UED内部发起的项目，这两部分的输出也可以由交互设计师完成，属于可能责任输出物； 2）需求分析阶段：

历史数据的关注和分析阶段，基于项目本身，要针对竞争对手、行业现状等做详尽的收集和分析，其中的关键考核点是要做必要的头脑风暴，获取发散而全面的信息集合。在此阶段，竞争分析报告和头脑风暴输出物是交互设计师专业度的重要表现。

3）用户访谈阶段：

对于一些条件允许的项目，我们建议能在项目初期寻求一些用户的信息，定义一些用户的属性，这些对于之后的交互设计都会是坚实的基础。一个高专业度的交互设计师甚至会主动介入访谈问卷的设定工作，客观的参与调研报告输出的全过程。

4）需求修正阶段：

专业的交互设计师通常不甘于沦为一个纯粹的资源，抗拒被动的接受命令。我们之前经历的需求分析和用户访谈都是为掌控主动权而做的准备。如今，我们有理有据，应该主动出击，和需求方讨论研究需求的合理性、可行性，明确最终的修正目标，并对达成目标所涉及的重点突破点有理性的分析判断，筛选出各设计点的优先级。5）设计草稿阶段

项目目标和设计方向确定下来后，我们将进入核心的设计环节。作为交互设计师的“杀手锏”，交互流程和线框草图当然一个都不能少，但此时我更想强调一项辅助性质的调研分析工作。从交互的角度来看，在大流程大框架敲定的情况下，交互设计师通常会投入更多的精力在一些核心的设计点，也就是我们在需求修正阶段确认的设计重点。此时，专业的设计师绝对不会拍脑袋设计，更不会想当然出方案，而是会针对这些核心点做业界调研和分析，为自己即将进行的设计寻求一个足够宽广厚实的肩膀。6）设计细化阶段

第一阶段的设计工作将在此阶段性输出。我们回顾一下，截止此时的设计产物有：用户调研报告、FRD确认文档、交互流程、线框草图、核心设计调研分析、核心设计详细说明、交互流程整体说明等。基本上，一个交互设计师的专业度，已经可以根据此时的输出物数量、质量看出个大概齐了 7）专家评审阶段

一个专业的交互设计师，要谦虚。此刻，我们进入小范围专家评审的阶段了，三个臭皮匠还顶一个诸葛亮呢，更何况是参与评审的专家呢。此时设计师的专业度就体现在 “听”、“说”和“想”这三诀上，耐心的做好评审记录，有理有据的同专家们进行专业沟通，并确认最终的结论和方向。8）设计优化阶段

经历了专家团的考验，又该抖擞精神重新上路了，没什么好说的，把过程做好了，你的专业度也就到位了。设计优化阶段的投入度和产出将直接影响到后续Demo及测试的效果，和最终设计也息息相关，各位交互设计师们，千万别打瞌睡了！

9）仿真Demo开发阶段

终于到了仿真Demo的模型化阶段啦，这时尽管并没有直接的交互输出物，但还是需要交互设计师用百分百的挑刺精神，协助视觉和前端精准的达成我们之前的设计，严格保证最佳的输出效果。10）测试验证阶段

仿真Demo出来之后，将进入最后的测试验证阶段，根据项目的实际情况，可能是QA测试，也可能是用户测试，总之，这个环节能帮助设计师最后把关设计的合理性，专业如你，一定要亲自跟进测试并给出最终的评估报告，哪些点是前期没有考虑周全的？那些点是成功的？哪些点是必须立即改进的？哪些点能以后再说？哪些„„ 11）完成设计阶段

最后的设计阶段，根据之前的测试验证评估报告，交互设计师要对所有之前的输出做一次严格的检查和修正，完成最后的输出。

12）开发上线阶段

盯紧视觉设计师和前端工程师吧，最关键的时候终于到了，经历了那么多纷繁复杂的环节，我们等的就是上线的这一瞬间。当然，千万别忘了后续的跟踪和分析，这能为你的专业度加分不少哦 ·总结和展望

综上所述，我们已经整理出来了体现交互设计师专业度的过程输出物了，总结一下：以75分交互设计师的标准来看，我们的专业度能通过以下的关键输出物衡量：FRD目标确认文档、竞争分析报告、头脑风暴产出物、项目初期用户调研报告、核心设计点调研及分析报告、专家评审报告和评估报告、原型测试报告、交互流程图及详细说明文档、页面线框图、核心设计点说明文档和最后的跟踪分析报告。

基本上，所有的输出物都是反复易稿的结果，都是细碎过程的迭代输出，都饱含了设计师辛勤的工作投入。所有有梦想的交互设计师们，请正确的审视这些输出物，珍惜自己的付出，它们不光是单板的形式教条，它们更是证明自己专业度最有利的武器！

被很多同学都质疑过：那么多的输出物，平时做需求怎么可能全部做出来？每当此时，我的回答都是一样的：“是的，找借口总是很容易的。大家的确都很忙碌，按季度来说，基本上每个人都会经手大大小小几十个需求，但我们真的忙碌到输出一个高质量设计的精力都没有了吗？还是我们打心里就本着做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互设计这个职业最可悲之处„„

作者信息：本文http://

第三篇：交互设计心得整理

交互设计心得整理

长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行，主要是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。

这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心（User-Centered-Design, 简称UCD）的设计原则，每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法，是从UCD的过程中提炼出来，也就是说，同样适用于任何非UCD的设计过程。交互设计的流程

如果一提到交互设计，你就想到画线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个环节。

当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性？

第一步，是任务分析，列出界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。下面以设计一款动感相册界面为例，逐步讲解各个环节。1.任务分析

第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析，也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行，需求方一般提供一个功能点的列表。

任务分析最常见的是任务列表，另外有任务流程和任务场景等。下面以任务列表为例。列出所有主要任务，以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。主要任务1 子任务1 步骤1 步骤2 子任务2 步骤1 步骤2 主要任务2 …

以动感相册为例，任务分析列表如下：

1.浏览相册 1)浏览相册列表 2)选择相册 3)浏览照片 2.创建新相册 1)添加照片 a)选择已有相册 b)选择照片 c)排列顺序 d)添加字幕文字 e)选择动画效果 2)添加模板 a)浏览模板 b)选择模板 3)添加音乐 a)浏览音乐列表 I.试听音乐 II.选择音乐 b)增加新音乐 I.打开本地文件 II.选择音乐 4)预览（略）… 5)命名（略）… 6)保存（略）… 3.修改相册（略）…

任务列表包括所有功能点，并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析，这里不做解释了。2.页面流程

任务分析完成后，进入设计的第一步，即设计页面流程。页面流程是设计的开始，也是重要的一环。它决定整个界面的信息架构和操作逻辑。页面流程是上一步任务分析的自然转化。一般来说，一个主要任务就是一个页面，其它子任务也可以转化为页面。

以动感相册为例，页面流程如下：

页面几乎是把任务分析照搬过来了。所以上一步做好了，这一步很轻松，而且越往后越轻松。注意这个流程图应该包括所有将要设计的新页面，一个不少，一个不多。它不仅确定页面内容，页面数量，还确定各页面之间的关系。如果在后来设计具体页面原型时，发现这个流程图多了或少了页面，或者页面关系发生了变化，说明你的功夫不到家（这个比较难，我一般不苛求我们的设计师）。根据原型图来创建或者修改页面流程图，不是在做设计，而是在写设计说明。3.页面布局

第三步页面布局是具体页面设计的开始，在上一步知道有哪些页面需要进行设计后，这里对页面进行划分，对内容进行组织。最重要的一点是确定页面分区。以动感相册为例，页面布局如下： 总布局，即通用布局，适合所有页面。

具体页面布局，在不与总布局冲突的情况下，有更细节的布局。

页面布局赋予零碎的内容以逻辑性，以分区的形式把页面各区域所对应的功能区确定下来，减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起，对于用户来说是可以预见的，用户能够判断哪个操作在哪个区域，减少盲目寻找带来的困难和疑惑。4.原型设计 这一步是大家熟知的，即具体页面的设计。这一步设计把所有的界面元素表现出来。可以有低保真和高保真原型图。低保真即是线框图，高保真多是接近最终效果图。下面是动感相册的低保真原型图。

5.设计说明

最后一步需要做的是对所有页面进行详细的描述，包括对页面上所有元素进行说明，比如默认状态，跳转页面，字号字体，尺寸等。这里就不解释了。这是交给开发人员的文档，以及测试人员进行测试的依据。小结

交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。

第四篇：数字交互设计

《数字交互设计》教学大纲

课程名称：数字交互设计 课程类型：专业方向课 课程编号：134081

学时数及学分：总32学时，2学分，其中讲课8学时，上机24学时。

教材名称及作者、出版社、出版时间：《Adobe Flash CS4 ActionScript 3.0中文版经典教程》 美国Adobe公司著，井中月译，人民邮电出版社，2009年8月 本大纲主笔人：刘云安

本大纲审定人：数字媒体学院学术委员会

一、课程的目的、要求和任务

1．通过本课程的学习，让学生认识到新媒体的数字化、集成化和交互性特点。2．让学生了解人机交互的历史、发展现状及趋势。了解交互界面和交互设备。

3．了解人机界面的定义、起源、发展、研究内容及发展趋势。熟悉相关学科及知识，掌握人机界面设计中认知心理学、人机工程学、人机界面的艺术设计、色彩设计等。

4．结合移动互联技术、物联网技术以及多点触摸、体感等人机交互技术，让学生的设计作品在跨媒体平台上与用户交互。通过创新的交互模式，促进人与数字媒体内容交互的过程中达成良好的用户体验。

为达到上述目的和要求，在教学内容和课程设置上，应注意以下有关问题：

1．该课程按照从简到繁、循序渐进、整体系统的原则进行教学，将课堂讲授、案例分析和实践作业三者相结合，既注重理论基础又注重技术操作。

2．堂上授课、集中讨论、分组实践的方式进行教学。

3．课程高度重视艺术和技术的融合，面向行业应用，紧随技术的发展。4．平时作业不少于4次，期末作品1次。

二、课程主要内容及学时分配

第一讲

绪论（2学时）

一、交互设计概述

二、课程内容介绍

第二讲

新媒体及其交互性（4学时）

一、新媒体的发展与数字内容的涌现

二、新媒体的可交互性

三、人机界面

四、Web界面设计实验

第三讲

人机交互技术概述（4学时）

一、人机交互的概念、发展历史及趋势

二、人机交互与其他学科的关系（认知心理学 计算机图形技术 多媒体技术 虚拟现实技术）

三、交互设备与交互界面

四、鼠标与键盘交互试验。鼠标跟随效果实验 第四讲

交互设计的方法与设计评价（6学时）

一、可交互的数字内容

二、事件与响应

三、交互设计的流程和方法

四、交互设计的评价。人机界面设计的测试和评价的意义、设计准则、人机界面的测试、界面设计评价、硬件人机界面设计评价、软件人机界面设计评价与可用性测试

五、互动小游戏设计实验。碰撞检测与定时器实验 第五讲

人机界面设计（5学时）

一、人机界面概述。人机界面的定义、起源、发展；人机界面学的研究内容；人机界面的设计的发展趋势；20世纪最伟大的10种人机界面装置。

二、软件人机界面概述、软件人机界面的形式与标准、软件人机界面设计、web界面设计、图标设计。

三、Flash跳转函数--控制播放器实验 第六讲

驱动数字内容（4学时）

一、鼠标与键盘

二、体感交互

三、多点触摸交互模式设计实验 第七讲

flash互动媒体设计（5学时）

一、flash多媒体资源整合设计

二、flash创意网站设计

三、进度条、声音和背景音乐的控制与Flash跳转函数——控制播放器实验 第八讲

html5 web交互创意表现（2学时）

一、html5画布

二、html5移动媒体创意设计

三、与其他课程的关系

本课程与《flash动画设计》、《人机交互技术》、《web编程》等课程具有密切的学术关联。这些课程之间既有理论上的相互联系，也在实际操作上具有千丝万缕的关系。学生可以在这些课程之间进行知识与技术的相互迁移与会通，这将对数字媒体艺术创作素养的培养能够起到积极的作用。

四、考核方式

1、期末作品考查，占总成绩的60%；

2、平时成绩（出勤、课堂作业等）占总成绩的40%。

五、参考书目

[1]《HTML&XHTML权威指南（第六版）》（美）穆西亚诺，（美）肯尼迪著，张洪涛，邢璐译 清华大学出版社，2007年版。

[2]《javascript高效图形编程》（美），Raffaele Cecco 著 徐鹏飞 译，人民邮电出版社，2012年版。

[3]《Adobe Flash CS4 ActionScript 3.0中文版经典教程》 美国Adobe公司著，井中月译，人民邮电出版社，2009年版。

[4]《人机界面设计》，周苏、左伍衡、王文、徐新爱 等编著，科学出版社, 2007年版。[5]《Human-Computer Interaction Second Edition》，迪克斯（英），电子工业出版社，2003年版。

六、课程所需设备

多媒体教学系统、数据手套、android平板电脑。

第五篇：交互设计实习报告

实习报告：

一、实习说明

(1)实习时间：2010年10月20日至2011年1月5日

(2)实习内容：关于手机微波客户端的交互分析

(3)实习性质：毕业实习

二、实习内容介绍

微博，即微博客（MicroBlog）的简称，是一个基于用户关系的信息分享、传播以及获取平台，用户可以通过WEB、WAP以及各种客户端组件个人社区，以140字左右的文字更新信息，并实现即时分享。最早也是最著名的微博是美国的twitter，根据相关公开数据，截至2010年1月份，该产品在全球已经拥有7500万注册用户。2009年8月份中国最大的门户网站新浪网推出“新浪微博”内测版，成为门户网站中第一家提供微博服务的网站，微博正式进入中文上网主流人群视野。

在微博是一种互动及传播性极快的工具，传播速度甚至比媒体还要快。微博所谓“微型博客（micro-bloging）”是一种非正式的迷你型博客，它是最近新兴起的一个web2.0表现，是一种可以即时发布消息的类似博客的系统。它最大的特点就是集成化和开放化，你可以通过你的手机、IM软件（gtalk、MSN、QQ、skype）和外部API接口等途径向你的微博客发布消息。微博客的另一个特点还在于这个“微”字，一般发布的消息只能是只言片语，像Twitter这样的微博客平台，每次只能发送140个字符。相对于强调版面布置的博客来说，微博的内容组成只是由简单的只言片语组成，从这个角度来说，对用户的技术要求门槛很低，而且在语言的编排组织上，没有博客那么高，只需要反映自己的心情，不需要长篇大论,更新起来也方便，和博客比起来，字数也有所限制 ；微博开通的多种API使得大量的用户可以通过手机、网络等方式来即时更新自己的个人信息。言两语，现场记录，发发感慨，晒晒心情，Twitter网站打通了移动通信网与互联网的界限。相比传统博客中的长篇大论，微博的字数限制恰恰使用户更易

于成为一个多产的博客发布者，著名流量统计网站ALEXA的数据显示，Twitter日均访问量已近2000万人次，在美国、英国、加拿大等地的网站排名中均列前15位。

微博开通的多种API使得大量的用户可以通过手机、网络等方式来即时更新自己的个人信息。

三、实习环境

通过网络以及观察等，在学校和学校外的环境进行多方位的考察，对人们使用微博的情况进行了具体深入的了解，每周一次的外出考察和网上问卷调研是我这次实习的主要环境，环境比较良好。

四、实习过程

(1)了解过程

起初，自己亲自使用了微博一个星期，保持每天看微博一个小时并要求每天发至少五张图片五条留言，保持到现在。了解到同学朋友使用微博的情况，并与他们交流使用心得，了解名人使用微博情况并通过微博与他们进行了少量的沟通。

(2)摸索过程

微博的广泛流传与手机分不开的，新浪微博也推出了手机客户端，在这个过程，我把手机客户端的每一个界面都分析，并得出流程图，进行探索。毕竟微博客户端流行时间不长，其中的不足之处很多，通过这段时间的摸索清楚的了解到微博客户端的作用，对以后的设计有了深层次的认识。

(3)实际应用

实习的后半时期，我用Flash软件做了一个自己设计的微博的高保真模型，并让同学朋友使用。我把微博的广泛作用和手机通讯簿联系到一起，让信息交流更直接更方便。

由于微博推出时间短，在微博客户端的设计上有很多出路，微博现在虽说已经较为广泛的应用，但还有很多的发展空间。

五、实习期工作总结和收获

进入wab2.0时代已经以来，人与人的交流的方式逐渐的更新变化，这几个月实习以来，我也亲自深入的体验了微博的魅力，成为了一个十足的微博迷。

收获颇多，在一个崭新的领域有了自己的设计空间。为以后的毕业设计做下了坚实的基础，对交互设计有了新的认识，开拓了大学学业一片新的空间吗，为以后的就业做了铺垫。

实习报告

工业设计工科07-1 指导老师 乔楠 邵聪 200805070122