This document discusses designing for emotion and flow. It explains that flow is a state of intense concentration where one's attention is fully focused on an enjoyable activity. Flow occurs when there is a balance between the perceived challenges of a task and one's skills. The causes of flow include having a clear goal, receiving immediate feedback, and facing an appropriately challenging task. Designers can aim to create flow by removing distractions, providing feedback, and balancing perceived challenge with users' skills through intuitive interfaces that adapt over time. Flow tends to improve experiences and lead to positive emotions.

1. 为情感和流而设计
Design for Emotion and Flow
作者： Trevor van Gorp
译者：小方

2. 01/11 为情感和流而设计 Design for Emotion and Flow
我们创建软件和网站的显示和代表的人的信息。这些信息可能是任 We create software and websites to display and represent
information to people. That information could be anything; a
何一家公司的产品清单，您度假的照片，或从一个朋友的即时消息。在 company’s product list, pictures of your vacation, or an instant
这一刻，还有更多的信息，比历史上任何其他时间提供给您。 message from a friend. At this moment, there’s more information
available to you than at any other time in history.
所有这些信息有很多积极的影响，但它也带来了挑战。“信息消耗 All this information has a lot of positive effects, but it also creates
的是相当明显的，它消耗的受助人的关注 ...... 丰富的信息创建一个关注 challenges. “What information consumes is rather obvious; it
consumes the attention of its recipients … a wealth of information
贫困“（西蒙 1971 年）。当注意力成为一种稀缺资源，这是重要的投资
creates a poverty of attention” (Simon 1971). When attention
是明智的。信息建筑师和设计师发挥了关键作用，在确保他们设计的产 becomes a scarce resource, it’s important to invest it wisely.
品用户提供他们关注的投资回报“。 Information architects and designers play a critical role in ensuring
the products they design provide users’ with a return on their
investment of attention.
心理学家米哈里森特米哈伊的（1990）描述为“精神能量”集中注
The psychologist Mihaly Csikszentmihalyi (1990) has described
意力。传统意义上的能源一样，没有工作可以做，没有它，并通过工作，
focused attention as “psychic energy”. Like energy in the traditional
能量消耗。我们大多数人都经历了心理 / 情绪状态，我们关注的所有（或 sense, no work can be done without it, and through work that energy
能量）完全集中的活动。森特米哈伊（1990 年）命名这种状态“流”的 is consumed. Most of us have experienced a mental/emotional
state where all of our attention (or energy) is totally focused on an
基础上，与会者介绍了如何在他的研究经验。 activity. Csikszentmihalyi (1990) named this state “flow,” based on
how participants in his studies described the experience.
在这种意识的状态中，人们常常会遇到激烈的浓度，再加上最高性
In this state of consciousness, people often experience intense
能的享受和感受。在什么样分钟似乎传递小时。我们倾向于在几个中断， concentration and feelings of enjoyment, coupled with peak
我们的注意力变得集中的环境中进入这些国家所面临的挑战，我们相信 performance. Hours pass by in what seems like minutes. We tend
to enter these states in environments with few interruptions, where
我们能够与我们现有的技术处理。反馈是瞬时的，所以我们总是能够判 our attention becomes focused by a challenge that we’re confident
断如何密切，我们要完成我们的任务，并达到我们的目标。任务的重要性， we can handle with our existing skills. Feedback is instantaneous,
so we can always judge how close we are to accomplishing our task
影响我们的任务将是多么困难的动机和看法。
and reaching our goal. The importance of the task influences our
level of motivation and perceptions of how difficult the task will be.
注意力和流 Attention and Flow

3. 02/11 为情感和流而设计 Design for Emotion and Flow
流动状态相关的内容可分为三个方面 ; 1、流动的原因；2、流动的 The elements associated with the flow state can be classified
into the three areas; 1. Causes of Flow 2. Characteristics of
特征；3、流动的后果（Novak, Hoffman and Yung, 1999 年）。
Flow 3. Consequences of Flow (Novak, Hoffman and Yung,
1999).
1、流动的原因
• 一个明确的目标 1. Causes of Flow
• A clear goal
• 尝试成功的即时反馈，以达到这一目标
• Immediate feedback on the success of attempts to reach that goal
• 你相信你有能力处理的挑战 • A challenge you’re confident you have the skills to handle
2、流动的特点
2. Characteristics of Flow
• 完全的专注和集中注意力 • Total concentration and focused attention
• 某种意义上的控制之间的相互作用 • A sense of control over interactions
• Openness to new things
• 开放的新事物
• Increased exploratory behavior
• 增加探索行为 • Increased learning
• Positive feelings
• 增加学习
• 积极的情感
3. Consequences of Flow
3、流动的后果 • Loss of consciousness of self
• Distortions in the perception of time
• 自我意识的损失
• Activity is perceived as intrinsically rewarding
• 对时间的感知扭曲
• 活动被视为内在奖励 As designers, we focus on the elements that precede or cause
flow. Users visit sites with pre-existing goals (e.g., finding
information about a product). These goals evolve over time
作为设计师，我们专注于提前或导致流动的元素。用户访问网站与 as users complete tasks and their attention is drawn to other
预先存在的目标（例如，寻找产品的相关信息）。随着时间的推移，这 information. The main elements designers can control are:
些目标用户完成任务，他们的注意力被吸引到其他信息上。设计师可以
控制的主要元素是：

4. 03/11 为情感和流而设计 Design for Emotion and Flow
• 提供即时的反馈 • Providing immediate feedback
• Balancing the perception of challenge against users’ skills
• 平衡困难认知和用户能力
Designing for Flow
设计流 You don’t need to take a course or learn a new software
package to design for flow. In fact, you’re probably already
doing it. Begin by considering the desired outcome of every
为了设计流，你不需要上门课程或者学习新的软件。实际上 , 你已 interaction and then removing everything that distracts the user
经在做了。通过考虑每一步交互的用户期望结果从而移除那些分散用户 from accomplishing that outcome.
注意力且不利于完成期望结果的一切因素。
Start by removing distractions or impediments wherever
possible. For both physical and interactive products, this means
移除一些干扰和有可能的阻碍 , 对自然和的交互的产品来说 , 这意味 reducing or eliminating both external (i.e., environmental) and
internal (i.e., pain, discomfort, anxiety) distractions that cause
着要移去一切会引起用户情感反应的 ( 比如沮丧和身体不适、情感需求和
emotional responses like frustration or physical discomfort.
分散注意力 ) 不论是外部的 ( 比如环境 ) 还是内部的 ( 焦虑、痛苦等 ) 分 Emotions demand and divert the user’s attention. Providing
心事物。对用户的所有行为提供即时的反馈以减少用户的焦虑。页面布局、 immediate feedback for all user actions helps to reduce
信息设计、排版、交互设计和信息架构的有效运用都有助于平衡用户的 user anxiety. The effective use of layout, information design,
typography, interaction design and information architecture all
困难感知与能力水平。信息应该被细分为不会淹没用户认知体系的块。 help in balancing the perception of challenge against the user’s
skill level. Information should be broken down into manageable
当谈到用户的困难认知，这样去考虑：太少技巧遇到太大困难会引 “chunks” that don’t overwhelm users cognitive faculties.
起焦虑 ; 太多技巧遇到太少困难会感觉无聊。
When it comes to balancing the users’ perception of challenge,
think of it this way: too much challenge with too little skill causes
流发生在无聊和焦虑之间 , 把它想象成二者间的河流 ( 图一 )。 anxiety; and too little challenge with too much skill causes
boredom.
Flow occurs at the boundary between boredom and anxiety.
Think of it as a channel that runs between anxiety and boredom.
(Figure 1).

5. 04/11 为情感和流而设计 Design for Emotion and Flow
图 1 ：焦虑，无聊和流（ csikszentmihalyi ， 1990 年）(captions added
Figure 1: Anxiety, Boredom and Flow (Csikszentmihalyi, 1990)
(captions added van Gorp, 2006)
van Gorp, 2006 年 )
随着面对的挑战的增加 , 我们的焦虑逐渐增加并且偏离了流，重新
As the challenges we face increase, we become more anxious
回到流涉及到掌握更多的技巧以应对那些挑战 , 并减少我们的焦虑 ; 当我 and lose flow. Re-entering flow involves increasing our skills to
们的技术水平增强，我们会觉得无聊 , 除非我们寻找更大的挑战以匹配我 match these challenges and reduce anxiety. As we increase our
们的能力技巧。 skill level, we become bored unless we increase the challenge
to match our greater abilities.
要明白理解我们如何减少分心 , 让我们再回过头来看一下各个因素 To understand how we can reduce distractions, let’s examine
是如何应用到用户体验当中去的。流的起因对网站和应用设计有着最大 the different elements of flow again to see how each can be
applied to user experience. The causes of flow have the most
的影响。
implications for website and application design.
Causes of Flow
流的概念
1. A clear goal…
1. 明确的目标

6. 05/11 为情感和流而设计 Design for Emotion and Flow
用户要完成一个任务 , 比如寻找某些特定主题的信息或者娱乐冲浪。 The user navigates to accomplish a task, like seeking
information on a particular topic or surfing for fun. This is an
这是一个动态演变的目标 , 依赖于提供给用户的选项和合理的信息体系结
evolving goal, dependent on the options presented to the
构，直观的导航，有效的路径和明确的操作选项 ( 比如信息线索导向、面 user and aided by logical information architecture, intuitive
包屑导航、某种含义的标签、清楚的网页标题 ) 的辅助。 navigation, effective wayfinding and clear options for proceeding
like information scent, breadcrumbs, meaningful labels, clear
page titles, etc.
2. 达到目标过程中成功尝试的即时反馈
2. With immediate feedback on the success of attempts to
以视觉转化和来自链接、按钮、菜单和其他导航的声音来给用户及
reach that goal…
时的可感知的反馈。 The user receives quick, sensory feedback in the form of a
visual shift and/or sound from links, buttons, menus, or other
3. 向用户展现：这个困难挑战你能应付处理 navigation items.
3. Presented as a challenge that you have the skills to
行动的机会是与用户的能力平衡的 , 在一个较低的水平 , 这是通过提 handle.
供完整的页面和消除不必要的信息来减轻用户的认知负载 ; 随着用户能力
The opportunities for action are balanced with the user’s
的不断增加 , 交互的复杂程度也要随着增加 , 适应性的交互技术允许用户
ability. At a basic level, this is accomplished by providing an
调整控制交互的复杂程度来满足他们不断增强的能力水平。 uncluttered interface and eliminating unnecessary information to
limit the user’s cognitive load. As the users’ skill increases over
time, the interface can increase its complexity as well. Adaptive
interface technologies allow the user to adjust the complexity of
流和情感 the interface to meet their enhanced skills.
流的发生往往在用户的能力和面对的挑战水平比较高的阶段 , 如果 Flow and Emotion
挑战太低 , 而用户水平太高 , 那样用户就不会有动力去做任何事情。这种
Flow tends to occur in situations with higher levels of challenge
程度的刺激或“激励”在人体内是生理（即身体）方面的情感。激励的 and skill. If the challenge is too easy, or user skill levels are very
程度会影响我们对特定情感的强烈程度的感知 , 还有情感对注意力需求的 high, anxiety can be so low that there is little motivation to do
强烈程度。在进化阶段 , 很容易看出其中原由 : 你的祖先对捕食者关注越 anything. This level of activation or “arousal” in the body is the

7. 06/11 为情感和流而设计 Design for Emotion and Flow
多 , 越有可能活下来繁衍子孙 , 把自己的基因代代相传。 physiological (i.e., bodily) dimension of emotion. The level of
arousal affects how intensely we experience a given emotion,
and intense emotions demand our attention. In evolutionary
愉快和不愉快的产品和体验都能够增加刺激程度 , 沮丧和兴奋都可 terms, it’s easy to see why; the more attention your ancestors
以 , 所以要用大的图像 , 亮丽的颜色和高对比度 , 所以加大图像尺寸和把 paid to predators, the more likely they were to survive and
reproduce, passing their genes on to their descendants, people
其中内容尽可能的排列紧密能够加强刺激。
like you and me.
Both pleasant and unpleasant objects and experiences can
increase arousal levels. Frustration and the excitement both
increase arousal levels. So do large images, bright colors, and
high contrast (van Gorp, 2006). For example, increasing the
size of an image and moving anyone in it closer within the frame
increase arousal levels.
图 2 ：人际距离和激励 Figure 2: Interpersonal Distance and Arousal
How does looking at the picture on the right make you feel compared to
左右相比 , 给你的感觉有何不同 ? the one on the left?
The key to balancing arousal is to match the perceived
平衡刺激的关键在于使认知挑战与用户的能力水平相统一 , 用户的 challenge to the users’ skill level. Since skill levels differ from
能力水平随着任务的发展和不同而有所不同 , 应该提供简单友好的界面但 one user to the next based on their previous experiences and
the type of task, interfaces should be very user-friendly but also
应该提供给那些专家级用户适合他们能力水平的更困难的挑战。这些挑
allow more advanced users to find challenges appropriate for
战可以是视觉上的和内容方面的交互。简单来说，一个网站的一切 , 包括 their skill level. These challenges can include the visual aspects
内容、信息架构、交互设计和视觉设计都能对流有所帮助。 as well as the content (King 2003). To put it simply, everything
about a site, including content, information architecture,
interaction design, and visual design can contribute to flow.
目标导向 VS 经验性使用 Goal-directed vs. Experiential Use
使用一个网站不同的动机应该采用不同的设计以方便流 , 新用户往 Different motivations for using a website require different

8. 07/11 为情感和流而设计 Design for Emotion and Flow
往以比较娱乐的方式看待网络 , 而有经验的用户往往比较现实。这导致了 designs to facilitate flow(Novak, Hoffman and Yung 1996).
Novice users tend to see the Internet in a playful way, while
目标导向和经验性使用的差别。流经常发生在目标导向过程中 , 因为有更
more experienced users tend to view the Internet in a more
高的挑战存在。 utilitarian way (King 2003). This leads to a distinction between
experiential and goal-directed use. Flow tends to occur more
often during goal-directed use, because of the higher challenge
新用户 - 经验性使用
involved.
• 更少的挑战
• 更多的发现探索 Novice Users – Experiential use
• 娱乐导向
• Less challenging
• More exploratory
• Entertainment-oriented
有经验用户 - 倾向于目标导向
• 更多的挑战 Experienced Users – tendency towards Goal-directed use
• 更少的探索发现
• 与任务紧密相连 ( 搜索、工作、购物 ) • More challenging
• Less exploratory
• Connected with tasks (e.g. research, work and shopping)

9. 08/11 为情感和流而设计 Design for Emotion and Flow
图 3 ： disturbia 电影网站
Figure 3: Disturbia film site
An example of a visually rich, entertainment-oriented site with little or no
一个例子，一个视觉丰富，娱乐为主的网站很少或根本没有涉及的挑战。 challenge involved.
较低等级的挑战是在一个娱乐为导向的网站 , 用户使用过程中伴随 The lower level of challenge in an entertainment-oriented,
experiential site means there is a lower level of anxiety
着的是较低程度的焦虑 , 较少忧虑的用户适合于以创造性的思维来决定如
connected with its use. Someone who is less anxious is more
何浏览网站和忽视小的问题。这里的动力是通过视觉元素 , 亮丽的颜色和 capable of using creative thought to determine how to navigate
高对比度所带来的潜意识所驱动。经验性使用的网站应该使用更多的视 a website and overlook minor problems. Motivation here is
driven by subconscious arousal triggered by interesting visual
觉元素来吸引更多的注意力从而达到流的体验。
elements, bright colors or high contrast. Experiential sites can
and should be more arousing visually to demand the greater
attention that can lead to flow experiences.
图 4 ：雅虎
Figure 4: Yahoo

10. 09/11 为情感和流而设计 Design for Emotion and Flow
完成任务的难度越大越会给用用户更多的激励 , 焦虑会让用户遭遇 The greater challenge of completing tasks (possibly under
deadlines) on a goal-directed site creates more higher
困难时更少的去创造性的思考。一个产品如果在一个压力环境下使用 , 比
arousal. Anxiety makes users less able to think creatively
如医院的手术室 , 可用性就变的至关重要。所有的相关信息应该唾手可得 when problems are encountered. If a product will be used in a
而且所有的反馈都应该是即时的和明确的。一个目标导向的网站应该使 stressful environment, like a hospital operating room, usability
becomes crucial. All relevant information needs to be close at
用更少的视觉元素 , 用户已经焦虑的考虑是否能完成任务 , 不会被这些视
hand and visible and feedback should be clear and immediate.
觉元素所淹没。 A goal-directed site can and should be less visually rich so that
users, already anxious at the prospect of a challenging task, are
not overwhelmed.
Figure 5: Tango Tax website
图 5 ：探戈税务网站 When tasks are particularly unpleasant, we often lack the
motivation necessary to complete them. In these cases,
increasing the arousal level through the use of narrative can
当任务特别的不愉快 , 我们通常很难有足够的动力去完成它 , 这个时 increase the user’s motivation. The Tango Tax website uses
候 , 通过故事性的描述通常能提高激励水平。探戈税务网站使用类似于电
visual elements that resemble those found in movie posters and
has a high contrast, cinematic feel that increases arousal. The
影海报的高对比度的故事性视觉元素来增加激励。软件也经常用故事性 software also introduces the classic cinematic narrative element
元素 " 我们 VS 他们 " 来增加激励。 of “us vs. them” to help increase user motivation.

11. 10/11 为情感和流而设计 Design for Emotion and Flow
结论 - 促进流的网站特征 Conclusions – Traits of Websites that
Encourage Flow
如何应用这些想法取决于你的目标受众 , 包括他们的内在和外在的
How you apply these ideas depends on your target audience,
使用背景 ; 考虑你的用户的可能的情感状态 , 用户环境周围是否有噪音 ,
as well as their internal and external use contexts. Consider
人群 , 明亮颜色的物体去分散她的注意力 ? the likely emotional state of your users. Are there loud noises,
crowds, brightly colored objects or other distractions in the
user’s environment?
下面是一些促进流的网站的特征 :
Here are some basic website traits that will help to encourage
• 清晰的导航 : 让用户很轻松的知道她现在在哪 , 去过哪 , 可以去哪 , 通 flow.
过使用路牌标志比如 : 面包屑 , 页面标题 , 点击过的链接提示。
• Clear navigation: Make it easy for the user to know where they are,
• 即时的反馈信息 : 确保所有导航 , 比如链接 , 按钮 , 菜单等提供清晰有 where they can go, and where they’ve been, by including signposts
such as breadcrumbs, effective page titles, and visited link indicators.
效即时的反馈。对用户的所有行为提供反馈 , 当这一点不能实现时 , 提
• Immediate Feedback: Make sure all navigation, such as links,
供其他的暗示来吸引住用户的注意力 ( 比如进度条 )。 buttons, and menus provide quick and effective feedback. Offer
• 平衡用户面对的困难和自身能力 : 由于用户能力水平不同 , 所以平衡视 feedback for all user actions. When this isn’t possible, provide an
indicator to hold the user’s attention while waiting (e.g., progress bar).
觉设计的复杂性和用户完成任务的数目和使用的特征功能就取决于你 , • Balance the Perception of Challenge With the User’s Skill: Since
考虑他们是要经验性的娱乐使用还是要完成重要的任务 , 根据不同的用 user skill levels differ, it’s up to you to balance the complexity of
the visual design with the number of tasks and features people can
户使用场景度身设计你的网站 : 更多的视觉因素给娱乐性经验使用 , 更 use. Consider whether they are likely surfing experientially for fun
少的给目标导向的使用。 or completing an important task. Tailor your sites to your audience’s
scenario of use: more visually rich for experiential use and less so for
goal-directed use.
适应性强的交互界面允许用户选择展示的细节的多少来增减感知困
Adaptable interfaces that allow the user to increase or decrease
难 , 简单化对新用户和老用户来说都可以减少忧虑 , 这一点在高度紧张的
the perceived challenge by choosing how much detail is
环境中至关重要。对老用户来说提供丰富信息化的展示可以降低困难。 displayed. Simplicity helps reduce anxiety for both novices and
记住 , 设计流并不需要专门的软件或者技能 , 只是另外一种思维方式 , 在 experts, which is especially crucial in highly stressful situations.
设计和挑战之间找到合适的平衡点能够让用户集中注意力并制造流 , 这将
Options for information-rich displays can introduce challenge for
more experienced users.
可以创造投入和沉浸的用户体验。

12. 11/11 为情感和流而设计 Design for Emotion and Flow
不管你是一个信息架构师 , 交互设计师或视觉设计师 , 你的工作应该 Whether you’re an information architect, interaction designer
or visual designer, your work should compel users to invest
让用户投入他们的注意力 , 然后给他们提供一个好的投资回报率。记住 ,
their attention, and then provide them with a return on that
设计流不需要一套新的工具和技能 , 只有一种不同的思维方式。找到正确 investment.Remember, designing for flow doesn’t require a new
平衡设计和挑战的方法 , 就可以帮助集中注重力 , 创造流 , 这会形成一个 set of tools or skills – only a different way of thinking. Finding the
right balance of design and challenge can help focus attention
引人入胜的用户体验。
and create flow, which results in immersive and engaging user
experiences.