交互设计师-让世界因你而不同-系列文章目录

交互设计师-让世界因你而不同系列文章【脑图】

在不注重用户体验的公司，交互设计师等于美工。

在不注重商业审美的设计公司 ，交互设计师等于美工。

在不注重创意的广告公司，交互设计师等于美工。

美工没有什么不好，但是很多人都自称是设计师 ，都感觉自己在做设计。设计师也不是什么牛B的事情，很多人只会软件就会创意。

交互设计师的关键概念是什么？

• 商业的，区别与非商业的艺术/画家/涂鸦/玩票/自己感觉很吊
• 创造性，区别与抄袭/纯粹依靠图库/依赖装饰和素材
• 科学的，区别与个人的主观臆断/所谓的灵感/没有事实的根据
• 审美的，区别与垃圾的/文字和图片的堆砌/没有生命的图象/让人不感觉愉悦
• 独立的，区别与没有见解/没有判断/没有坚持/完全受别人控制

Web交互设计师的定义

秉承以用户为中心的设计理念，应用“以目标为导向的设计”方法，进行互联网产品的设计。

这是关于交互设计师的一个基本定义。无论是现有的交互设计师或是对交互设计有兴趣正打算入行的人都会考虑这个问题。“到底交互设计师是干什么的？”“怎么干？”“是因为我在网页设计方面有经验有能力于是就能当交互设计师了吗？”交互设计师首先需要 认同“以用户为中心”的设计理念。有了为用户着想的观念，接下来就是方法，怎么设计才能很好的为用户服务？在我看来，目前实现UCD最有效的方法就是 Alan cooper提出的“以目标为导向的设计”方案。实际上“交互设计”这个名词也是他提出来的。

交互设计师的特点

交互设计师善于表达，以网页语言表达，以网页语言表达产品要告诉用户的信息，要显示给用户的操作功能。所以，凡是涉及到表达、传达的问题，都可以找交互设计师来做，也应该由交互设计师来做。产品经理考虑要做个什么产品才有价值，交互设计师考虑怎么把这个想法最有效的转化成一系列的界面展现给用户。除了展现，还有和用户的交互。这个展现、交互的过程就需要一定的表达能力。这种表达能力并不是我们平时所特指的口头表达，而是使用网页语言表达。我们经常会讨论一个按钮的位置，讨论某个状态下光标的样式，声讨应该写成“登录”而非“登陆”。这些都是网页语言表达。
有些时候，有些交互设计师会问，“网页上的文字要我来写吗？产品经理比我了解的更清楚，他（她）们写吧？”如果说交互设计师的应该具备“善于表达”的特点，那么，网页上的文字就应该由交互设计师来编写，虽然产品经理更了解产品，但是产品经理并 不是最懂得如何想用户表达的人，交互设计师是。我们会讨论“你”还是“我”这样的称谓问题，会注意不要在页面上出现“用户”这样的字眼，这些都是文字表达的问题。

对交互设计师的要求

文字表达能力：写邮件，写blog，写各种东西。如前所述，文字表达是页面表达的一部分，具备一定的文字表达能力是必要的。
语言表达能力：多说，开会的时候要发言，一对一的讨论要花心思。
较好的语言表达能力是与同事沟通的必要素质，更为重要的是，语言表达能力是表达能力的一种体现。如果面对面，一对一的交流都有困难，怎么能保证用页面间接的跟用户交流能交流清楚呢。

web交互设计师的工作内容

对产品进行行为设计和界面设计。

行为设计是指各种用户操作后的效果设计。Web的操作以点击为主，点击操作又可以分为“表单提交”类和“跳转链接”类两种。除点击外，还涉及到拖拽操作等。

界面设计包括：页面布局、内容展示等众多界面展现。例如：使用按钮还是使用图标？字号大小的应用，如何使用tab….. 之所以特意提出这样一个话题，是为了强调除了“界面设计”，还需要“行为设计”。交互设计在被认识的过程中会有很多误区，常见的是把交互设计理解为一种专 业的、高级的界面设计。一个产品不好用很多时候是因为流程上有问题，页面表现的挺合理，但是，点击了一下之后，就会发现“走不下去了”。流程是一系列的操 作，也需要设计。

如何进行一个产品的交互设计?

第一步.信息构架设计

深入理解产品的目标、功能需求。将这些目标、需求转化为界面表现。把内容合理的归类整理为若干的界面。信息构架的设计意味着对导航的设计。“导航栏共有几级？每级几项？”这些问题将随着信息构架的设计而确定。
信息构架设计的要求：

1. 符合用户心理模型。
2. 尽量保持窄而浅的信息树这一步工作需要和产品经理充分的交流。

第二步.界面细节设计

在整体信息构架确定的基础上，对界面上的细节进行推敲。界面细节设计的要求：

1. 符合web可用性标准
2. 符合图形用户界面的基本准则
3. 符合现有互联网上业已形成的设计习惯……
4. 符合大多数互联网用户使用电脑的习惯（目前只想到这几条）

这些细节设计更像是交互设计的专业，通常其他职位的人不会染指。显然这些工作是很有价值的，但是创造性并不大，价值也不很大。随着互联网这个行业的成熟，细节上的表现会更统一、规范。也许今天我们今天激烈争论的问题，几年后已经很成型了，不需要 再争论了。相比之下，信息构架的设计更具有创造性，自由度更大。

如何成为一名交互世界师？

5年前，Robert Reimann为Cooper通讯（the Cooper Newsletter）写了第一篇题为《如果你想成为一名交互设计师》的文章。和许多人一样，我读后大受启发：那正是我理想的职业。听从Reimann的 建议，我接受培训，成了一名交互设计师。

现在，因为我的书的缘故，我发现人们开始问我同样的问题：如何成为一名交互设计师？成为一名交互设计师意味着什么？每天究竟要做哪些工作作？Reimann的佳作依然值得借鉴，在此基础上我再补充些我自己的看法。

最近五年的交互设计

在Reimann写下《如果你想成为一名交互设计师》之后的5年中，交互设计领域发生了许多变 化。网络泡沫导致不少设计师纷纷离开这个领域。但是网络新近的复苏又使新的从业者加入进来。为了促进业内知识的累积，交互设计师们成立了一个新的团体：交 互设计协会（Reimann为首届主席）。此外，继软件、互联网等“传统”业务之后，交互设计开始进入一些新的领域，包括手机，医疗设备，金融，娱乐与零售服务等。

而传统领域也在发生变化：互联网已成为应用软件设计的平台，即便是那些无需在线编程和运行的软 件，也日渐成为“在线工作”与“线下工作”的混合体。就连操作系统也在逐步摆脱25年前赖以建构的桌面隐喻的束缚。一切都显得那么自然，有如探囊取物—— 使交互设计师在今天成为一份理想的职业。

交互设计师的一天

根据时间和项目的不同，交互设计师的日常工作包括：客户访谈，现场研究，头脑风暴，撰写文档， 制作原型以及产品测试。具体工作取决于项目进程。除了埋头撰写文档的日子（如框架构建），每一天都会有所不同。不错，依然有很多EEMP：写邮件 （Email），收邮件（Email），会议（meeting）和报告（presentation）。但其间也不乏令人兴奋的时刻。

交互设计师受聘同创意打交道——使抽象的想法付诸现实。很少有工作能够这般精彩。你可以通过头 脑风暴，想象前所未有的事物，然后建造出来。还可以塑造行为，使世界变得更加有趣美好。你将用彩笔在白板和“随意贴”上描绘自己的创意，帮助人们解决问 题。如果你足够出色，还有机会同那些拥有先进科技及巨大影响力的公司合作，让世界因你而不同。

要实现上述梦想，你必须具备3个条件：气质、培训和经验。

气质

Reimann对于气质价值的论述依旧准确。对于用户的“同情共感”与学习新事物的能力是任何设计师都不可或缺的两大特质。也是该职业必备的基石。

这并不意味着你需要成为“擅于交际的人物”（当然这样更好）。但确实意味着你应当对人类感兴 趣，包括人的行为与局限性。你至少理论上要关注人与社会环境。一名优秀的交互设计师需要学会设身处地为用户着想，而不是把自己想象成用户，或者把用户看作 与自己类似的人。你们很可能截然不同。

在MBTI人格测验中（Myers-Briggs personality scale），拥有“直觉型”人格（“N”：intuitive）同样十分关键。能够凭借直觉进行跳跃性思维对设计师而言至关重要。因为你不可能永远看清问题全局，接触每一个用户，对项目了然于胸。你不得不猜测与假设——这时你需要直觉。

培训

如果你认为自己的气质适合这样的工作，下一步就需要学习一些基础知识。选择好的入门书，如： About Face系列《软件观念革命-交互设计精髓》（About Face 2.0），《Designing Interfaces》与《Universal Principles of Design》。还需要了解你的工作介质，比如互联网，移动通讯和软件系统。你不必成为一名程序员，但需要了解每种介质技术上的可行性。工业设计准则与良好的沟通技巧也很有帮助。

与有经验的设计师共处，无论是在工作中，还是通过非正式的聚会、会议或者在线交流（比如交互设计协会（IxDA）的邮件讨论）同样受益匪浅（我在这里提到的很多问题都曾在那里讨论过）。那些信手拈来的知识，观点与方法都是设计文化的一部分。少说话，用心听。

快速培训的途径之一即在校学习（尽管过程紧凑，学费高昂）。我现在首推三所学校：卡耐基－梅隆 大学（Carnegie Mellon）、伊利诺斯州立大学的设计学院（Institute of Design）和英国皇家设计学院（Royal College of Art）。遗憾的是，上述学校提供的都是面向研究生的课程。我还不知道任何本科阶段的交互设计专业。不过相信未来几年将会出现。

没有交互设计的本科专业，大学阶段该如何准备呢？我的建议如下：进入一所好的设计院校学习工业 设计或传媒设计（你都能学到有用的技能），或者关注设计以外的任意领域。人文学科、人类学、文学、心理学、社会学、戏剧、政治、文化研究——都有助于你成 为一名更加丰富的设计师。

经验

培训与知识储备，这些还远远不够。即便作为一名交互设计读物的作者，我依然认为书本只能为你提供从业背景，只有设计本身才能让你成长为一名交互设计师。

设计经验从何而来呢？主要有两个方法：一所好的学校能让你接触到现实课题（关于商务、技术以及用户限制）；你也可以提供专业设计或免费为别人设计（后者非无路可走请慎用）。

邮件讨论，本地团体与人才市场是着手找工作的首选。多数工作是通过口头推荐找来的，因此同其他设计者的联系也能有所帮助。

自我展示

尽管Cooper，Google那样的公司会在求职过程中或让你完成一系列的测试，所有的公司都要求作品展示（portfolio）。准确地说你要准备两类作品：一份在线，一份书面。

在线作品集应当提供作品综述，可以包含一些样本文件。

书面作品集（面试携带）则是对作品更加深刻的展现，以便你论述项目问题与解决过程。不要光介绍成果，工作过程很重要。没有作品怎么办？找找看。这个世界充满有待解决的问题，设计一个解决方案。

为什么要做交互设计师？

因为这样你就能改变世界。不错，我们貌似只是在修补按钮、下拉菜单、仪表什么的，但真正的工作 却是改变这个世界，一点一滴……让它更加人性。我们帮助人们完成日常工作，无论是游戏，救生还是转账。我们将自己的价值注入这个世界，让事物变得有用，易 用，愉快，健康。这样的工作真不赖。

高级交互设计师

职位描述：

1. 对交互设计过程有深入的了解，可以独立完成整个设计过程（交互流程、角色模型等等交互设计方法能熟练应用）；
2. 开发产品原型，配合进行用户测试及分析。
3. 协助产品开发人员和界面/视觉设计师进行详细设计和产品实现。

任职资格：

1. 交互设计/工业设计/人因工程/工业心理学等相关专业本科（含）以上学历，
2. IT交互设计从业经验两年以上，具有较多的实际产品经验者优先。

如果您 健康积极有朝气，对互联网行业充满兴趣与激情，渴望成功
如果您 具有创新意识和高度的责任心，具有较强的适应能力
如果您 具备较好的专业素养和职业修养，善于沟通协作

那么，你可以胜任一名交互设计师！

相关文章:

• 网页可用性设计指导思路总结
• Designing Interactions 交互设计读书笔记整理以及下载
• 交互设计师-成功有效的团体沟通（3）
• 互联网产品的交互设计方法（UPA2008讲稿）
• 交互设计

]]> http://adamghost.com/2009/11/definition-of-user-expirence-designer/feed/ 7 http://adamghost.com/2009/10/crm-axure-lib/ http://adamghost.com/2009/10/crm-axure-lib/#comments Sun, 11 Oct 2009 16:41:02 +0000 不一样的蚊子 http://adamghost.com/?p=601 现在做的项目都是平台化的，需要配置许多东西，也需要做成许多通用的模块，如：

1. 如何通过后台去配置查询条件中的下拉列表？增加一项“种类4”，
2. 区间可以配置，在区间类增加一个“200-400”，
3. 人物/组织选择器可复用，而且适用于许多情况。

选择框

人物/组织选择器

接下来，您在交互模式库里面可以找到解决方案。线上访问地址：http://adamghost.com/wp-content/sample/AxureLib-CRM-EN/

同时也总结了项目中的一些交互模式，交互库。这些库会在项目的进行中逐渐更正、改进、完善，以做成一个复用率很高的CRM库。欢迎大家踊跃提建议与意见：）

现在库的结构如下（服务器不支持中文，全部用的英文，这里附上中文对照表

–

相关文章:

• 网页可用性设计指导思路总结
• 交互设计师-让世界因你而不同（1）总述
• Designing Interactions 交互设计读书笔记整理以及下载
• 互联网产品的交互设计方法（UPA2008讲稿）
• 交互设计

]]> http://adamghost.com/2009/10/crm-axure-lib/feed/ 0 http://adamghost.com/2009/08/method-of-design-web-based-product/ http://adamghost.com/2009/08/method-of-design-web-based-product/#comments Tue, 25 Aug 2009 03:11:27 +0000 不一样的蚊子 http://www.chouyu.com.cn/?p=115 目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中，建立在这个认识基础上，交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息，但是，交互设计工作到底应该怎么做才能提高产品可用性？通常的互联网产品研发中，交互设计工作是处于没有方法的状况。

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么，互联网产品的交互设计应该怎么做？

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品，我们总结出了几个较为有效的设计方法：
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法，全面普查产品，包括对交互细节和信息构架。

这三个方法的思路，是基于对交互设计工作内容如下的分类：
1. 信息构架
2. 交互细节

但，严格来说，这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而，上面提到了互联网产品快的特点，更多的研发步骤显然更容易将研发周期拖的更长，把信息构架工作和交互细节合并起来，减少一个环节，更适应互联网产品的研发特点。
“为什么不把信息构架工作交给产品经理来做呢？”如果说交互设计工作的核心是表达（这个观念，最后还会提到），那么，信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品，怎么谈得到表达的清楚、明确呢。所以，交互设计的工作包含了两部分：信息构架和交互细节。

那么，下面我们就开始具体介绍这三个方法：

方法一. 自然语言法

使用自然的语言来表达页面信息。
这是一个设计界面交互细节的方法。
界面表达的要求是：清晰，明确，简洁，得体。
想象着用面对面的交流来传达信息，再将面对面的传达变为书面表达，再用界面语言翻译书面表达。

除了思路，我们还需要必备的原则、常用的表达方式和具体操作步骤。

页面表达原则：
1. 更少的信息量更好。
2. 结构化更易于理解。
3. 信息的表达应该清楚、明确、直接。
4. 操作可识别。
5. 操作前，结果可预知。
6. 操作时，操作有反馈。
7. 操作后，操作可撤销。
8. 让用户知道身处何地。
9. 避免内容看上去象广告。
10. 不提供多余的功能。
11. 相同的功能，在不同的页面中应保持一致性。
12. 措辞统一。

常用的页面表达方式：
1. 从左到右，从上到下。
2. 大字更突出。
3. 图形更吸引人。
4. 动画会被误认为是广告。
5. 内容逻辑：并列关系；从属关系。

6.多项并列的信息用

7.不同的排序方式VS筛选内容

具体操作
第一步. 概括待表达的信息
第二步. 将概括好的信息排序
第三步. 使用界面语言翻译

实例：中信银行卡

第一步. 概括信息：
描述应该是概括的，尽可能简短。例如：
● 您选择了回邮方式办卡，概括解释这个办卡方式。
● 接下来您应该 下载申请表
● 回邮办卡的全过程是这样的…
● 一系列注意事项。

第二步. 排序：
就是上面的顺序，没有变化。
有些时候排序会遇到困难，需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值，它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时，记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 翻译：

与之前界面对比：
● 开头几句信息顺序需要整理，使上下文关系更清晰。
● 对过程的描述可简化。
● “说明”应更结构化。

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型，而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式，也许是简单的页面原型，也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计，尤其需要小心。

我们有了一种成型的方法，但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路，或许这是更好的方案：
1. 您选择了回邮方式办卡，概括解释这个办卡方式。
2. 第一步. 下载、填写申请表并回邮给中信
3. 第二步……………………..
4. 第四步……………………..
这样的信息概括和排序页面表现将是什么样子？你可以自己试着画画~~

练习：QQ空间黄钻催费页面

说明：
黄钻贵族是QQ空间中的VIP用户，黄钻贵族用户可以免费适用空间中的装扮，另外还可以享受到日志信纸、超大容量相册等诸多特权。
当用户的黄钻贵族身份即将到期的时候，从QQ聊天主面板上的“我的钱包”提示：“钱包”闪动，点击后用一个490*300px的小窗口告知用户续费的详情。
左侧图片在实际页面中是一个flash动画，若干张图片切换，显示黄钻用户可以装扮出的更好的空间效果。
右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式，直接显示出来（就是现在页面上的“家庭、网吧”两种方式），方便用户。同时提供“支付中心”链接（http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home），让用户可以在全部续费方式中选择。

请使用上面介绍的自然语言法重新设计这个界面，让信息表达的更高效、清晰、明确。

参考方案
需要表达的信息：
● 某某某，您的黄钻要过期了。
● 黄钻贵族很棒滴~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

更好的信息：
● 某某某，您的黄钻要过期了。
● 您要是不再是黄钻了，就有XXXXX损失啦~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

总结“自然语言法”
自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的，相对更容易，这个技能也更容易提高。
这里涉及到的两个例子都是比较偏向于信息表达的，对于操作较多的界面，这个方法仍旧适用。

方法二. 结构图法

这个方法的思路：抛开页面细节只考虑信息的组织形式。抛开页面细节，是的，就是上面讨论的那些具体的页面细节，只考虑信息的整体构架，而页面的细节留在确定了信息构架之后，用自然语言法来解决。

信息构架的原则：
1. 一个页面一个主要内容。
2. 个人信息&公共信息。
3. 网页基本内容有两种：列表和文档
4. 更少的信息更好
5. 一个用户自己生成内容的document页，有两个状态：浏览状态&编辑状态。
6. 信息树应该尽量窄而浅，并且尽量保持平衡。
7. 与现实生活经验相符
 ● 页面在网站中需要有一个固定的位置。
 ● 同等级的内容应表现成并列的样子。
……

信息构架的常见模型：
1. 列表+详情页+列表聚合页
2. Wizard模式。第一步->第二步->第三步…
3. 主页+若干个“临时”页面。例如：google帐户

具体操作
第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。
第二步. 画树状图。
第三步. 用纸画各页草图。草图中需要包含的关键元素：页面标题、导航、重要的链接和按钮。
第四步. 模拟演示网页操作行为。

实例：黄钻等级



第一步. 总结归纳内容：
● 用户个人的的黄钻等级信息
● 等级介绍
● 黄钻功能特权介绍
● 黄钻贵族可免费领取的道具
● 黄钻活动

第二步. 树状图：
如果单纯的按照上面概括的信息罗列，则可以规划出一个黄钻贵族的网站，树状图如下：

然而，信息构架的设计往往要建立在对现有产品深刻的理解基础上。


Qzone的现状：一个社区，成千上万个个人空间。如何在现有的基础上设计新的黄钻等级？
我们的方案是这样的：

第三步. 草图：

这里需要强调：纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮，而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系。

最后，第四步. 手握原型，演示页面间的跳转，确保整个流程的顺畅。

练习：QQ空间日志、心情、私密记事本

参考方案
总结归纳内容：
1. 日志
2. 心情
3. 私密记事本

树状图：
方案一：
● 主页
● “大日志”
■ 日志
■ 心情
■ 私密记事本
● 音乐盒
● 留言板
● 相册
……

方案二：
● 主页
● 日志
● 心情
● 私密记事本
● 音乐盒
● 留言板
● 相册
…

根据上面两种不同的树状图方案，接下来的页面草图也会是不同的，你可是试着画画…

方法三. 任务走查法

这是一种优化现有产品的方法。成本低，见效快。对产品整体上影响小。

以用户任务为线索，以可用性准则为依据。是的，这个说话很好记，类似“以事实为依据，以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中，需要操作者依据主观判断制定用户任务，而不是通过用户研究。这虽然有可能造成更大的误差，但同时节约了时间成本。实际工作中，参与这个产品设计的同学坐在一起讨论一下，通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指：页面表达原则、信息构架原则、视觉表现规范，这三部分。页面表达原则和信息构架原则就是前面提到的，视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品，因此，不同于产品原型，更多了视觉表现这一环，在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范
1. 滚动条看上去应该象滚动条
2. 表单的对齐方式
3. 重要的内容显示在第一屏
4. 导航应出现在第一屏上半部分
5. 尽量避免使用装饰性的图标
6. 避免内容看上去象广告
7. 光标样式
8. Tab需要有三种状态而不是两种
9. 红色表示警示，绿色表示ok，黄色表示提示
10. 灰色通常表示“暂不可用”（disabled）

具体操作
第一步. 分析并总结所有任务
第二步. 根据任务进行评估

评估中需要注意：
1. 不影响任务的问题不记录
2. 被记录的缺陷是有根据的（根据可用性准则），而不是根据自己的感觉。

实例：QQ秀快速换装

第一步. 任务列表：
● 换一套新形象
● 换表情
● 换心情
● 随便逛逛
● 换一个自己以前的形象

第二步. 评估。以“换心情”任务为例：

问题1 副标题表意不明确
描述：

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题2 “请输入心情秀”表意不明
描述：

“请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题3 拖动心情秀时，光标使用不正确
描述：

光标在框中的是link的手型，实际上应该是十字箭头。现在会被误解为有点击操作。
依据：视觉表现规范：光标

问题4 “心情秀”概念不清
描述：

“心情秀预览”暗示出，“心情秀”是指外框+文字内容。
“换心情秀”功能只是换框，这意味着“心情秀”是指外框。
措辞上的含混使得同一个名词出现两种不同的定义，不易于理解。“既然心情秀是指外框+文字内容，那么当我点击“下一个”后，其中的文字内容是不是也会变化？”
依据：页面表达原则：措辞统一

问题5 换心情秀外框操作不便
描述：

“上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。
依据：页面表达原则：操作结果不可预知

问题6 “预览”按钮视觉效果不佳
描述：

预览按钮视觉样式比较象disabled
依据：灰色通常表示“暂不可用”（disabled）

问题7 “脱掉”按钮不易找到
描述：

“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

练习1：QQ秀照相馆

练习2：Qzone滔滔心情

总结任务走查法：
为什么要强调是“按任务”。因为，类似“保存形象按钮太难看啦~~”之类的问题是不应该提出来的。因为用户在实际使用的时候，这个问题是远远不如“误以为预览按钮不能点击”重要。“按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的，但是按任务的优点在于：
1. cover到了各个栏目之间跳转可能出现的问题。
2. 抓住了重点的问题，而放过了无关紧要的问题。比如：“申请红钻”按钮。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后最后的总结

从狭义的交互设计的定义来看，交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。
互联网产品的交互设计应该怎么做的问题，就演化成了：互联网产品应该如何去表达。
以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。

那么，
let’s talk
let’s talk
let’s talk
……

( 注：本文是UPA user friendy 2008中由我主持的一个同名工作坊的讲稿。
另附PPT文档：互联网产品的交互设计方法.ppt )

转自：臭鱼的交互设计文章：《互联网产品的交互设计方法（UPA2008讲稿）》

http://www.chouyu.com.cn/?p=115忽略

相关文章:

• 网页可用性设计指导思路总结
• CRM平台项目的交互模式库总结（持续更新）
• 交互设计师-让世界因你而不同（1）总述
• Designing Interactions 交互设计读书笔记整理以及下载
• 交互设计

]]> http://adamghost.com/2009/08/method-of-design-web-based-product/feed/ 2 http://adamghost.com/2009/03/interaction-design/ http://adamghost.com/2009/03/interaction-design/#comments Thu, 26 Mar 2009 02:16:43 +0000 不一样的蚊子 http://adamghost.com/?p=343 本文转自语凝的UI-交互设计。

什么是交互设计？淘宝面试的时候提出的这个问题，没能答出来。从基本做起，一点点的学习，把交互设计的基本功夯实。

交互设计的定义

交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。

交互设计可以划分为纵向和横向（动态的和静态的）：

纵向太深，用户会在一层一层挖掘后，感觉焦躁，同时也容易迷失。横向太宽，信息量多了，用户会觉得复杂，找不到自己想要的东西。

相同的宽度，不同的布局，会带来不同的交互结果

交互设计的目的

为了产品有效易用，为了让客户对产品产生依赖，为了让客户使用产品愉悦。当客户想要设计或者改进一个交互式系统，使用户与其交互的过程更加有效、易用， ETU 可以为其提供交互设计服务，比如：

• 某个交互系统，用户通过它来进行日常的工作，通过执行一系列的步骤来完成某项任务。交互设计可以系统变得简单易用，用户使用其工作的效率大大提高。
• 某购物系统，流量很大，但是在生成订单的过程中，用户却大量流失。交互设计帮助该系统找到用户流失，不能完成购买的原因，进行改进，让用户获得良好的购买体验。
• 某电子产品，技术先进，但其人机界面的设计可能由研发技术人员来完成，用户觉得产品的使用方法比较费解。交互设计可以帮助其存在的可用性问题，帮助改进，让用户很容易学会使用它。

交互设计的价值

• 通过改进设计，使得产品的使用者可以很好的学习、快速有效的完成任务、访问到所需的信息、购买到所需的产品，并且在使用的过程中获得独特的体验，情感上的满足。
• 交互设计的好坏会影响用户对产品的印象，同时也会影响用户对品牌的看法。好的交互设计会给市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。

交互设计展开的时间

新产品研发过程中，新的用户界面的产生可以引入交互设计。已有的产品，对产品的人机界面的交互部分需要改进，可以引入交互设计。

交互设计的方法

交互设计一般从标识需求开始，不管是新产品还是改进产品。在这之后，进行任务分析 / 功能分析 , 提出满足需求的概念设计，提出候选设计方案，接着制作原型的交互式版本，并进行评估，根据评估结果可能进行重新发掘需求、修改需求，也可能直接进入重设计。交互设计中使用的方法包括角色设定，情景设定，故事版，认知走查，用户可用性测试，眼动仪分析等等。

交互设计花费的时间

根据用户研究内容和项目大小作调整。

交互设计的文档

• 最终原型设计
• UI 设计规格说明书

相关文章:

• 网页可用性设计指导思路总结
• CRM平台项目的交互模式库总结（持续更新）
• 交互设计师-让世界因你而不同（1）总述
• Designing Interactions 交互设计读书笔记整理以及下载
• 互联网产品的交互设计方法（UPA2008讲稿）

]]> http://adamghost.com/2009/03/interaction-design/feed/ 0 http://adamghost.com/2009/03/designing-interactions/ http://adamghost.com/2009/03/designing-interactions/#comments Mon, 23 Mar 2009 22:33:26 +0000 不一样的蚊子 http://adamghost.com/2009/03/designing-interactions-%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0%e6%95%b4%e7%90%86%e4%bb%a5%e5%8f%8a%e4%b8%8b%e8%bd%bd/ 本文整理自UI乐园的《Designing Interactions》全书 PDF，和N2A的designing interactions读书笔记

新增所有文件打包下载地址：Design Interactions PDF (1448)

《Designing Interactions》目前只有英文版本。很久就下载了，但一直没有仔细翻阅。具体到哪下载的我也忘记了。共享出来大家一起研磨。并这里有一篇pemiamos做的相关读书笔记。还有些由Stanford HCI 交互设计工作室推荐阅读内容。

Bill Moggridge，著名的设计公司 IDEO 的创始人之一。这本书里更是颇采访了不少重要人物，比如 Google 的两名创始人、世界上最伟大的 PC 游戏设计师之一 Will Wright，以及 Macintosh 团队重要成员之一 Bill Atkinson、Palm 的创始人 Jeff Hawkins……

内容分为10个章节，并配有DVD的视频。我这里先上传了各章节的PDF提供大家下载。至于DVD视频，这里就没有空间放上来了，有机会再找地方共享。

1. Forword
2. introduction
3. DesigningInteractions_1.pdf
4. DesigningInteractions_2.pdf
5. DesigningInteractions_3.pdf
6. DesigningInteractions_4.pdf
7. DesigningInteractions_5.pdf
8. DesigningInteractions_6.pdf
9. DesigningInteractions_7.pdf
10. DesigningInteractions_8.pdf
11. DesigningInteractions_9.pdf
12. DesigningInteractions_10.pdf

Forword: What is Interaction Design?  前言：什么是交互设计？

这一章，是书的核心总览，很多东西都在这一章点到，在后续章节展开。Bill一上来就隆重推出了Gillian  Crampton  Smith阿姨，也许称其“交互设计之母”也不过分。1968从剑桥大学修完哲学和艺术史毕业，从事了十年设计师的生涯。很奇怪，专业不太对口的样子，但是后面就更神，1981这个阿姨竟然写了个排版的程序，以帮助她的杂志设计工作。这个经历让她相信：

designers have an important role to play in creating information technologies.

设计师能在创建信息技术上扮演更重要的角色。于是Smith阿姨就开始她的交互设计教学生涯。对了，那时还没有交互设计，1983年她在圣马丁搞了个叫做 a graduate program in graphic design and computers图形设计与计算机的研究生课程；1989年，在RCA创立了the Computer Related Design Department “与计算机有关的设计”，也就是现在的RCA interaction design  department. 这里提下，在RCA的工作也有Bill老伯的功劳，首先这个建议就是他提的，他还是这个系的external assessor外部顾问。RCA也就很幸运的成为世界上第一个设立的专门课程培养设计师学习创造交互产品与系统的院校。2001年，我们可爱的Smith阿姨又跑到意大利北部阿尔陴斯山脚下的Ivrea，创立了Interaction Design Institute Ivrea艾丽维尔交互设计学院。

我想所谓向大师学习，我们通过现在的互联网，google一下这些人和地方，我想对于更深入了解交互设计的发展，技术和趋势是很有用的。有了网络可以让我们少走很多弯路。

列下RCA的交互设计主页，有多作品并且常更新的，看看他们的作业，我觉得咱们的想象力和胆识实在有点贫乏了。而且人家真的在玩闹中有所思考的。http://www.interaction.rca.ac.uk/

这是艾丽维尔交互设计学院http://www.interaction-ivrea.it/en/index.asp

几段觉得很重要的话：

If I were to sum up interaction design in a sentence, I would say that it’s about shaping our everyday life through digital artifacts—for work, for play, and for entertainment.－－Gillian Crampton Smith, interview of January 30, 2002 2

交互设计就是通过数字人造物来描绘我们的日常生活，如：工作，娱乐等。

We’ve come to a stage when computer technology needs to be designed as part of everyday culture,so that it’s beautiful and intriguing,so that it has emotive as well as functional qualities.

我们进入了这么个时期，计算机技术需要被设计，以作为我们日常生活中的一部分。使他们变得美丽和迷人，使他们像我们的家具一样具有让我们感动的品质。

在前言部分有四个很重要的概念被提了出来。

• 三个技术使用的阶段   Three Stages of Technology Use
• 从可用性到社交性  From Usability to Sociability
• 好的交互设计    Good Interaction Design
• 交互设计的语言  Languages of Interaction Design

Three Stages of Technology Use

这个观点是设计star图形用户界面的David Liddle提出来的，（纵观全书，其实Bill引用了很多在交互领域有着杰出贡献的bigman的话，就像他在最后第十章说的，这本书的框架中包含着交互设计会是什么的图景和许多有着不同学科背景的专家们对于交互设计的思考，学习他们的贡献而不要仅仅跟随我对于交互学科的个人观点。

This book is structured around this inclusive vision of what interaction design can be and has presented the thinking of many experts in the field from very varied backgrounds, chosen for their contributions rather than their closeness to my personal view of the discipline. ）

David把一个技术的应用划分为三个阶段：狂热爱好者阶段enthusiast stage，专业用户阶段professional stage，和消费普及阶段consumer stage。

一般来讲，一个技术刚出来时顶它的都是非常喜欢这个技术的人。狂热爱好者们不在乎技术的难易，他们醉心于技术本身。他们就是这么热衷于此，不在乎它有多难用。

Enthusiasts don’t care if the technology is easy or hard to use because they’re so excited by the technology itself or by what it will do for them.They want it,however difficult it is to use.

而在专业用户阶段，使用这些技术的人，并不是购买他们的人，购买设备的决策者并不关心用户体验，他们关心的是价格、技术规格和售后，而使用这些技术的人往往也希望技术难一些掌握，已显示出他们才是专家。呵呵~~原文这样的:

At this stage, indeed, some people even have a vested interest in the technology being difficult because they’re selling their ability to use it;the harder it is,the more valuable their skills.

极具讽刺意味！最后一个阶段就是所谓的consumer stage，这正是我们交互设计师要发力的地方。David认为普通人对于技术本身并不感兴趣，人们关心的只是技术能为他们做什么；人们不太愿意去花时间学习使用技术产品并且讨厌被技术作弄让自己感到愚蠢。

People now are less interested in the technology in itself than in what it can do for them.They don’t want to spend much time learning how to use it and hate being made to feel stupid.

所以在这个阶段使用计算机和通讯技术的是大量没有专业背景的普通人，相比于计算机而言他们性急，有破坏性，容易开小差。

针对这些广泛的人性所要展开的设计相比于为技术专家们设计特定工具而言绝对更带有挑战性。 用户不一定使用我们的产品，如果他们不能使它动起来，他们就会把他们送回商店。

if they can’t make them work,they take them back to the store.

从可用性到社交性  From Usability to Sociability

这个标题觉得可以这样理解:

物本身（有用性to可用姓）－>人的心理（拥有的意义包括对己对人两方面）－> 社会性影响（交流的意义：是更丰富还是更贫乏，技术的双刃剑性质）

这是我对于这节的理解，可能还没有理解透，欢迎网友批评指正。

下面是具体展开的一些有意思的文字。

本节Moggridge首先针对当前usability一词泛滥提出，useful有用性问题，并引用Mitch Kapor，Lotus 1-2-3电子表格软件的设计者，在1990年发表了一个宣言“Software Design Manifesoto”——“我们必须首先思考设计的东西是否对人们有益，而不是先去想着如何构建它。 we must start by thinking about designing things so that they’re right for people, rather than by thinking first about how to build it.” “…要弄清什么才是人们需要的。…making sure that this was what people needed.”

在这种用的功利性层面之上，Morggridge指出，在计算机开始日益勾画我们的日常生活时，我们感兴趣的不仅仅是技术能为我们做什么，还有我们拥有它们的意义。 As computers begin to shape everyday life, we’re interested not only in what this technology can do for us,but also in what owning it means for us.这里还举了个土司机的例子:我们选择那玩意时不仅是能烤面包，我们还会很在意它看上去，摸上去，听上去如何, 等等很多心理方面的要求。不光我们自己的感觉，还有给别人的感觉（这里很自然地开始引申到社会性层面）And of course we choose the things we surround ourselves with not just because of what they mean to us,but also because of what they mean to other people.

接着Moggridge谈到设计地含蓄性，这里有段很经典地话：

Artists and designers are trained to use the language of implicit meanings to add a rich communicative element over and above direct functional communication.If we only design the function of something,not what it also communicates, we risk our design being misinterpreted. Worse, we waste an opportunity to enhance everyday life.

我的译文：艺术家与设计师被训练以含蓄的语言增加交流与沟通 的丰富性，而不仅仅是直接地功能性地交流。如果我们仅仅解决某物的功能，而忽视交流，那么我们的设计将有被误解的风险，更糟的是，我们浪费了增进与改善我们日常生活的机会。

说得实在是好，这本书真是时不时冒点这类让人择服的语言。

这里我以为再加上“优雅”就更完美了。书里后面也多次提到graceful一词。

在这小节的后面，总结了5个要考虑的东西：

usability, utility, satisfaction,  communicative qualities, and sociability

可用、有用、 满意、交流的品质及社会性

好的交互设计    Good Interaction Design

这节讲了好的交互设计的一些原则，如果说上节是在说些观念的话，这节的东西就很技术层面，更有可操作性。

概括一下5个：

1. 清晰的心理模型 clear mental model； 例子：HyperCard，在早期mac上的超文本程序，google一下可以知道更多。
2. 使人安心的反馈reassuring feedback；比如我们敲键盘的恰恰声。
3. 良好的导航navigability；告诉我们在哪，能做什么，能去哪，还有怎么回去。
4. 前后一致consistency；在系统的不同部分中相同的命令应保持一致的有效性。
5. 依赖直觉的交互intuitive interaction；别让人想太多，这个可以看看 Don’t Make Me Think中文版。那里讲得更细，更具操作价值。

这一节还有一些值得推敲的语言，敲一下：

When we design a computer-based system or device, we’re designing not just what it looks like but how it behaves.We’re designing the quality of how we and it interact.This is the skill of the interaction designer.

当我们设计基于计算机的系统与设备时，我们设计的不仅是它的样子，还有它的举止。我们要设计 我们和它之间交互的品质。这是交互设计师要掌握的技巧。

It’s partly responsiveness:when you move your mouse, for instance, does it feel sluggish, or nippy and sprightly? When you manipulate your iPod dial,the combination of sound and feel, as well as telling you what you’re doing, is subtle and satisfying.

比如：我们移动鼠标时，鼠标的反应是迟缓还是灵敏的；我们玩转ipod时， 声音和触感的综合体验告诉我们我们在做什么,这是很精妙且让人感到满意的。

We can design those qualities of interaction, relating what we see to what we hear or feel with the same refinement with which typographers adjust the spacing of type,or product designers the radius of a curve.

我们能设计这些交互的品质，它们涉及到我们的所见，所听及所感。我们涉及它们，就像版面设计师调校字与字之间的空间，就像产品设计师推敲一根曲线一样。

交互设计的语言  Languages of Interaction Design

Moggridge认为，交互设计还刚刚起步，还远远没有发展出自己的语言来。这节开始他举了电影发展的例子，交互设计要想发展出如艾森斯坦在电影艺术上独特的蒙太奇手法来还有很长的路要走。

他认为我们现在可以先大致讲交互设计的语言大致划分为4类。

It may  help to categorize these languages according to their “dimensions”:1-D,2-D,3-D,and 4-D.

• 1-D includes words and poetry.
• 2-D languages that interaction design can borrow  from include painting, typography, diagrams, and icons.
• 3-D languages are those of physical, sculptural form.
• 4-D languages include sound, film, and animation.

Introduction

这一部分主要讲了两个Moggridge自己的两个小故事。正是这两件事上的体验让他开始探索现在叫做“交互设计”的新领域。一个是给儿子买了难用到死的电子表，最后被神经衰弱的老婆用锤子砸掉；另外就帮助John Ellenby设计第一台笔记本电脑的经历，让他从造型到界面一直到沉浸在虚拟世界里，而萌生“softface”的概念，最后在Bill Verplank的建议下确定为“交互设计”这个名词。

这部分讲故事为主，细节我就不展开了。还是自己读比较饶有趣味。这里只节选我感兴趣的几段话：

designers needed to face new challenges,as electronics started to replace mechanical control systems. In order to create products that are enjoyable, satisfying to use, and aesthetically pleasing in behavior as well as shape, designers would need to learn how to design hardware and software as well as physical objects.

设计师面临新的挑战，当电子技术取代机械来控制系统，为了创造有趣味的产品，在交互中获得如外观一样的审美享受，设计师需要去学习如何设计硬件与软件，如同设计实物一样。

I felt that there was an opportunity to create a new design discipline, dedicated to creating imaginative and attractive solutions in a virtual world, where one could design behaviors, animations, and sounds as well as shapes.

我感到这将是创建一个新的设计学科的机会，专注于在一个虚拟的世界里创造富于想象力与魅力的解决方案，去设计它们的举止、表现与音调如同设计它们的形状。

10 People and Prototypes

因为之前大体翻翻觉得本书越到后面越精彩，而且这一章和我的研究方向最接近，所以是从后念起的。

觉得这一章把很多ideo内幕的设计思想提出来了。之前也看过大卫.凯利的《Ideo物语》，读起来很爽，但是可操作性和实际指导意义都没有Moggridge的这章好。

本章从设计的本质开始展开延伸到交互设计的定位，再到IEDO的人（用户）研究和原型构建，最后还介绍一般的设计流程。所以我觉得这章是整本书含金量最大的一章。

概述部分

及早地并且时常地构建原型，使每一个交互的步骤更加清晰，有些观点或更倾向于体验“Ah ha”这样突然蹦越而出的灵感，但是这仅仅是一个暗示，说明你正专注的这个设计的细节呈现在方向上还是正确的，要想知道一个设计是否是优秀的，那你只能动手把它做出来，让人们使用它，并且人们对于这个设计的态度是高兴的，积极的和感到舒适的。

Prototype early and often, making each iterative step a little more realistic. At some point you are likely to experience that wonderful “Ah ha!” feeling that comes with a creative leap, but that is only an indication that you have moved forward in the detail of the aspect of the design that you are focusing on right then. You will only know that the design is good when you have tried it out with the people who will use it and found that they are pleased, excited, motivated, and satisfied with the result.

我相信如果我们把人放到第一位并且不断不断地构建原型，我们将有很好的机会得到创造性地解决方案，从而使人们得到价值与欣喜。

I believe that if we think first about people and then try, try, and try again to prototype our designs,we stand a good chance of creating innovative solutions that people will value and enjoy.

关于Jane Fulton Suri，IDEO的人因交互专家。

她帮助我阐明这种方法，我们发展创立的研究人（用户）并通过这些知识来激发设计灵感的方法，她还一直在探索原型的使用，包括了解已存在了的经验，调查研究设计创意和设计概念的沟通。

She helps me explain the methods that we have developed to learn about people and derive insights from that knowledge to inspire design. She also explores the use of prototypes for understanding existing experiences, investigating design ideas,and communicating design concepts.

关于Duane Bray，IDEO交互设计部门的头。

如何构建原型以适应各个设计流程，解释不同类别的原型对于各种类型交互设计的作用，并且尝试那些对未来设计实践产生影响的预测。

how prototyping fits into the design process,explain the different sorts of prototypes that are useful for the various categories of interaction design, and try to predict how that will change the practice of design in the future.

What Is Design?

什么是设计？一个常谈常新的问题

这里moggridge引用了依姆斯夫妇和Madame Amic（不知道是哪路神仙）的一段谈话:

Q. What is your definition of “Design?”

A. A plan for arranging elements in such a way as to best accomplish a particular purpose.

Q. Is design an expression of art (an art form)?设计是一种艺术表现或者形式么？

A. The design is an expression of the purpose. It may (if it is good enough) later be judged as art. 设计是一个意图的表达，它可能（如果它足够好的话）最后由艺术来衡量。

Q. Is design a craft for industrial purposes?

A. No—but design may be a solution to some industrial problems.

不，但是设计可以是许多工业化（产业化）问题的解决方案。

Q. What are the boundaries of design?

A. What are the boundaries of problems?

Q. Does the creation of design admit constraint? 设计创造会有约束么？

A. Design depends largely on constraints. 设计非常依赖于约束条件。

Q. What constraints?

A. The sum of all constraints. Here is one of the few effective keys to the design problem—the ability of the designer to recognize as many of the constraints as possible—his willingness and enthusiasm for working within these constraints—the constraints of price, of size, of strength, balance, of surface, of time etc.; each problem has its own peculiar list.

Q. Does design obey laws?

A. Aren’t constraints enough?

生动幽默，相比于追求全面的学术性解释要更能赢得设计师的心。“constraints”一个以前我们都在潜意识中回避的问题，成了主角。用艺术的角度去化解“constraints”。

Core Skills of Design

科学学科依赖于实践者在一个很窄的范围内成为专家，并且在越来越小的范围内知道得越来越多。而好的设计来源于成功的综合方案，在透析所有相关的限制与约束后。而约束的不同又定义了不同的设计学科。

5个设计的核心技巧：

1. To synthesize a solution from all of the relevant constraints, understanding everything that will make a difference to the result 从各种有关的约束限制中综合一个解决方案，了解每样东西会使结果产生变化
2. To frame,or reframe,the problem and objective 对问题和客观构建框架，或重构之
3. To create and envision alternatives 去创造并构建选择
4. To select from those alternatives,knowing intuitively how to choose the best approach
5. 在选项中，直觉地感觉到如何选择一个最佳方案
6. To visualize and prototype the intended solution 将解决方案视觉化并构建原型

而且设计地过程是迭代进行地，并不按照线性发展，也不需要遵循固定地法则，如同玩弹子机一样整个过程有许多不可预料的方向。

The process does not look like a linear system diagram, nor even a revolving wheel of iterations, but is more like playing with a pinball machine, where one bounces rapidly in unexpected directions

“潜知识”和“做中学”

Tacit knowledge & Learn by Doing

我搞不太清Tacitknowledge的确切解释，暂时译做“潜知识”。

Designers operate at a level of complexity in the synthesis of constraints where it is more effective to learn by doing, allowing the subconscious mind to inform intuitions that guide actions.

This is the reason that design education relies on a projectbased approach of “learning by doing.”

这就是设计教育依赖于以项目为基础的“做中学”的教育方法的原因。

When a problem is complex,with lots of constrains,it is much easier to recognize a good solution than to explain it.

当问题复杂，有许多的约束，那么识别一个好的设计方案对比于尝试去解释它更容易得多。

典型学生设计项目评价尺度：

1. Creativity/innovation 创造性与想象力
2. Aesthetics/quality 美学与品质
3. Human factors/values 人因与价值
4. Performance/technology 表达与技术
5. Completeness/presentation 完成度与展示

A Hierarchy of Complexity  复杂性的梯度

每个设计中所涉及的限制与制约条件是很复杂的，为了让我们更清楚得了解交互设计在整个设计中的位置，Moggridge特别写了这节内容和上面这张图表。下面把关于心理学的这两段翻译一下：

Cognitive psychology—the way the mind works 认知心理学

For the design of human-computer interactions

Enter the chip! Electronics started with computers, gradually invaded everyday things and places, and are now almost everywhere.This is where we pick up on my stories of designing
the laptop and the digital watch, as it is more and more difficult for the designer to understand intuitively about people and what they need and want, as the context is no longer just physical and biomechanical.

进入芯片！电子学开始于计算机，逐渐渗透到生活的方方面面，如像我所列举的自己设计笔记本电脑与使用电子闹钟的故事；现在设计师已经越来越难于只凭借直觉来了解人们和他们想的要的是什么？正如我们的生活中不再仅仅只有生物机械学层面的东西一样。

When you are concerned about the constraints that will matter to people when you are designing computers and things that are enhanced by electronic behaviors, you need a much more rigorous understanding of the way the mind works. When the design context includes machine intelligence as well as human intelligence, the design team will benefit from the expertise of a cognitive psychologist and will also need designers who are skilled at designing interactions. At this point in the hierarchy, we have arrived at the contents covered in the first five chapters.

当你考虑这些对于人们非常重要的约束时，当你设计计算机以及一切由电子行为增强的东西时，你需要更多对于思维的严格认真的了解，当设计场景中包含有机器智能，以及人工智能时，设计团队需要来自认知心理学家的意见以及需要有交互设计技能的设计师加入。

Where Does Interaction Design Fit?  交互设计的落脚点

上面这张图还是很清晰地反映了交互设计在物理世界与数字世界、主观世界（人）与客观世界（技术）中的位置。黄的都是设计，红的是着眼于人的技术，蓝的是偏重于客观世界的技术与工程，最后绿的是我们用来探索宇宙的科学。

这里我觉得奇怪的是网络设计比交互设计更趋于物理世界？在我看来，交互设计往往是物理世界与电子的数字世界间的桥梁，interface。

可能我还是比较关注带芯片的物的缘故吧。

在p661，有段Nicholas Negroponte很凶悍的话：

Even if you doubt that we are already in a digital age, it is clear that we are marching relentlessly toward a condition where everything that can be digital will be digital.What does thismean for interaction design?

无论你有没有做好进入数字化时代的准备，有一点是很清楚的，我们正以飞快的速度进入它，我们身边所有能被数字化的东西都将被数字化。这对于交互设计意味着什么？

因为我是下载的一章章电子版，所以书上所有的注释都没有。很可惜，不然可以查查老尼这段话的出处。

这章里还有几段很有意思的文字，一段写Moggridge去看RCA的学生毕业展览，他看的是交互设计系的作品，但是不知不觉走到了工业设计系的展台前。

Suddenly I looked up at the whole room, and
discovered to my surprise that I had drifted into the area occupied by the projects from the industrial design department, never noticing a difference in the nature of the work.

原因是交互设计的学生们设计的是聪明的东西，而工业设计的学生设计的东西也很聪明。（我翻译的不好，还是看原文比较幽默）

Just as the interaction designers were designing smart objects, the industrial designers were designing objects that were smart, finding it natural to include electronically enabled behaviors.

这里就又有了一个交互设计的地位问题了。它该是属于工业设计么？

Moggridge举了个例子，但是他好像没有给出定论，交互设计本身就还在发展之中。

Computer science emerged first and gave rise to new disciplines for the design of hardware and software. Eventually every engineer expected to use electronics and software in the natural course of development, so engineering education included learning about circuits and programming languages.However, this did not mean that the new disciplines of hardware and software design merged back into the traditional engineering design disciplines, but rather that all aspects of engineering design make use of technology, and all engineering designers can operate to some extent in the digital realm. It seems likely that a parallel to this will exist in the human disciplines, with all designers thinking it natural to include digital solutions as aspects of their designs, accepting the constraints and opportunities offered by new
technologies. At the same time there will continue to be interaction designers who have a more in-depth knowledge and expertise about designing interactions and remain the experts in the field. I think interaction design is here to stay.

计算机科学首先呈现并发展成为一个新学科是在硬件与软件的设计方面开始的。最后每个工程师都预料到在他们开发的核心领域将会应用到电子学与软件，所以工程学教育包括了学习电子电路和程序语言。然而，这并不意味着这个关于软硬件的新学科将吞并传统的工程设计学科，而只是说搜游的工程设计中会运用到这些技术，所有的工程师都会被要求在数字化领域有两把刷子而已。这种相似的情况也出现在人文学科中，所有的设计师都认为在他们的设计解决方案中会包含数字化的解决方案，他们接受这种约束，并视其为新的机会点。同时他们也将慢慢成为交互设计师，在他们有了更多更深入的相关知识和得到更深入的交互领域的专门技术并成为该领域的专家之后，我想这就是交互设计之所在。

Suri为ideo的用户研究做了很多扎实的工作，这张图表显示了不同类别的研究方法，横轴从左（明确）到右（潜在）表示了设计机会与用户需求的特征。纵轴指示了从上（宏观，统计层面）到下（微观，解释性层面）的不同研究技术。

传统的市场研究方法通过问卷海量调查或深度聚焦人群，以发现人们想要的，这些方法能够很好地找出人们嘴上想要的东西。

但是如果你的目标是创新设计，你的产品或服务并没有被想到过，所以很难被参与开发的用户所理解。这里就需要发现潜在需要与渴望的方法，以帮助设计团队确定潜在的机会。

The diagram lays out different kinds of research methods, showing a horizontal scale that characterizes design opportunities and user needs, from explicit (left) to latent (right). The vertical scale indicates the difference in techniques from macro (top) to micro (bottom).Traditionally, market research was developed to find out what people want by asking them directly through large-scale surveys or more in-depth focus groups; these methods work very well to find out what people say they want. If your goal is innovative design, your product or service has not even been thought of, so by definition it cannot be explained to research participants.This is where methods are needed to discover latent needs and desires that will help the members of the design team define potential opportunities. The examples on the diagram are video ethnography techniques on the macro scale, where stop frame video is set up to watch a space or task to reveal patterns of use. On the micro scale, the example is observational techniques, where members of the design team go to wherever the design context exists to see what people really do, as opposed to what they say they do.

People

交互设计成功的核心是设计者能找到理解最终用户的洞察力，生活环境，习惯，需求和渴望的方法。

It is essential to the success of interaction design that designers find a way to understand the perceptions, circumstances, habits, needs, and desires of the ultimate users. Jane Fulton Suri, 2005

在介绍ideo的51种研究用户的方法前，suri讲述了自己和ideo的思想演进：

在80年代中期，我努力想搞清楚交互设计会是什么，以及我们如何将我们的专长带入到电子学领域。在设计中，第一重要的是思考设计中人的这部分因素：谁是用户？他们的经验会让他们要什么？什么将给他们安全与快乐？

My first principle in design is to think first about the people part of the design:Who are the users? What do they want from the experience? What will give them satisfaction and enjoyment?

我传统的方法就是去观——在每一个现实的设计问题场景中发生了什么？

“观察”是在特别设计问题的场景中学习理解人们的最好方法。你需要观察在真实的情况下人们都做了些什么，这远比使用常规的问卷技术了解他们的想法与行为更有用。

在这些第一手的体验中，你会得到清晰而又鲜明的知识。

51 Ways of Learning about People

在1986年Moggridge遇见Suri前，Suri已经在英国从事了十年人因工程的研究，专注于消费产品的安全。但是让Suri一直很郁闷的是，她那时是的工作性质是基于事故的分析，而不是避免事故的设计工作。因为Moggridge的远见I thought this was a chance to integrate human factors expertise into my specialist team of designers，Suri被邀请加入IDEO。1991年以后在Suri的努力下，人因工程的考量渗透到每个IDEO的设计项目中去了。

在IDEO人因专家的主导下，结合大量商业项目的实践，IDEO总结了超过50种研究用户方方面面信息的方法，并将其归纳为四大类:学习、观察、提问以及尝试。

Learn,Look,Ask,and Try:“Learn”from the facts you gather,“Look”at what users do,“Ask”them to help, and “Try”it for yourself.

因为在国内没法买到这套卡片，我通过各个方法收集到了其中的大多数方法的照片，放在我的Picasa在线相册上。http://picasaweb.google.com/pemiamos/IDEOMethodCards02供有兴趣的同好参考，期待有朋友能帮我一起补齐.(因为我还是研究生，所以这种收集仅供我研究参考之用，希望不会侵害到IDEO的商业利益，其实国内有的话，我还是很愿意购置一套的，不是么？)

书上列举了几种卡片的例子以及一个媒体报道设计团队使用卡片的例子，比较好玩！念念着实开怀，能这样做设计是我们很多人的梦想，呵呵～～；－）

通过使用方法卡，我们可以抵制以自我为中心的想当然，及更好地引导我们的直觉力。让一个好的设计师没有一个大的自我意识是十分困难的，我们需要充分相信我们有能力依靠直觉的整合找到正确的解决方案，同时承认我们不太容易能找出清晰的逻辑依据。这就是为什么我们为自己做设计比为别人设计更容易。

51方法卡的使用价值在于让我们能聚焦于其他人（了解用户，他们的习惯以及场景），并在这个工程中获得灵感，是我们不陷入到我们自以为是的世界中去。如果设计师一天到晚在办公室面对电脑，那么他们做出的东西只是能让自己陶醉而已。设计师需要离开办公室，勇敢地开放自己的眼睛，去观察、去感受、去思考！

Remember the extremes

人的很多变化的特征影响到我们的设计；如兴趣、经验、学习速度、生活形态、财产、工作状态、生活环境等。要使我们的设计尽可能成功，那么就需要考虑到我们所设计对象的方方面面。

很多情况像上面这张正态分布曲线图所示，相对大多数人都集中在平均值上，只有少数人属于两端。当我们想要研究了解人的时候，很重要的是把那些在两头的人们考虑进去，不然我们的设计智能是个公约数。

举个简单的例子，我们设计ATM的密码输入的交互过程，我们发现有整整百分之五十的人需要比平均数更多的时间，这是个让人为难的问题！但是比较好的设计是包容全部的用户的，除了那最慢的百分之二的人。

相关文章:

• 网页可用性设计指导思路总结
• CRM平台项目的交互模式库总结（持续更新）
• 交互设计师-让世界因你而不同（1）总述
• 互联网产品的交互设计方法（UPA2008讲稿）
• 交互设计

]]> http://adamghost.com/2009/03/designing-interactions/feed/ 5 http://adamghost.com/2009/03/%e7%bd%91%e9%a1%b5%e5%8f%af%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e6%8c%87%e5%af%bc%e6%80%9d%e8%b7%af%e6%80%bb%e7%bb%93/ http://adamghost.com/2009/03/%e7%bd%91%e9%a1%b5%e5%8f%af%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e6%8c%87%e5%af%bc%e6%80%9d%e8%b7%af%e6%80%bb%e7%bb%93/#comments Tue, 10 Mar 2009 19:44:19 +0000 不一样的蚊子 http://adamghost.com/2009/03/%e7%bd%91%e9%a1%b5%e5%8f%af%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e6%8c%87%e5%af%bc%e6%80%9d%e8%b7%af%e6%80%bb%e7%bb%93/ 猛然在文档里翻到了，2年前看《点石成金 / Don’t make me think》做的笔记。

整体设计

核心思想：为扫描而设计，不为阅读而设计

1. 理清层次 每个页面的层次关系应该是很清楚的
2. 采用习惯 尽量利用我们已经习惯的用法
3. 划分区域 把页面划分成明确定义的区域
4. 明确提示 可点击，可操作的地方，给用户明显的标识
5. 减少干扰 最大限度降低其他非重要元素产生的干扰

理清层次

1. 越重要部分越突出，可以参考：页面重要区域划分
2. 语义逻辑上相关的部分在视觉层次上也相关
3. 进行合理的视觉上嵌套

主页设计

核心思想：能快速的让用户找到需要的东西，以及告诉用户如何开始。

主页需要展现的东西

1. 标识站点
2. 展示站点层次
3. 导读
4. 内容更新
5. 友情链接
6. 快速链接

网页可用性测试方法

1. 快速扫描网页，然后回答如下问题：
2. 这个网站是做什么的？
3. 应该从什么地方开始？

相关文章:

• CRM平台项目的交互模式库总结（持续更新）
• 交互设计师-让世界因你而不同（1）总述
• Designing Interactions 交互设计读书笔记整理以及下载
• 互联网产品的交互设计方法（UPA2008讲稿）
• 交互设计

]]> http://adamghost.com/2009/03/%e7%bd%91%e9%a1%b5%e5%8f%af%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e6%8c%87%e5%af%bc%e6%80%9d%e8%b7%af%e6%80%bb%e7%bb%93/feed/ 0