In 2002, a research group discovered something interesting. The Stanford Web Credibility Project* set out to learn what causes people to trust or distrust websites, and much of what they found made intuitive sense: company reputation, customer service, sponsorships, and ads all helped users decide whether or not a website was credible. But the most important factor—number one on their list—was the appearance of the website. Users did not trust sites that looked amateurish. Sites that made the effort to craft a nice, professionally designed look made a lot more headway with users, even if those users had few other reasons to trust the site.

Herersquo;s another data point. Donald Norman, one of the best-known gurus of interaction design, concluded that “positive affect enhances creative, breadth-first thinking whereas negative affect focuses cognition, enhancing depth-first processing and minimizing distractions.” He added: “Positive affect makes people more tolerant of minor difficulties and more flexible and creative in finding solutions.”dagger; Interfaces actually become more usable when people enjoy using them.

Looking good matters.

For many chapters now, wersquo;ve talked about the structure, form, and behavior of an application; now wersquo;ll focus more on its “skin” or its “look-and-feel.” Chapter 4 discussed some graphic design basics. That chapter covered visual hierarchy, visual flow, focal points, and the Gestalt principles of proximity, similarity, continuity, and closure. These topics form the foundation of page organization, and should not be shortchanged.

But therersquo;s more to a nice house than just its room layout. When you pay for a welldesigned new house, you also expect beautiful carpets, paint colors, wall textures, and other surface treatments. Without them, a house can be perfectly functional but uninspiring. Completing the job means paying attention to detail, fit, and finish.

Beautiful details donrsquo;t necessarily affect the efficiency with which people accomplish tasks in the house or interface (although research indicates that it sometimes does). But they certainly affect whether or not people enjoy it. That, in turn, affects other behavior—such as how long users linger and explore, whether they choose to go there again, and whether they recommend it to other people. You could even think about it as a moral issue. What kind of experience do you want your users to have? Do you want to give them an all-gray application that bores them, or a flashy ad-filled application that irritates them? Would you rather give them something they enjoy looking at, maybe for hours at a time?

Of course, far more than visual style influences a userrsquo;s emotional response (affect). Chapter 1 began discussing other considerations, such as how well you anticipate usersrsquo; usage habits. Software can pleasantly surprise people with considerate design. Tightly packed layouts evoke a different affective response than sparse, open layouts. Language and verbal tone play a huge part in this response, as does the quality of the software itself—does it “just work,” and is it fast and responsive?

A well-designed interface takes all of these factors into account. When content, meaning, and interactive behavior all work in concert with your visual style, you can evoke a chosen emotional response very effectively.

With products and websites, stylistic elements are often designed to support branding. The design of any software product or site expresses something about the organization that produced it (even if itrsquo;s a loosely knit group of open source developers). It might say something neutral, or it might send a focused message: “You can trust us,” “Wersquo;re cool,” “We build exciting things.” A brand identity encompasses more than just a logo and tag line. It runs throughout an organizationrsquo;s product designs, its website, and its advertising materials—in fact, the brandrsquo;s chosen color schemes, fonts, iconography, and vocabulary show up everywhere. When planned well, a complete brand identity is coherent and intentional.

A brand identity is important because it establishes familiarity and sets expectations for someonersquo;s experience with an organizationrsquo;s products. Ultimately, a good brand should make people feel better about using those products. Look at what Apple was able to do with brand loyalty: many people love Apple products and seek them out.

In any case, whether or not they are intended to support a brand, stylistic elements make statements about your product. They communicate attributes such as reliability, excitement, playfulness, energy, calmness, strength, tension, and joy. What do you want to communicate?

To explore how styles evoke different visceral and emotional reactions, we can try applying different visual styles to identical content. The actual content isnrsquo;t even that important—wersquo;re looking for immediate, prerational reactions here, not the impressions gained from reading and interacting with the content.

Color is immediate. Itrsquo;s one of the first things you perceive about a design, along with basic forms and shapes. Yet the application of color to art and design is infinitely subtle— master painters have studied it for centuries. We can only scratch the surface here.

When devising a color scheme for an interface, first rule out anything that makes the text difficult to read:

bull; Always put dark foregrounds against light backgrounds, and vice versa—to test, pull the design into an image tool such as Photoshop and desaturate it (make it grayscale).

bull; Never use red versus green as a critical color distinction, since many colorblind people wonrsquo;t be able to see the difference. Statistically, 10% of men have some form of colorblindness, as do about 1% of women

bull; Never put bright blue, small text on a bright red or orange background or vice versa, because human eyes quickly get fatigued when reading text written in

剩余内容已隐藏，支付完成后下载完整资料

2002 年，一个研究小组得到了一些有趣的发现。斯坦福 Web 可信性项目 1 开始了解是 什么因素让人们对网站产生信任或者不信任，而很多因素在他们的发现中都很明显 ： 公司声誉、客户服务、出资人，还有广告，这些都会让用户决定该网站是否值得信任。

但是最重要的因素——在他们的列表中排在第一位的——却是网站的外观。用户不信 任那些看起来很不专业的网站。那些努力提供美观的、专业设计的网站给用户留下了 很好的印象，哪怕用户并没有其他很多理由来信任这个站点。

这里还有另外一条数据补充说明了这一点。Donald Norman，交互设计领域一名非常著 名的大师，总结说 ： “积极的情感增强了创造性和广度优先的思考，而负面的情感集中 在认知上，增强深度优先处理并把干扰降到最少。”他还补充说 ： “积极的情感让人们 更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”2 当人们喜欢某些 界面的时候，它们事实上会变得更可用。

看起来美观很重要。

到目前为止，我们已经花了很多章节来讲述结构、表单，以及应用系统的行为。现在 我要把注意力集中在“外表”上，或者说“外观和感觉”（look-and-feel）上。第 4 章讲 述了一些图形设计基本知识，包括视觉层次结构、视觉流、焦点，格式塔原则中的相 邻性、相似性和连续性，以及闭合性原则。这些话题组成了页面组织基础，应该好好 学习。

但是一所很好的房子除了布局之外还有更多的因素。当你购买一所设计良好的新房子 时，你还希望它有漂亮的地毯、粉刷颜色、墙饰和其他外观处理。没有这些，可能房子在功能上非常出众，但是并不会让人心动。要完成整个工程意味着需要注重细节， 在调整和修饰上付出努力。

漂亮的细节并不一定会影响人们在这所房子里（或界面上，尽管研究表明有时候确实 会）完成任务的效率。但是它们确实会影响人们的心情，进而影响到其他行为——例 如，他们会在这里逗留和探索多长时间、是否选择再次回来访问，以及是否会推荐给 别人，等等。

你甚至可能会把它看成一个道德问题。你希望你的用户会有什么样的体验？你想把应 用弄得灰蒙蒙的让他们觉得很无聊，还是充满了飞来飞去的广告，让他们觉得很恼 火？还是愿意为他们提供一些他们喜欢，甚至会看上几个小时的东西？

当然，除了视觉风格之外，还有很多因素会对用户的情绪反应（情感）产生影响。第 1 章讲到了一些其他方面，例如你应该预计他们的使用习惯。软件可以用贴心的设计给 人们带来惊喜。满满当当挤在一起的布局和宽松开放的布局会触发人们不同的情感反 应。语言和语气在这种反应里影响很大，软件本身的质量也是——它是否工作良好？ 是否又快、反应又灵敏？

设计良好的界面需要把这些因素都考虑进去。当内容、含义和交互行为都与你的视觉 风格和谐一致的时候，你可以非常有效地唤起某种意想之中的情感反应。

产品和网站的风格通常要迎合品牌形象。任何软件产品或网站的设计都传达了某种关 于创建它的企业的特征（哪怕它是开源软件开发人员的松散组织）。它表达的意思可能 很中性，或者传达出一种强烈的信息，如“我们值得信赖”、“我们很酷”。“我们的产 品令人激动”。品牌标识不仅仅表现在商标和广告词中，它也遍布在一个企业的产品设 计、它的网站，以及它的广告材料中——事实上，品牌对配色方案的选择、字体、图形、 词汇表，体现在各个地方。只要规划得当，品牌形象就可以做到完整、一致，并传达 明确的意义。

品牌标识很重要，因为它建立了熟悉感，并为人们对这个公司的产品体验设定了期望。 最终，一个良好的品牌应该让人在使用该品牌产品的时候感觉良好。看看苹果公司在 品牌忠诚度上的成绩 ：很多人喜欢苹果的产品并求之若渴。

在任何情况下，不管风格化的元素是否旨在迎合品牌形象，它们都是在表述你的产品。 它们传达了产品的个性，例如可靠、令人激动、好玩、充满活力、冷静、有力、紧张、 快乐等。你得考虑它们要传达什么。

要了解风格会引发什么样的内在的及情绪上的反应，我们可以试试对同样的内容应用 不同的风格。实际的内容并不是那么重要——我们是在寻找即时的、下意识的反应， 而不是通过对内容进行阅读和交互之后的印象。

我们对颜色的反应是很直接的。当你看到一份设计时，最先看到的就是颜色、基本形 状和外观。不过，颜色在艺术和设计中的应用非常微妙——绘画大师们已经研究了几 个世纪。我们在这里只能描述一下它的皮毛。

在为界面设计色彩方案的时候，最先需要注意的事情就是要避免影响可读性的配色方 案。

bull; 总是在深色的背景上放置浅色的前景对象，或者反过来—— 要测试，把这个设计 放到一个 Photoshop 那样的图像工具中，并降低饱和度（让它变成灰度图片），看看效果怎样。

bull; 永远不要采用红色和绿色来区分重要的元素，因为很多色盲患者将看不到它们的区 别。统计数据表示，10% 的男士和 1% 的女士有某种程度的色盲。

bull; 永远不要在明亮的红色和橙色背景上显示蓝色的小字，或者反过来，因为人眼不容 易阅读这种互补色（在色彩轮上位于相对的位置）之下的文字。

除了上面这些原则，还有几则供参考的色彩使用指南。

冷色调和暖色调

人们认为红色、橙色、黄色、褐色和米色都是暖色调的颜色，而蓝色、绿色、紫色、 灰色（各种灰色）及白色都是冷色调的颜色。

深色背景和浅色背景

如果采用浅色的背景——白色、米色和浅灰色，页面的感觉和深色背景的感觉完全 不同。浅背景更常用于计算机界面（和印刷页面）；深色背景的感觉更深刻、更阴暗， 或者更有活力，依其他设计因素而定。

高对比度和低对比度

不管背景色是深还是浅，在这个背景中的元素对它来说要么对比很强，要么对比很 弱。强烈的对比会让人觉得紧张、有力和大胆，而弱的对比会更平滑，更让人放松。

饱和色与不饱和色

高度饱和的颜色，或者说纯色——例如，明亮的黄色、红色和绿色——让人觉得 生动、明亮、有力、温暖。它们很大胆，并且色泽鲜明。但是如果过度使用这些 高饱和的颜色，会让视觉疲劳，因此绝大多数的 UI 设计师们都会保守地使用它们， 他们往往只选择其中一种或两种。而暗淡的颜色，不管是深色还是浅色（或者说不 同的色调或色彩）构成了调色板中的大部分区域。

色调搭配

一旦开始结合多种颜色，就会出现一些有趣的效果。两种饱和的颜色比单独使用一 种更有表现力，更动感，更丰富。如果一个页面上结合了一种饱和的颜色和一组不饱和的颜色，将把读者的注意力直接吸引到那个饱和的颜色上，并建立颜色层 次——更明亮、更强烈的颜色看起来离读者更近，而灰色和暗淡的颜色将离读者更 远。强烈的色彩层次会让设计非常生动。柔和的设计，使用更多模糊的或浅的颜色， 会让设计更平静。下面的“少一点颜色、多一些价值（Few Hues, Many Values）” 模式将进一步讨论这个问题。

一份设计可能会让你想起某种文化上的东西——某个品牌、电影、艺术风格、历史时代、 文艺流派，或者一个隐藏的笑话。熟悉的含义可能会引发强烈的记忆或情感，胜过其 他所有的设计因素， 尽管最好的设计会让文化和其他设计因素保持一致。这当然是有意的。 感觉这个页面很生动好玩——注意那些角度、颜色和排版方式。很多美国成年人的情 感反应可能是“有点傻”、“怀旧”、“复古”，或类似的感觉。这份设计里的所有元素一 起产生了这种具体的直觉反应。还有一些别的 CSS 设计，重现了 Bauhaus 建筑学派的 风格、近代艺术风格、达达主义风格、搞笑书籍风格，甚至苏联时期的共产主义宣传 海报风格。

显然，如果你要表达明显的文化含义，就必须考虑一下你要面对的受众。10 岁的小朋 友领会不到 20 世纪 70 年代的艺术潮流。印度的年轻人可能也领会不到。但是如果你 的受众很明确，你知道某种文化含义对他们来说很熟悉，那么这种文化含义可能是一 个很好的引子，把对方深深地吸引到你的设计中来。

在功能性的应用设计中很少会使用文化含义，但是你也会在一些应用的皮肤和主 题（Skins and Themes）中看到它们。你也可能在一些应用中找到文化含义，例如 QuickBooks，在这个应用中，一些页面看起来像支票和账单。它们实际上已经超越了 风格设计，成为一种交互隐喻，不过这个隐喻仍然是文化上的——如果某个人从来没 见过支票簿，就不会和见过的人产生同样的反应。

好的设计具有完整性 ：它会形成一个整体，每个单独的元素会在结构上内在地对其他 元素提供支持。要做到那样很难，我没法给你一个快速公式化的规则来做到它，它需要技巧，需要实践。

但是，对视觉完整性起很大作用的一个因素是视觉元素或视觉主题的不断重现。我们 已经谈到过角度和曲线，你可以使用同样角度的斜线，或者类似弧度的曲线，作为设计里的重复元素。角落处理（Corner Treatments）模式讲述的就是这样的处理方式。

还有，也要考虑一下排版方式。只采用一种正文字体，虽然其他字体可以很好地应用在 一些小区域里，例如侧边栏和导航链接（它们和正文字体相比更突出）。如果你有几个标题或带标题的栏目，那么对它们使用同样的字体。你也可以把小的图形元素（例如 线条宽度和颜色），从你的字体中拉出来放到其余的设计中。 当类似的文本或控件沿着一条直线重复出现的时候，就产生了一个视觉旋律。

如果是在为 Web 设计，你可能已经非常熟悉前面讲到的内容。人们期望网站——并且 延伸到 Web 应用——在图形上很美观，而且你很少发现它们看起来非常平淡、没有特色。

但是，如果你是在设计桌面应用，那应该怎么办？如果你试图把这些原则只应用到控件 的外观和感觉上——也就是说，控件怎样描绘——那你的选择不多。Java 应用可以从 一些外观和感觉选项中进行选择，但它们中的绝大多数都是土土的，相当朴素。Linux 应用也有一些不错的选择，例如 GNOME 的应用主题。但是纯粹的 Windows 或 Mac 应 用总体上使用标准的平台外观和感觉风格，除非你非常努力想要自己另外定制开发一 种风格。

在这样的情形下，如果只使用平台风格的外观和感觉标准，我们会原谅你，你可以把 你的图形设计注意力集中到别的地方。

但是，和以前相比，一些应用现在看起来越来越“Web 化”或“经过精心设计”了， 而且它们总的来说看起来更漂亮了。微软的 Money 2000 就是第一个打破常规的主流 应用。它的设计师选择在顶部边距使用背景图片，应用了渐变填充、平滑的标题字体，以及一套不寻常的颜色方案。其他应用也进行了类似的努力。

甚至就算你确实在控件上使用了朴素的外观和感觉，也还有其他一些方式变得更有创意。

背景

在大的背景区域应用平缓的图片、渐变填充和细致的底纹或者重复的模式，可以让 一个界面变得眼前一亮。可以在对话框或页面背景上使用它们，在树、表格或列表 的背景上使用，也可以在方框的背景上应用（和它的边框一起）。参见深色背景（Deep Background）模式。

颜色和字体

也常常可以在本地外观的 UI 中控制颜色方案和字体选择。例如，你可能会在标题 处使用一种特别的字体，比标准的对话框字体大上几个字号，也可能再加上一块反 差较大的背景颜色。如果是设计带标题的区域（Title Sections，详见第 4 章）模式 的页面外观，可以考虑使用这种方法。

边界

边界常常是另一个体现创意的地方。同样，如果你使用带标题的区域或其他任何 一种物理分组，你也许可以改变这些边界的样式。宽度不大的固定颜色方框就很 好，下凹的框看起来比较过时。参见角落处理（Corner Treatments）和边界回应字 体（Borders That Echo Fonts）这两个模式。

图片

在某些 UI 工具箱里，有一些控件能让你改变它们的标准外观，可以逐个给它们加 上背景颜色。 例如，按钮就通常可以这么做，所以你的按钮，包括它们的边界可 以看起来像任何你想要的效果。表格、树和列表有时候可以允许你决定它们的元素 描绘方式（在 Java Swing 中，你完全可以控制这些元素的渲染方式，其他几个工 具箱则至少可以让你使用自定义的图标）。你也可以在 UI 布局上放一些静态图片， 这样就可以在任何地方放置任何尺寸的图片了。

这里最大的危险是可访问性（accessibility）。Windows 那样的操作系统允许用户改变桌 面的颜色/字体主题，这么做并不完全是为了好玩——视力受损的用户可以使用那些带 有高对比的颜色方案和大字体的主题，这样他们会看得更清楚。确定你的设计可以适 应这些高对比的主题。有必要这么做。4

同样，你也可能会让那些常规的文本标签变得更丰富，采用图片，加上特别的字体，可 能带有光晕或阴影效果，以及复杂的背景。这么做在 Web 页面上很常见。如果你坚持用图片代替文本，那么需要为这个图片提供足够的信息来让屏幕阅读器（例如 JAWS） 能读到它们（具体怎么做取决于你正在使用的 UI 技术）。

另一个潜在的危险是会让你的用户变得疲惫。如果你在设计一个全屏幕或长时间使用 的应用，那就调整一下饱和的颜色、字体大小、强烈的对比，以及那些抢眼的底纹—— 让设计更安静，而不是更喧闹。更重要的是，如果你的应用将会使用在高压力的环境下， 例如重机器的控制面板，那么去掉任何会分散用户注意力的多余元素。在这种情况下， 认知因素远远要比审美重要。

这些模式（除了皮肤和主题模式）都应用了前面介绍部分讲到的那些概念。它们讲述 了如何应用这些概念的具体方法。例如，角落处理（Corner Treatments）模式就表述了 一种重复视觉主题的方法，而边界回应字体（Borders That Echo Fonts）模式是另一种 做法。深色背景（Deep Background）模式讲的是底纹选择，发丝（Hairlines）模式也是。 还有，在粗细字体对比

剩余内容已隐藏，支付完成后下载完整资料

资料编号：[29770]，资料为PDF文档或Word文档，PDF文档可免费转换为Word