UCD翻译小组 - UCD大社区

可读性:优化文本长度

波希米亚 — 2011-12-01 22:50:28

Readability: the Optimal Line Length

Baymard.com版权所有
作者：Christian Holst
译者：UCD翻译小组，波希米亚
原文地址： http://baymard.com/blog/line-length-readability

译者序：直接捞干的来了！

提升文本可读性的关键之一，就是让每行文本承载合适的字数。这不仅仅是设计一下文本宽度的问题，它也应该是一个易读性的问题。

文本最佳长度是每行承载50-60字符，包括空格（“Typographie”, E. Ruder）。也有其他资料建议不超过75字/行也可以接受。但你一定会问，不按这样的标准做又会怎样？

太长－如果一行里文字太多，用户眼球很难长时间聚焦文本。因为文本长度过长会让人很难注意到段落的起点和终点。此外，对于这么大块文本来说，也很难对当前行进行继续阅读。（译者注：稍一走神儿，就找不到读到哪了。都有过这样的经历吧？）
太短－如果一行里文字太少，眼睛要不停的来回扫视，破坏了阅读节奏。同时，每行文本太短也样会让人觉得紧张，这行没看完就跳到下一行去了（很可能一些重要的词会被跳过）。

原本跳到下一行文字时，潜意识里是会那么有点小亢奋（只要别太频繁，原因见上面两点）。因此在每一行的开头，读者的精力都很集中，但这种专注会逐渐消褪，可能还没等把这行看完（“Typographie”, E. Ruder）。

为了避免文本过长或过短所带来的弊端，同时又能持续的激励读者，我们建议把每行承载的文本量控制在5-75个字符（译者注：中文建议35-45个汉字，14px）。

网页设计中如何获得最佳长度

在网页设计中，可以使用em或px（像素）来实现每行字符的最佳数目（使用em可以获得很好的效果，但操作起来比px略显复杂）。其实无论选择哪一种，要获得最佳效果，都需要为你的读者设置一个固定宽度。

这也是我们为什么不推荐使用“流式”布局的原因之一：实际上你在强制用户通过改变浏览器窗口，来获得更好的阅读体验。当想到时下显示器屏幕有这么多不同的分辨率，很明显，“流式”布局会让文本行变得要么宽，要么窄。

正如大家看到的，在baymard.com站上，我们使用了17px的Arial来呈现文字。文章容器宽度为504px，每一行大概65个字符。

在你的页面中，每行显示多少个字符？50-75个？如果你想让你的读者拥有更好的阅读体验，就该这么做。

扩展阅读

Better Web Readability Project http://code.google.com/p/better-web-readability-project/
争论 iPad（上）：行宽与阅读 http://www.typeisbeautiful.com/2010/05/2537

2009 年Logo设计和品牌打造趋势

UCD翻译小组 — 2010-03-04 00:16:33

编者语：这篇文章是ucdchina翻译小组一周前推荐，忙里偷闲fan花了些时间翻译了下，结果忙忘了今天才放出来。实在不好意思；logo design是平面设计中的非常主要的部分，对于logo设计样式的变化，预示着整个设计潮流的动向如何，甚至在很大程度上显示文化的走向；我们有必要了解一下所谓的趋势，至于趋势本身，也是仁者见仁智者见智的，但有些总结与比较还是值得瞅瞅的；触发的作用往往尤其重要，是提升的关键。

原文出处：http://www.logoorange.com/logo-design-09.php

从目前的Logo样式中我们可以看出这样的信息——不惜任何代价的急欲脱颖而出、另人耳目一新。在我个人看来，web2.0的logo是极度失败的，但这种状态也许并不会持续太久。专于模仿的网站固然可以使用，但是一旦想要呈现个性特色，设计师就需要付出更多努力以备大干一场。
设计师对于历史运动及其风格的感受力、表现力比以往几年更为敏感，他们正在努力找寻使得Logo的设计更能体现民族性的方式。
极简抽象艺术是那些旋流、闪亮小球和其他偶然成像的精神支柱。然而我们正在目睹着极简抽象艺术的衰退，这种衰退又正在为引人瞩目的混音艺术的接管铺平着道路。
一种特定的样式不可能无缘无故的出现并无限期的处于潮流的顶端。logo设计的发展过程表明，潮流只具有短暂的生命周期，正经历着“看到时就已经过时”式的急转突变的局面。
新的趋势的兴起只会出现在持有相反观点的人们对其发出质疑之时。当该死的所谓模范泛滥之后，新的logo就很难再给人一种了不起的独创性感觉和工艺。
2009年会开创一些新的东西，有些试验性的，有些稀奇古怪的，更多的将会是新的稀有群体。强烈的视觉性和激情则是支配性主题。

视幻性流行背景

为了更注重于突出内容和实质，设计界依旧提倡削弱复杂性。尽管如此，不计其数的色彩和形状依然涌进画面。这种新的发展趋势再次导致了激烈的状况，即：将所有东西都铺陈出来，不对任何东西进行隐藏。
每次技术性的变革不可避免的诞生出一种夸大的反对文化。但是一种当代的形式在某种程度上可以说成是一种后现代手法，那就是通过以20世纪60年代的视幻效果模式作为背景将这两种对立的观点进行混合。
这种背景在向我们传达什么呢？你可以从中看出两部分信息：一是60年代的视幻效果，二是光学艺术。图层的使用揭示出Photoshop正在走矢量路线。这个趋势正因为心态和激情而变得更强烈。
视幻性流行背景使人想起花朵力量的时代，但他们超越了极其现代和非传统的思维定式。他们民主，不装模作样，从中看不到一点傲慢和势力。
今年绝大多数的趋势在印刷品中没有很好的被诠释。技术的发明和各种工具的运用使得黑白影印不再成为必然。一些客户开始意识到，一旦他们选择一种特定的趋势性方式表现时，他们有可能就使得logo的重要意义被移除，当被转换成黑白影像或被传真时，logo外观也会被有所蚕食。那这些客户注重的是什么呢？他们是想自己的logo在90%的媒介中，能获得具有表现力度的、色彩斑斓的惊人的视觉效果。

折纸艺术

想要回归本初的愿望在折纸艺术的主题中反映出来，设计师们通过折纸艺术去展示他们各异的技巧。

越来越多的设计师希望他们创作的作品可以具有实际的使用价值。折纸艺术是易损坏的，轻便的，含蓄的，数码程序也是这样。它与之前谈论的几何风格极其相似，但却更多的被视为亚潮流。然而，折纸艺术以其自己的方式正在演化为一种新的潮流，因为它是一种可以向更大范围的设计师进行展示的一种工艺流程。潮流不会持续很久，因为这个简单的原因，结果也往往相似。这种潮流的优势在于工艺流程，设计师们需要一些正确的工艺步骤的经验。尽管形式清晰简朴，logo还是会使设计师的风度更显著。基于折纸艺术风格的logo对于想用花押字作为图案的公司（两个或两个以上字母，通常是姓名的首字母，放在一起构成的图案）是个不错的选择。这种潮流使人联想起一种表达方式，“小巧但很精致”。Origami是日本的一种折纸艺术，其目的在于使用小的折起和褶痕表现易碎的和精致的对象。这对于 logo设计师们是一种挑战，也是设计师们花费大量时间和精力想要设计出一种尊重对象客观性的Logo的原因。这种logo能够通过精微去表现烦复。这也是为什么尽管稍微表现，设计师的风度就会被强烈体悟的原因。

触感式logo

当你看到字母装置从各种各样的原材料中被精巧的制作出来然后被拍成照片，你会触发怎样的感慨？会感到很“酷”吗？会不会感到很“性感”？ Tactile一词意指与触感有关的或者唤起触感的，但不是不明智的，笨拙的。像神韵这种不属于触感范畴的，则需要视觉进行弥补。

乐于试验可触感式logo的设计师们想要改变常规的现实生活中存在的手感。他们可以很好的使用自己喜欢的软件，但完成传统的剪切，绘画和黏贴任务也不在话下。事实上，想要使得触感式logo给予观看者的印象远远超出“可触摸”这一单纯层面，是需要一些杰出的策略的。神韵和性质需要超越触摸感觉的层面。

这项工艺流程即使对于非常有经验的平面设计师来说都具有很大的挑战性。从现实的材料中制造出印刷字体是一次不同寻常的经历，会有无数的可能性存在。设计师们会感到如同行走在未开荒的土地上，每一个创造都好像是一次意义重大的突破。活字装置被认为创造了一种特殊的情绪和氛围。这一结果将logo或活字设计中不常见的工艺和可触摸性唤醒了。

这绝对是一种天赋，设计师们是如此巧妙的控制这种触感特性，甚至让那些未曾受过训练的眼球也能体会到。触感式 logo从未停止激励过logo设计师们。有一种非常类型的logo，能够迫使他们撤回到他们心灵的私密处，将心灵深处的东西转化为具体的触动，无论这种触动是在金属上、纸上或是其他材质上。

阿拉伯式花饰

设计一个公司的企业形象时，使用例如阿拉伯语书法之类作为优化工具，看起来是很直截了当的方式。但直到你真正开始执行步骤的时候，你会发现这是一件棘手的事情。为什么呢？因为这种形式不可避免的需要大量的对于美的锻炼的直觉。设计师必须使他设计的logo体现出中东美的内涵。阿拉伯式花饰的使用就如同威严的一击，需要通过谨慎地处理以便使用于想要运用到的企业形象。

这一潮流的兴起伴随着具象图案的复兴，这一点设计师和非设计师们在前几年中就已经观察到了：在印刷品和电子版式中，复杂的图案构成完美的插图用以描绘激情。这种极好的创造直接来自于中东，但是美国和欧洲的设计师们很快就加以运用。阿拉伯式花饰这种方式是设计师追求独特性的很好的方法。对于古代书法和现代饰线字体的和谐交融完全奏效。你从中能收益到什么呢？那就是惊人的具有大众感染力的现代方式。大众诉求绝非低级的。

经典现代主义

在2008年经典现代主义重新成为一种风尚，就如许多人所认为的，经典现代主义是一种万无一失的方法，是一种“安全”的进行logo设计的方式。 2009年将把我们带回古代的方式——就如同电脑从未被发明。

在经典现代主义中，我们有基本的形式，鲜明的对比，对于白色空间的巧妙运用，并形成以下的功能（在那个时代，形式倾向于追随激情）。

现代主义标识的焦点是关注最重要的，也就是说内容以及对于内容的实施是被关注的首要的指导性原则。毫无疑问，这些是可以被削弱的，但是妙就妙在它具有进行阐释的充足的空间。颜色和形状是少而有力的，幻灯片和摄影还没被发明。这些前提条件传达着值得信任、有保障和实用主义的信息，并且只需要使用极少的资源就能够完成。当设计界的其他人都在提倡“应该大声喊出来的”观念时，这是一种设计师使人们关注自己的方式。

象形文字

logo设计不应该只是实体，图像，颜色与形象的混合或者工艺程序制作，也可以是解决问题的一个过程。

我们正看到一种意味深长的圣像式融合的强烈的趋势，这种圣像形式以压缩的方式包括品牌的首要价值，品牌信息以及市场定位。象形文字是非言辞的，多种文化交流的支柱。正如在大学里所学到的那样，经典式设计的象形文字是极好的交流方式，用于帮助公司传达“这就是我”而不是“让我告诉你关于我的公司”的信息。

这种趋势在web2.0逐渐淡出设计界以后变得明显了。在那个时候，关注光鲜亮丽的圣像裱贴的背景而非关注圣像自身是更为重要的事情。

有时候，象形文字的目的在于传达公众价值。
象形文字可以追溯至好多年前，但当航空、城市规划和公共公园之类的服务业想用通用性的语言向市民们提供重要的、有帮助的信息的时候，象形文字才开始成为一种潮流。如果logo设计师们想使用象形文字，他们最好用在能起到作用的地方。视觉暗示在象形文字中至关重要。logo必须将自身以自然、清晰的信息方式呈现给观众，而不应该让人觉得需要一个视觉警探去对内容进行解码。当象形文字解释某个信息时应该不给观者压力；然而，logo设计师决不能忽略审美，新颖和恒久性。

80年代的几何教程

如果说图形设计里有什么绝对犯忌讳的，就是用多色系的复杂的几何图形来设计logo。

至于logo传真后的表现力是好是坏无关紧要，这种争论可以继续很久，但有一件事是明确的：这种复杂的几何形式还将会短暂的存在。

当这种80年代的风格第一次出现的时候是用于吸引顾客的注意，目的在于想要不惜任何代价的设计出一种全新的样式。

几年过去了，雄心勃勃的、以自我为中心的公司不注重于细心的展示自己公司产业的情况，而是对如怪兽一般的几何图形logo大肆吹捧运用。这些糟糕的图标使得公司的形象看起来如同几年前般的落伍，给人的感觉就是这个公司毫无优势可言，只可作为孩子们的玩物，因此没有被认真对待。但是机警的设计师们和品牌发展者开始认识到80年代这种几何风格的价值并加以运用。将这些标志运用上全部的色彩是件很有讽刺意味的事。在20世纪80年代几何图形风格的logo 全力抵御极简抽象艺术，亚设计和公众意愿式的简陋。同样具有讽刺意味的是，与其说它是被作为遵循2008年高科技3D几何设计方式而出现的，还不如说它就是最为流行的Rubic骰子的几何学原理。（这句话好像是说它不是潮流的结果，而是天生就存在在那儿的）。当然也有可能这种方式并不会有所发展，也不会被广泛的采用，可能它们在某些地方会引起轰动，让人感觉视觉污染或者说画面囊括不必要的因素，也可能是一种有效的传达信息的方式。也许它们缺少一些概念上的优美度但你得承认一点：它们是经过精密调配的，具有视觉稳定性，并且很难被复制。

排版式/字体logo

感觉有点晦暗、严肃？是的。时髦？不。

排版式/字体logo绝不会淡出设计师的视线，因为它们不但显得简洁而且有很强的视觉吸引力，是一种无声的优雅形式。作为点缀，字母间强有力的组合形式被频频使用。

排版式/字体logo的设计是指，将公司特性的本质和只能通过文字传达的公司宗旨融合的表达出来。这种设计方式并非如人们想像的是专为初出茅庐的 logo设计师所采用，因为在公司理念和为了表现它所运用的恰当的字体编排风格之间，需要做到精致的平衡。

毫无疑问，有成千上万种字体可供设计师选择，但是好的设计师绝不会抵抗不住还未被广泛使用的字体的诱惑。而专业的logo设计师白手起家时的方式，就如同糕点厨师创造他的招牌点心。即使对成型的字体稍加修改也不能接受，这是一群狂热的热衷于印刷样式的用户群的观念。排版式/字体logo将始终如一的展示企业风格、文化和纯粹性。字体必须具备适应性，特别是有很多种式样可供选择的时候。然而，当印刷技术不能体现技巧和才能的时候，再好的标志也显得掺杂难辨，其余的图形要素的质感也会直线下降。

街头艺术

当你听到“街头艺术”时，脑中会想到手绘图形。运用街头艺术作为背景的技艺高超的绘图者艺术性的将墙壁喷绘改成了Illustrator bezier工具。

很多人将街头艺术当成是一种绿色的方式，是从电脑数字艺术中的解脱。

街头艺术式的logo一直在我们身边存在着，迹象表明它们还将继续存在。对于极限运动的生产者和运动品牌的机器和服饰的制造商来说，它们是比较受欢迎的媒介方式。当抽象派作品正在走下坡路，但人们仍然希望从logo中看到精彩的典故，街头艺术就会重新获得人们的亲睐。当设计师想要创造某种新颖的东西，近几年中他们会选择一些时髦的街头艺术风格。

街头艺术是设计师的精神代言人：有些都市化，也有些颠覆性和行动主义倾向。

当鲜明醒目的街头艺术在logo设计中有所体现的时候，只需任由你的思路驰骋：从柏林东部的画廊，到花样繁多的墨尔本，到圣保罗的壁画，到巴西，你会发现街头艺术风格的logo使人如同目击者般对于时间和地点有清晰的印象。

拼图纹样

当人们惊呼：“世界变得疯狂！”我们认为logo也一样。以每天数以千计的速度大量出现的品牌，很明显使得视觉冲击力削弱了。

人们如何弥补这种视觉冲击力的削弱现象呢？

一种方法是让品牌设计师们涉足未知领域，一些他们梦中不可能实现的地方。就好比现在看来是时尚的事物，两年前却绝对不可能实现。

这些拼图纹样不是减少品牌的本质因素而是唤起了整个的故事情节。大部分的图形纹样高度凸显自然，然而这跟自然本身无关，将自然显示于屏幕之上当用机器进行logo设计的时候就是一种趋势潮流了。

相对于深入品牌重要元素这一规则，设计师们却转向运用复杂的矢量图形。他们目前的信条是：“设计没有规则。”字体、样式和图形之间没有规定的但是有技巧性的相互关联。强行规定是不可能的。拼图纹样的任何一部分：动物，字母，植物，徽章或者任意的几何形状，都不加约束。没有人担心含义，因为这种未经约束的？（单词未显示）迎合了严格的装饰效果目的。

目前，拼图纹样是最出色的反公司较量手法。然而在接下来的几年中，当大公司准备进行重新包装的时候，会认为他们绝对需要一些全然不同的感觉，这个时候拼图纹样会成为新的潮流趋势。

相关话题：UCD翻译小组源地址：http://gengxipeng.com/archives/archives/419

iPhone应用设计趋势

UCD翻译小组 — 2009-11-28 00:57:26

iPhone App Design Trends
Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚
原文地址： http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/

在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

1. 镜像iPhone原生界面元素

“告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧）在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

Facebook (iTunes Link)
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

Where (iTunes link)
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

Tweetdeck (iTunes link)
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

2. 简化界面

也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

Flickr (iTunes link)
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

3. 模拟硬件界面

不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

Convertbot (iTunes link)
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

Little Snapper (iTunes Link)
Little Snapper模拟的就是一台普通数码单反的旋钮。

iHandy Level (iTunes Link)
iHandy Level的样子和功能都仿至一个真实好用的水平仪。

Where To? (iTunes Link)
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

4. 丰富、漂亮的列表视图

当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

Delivery Status Touch (iTunes Link)
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

Be Happy Now (iTunes Link)
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

Next Read (iTunes link)
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

Nike (iTunes link)
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

Borange (iTunes link)
Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

5. 分层的界面

一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
为用户获取信息提供了快速通道
有更多屏幕空间承载有用信息

Tweetie (iTunes Link)
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

Barnes & Noble (iTunes link)
Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

USA Today (iTunes link)
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

myPantone (iTunes link)
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

6. 在列表中使用图标

在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

iStudiez (iTunes Link)
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

Top Floor (iTunes Link)
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

New York Times
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

Filemaker(iTunes link)
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

7. 插图的使用

依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

Magnetic Personalities (iTunes link)
这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。

SugarSync (iTunes link)
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

Mom Maps (iTunes link)
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

8. 使用手势

经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

Mover (iTunes link)
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

ABC Animals (iTunes link)
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

All Recipes (iTunes link)
此应用可以让你通过手势来混合众多元素，作为你的美餐。

用户界面设计10原则

Roc — 2009-09-15 21:43:28

原文标题：10 User Interface Design Fundamentals

原文地址：http://carsonified.com/blog/design/10-user-interface-design-fundamentals/

翻译：UCDChina翻译小组，Roc

设计真正伟大的用户界面没有什么伟大的奥秘可言，做到保持简单易用就可以。

‘保持简单易用’意味着不要让用户分心。恰恰相反，好的UI让用户达成目标。结果如何？你的培训和维护费用降低，并获得更开心、满足和高效率的用户。

当你面对一个全新的界面设计时，别忘了这些原则。

编辑手记：Kyle将在纽约举行的Web设计趋势上继续探讨用户界面设计的内容。

1. 了解你的用户

“关注用户：如果在关注竞争对手还是用户之间选择，答案总是后者。工作总是首先从用户开始。”——Jeff Bezos

了解用户，因为用户的目标就是你的目标。试着重述用户，了解他们的技能水平和体验，以及什么是他们需要的。找出用户偏好什么样的界面，并观察他们在界面中如何操作。不要迷恋于追逐设计趋势的更新，或是不断添加新的功能。首要的任务是关注你的用户，这样才能创造出一个能让用户达成目标的界面。

2. 重视模型

用户的大部分时间都消耗在界面中，而不是他们自身上（Facebook，MySpace，Blogger，美国银行，学校/大学，新闻网站，等等）。我们无需画蛇添足，用户在你正在创造的界面中看到的正是那些（已有的）界面已经解决的同样问题。利用已成惯例的UI模型，你将使用户感觉像在家中一样熟悉。

CoTweet在邮件应用中运用了广为人知的UI模型。

3. 保持一致性

“用户期望越多的被正确验证，用户就越觉得系统在自己掌控之中，从而也就更喜爱它（系统）。”——Jakob Nielson

用户需要一致性。他们需要知道一旦他们学会做某项操作，那么下次也同样可行。语言、布局和设计是需要保持一致性的几个界面元素。一致性的界面可以让用户对于如何操作有更好的理解，从而提升效率。

4. 运用视觉等级

“设计师可以从混乱中找到统一；他们可以通过组织操控文字、图片从而清晰地传达设计意图。”—— Jeffery Veen，Web设计艺术家和研究者

设计时，要让用户把注意力放在最重要的地方。每一个元素的尺寸、颜色还有位置，它们为理解界面共同指明了道路。清晰的层级关系将对降低外观的复杂性起到重要作用（甚至当行为本身也同样复杂的时候）。

5. 提供反馈

界面要始终保持和用户的沟通，不管是当他/她们的行为对错与否。随时提示用户的行为：状态更改、出现错误或者异常信息。视觉提示或是简单文字提醒都能告诉用户，他/她的行为是否能够达到预期的结果。

BantamLive在界面中为大多数行为提供了一种嵌入式的载入提示。

6. （对用户）宽容

无论你的设计有多么的清晰明了，用户都会犯错。你的UI应当允许并宽容的对待用户的错误。要为用户提供可以撤销行为的方式，并且对五花八门的输入数据尽量宽容（没人愿意只是因为填错了生日的格式而重头再来）。同样，如果用户的行为引起了一个错误，在恰当的时机运用信息显示什么行为是错误的，并确保他/她明白如何防止这种错误的再次发生。

如何利用简单的验证码提高注册率一文中讲述了一个绝佳的例子。

7. 鼓励用户

一旦用户对界面有了经验之后,要奖励他/她们，使之进价。把复杂任务分解为若干简单步骤将会更显繁复和让人精力分散。提供更多的抽象方式——如键盘快捷键——完成任务，这样会让你的设计变得简洁易用。

8. 融入用户的语言

“如果你对每个像素、每个图标、每个字体都考虑再三，那么你同样需要斟酌每个词语。” —— Getting Real

所有的界面或多或少都有文字在其上。让文稿尽量口语化，而不是华美辞藻的堆砌。为行为提供清晰、简明的标签，保持简朴的文字叙述。用户对此将会很赞赏，因为他们不再是听命于他人的官腔——他们听到的是如朋友般甚至自己说话的表述方式。

9. 保持简洁

“一个现代的悖论就是：创造复杂的界面很简单，因为复杂到必须简化它们”—— Pär Almqvist

正所谓：大音希声、大象无形。最上乘的设计中，你看不到华而不实的UI修饰，或是用不到的设计元素。换而是，其必须的元素一定是简洁且有意义的。当你想着是否要再界面上加一个心功能或是元素的时候，问问自己，“用户真的需要这些吗？”或者是“为什么用户想要这个小巧的动态图标？”。你是否只是因为出于自我喜好而添加这些元素？记住，永远不要在UI设计中给自己出风头。

10. 不断向前

爷爷：如果每次失败我都放弃的话，那么我将永远不会发明耐火裤！【这时裤子烧光了，露出了底裤】

爷爷：接缝处还在改良中……

节选自《未来小子》

《未来小子》一片是我最喜爱的电影之一。贯穿影片的主角Lewis一直在挑战着“不断向前”。这正是UI设计的关键准则。

人们常说，当开发界面的时候，你往往需要失败的快一点，这样就能频繁迭代。当创建UI之时，你总会碰到错误。没关系，只要不断向前，并且要牢记让你的UI简单易用。

购物车正面临被抛弃的困境

a@b.com (rocchow) — 2009-08-26 09:50:33

原文标题：Shopping Cart Abandonment Woes

翻译：UCDChina翻译小组，Roc

上周，Brendan致力于解决在购物车（除了运费）中如何回答5个未答复用户的问题。根据最近一份由PayPal和comScore提供的研究报告表明，45%的美国在线顾客已然在近来的3周内多次放弃使用购物车。

顾客为什么放弃购物车？

46%的在线顾客声称高昂的运费是他们放弃购物车的“非常重要的原因”。在当下的经济中，免运费是否成为必须？你是否试过个性化当地运费？你是否试过个性化当地运费

其他放弃购物车的原因如下：

想要进行商铺间的对比：37%——你是否把购物车的数据保留了1个月，以便他们可以回头查看？
缺钱：36%——你能否给出一个让他们难以拒绝的价格？
希望获得折扣：27%——你是否为他们提供折扣？这也许会影响你的销售额。
希望线下购买：26%——你是否提供了一种消费者能够在商店购买到商品的可能？
找不到首选的付款方式：24%——找到获得现金的方式。要拿到现金！！！
商品不能结账：23%——哎呀！这必然要从产品页上解决，否则它将损害你的品牌信誉。
找不到客户服务帮助：22%——这可以用POA（行动点控制）来解决。
安全顾虑：21%——同样可以用POA解决，并且给你的站点带来更多的信任。

你是否想过你也许需要一个购物车守护者？最近你设法处理了以上出现的多少问题？你是否测试并优化了你的购物车？如果没有，为什么？

猜测vs数据：作为设计建议的原则

Roc — 2009-08-25 20:35:31

原文标题：Guesses vs. Data as Basis for Design Recommendations

翻译：UCDChina翻译小组，Roc

摘要：即使再少的经验数据（比如，观察2名用户）也能极大提高做出正确UI设计决策的几率。

提供调整字体大小的功能给用户，还是简单的依赖于浏览器的自带功能？这个问题最近在一个交互设计的讨论组中被提了出来。

有12人回应了该问题。大部分人简单说了说解决此问题的意见。说的都挺有道理的：所有人都是各自领域的专家。但有6篇跟帖就什么才是最好的发表了自己的看法。

其中，2/3的跟帖纯粹出于自己的想象，而另外的1/3则是基于用户观察的经验数据。

猜测派：

“现在这个年代，[...]绝大多数人都熟知如何在浏览器中把字体变大。”错
“需要调整字体的用户会通过浏览器去实现；这并不困难”错
“已经不是95年啦；不是所有的50岁以上的用户都和菜鸟一样，不知道或者不想知道如何在浏览器中调整字号。”错
“需要增大字体的用户绝大多数都是65岁以上的老人，这类用户群往往是最缺乏调整设置能力的”对

数据派：

“我不得不为我父母手动设置（功能），而对于超过65岁的老人，越来越多的能力，像调节字体大小这类难以发现的功能，都在以惊人的速度离他们而去。”对
"I've observed usability studies on sites that included text resize widgets [...] most, if not all, the participants [...] had no idea what it was." RIGHT
“我曾对站点进行过可用性研究，包括文字调整控件[…]大多数情况下，参与者[…]对它毫无概念。”对

数据派完胜猜测派

准则大致是这样：使用相对大小的字体以便于用户调节（如果他们知道怎么做的话），但是默认状态下字体就应该是大而清晰易读的。基于大量的观察表明，许多老年用户不具备调整字号的能力。

我们讨论组中的案例，

提供额外数据的设计师获得了100%的正确率
而那些依靠个人主观判断的设计师正确率只有25%。

最引人注意的是， 75%的猜测都是错误的。也就是说，向这些人咨询建议还不如靠掷硬币得到答案。

在这个简单的案例中，基于对于真实用户最小数量的经验观察的设计建议使其正确率翻两番。

慎之又慎：虽然从父母亲处获得数据总比没数据要强，但我并不建议你将设计的决定建立在家庭成员身上，因为通常他们都比一般用户要聪明。（因为你是了解可用性知识的那部分聪明人中的一个。）我们从对儿童和青少年的研究中得知，相对于，一般的儿童和青少年在使用互联网时会碰到更多的困难。

两个用户的测试也优于猜测

虽然我们关于字体大小的案例仅仅基于很小的一组数据反馈。但另外一组基于更多数据反馈的案例也印证了相同的结论。

我们测试了两种不同的显示银行账户信息的方式，每个测试都由76名用户完成，一共152名测试者参与到这项基准测试中。我们要求用户完成诸如检查他们账户余额，并找出当前该银行提供的利率水平这样的任务。结果如下：

可用性标准	设计 A	设计 B
成功率（通过四个任务）	56%	76%
完成四个任务的时间（分：秒）	5:15	5:03
主观满意度（1~5等级，5是满分）	2.8	3.0

在所有的三项可用性属性中，版本B的设计得分更好，虽然只是在成功率上体现出大到具有统计意义的差异。但总的来说，B优于A是毋庸置疑的。

（和上面的研究相比，有时候不同的设计在不同的可用性方面上各有输赢。例如，一个设计可能让用户更能完美的达成目的，而另外一个则在完成速度上给用户一臂之力。在众多的案例中，你也许要做出权衡，或者在有可能的情况下，你需要创建额外的第三份设计，以便将前两者的优点结合。）

在这种情况下，我将设计A和B展示给21名正在上互动设计课的学员，并问他们会选择哪一个方案给银行方面。完全依靠猜测去选择谁是最佳设计的他们，获得最佳设计建议的概率是50%。也就是，都比不上掷硬币来得好。（相信我，节省咨询费的一种便捷方式就是问你口袋里的硬币。）

接着，我让另一组上着同样课程的38名学员去做测试——两个设计，每种都有两名用户。果然，依靠2名用户行为得来的经验观察做出的选择，其成功率是76%。

从另一个角度去看待这个结果，每个设计中的仅仅2名观察用户让错误率从50%锐减到24%，足足一半。当然，如果你正谈论一个高投资回报率的设计决定的话，24%的错误概率还是差强人意的，所以在这种情况下，显然在每个设计上，我们需要测试更多的用户（我通常建议是5名用户。）

尽管这是小到不能再小的研究，但在每个设计中测试2名用户，远超掷硬币般的猜测，极大提升了设计建议的质量。

（在这份研究中，两个版本在对测量研究的重要性上表现的都差不多。如果你拿粗略的原型和完备的效果图去做比较的话，你将倾向于数据。）

当猜测错到离谱时

比较我们的两个案例研究，在文字尺寸案例中猜测一方的表现差到不行。如果有人基于这些臆测出做设计决定，做出的3/4决定都将是错误。在银行的案例中，他们错了一半。

那么，这些可怜的讨论组为什么去做猜测？答案就在下面这两句：

"It's not 1995..."
“已经不是95年了……”

遗憾，太多的Web设计师拒绝相信可用性研究结果会在长时间发挥作用。“过去困难的事情，如今一定要简单许多”的念头导致许许多多的网站走向毁灭。

当我们真正的研究真实用户时，我们发现用户学习技术的速度是如此之慢，使用花哨网站用户其能力得到的提升是如此之少。此外，最重要的是，我们发现关心学习诸多花哨功能的用户如此之少。用户只想登入页面，获得自己想要的，然后退出。他们没有想过要去学习。

猜测的错误原因就在于许多的设计师不假思索的想要相信先进设计带来的潜力。他们不会想象到，对于他们钟爱的技艺只是阳春白雪，曲高和寡。

（是的，在最近的测试中，我们的确发现，用户在技巧掌握上有了些许进展，但进展微乎其微；在未来的十多年内，你最好还是继续相信，简单才是取胜关键。）

一点数据带来很大帮助

在我所列举的两个例子中，哪怕只提供了极少的经验数据之后，设计正确的可能性都大幅提升了：不管是你的亲人，还是挑选2名用户测试。

当然，数据量再多一点肯定更好，但任何数据都比没有好。（扪心自问）在手头上还没有任何用户行为的经验数据的时候，你做出了多少设计上的决定？

购物车：如何回答5个未答复用户的问题

Roc — 2009-08-25 20:41:00

原文标题：The Shopping Cart: How to Answer the 5 Unanswered Customer Questions

翻译：UCDChina翻译小组，Roc

电子商务中的购物可谓是网络实验的绝佳场所，一些简单的改变（布局，文字，色彩等等）常常带来意想不到的结果。这里罗列出了几个在我们用户看来未给予答案的问题，我们认为答案就在页面上，但用户却不这么认为。如果你不能确定未答复用户的问题是什么，你可以回到上几个步骤——使用角色设计或者用户测试来找出它们。

这里是5个关于购物车中未答复用户的问题（排除运费）：

你们提供了其他的支付方式吗（除了信用卡）？
你们安全和可靠吗？
为什么你们要求我提供这个信息？
我必须有一个账号才能购买吗？
在交易前，我能回头查看我的订单吗？

前不久我在网上找了家礼品零售店买了份父亲节礼物，总体上整个购物车流程都还“可以”，我给它一个“B-”的分数；它好在我无须帮助就可以完成交易，但没有好到获得品牌忠诚度。但有一点做的漂亮，他们清晰地回答了那5个问题，而这就足以帮助他们“获得金钱”。

我在他们的付款页面上截取一部分，以便看清他们如何设计回答这5个未答复用户的问题。当你看到这幅截图的时候，思考一下哪一个元素分别对应回答了哪一个问题。

你是否充分地回答了这5个未答复用户的问题呢？不管你相信也好，不相信也罢，或者介于两者之间徘徊，你完全可以去做些有趣的实验去验证关于你做得如何的猜测，也许你将提高你的渠道转换率！想要获得帮助？告诉我们。

10个值得你关注的UI设计模式

萧小小 — 2009-07-29 23:10:46

Article copyright by Janko Jovanovic

作者： Janko Jovanovic 发表于2009年6月23日；译者：UCD翻译小组，萧小小；校审：Angela

原文地址：http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/

设计模式这个概念早在20世纪60年代就被建筑师Christopher Alexander提出，他注意到在我们生活中有很多东西都存在一定的模式。他把这些发现融入到工作当中，并以此为话题出版发表了很多实践成果。从那时起，设计模式就在我们生活中很多领域占据一席之地，当然也包括用户界面的设计和开发。

简而言之，设计模式可以解决共性问题。推而广之，UI设计模式就可以解决一些共有的用户界面问题。本文列举了10个有趣的UI设计模式，你可以结合自己的项目使用。也许你已经在使用它们了，只是不知道而已。

40+ Helpful Resources On User Interface Design Patterns

10 Useful Techniques To Improve Your User Interface Designs

Web Form Design Patterns: Sign-Up Forms: part 1, part 2.

1、延迟注册

要想完全意识到注册问题的严重性，我们可以参考下导致“注册表单必需灭亡”这个观点的原因。这并不是意味着注册表单应该完全被砍掉，相反它们应该是把用户介绍给系统这个过程中唯一一个部分，而且应该介绍得迟一些。这就是和帐户注册模式有关的“延迟注册”。

究竟该什么时候使用延迟注册呢？虽然看起来好像可以随时使用，不过以下是更为理想的情况：

*当用户在浏览过你的网站产品或服务，并做出购买决定之前（虽然不是每个网站都允许这样）。

*当用户注册之前就熟悉你的网站这步至关重要的时候，也就是说这将是决定他们是否注册的关键一步。

Amazon让你在注册之前可以浏览商品并加入到你的购物车。

这种模式意味着允许用户在注册之前使用你的系统。如果用户对你的服务挺满意，他们会把快速注册当成操作流程中另一个小步骤而没有一丝抱怨，不会觉得是义务。购物车就是这种模式的一个好范例：用户可以浏览选择商品而只在他们要购买付钱的时候才需要注册。

Picnik 是延迟注册的另一个好范例。用户可以使用所有功能来在线编辑他们的相片。在保存这些编辑之前才被要求注册。

推荐阅读：

Sign-up forms must die: here’s how we killed ours!
一篇关于为何90%的网站使用延迟注册的趣文

Web Form Design Patterns: Sign-Up Forms, Part 1 and Part 2
Smashing Magazine 去年做的有趣又有用的研究

2、进阶展开

这个模式用于只显示与用户当前操作有关的信息或功能，把其它杂七杂八与当前无关的信息推迟到需要的时候才露出来。通过隐藏这些复杂或不常用的功能让用户界面变得清晰；在他们需要的时候就即时提供，帮助用户在一个个页面完成复杂而多步的操作。

目的就是在第一步只显示重要的信息，再引导用户点击下一步。当用户完成一步后才显示下一个步的内容，保证所有已完成的步骤可见且允许用户对已输入内容进行修改。用户在当前这步输入的内容会影响下一步要填的内容。

Digg在其评论部分使用了进阶展开。用户可以查看评论，通过点击“Replies”这个链接查看对该评论的所有回复。该链接还显示了回复条数。

一旦显示了所有回复，用户不但可以查看而且可以回复、评价这些回复。文章下面的所有评论只有在点击“show”的时候才显示出来。

进阶展开的例子比比皆是。简单的“更多”链接显示更多信息就是一个最简单的例子。不过也有些用于复杂地方，比如在线填写表格。试着在Picnik上注册一个帐户（这也是我们所提到的懒惰注册模式）去见识一下进阶展开在复杂层面的一个应用。

YouTube在用户自定义播放器外观的时候使用了进阶展开。当用户点击图一中注释过的小图标之后，就打开了下面图2的自定义参数。

推荐阅读：

Progressive disclosure Jakob Nielsen 的深刻见解

Read more… about progressive disclosure 进阶展开的详尽说明，附带几个例子

3、兼容格式

搜索功能可以给用户提供多种选项，有时就显得很复杂。比如搜索天气和街道，用户可以使用诸如城市名称、街道名称和邮政编码这样的搜索维度。为了引导用户告诉他们可以使用多个维度，界面就要显示多个选项，这就变得非常复杂。为了让界面干净利索，就可以使用兼容格式，它允许用户输入不同维度的信息，让系统去分析这些信息。

Yahoo天气搜索允许用户以城市名称或邮编进行搜索。

为了明确支持哪些格式，可以给些建议教用户如何搜索，可以把所有支持的格式列举出来，就像上面的例子，也可以提供帮助页面的一个链接，像下面的例子。

Google地图搜索允许用户以城市名称，街道，邮编甚至经纬度进行搜索。

兼容格式的模式出色地简化了用户界面。但可能就需要程序开发人员付出很多劳动。用户选项越多，分解起来就越难。

4、清晰的首要操作

简单的网页表单常常只需要一个操作（“提交”“保存”“发送”）。因为他们只有一个选择，所以就很明确填写表单后的最后操作是什么。不过用户通常会面临几个选择而不得不去区分首要操作和次要操作。

Clearleft 以颜色来区别首要操作和次要操作。

什么是首要操作和次要操作？首要操作引导用户完成一个表单；例如点击“保存”或者“发送”。而次要操作通常不引导用户完成表单；包括点击“取消”。不过也有例外，当你看到“保存”“保存并继续”和“发布”在一起的时候，谁是主要操作谁是次要操作呢？

*引导用户，

可以用2种方式加以区别：

给首要操作和次要操作不同的颜色；例如给首要操作比较艳丽的颜色，给次要操作比较灰的颜色。

把首要操作做成按钮，次要操作做成链接。

Flickr 突出了首要操作，把次要操作在下面小小的标识出来。

两种方式都清晰地区别了首要操作和次要操作，拯救了在完成任务时正迷惑选择哪个操作的用户。

推荐阅读：

Web Form Design: Filling in the Blanks 应该是设计网页表单的最好资源之一

5、面包屑

面包屑显示了用户在网站页面层级中从首页到当前页的路径。是帮助用户了解网站层级架构的一种次级导航形式，从首页开始，结束于正在浏览的当前页。面包屑上的每个标记都链接到层级中的各自页面或部分，除非是当前页才可能不是个链接。

Apple的面包屑融入了图形元素，非常适合整个站点的设计。

面包屑占据很小的空间，通常被放在页面的顶部，头部和正文之间。因为在首页上不起什么作用，所以一般首页不使用面包屑。面包屑可以简单用文字链接以符号“>”隔开，或者像Apple网站一样使用些图形元素。

推荐阅读：

Breadcrumb Navigation Increasingly Useful Jakob Nielsen 深度剖析面包屑

Simple scalable CSS-based breadcrumbs 一个关于如何做面包屑的优秀简明教程

6、帐户注册

这个模式的定义视具体情况而定，但我们可以确定它解决了3个相关问题：

某些内容只对注册用户开放，

用户需要经常更改他们的个人资料，

用户需要经营他们在系统里的个性化内容。

让用户能够访问受保护的内容，让他们在系统里注册一个帐号并保存他们的个人资料以备以后使用。这样做的好处有很多，比如像Amazon那样提供给用户一些个性化的购买信息。如果系统利用了这些用户注册时提供的个人资料，就可能会使用户高效地完成操作任务。保存收货人信息就是一个例子，因为对用户来说，老是填写表单并不是他们的所爱，只向他们索要必要的信息很重要。另一要点是清楚地表明用户注册后可以得到的所有好处，这样他们才会比较乐意去注册。

Vimeo拥有一个简单而有吸引力的注册表单

Tumblr的注册只要求用户很少的信息。

推荐阅读：

Web Form Design: Filling in the Blanks一本关于创建普通可用网页表单的必读物

User Membership With PHP一个简单的注册和登录表单

Accessible HTML/XHTML Forms: Beginner Level 如何创建一个无障碍网页表单

7、标记必填项

让用户界面变得清晰明了很重要。这也同样适用于网站表单。让网站表单清晰明了的最好方法之一就是标记必填项。标记的目的就是为了提醒用户这些内容是必须填写的。这样，他们会觉得没有必要填写所有表单内容从而减少了看见错误提示页面的几率。

理想状态是把所有选填项去掉而只让用户填写交互所需的必填项。通常来说网站表单越短越简单，用户体验越好。另一个有意思的想法是让用户自己可以移除所有选填项——你可以借助 Clarke的《Trimming Form Fields》来练习并发现如何实施此想法。

Haveamint.com 的创建联系人表单把必填标志放在字段名旁边。

你可以把必填标志放在以下2个位置：

（1）字段名旁边，让用户可以快速扫描表单。

（2）在输入框旁边或者里面，如果输入框都是一样宽度，用户可以快速阅读表单。

当决定好哪些是必填项之后，就可以考虑表单内容的数量了。如果表单很复杂而且大部分内容都是必填，用户就很可能会觉得头晕而不想填了。

8、显示进度

该模式广泛应用于用户需要多步填写信息的情况。目的在于：

*显示此过程的范围，清楚地标明用户还需要几步才能完成，

* 在视觉上凸显出当前是第几步来显示用户在整个过程中当前位置。

StatementStacker 清楚地标明了有几步且凸显了当前步骤。

步骤通常都是水平以箭头连接，显示出步骤的操作顺序。当然，每步通常都以硕大的数字和用户在此步需要干些什么的简洁描述组成。这里最重要的就是一致性：步骤指示条需要一直在页面的同一位置，告诉用户他们的所在地。

该模式通常和著名的“wizard“模式结合使用来创建多步操作，比如注册或者购物车。

Delicious 拥有一个漂亮的步骤指示条清楚地定义了每步的目的，它还通过显示不同颜色来凸显当前步骤。

9、分期计划

这种模式适用于这样的网站：以定期还款方式，通常是月供，购买不同期方案提供的产品或服务。每期都应该详细提供以下信息：

名称，比如"Basic"或“Professional”

该期价格和有效期，
功能表（最便宜的方案当然功能最少）
注册按钮

Wufoo 清楚地显示了它的这些不同价格和功能的方案。

务必有序地展示你的方案。通常以价格从高到低排列。你可以用不同的色彩和尺寸凸显你希望用户购买的方案。

Crazyegg把用户注意力吸引到了“Basic”方案上。

10、聚焦才显示操作方式

当用户界面有很多可以操作的元素时，该页面就变得混乱且难以阅读。这在用户可以编辑表单信息的管理部分尤其常见。先隐藏那些操作然后在用户鼠标悬浮在它上面的时候才显示出来是解决混乱的一个好方法。

当用户把鼠标悬浮在各自Facebook 个人资料页面的各个部分上时，一个“编辑”链接就出现了

隐藏一些操作直到鼠标悬浮到上面才显示出来有效地让用户界面变得简洁而且不减少功能。

Twitter 在用户悬浮到每个发言上才显示了“Reply”和“Favorite”链接

关于作者

Janko Jovanovic 是一个高级程序员，网页设计师和blogger。他利用闲暇时间在个人客JankoAtWarpSpeed 上撰写了很多关于网站开发和设计的文章，规律性地活跃在Twitter上。

人物角色：为真实用户而设计

Sophie — 2009-08-03 18:30:58

Article copyright by Symplicit PTY LTD

原作者：Symplicit PTY LTD；译者：UCD翻译小组，Sophie；校审：Angela

原文链接：http://www.symplicit.com.au/personas_designing_for_real_people.php

原文下载：Personas: Designing for Real People (pdf, 316 KB)

人物角色是虚拟的，也是典型和形象的，它是你的目标用户的一种代表。它可以提供及时的、易于理解和记忆的用户信息。

人物角色在整个开发周期中都有指导作用。在需求转化为设计的时候、开发测试的时候、定制市场战略的时候、品牌沟通的时候，人物角色对不同的团队角色都有价值：如产品经理，开发，设计。

创建和使用人物角色的关键原因是为了给设计和实施产品/服务的团队提供一个可供分享的，始终如一的、对用户的理解。如果团队缺乏这种理解，产品会因为满足了所有人的需求最终不能满足目标用户的需求、目标和期望。

这个白皮书包括了5个方面，帮助你清晰的了解什么是人物角色，什么时候值得使用它和如何创建它。这里提供了案例分析，概要范例，指导规范。

个案研究——为设计过程埋下伏笔

2006年末，一家在线招聘的大企业计划和他们的广告客户一起做一些深度的定量研究。目的是为了设身处地的理解在各种背景下的广告客户的工作性质和招聘过程。

这个研究将作为设计开发该公司广告客户在线申请系统的依据。

广告客户样本是根据该公司的市场细分选择的，而人物角色则作为一种恰当的工具用来承载研究数据——通过广告主，语境查询和深度访谈完成的研究日志。

研究工作和人物角色的创建是由一家熟悉并与之有合作关系的咨询公司执行。公司管理层与该公司之间的信任和默契──比如对访谈题目的共识──是保证效果的关键。

通过叙述式报表，人物角色被详细的介绍给内部设计团队和相关人员。它详尽的描述了目标广告主是如何工作的，他们的痛处是什么，还有公司为他们提供更好服务的契机。

Top 5 人物角色小贴士

Tip 1了解你为什么要创建人物角色

对于一个设计师来说，明确理解用户“在做什么和为什么这么做”，是设计一个产品/服务的关键。这种理解是建立在深度定性研究上的。研究分析和演绎为设计最初的产品/服务概念提供了依据，这些概念是在开发的过程中修整、成形。不幸的是，“大部分对用户的理解在产品开发的途中被遗失了”。

为什么会遗失？

本质上，因为用户是复杂多样的，并且在开发过程中没有一个持续的、强有力的途径表现用户，因此设计师会根据个人想法设计产品/服务。在这种闭门造车的情况下，设计师和开发人员或者会根据自己认为用户是怎样的来开发产品/服务，或者只选简单廉价的开发方式。

人物角色有这个潜力通过提供一个可信的、易于理解记忆的用户模型为这些设计和开发产品/服务的人提供巨大的价值。

“人物角色应该超越对事实的堆砌。人物角色应该在所有团队成员当中树立一个鲜明的形象”我们相信成功的人物角色是逐渐形成的。就像我们在生活中了解一个人，我们应该通过与人物角色建立关系来理解他们（和他们包含的数据）。

个案研究——从外而内的洞察

2006年，一家为客户和最终消费者提供信息服务的某大型通讯公司旗下子公司，希望了解客户和最终消费者对其公司网站的期待，同时评估未来可能的设计方案。以前他们的信息都是通过印刷的形式呈现而网站则是相对较新的形式。此外，这些信息还被用作为目标客户净化其服务的数据支持。

人物角色由一个内部调研经理建立并“负责”，另外有三个外部顾问负责对客户和最终消费者进行全面研究。人物角色是共同创造的，由调研经理提供内在的背景，问题，相关人物的资料，由顾问提供客观见解和专家意见。

一旦人物角色被创建就以一个形象的连续剧情向相关负责人陈述用户的需求、目标、价值，和这些经过研究得出的结论如何可以通过网站的交互满足用户等等。体验、可能的设计方案、品牌和用户价值之间的联系也被明确了。

建立人物角色被证实为这家子公司提供了极其宝贵的资源，因为人物角色为它带来了由外而内的综合见解，而不是使用信息的各个部门的带偏见的局限看法。内容格式、服务和新税收机遇之间的协同作用被定义了，比如：中小型客户能从之前提供给大客户的数据服务中得益。

通过人物角色，企业管理者通过全面的理解以及对客户和最终消费者使用环境的细节认识，来选择和优化将来应该对信息做什么和不要做什么。人物角色还为有意义的创新提供方向，它识别和探索了品牌与直接/终端客户之间的共同价值，和这种价值应该如何在网站上植入和扩展。

市场营销重视人物角色

人物角色作为一种工具对市场团队来说也具有很大的潜力。至少，人物角色采集了关于潜在用户和已有用户的丰富的细节，这可以帮助细分用户市场。人物角色还有助于更好的理解整体的用户体验和用户与产品的情感联系。

不过市场营销是从一个非常独特的角度对人物角色提出需求。不同于设计和开发人员需要理解使用，市场营销需要理解购买。因此，人物角色有时会分成“设计类人物角色”和“营销类人物角色”。前者描述了产品如何被使用，后者则描述了购买行为如何发生。

通常人物角色是作为一个设计工具被创造的，然而它们仍然有巨大的潜力为市场营销带来价值。举例来说，营销可以基于人物角色中浓缩的用户目标、需求和痛点传达品牌/产品的预期，并且他们知道这些目标，需求和痛点将会被交付，因为这些已经通过设计融入到产品中了。

误解

人物角色不是关于用户的个人属性。个人属性不会说明用户会怎么做（真实的用户行为和使用背景）也不会说明他们为什么这样做（和用户体验相关的需求，期望，目标，习惯和意义）。

个人属性是来自于消费者市场细分和提供关于细分用户、年龄、收入、工作、爱好和经验水平的信息的定量的市场研究。

不过，个人属性为初期人物角色的开发提供了极好的起点。

Tip 2 人物角色规划

人物角色会是个出色的工具，但是要评估它的价值，让它适应你的公司，在着手之前计划如何有效的使用它，这很重要。

您的公司适应人物角色吗？

在一些公司使用人物角色会比在另一些公司容易。这里有5个问题可以快速的了解你的公司是否适应人物角色

1. 您公司的结构是否是产品、服务、开发协作的团队（比方说跨职能型团队）？还是严格按职能分部门，根据流程交接工作。

2. 用户（现有的或潜在的）在整个产品/服务开发过程中受到多大程度上的重视？

3. 负责定性用户研究的团队是否也设计产品/服务？

4. 以用户为中心的设计方法和技术是否被接受并在产品/服务开发中使用？

5. 负责设计的团队是否能主导产品/服务的开发周期？

如果您的回答如下，那您的公司是适应人物角色的：

· 协作的组织结构

· 高度关注用户

· 整合的用户研究和设计团队

· 接受并使用以用户为中心的设计理论与技术

· 用户研究和设计驱动的产品/服务开发周期

当然公司是多种多样的，这些问题的主要目的是衡量您公司的产品/服务开发多大程度上使用通过研究用户使用动机和方式得出的结果来指导开发周期。

您要解决的问题

以用户为中心的设计理论与技术有很多，与人物角色相比，根据公司的情况可能会有更适合的方式。

通过以下问题辨别人物角色对您的公司是否具有使用价值：

· 人物角色对我公司的组织团队或某个产品/服务开发有什么帮助？

· 开发周期中的哪些问题需要通过人物角色解决？

· 我怎么知道是人物角色解决了这些问题？

人物角色不是万灵药，对人物角色能与不能创造的价值有一个现实的评估非常重要。比方说，你可能需要一个像用户档案一样的更简单的工具，或者用一个小型的人物角色在演示的时候用。

您要避免的陷阱

如果您已经认定人物角色有特殊的价值，那就值得在开始之前学习一些经验。4个主要的人物角色失败的原因：

1. 人物角色的作用不被领导层接受或支持，

2. 人物角色不与数据关联，方法不严格，不可信，

3. 人物角色难以传达

4. 产品设计开发团队不懂如何使用人物角色。

带着这方面的知识再运用“Tip3”中的备忘录（如下）可以通过最小的风险得到最大的回报。

Tip 3.备忘录-如何创建有效的人物角色

领导的理解和支持

虽然某一个团队应该”负责”人物角色以确保它的完整性，但是在这种协作性的工具即将创建的时候，谁来负责却是解决紧张或冲突的潜在资源。

选择一个可信的“负责人”来管理创建和实施人物角色，就可以解决这种紧张和冲突。这个所有人必须有足够的分量和关系来得到领导层的认可和支持。这样可以保证整个协作的团队有信心在产品/服务的开发周中期创建和运用人物角色。

可信的人物角色

保证人物角色的创建者在定性研究和以用户为中心的设计方法学方面是资深的。

如果内部有提供用户研究，交互设计和视觉设计的团队，那他们就是这项工作最合理的人选，此外，人物角色所有者的身份保证了他们和领导层的密切关系。如果没有这样的内部团队或者团队缺乏人物角色的经验，建议使用外部专家进行试水并对内部团队进行指导。

一个检验内部团队是否适合作为“所有者”的方法是看他们是否对用户（客户）体验负责、是否对产品/服务的设计负责。如果是，那他们就是理想的选择。相反，如果他们职能重叠职责不清，那人物角色的所有权最好放在定制和评估产品/服务的团队。

使人物角色具有良好的传递性

考虑到人物角色的作用范围，“所有人”应当为之创造一个沟通计划，确定一个人物角色的预算，在项目初期进行展示，并在产品/服务的生命周期开展时持续地更新、修正、升级。

有效的使用人物角色

第一:鉴别公司环境如何影响或约束人物角色的作用，并为之制定相应的行动。

人物角色可以被用在多样的公司环境中，第一个要点是从各个方面鉴别什么是可行的，包括选择务实的发展途径或者不挫伤信心的收缩。

简例——人物角色在公司环境

如果你的公司环境复杂（同时有多种产品/服务迅速成长的大型组织）高层很可能被委任对市场分割和竞争者进行大规模研究。研究的结果通常会被强制作为公司的标准，并且根据研究是否是近期的，该结果可能作为唯一的标准。

市场研究所包括的详细的用户需求可能满足了公司部分组织需求但是对设计和开发团队来说却是不足的。

在这类公司，场景中的人物角色可能被认为不是必须的，搅混水的。这种观念让人物角色的价值难以体现，让人物角色在整个产品/服务开发周期和公司组织中难以被接受。即使人物角色还是可能成功的和市场细分衔接，但因为公司对人物角色是额外的东西的这种观念过于强烈以致必须从一开始努力并证明细分的标准如何植入在人物角色的开发中。

第二:有效使用人物角色的要点是为设计和开发人员提供简单的使用人物角色的入口

	Persona 1	Persona 2	Persona 3
Weight	50	35	15	Weighted Sum
Feature A:	0	1	2	65
Feature B:	2	1	1	150
Feature C:	- 1	1	0	- 15
Feature D:	1	1	1	100

人物角色权重矩阵。左列是特点，一个人物角色占一列。每个人物角色都有权重来识别相应的重要性。分数（2.1.0.-1）标识每个人物角色对于某个特点所有的价值和关联性。总权重是通过把每个人物角色的特点比重进行相加后得出的某一特征在产品中占的比重。

特征价值对技术可行性坐标图。从另一轴向(技术可行性)排列特征的同时保持在第一轴向(目标用户价值)上的位置。

Tip 4 使用人物角色参考标准或研究方法

提供一个相关的框架或者说方法学来最大化创建人物角色的效果并提升其使用的作用。这里描述了两种选择。

Ⅰ人物角色周期（Persona Lifecycle）

Pruitt & Adlan的人物角色生命周期是一个定义、创建和使用人物角色的非常有实践意义的框架。包括了与人类的出生和生长相似的5个阶段，每一个阶段都基于前面的一个阶段：

1. 计划——创建角色之前的研究和计划阶段

2. 构思与孕育——将研究数据和观察转化为角色

3. 诞生与成熟——强有力地、清晰地传达方式，便于理解、接受和使用

4. 成年——角色用于很多已经存在的流程并在设计和开发一个产品/服务的时候发挥作用

5. 终生成就与退休——评估角色的作用，确定是否在产品/服务发布后继续和循环使用

Pruitt & Adlan的人物角色遵从一个务实的方针，比方说：他们认为每一个阶段都应该有，但是根据情况每个阶段里可以有精简。他们认为角色生命周期对于已有的过程来说是互补或加强，并且是一个公司的技术。他们尤其认为人物角色是对以用户为中心的设计的互补，比如和用户对原型进行迭代评估。

总体上他们强调从管理层、相关部门处获得广泛的接纳，并且将人物角色的作用植入到整个公司。如果你在公司任何一个接触到产品/服务开发过程的组织中工作，这种框架都是很好的资源。

ⅡCooper 的目标导向设计

与Pruitt & Adlan’s 不同，Cooper认为创建角色模是“目标导向的设计方法”的一部分。

Cooper和他的同伴在为其他公司提供设计顾问服务时发展了这种方式，着重于设计，通过理解用户目标和动机、使用迭代的情节（即叙述的结构来解释和探索人物角色）从用户研究中的数据中获取见解并把它们转化成相应的产品设计思路。

同时这种设计方式有流程化的操作，比如：根据公司中的利益相关者行驶的权利或扮演的角色，他们被作为要素包含在研究和设计中。

这种方法主要针对的是设计而不是人物角色是否广泛的在公司中应用。因此它主要对用户研究和设计者有指导价值。

使用Cooper的方法——个案研究

Symplicit 和一个大型的通信公司在2007年通过研究“音乐”如何影响用户的生活获得了更深刻的理解。

探索性的研究并不只针对市场分段中的人群常用的某种特别的科技（例如：网络下载、家庭或工作环境的pc、车内收音机/立体声、家庭收音机/立体声、ipod、手机、随身听等等），还着重于寻找用户在日常生活中“如何”与音乐交互，“何地”与音乐交互，“为什么”与音乐交互——还有这些结果如何为这家公司挖掘符合现在用户需求和习惯的未来产品的机遇——这样，我们就更有可能成功。

研究从一系列的对目标市场用户的相关询问研讨开始，然后是每日记录——就是跟踪每天与音乐的的交互记录并反馈给团队。

基于深厚的探索性研究背景和理解力，Symplicit 团队提出了一系列情景有效的向产品经理和所有者解释了用户每天是“如何”与音乐交互的，是“什么”触发了购买或者下载音乐的动机，“何时”或“何处”用户会这样做，还有用户在网络或手机平台上现存的购买过程中的痛处。

为了更好的满足用户在这些媒介上的音乐购买体验，之后设计团队就创建了一些原型解释网络和手机平台的体验该如何被改进和重新设计。

结果是，当设计被运用之后，手机平台上的销售增加了29%。这对于一个已经拥有巨大销售量的平台来说是显著的提升；更说明了基于用户的研究和理解对一个好的产品来说是多么的重要。

选择哪种方式？

如果你可能是人物角色的“所有人”，为你的公司创建人物角色并且/或者对用户研究和设计负责，我们建议你将这些方式都深入的试验一下。可以通过访问

相关话题：UCD翻译小组人物角色(Personas) 源地址：http://www.cutecube.cn/?p=66

失去控制：Cobbling的内涵

Kate Rutter — 2009-07-22 12:20:17

Adaptive Path最近发布了我们最近的R&D项目：移动识别:为新兴市场设计移动产品。移动识别是我们的设计课题，旨在了解如何使移动技术在新兴市场更有效率地工作。Adaptive Path 项目团队深入印度农村，调查移动技术给该地区带来的影响，并为农村市场开发了新型移动设备的概念模型。感兴趣的同学可以访问该项目的网站了解我们的研究成果、方法和最后的概念模型，你也可以参加5月28日该项目的小组讨论。

所有模型中最引人注目的是Steampunk phone.现代技术最令人沮丧的一点是没有给用户修改和个性定制提供足够的支持，而正是这两点促进了更新迭代的个性文化.

我曾深入地思考过这个主题…我们提供的项目与服务表层下酝酿着什么？当传统的模式开始瓦解时，在cobbing和创造的世界将发生什么？

失去控制：Cobbling的内涵

作者：Kate Rutter

译者：UCD翻译小组 , 笑炊

原文地址：http://www.adaptivepath.com/ideas/newsletter/archives/051909/index.php

我的家庭成员都是喜欢自己动手制造、修理物件的人。因此，任何一件密封的设备总是会激怒我，惹我说出不干不净的话。设计即将过时的产品明目张胆地助长了消费主义，形成了‘一次性消费文化’，也是对可持续性的一种侮辱。我们不能允许这种模式继续下去。

好消息是我看到了正在发生的变革。绿色设计、仿生因素，类似Make Magazine Owners Bill of Rights的首创精神正在向市场渗透。我把这种趋势进行整合，形成概念，叫Cobbling。

简单来说，Cobbling意味着打破最初设计的产品或体系的工作方式，不再只关注产品的功能：Cobbling是一种消费者和企业之间的基础关系。

人们为什么要Cobbling？我认为，对一个已经损坏，或不能满足客户需求和期望的系统来说，Cobbling是一个重要指标。当遭遇Cobbling时，可以看到突然爆发、碎片迸发、重新组合。总体来说，Cobbling中有很强的社会成分。也包含着斗争性、自立和DIY气质。这个词暗示着一种粗犷的感觉和性能。或许它并不美观，但很实用。

Cobbling看起来是怎么样的？我想到了3种形式：

●工作方式-人们在系统之外的工作方式

●适应-适应人们生活的设计

●探索-拓展局限，发现可能性

工作方式-人们在系统之外的工作方式

有选择性地移去一些障碍，搞出一个现有系统的‘漏洞’，就能绕开一些所谓的规则。可以确定的是…工作方式具有病毒传播能力，一旦一个人这样做了，其他人就会跟随。市场的开拓过程就是绕开或超越现有的系统。

Napster传奇

Cobbling工作方式的典范是Napster，两年时间，Napster培育了一种强力的、令人兴奋的，也获得了巨大成功的用户体验。随时随地、自由自在地分享数字音乐之前未有先例。尽管Napster倒闭了，它所开创的点对点下载系统继续挑战着商业世界里的版权、商标、和数字保护。

绕开原有的因不堪重负、正在瓦解的系统，Napster是提供了一种全新的工作方式。Napster创造了一种建立在开放、功用和分享之上的外部生态系统，取得了轰动一时的成功。自Napster之后，围绕数字版权管理的事件持续至今。

Jailbreak Rock
这里有个普通的故事。你的朋友拥有一部诺基亚N95，恰好你也正考虑更新自己的破手机。当你向移动供应商咨询，想得到这部新手机时，他们告诉你N95在你当前的网络下不可用。然而从朋友那儿你得知，并没有什么技术原因会导致N95无法使用。供应商只是告诉你不要这样做。当你询问是否可以取消你的网络服务时，他们会用取消服务需要缴纳费用、提前终止服务将有相应惩罚来阻止你。

但是这里有另外一种方法。你从eBay上买一部未被锁定的N95。从手机中取出你的SIM卡，装入N95。它工作地好极了。为什么你不能要求供应商合作一点？

点对点音乐分享和未锁定的手机是关于工作区的例子…寻找一种避开现有系统的方法：

工作区是这么产生作用的：

· 打破被锁定的系统

· 清除障碍

· 关闭会产生破坏的系统

当然我并不是提倡违法行为。真正有趣的是，越来越多的实例开始动摇所谓的规则。当市场发生改变，用户的使用期望、规则许可和法律协议也需要作出相应改变。

Cobbling是一个关于期望转移的早期信号，只有那些认识和理解了这些变化的公司才会更好地从期望转移所创造的机会中获利。

适应-适应人们生活的设计

适应意味着打破常规，改良产品以更好地适应生活需求。只有靠近某些合适的精神气质，那些为适应性设计产品的公司才能进军新兴市场。

打破常规

Johnny Lee是一位来自微软的人机交互设计师。他发明了酷毙了的Wiimote，创造了廉价的交互式书写板，并且把TV改造成能跟踪3D头部和手指动作，响应用户的手势输入。这就是适应的例子：打破常规，深入系统内部，创造更有价值的产品。

现在这种事儿并不新鲜…人们早就习惯这样做了。但是Johnny Lee做到了极致：当他把视频上传到Youtube和自己的网站上，他告诉别人如何做到这一点，现在他的视频已经被播放超过1千万次。

Johnny Lee把Cobbling社会推向了极致。之前，你购买Wii作为系统的一部分，只是简单地使用它。而现在你可以把它和其他东西放在一起工作。前提是使他的成果被更广泛的潜在人群接触到。每个人都被鼓励将使用自己已有的东西更好地生活。

法律讨厌这种东西。销售前景也不确定。但是对公司来说，更好地和你的客户保持联系很重要。对你的产品失去控制反而扩宽了产品的使用面，因为你的产品很容易以其他多种方式使用，具有开放性、适应生活、且易修正，可以获得更多的市场空间。

探索—拓宽局限，发现可能性

放上一枚戒指

2008年11月，歌手Beyonce发布了登录排行榜首的歌曲Single Ladies（put a ring on it）。

这段Yutube上的音乐视频显示了Beyonce做了一套不同凡响的舞步。

下面就更有趣了。Shane Mercado，一名舞者，创造了和Beyonce以及她的舞伴同步多画面舞蹈的视频。除了多画面中的仓库背景（事实上Shane是在他的浴室里进行的），这段时间惊艳到令人难以置信。

Shane的视频发布数小时之后，他就收到了200条消息。直到今天，这段回复Beyonce的视频已经被播放超过3300万次，并引发了大量回应它的视频。Shane被邀请到国家早间新闻节目Bonnie Hunt show.当Beyonce和Shane私下见面时，不满的人出现了，这次会见被拍摄下来，发布到YouTube上。

YouTube上关于视频回复的病毒基因，推动了一种重新组合的文化，这种文化以前只在拥有专业技能和设备的人身上才能发生，他们的作品也往往拥有自己的官方发布场所。现在我们拥有了类似YouTube、Vimeo和其他媒体分享网站的数字渠道，重组文化已经开始像病毒一样传播到非同寻常的地步。发掘‘Cobbling’演变地具有社会性。

为参与式社会设计

将作品公开分享是一种交际行为，将带来更进一步的探索与迭代。这将扩展社会表达的构成。现在人们拥有充分地参与到重组文化中的工具、材料、技能和动力。

这个例子吸引人的一点是它把Cobbling从物理世界带入到数字世界。人们创造、发布、发现、重组和反馈新事物的速度正在增长，而且不会停止。数字Cobbling设计创造了减轻产品生态系统的机会，更好地培育了客户参与的土壤。

简单开始的4个方法

发现Cobbling对你来说是个有意思的机会吗？以下4条将告诉你怎样开始：

1、相信Cobbling即将发生

当你的眼界超越现实困境，机会出现了。

人们怎样使用你的产品？创新将在何处发生？你如何从这些趋势中获取规模盈利？从拥有转变到参与将扩展你的产品性能，并把你的公司带向更长远。

2、拧紧，而不是粘合。让它更容易发生

Make magazine杂志发表的The Maker’s Bill of Rights给制造商提出了17条准则。它主要是面向物理产品的，如果引申一下，数字和服务类产品也同样适用。

3、选择回应者：法律，还是市场？决定如何回应！

你准备好为cobbling而战了吗？推动它？和它一起工作？或者忽略它？

把用户使用条例拆分成小块。Creative Commons拥有一种有关用户使用和重用的弹性条款，使得分享和控制更为便利。当你决定支持或反对Cobbling时，选择一些可以具体应用的小条款进入，在有关你的产品市场的机遇或条款上，坚持立场。

4、确立并参与到有关你产品的新兴市场

一旦你的客户和产品发生变化，Cobbling是个指示器。学会快速地适应这些变化将成为是你的公司在客户主导的市场中生存和繁荣的关键。

对公司来说，最好的机遇就是失去控制。为未来的开放架构作设计。在开放的生态系统来说，对你的公司来说，客户参与是听取市场反馈和密切关注人们生活的良方，并且促使你改进产品，让它们牢牢地成为消费者生活的一部分。

相关话题：UCD翻译小组源地址：http://ucdchina.com/post/4254

定量研究的风险

a@b.com (JJYY) — 2009-07-08 00:38:30

1. 感性vs理性
2. 把A/B测试摆放在正确的位置上（译文）
3. 定量研究的风险（译文）

作者：Jakob Nielsen
译者：UCD翻译小组 , JJYY
原文：http://www.useit.com/alertbox/20040301.html

来自Jakob Nielsen的文章，十分深入的指出了定量研究中存在的各种风险。由于十分专业而且有点长，我把文章的精华在下面摘要出来，大家可以快速阅读，了解便可。如果有兴趣则可继续阅读后面的全文。

用户研究有两种类型：定量研究（注重统计分析）和定性研究（注重了解和洞察力）。

定量研究有着自己的优势，但定性研究能以最少的金钱交付最好的结果。统计分析常常会出错、存在偏见或过度狭隘。数字崇拜者常因专注于统计分析而把可用性研究引入歧途。强调洞察力和定性分析更为重要。

定量研究主要的好处十分明显：它把复杂的情况变成一个单一的便于理解和讨论的数字。如这个例子：残疾用户比普通用户要困难206%，成年人用户比主流用户要困难122%

在接下来列举的这方面，定量研究存在着与生俱来的风险：

1. 随机结果

研究人员常用统计分析来决定哪些数字“具有统计显著性”。根据惯例，小于5%的界限常被认为更可能是随机结果，但这也暗示着如果研究者完全依赖定量分析的话，1/20的“显著结果”也许只是随机的现象。同样，也有可能存在真正有价值的事实被忽略的现象（也许因为样本容量或实验原因而没有表现出统计显著性）。

2. 魔术般变出许多相互关联来

记住：1/20的分析是“显著重要的”，即便根本就没有真正有价值的现象，所以只要测量了足够多的变量，你不可避免会发现其中一些看起来是相互关联的。例如测量7个标尺的研究会在变量之间产生21种可能的联系。因而根据平均值，这里面有1个关联会被统计认为“显著重要”，即便这里面根本就没有真正的联系。

3. 忽略了协变因素

即便一个关联看起来表现出真正重要的现象时，也有可能产生误导——如果真正的关联是并不是在你当前测量的两个变量之中，而是和第三个变量有关。如这个存在误导的例子：研究显示智力随着出生的顺序而递减（换句话就是第二胎孩子比第一胎要笨，第三胎比第二胎笨。。。）

另一个例子如更长的链接文字和用户的访问成功有积极正面的联系，但在这个表象之下隐含的关联是：粗心的设计师往往简单用”更多“、”请点击“ 等文字，而没有去思考用户是不是能够理解。资深设计师可能会使用更容易理解和自然的链接文字，即便可能会长一些。

4. 过于简单的分析

为了获得好的统计结果，研究人员必须严密控制实验的条件。如使用简化的页面和内容去代替真实的、拥有复杂情境的网站。狭隘的研究常忽略掉考虑宏观整体的可用性，这些条件的严密控制可能会使得结果不足以推广到现实世界中的问题。如这个例子：可以非常容易搞一个研究来说明面包屑设计是无用的。

5. 扭曲了的测量尺度

通过在错误的时间帮助用户，或者使用错误的任务，我们可以很容易误导一个可用性研究。实际上只要有针对性的设计实验，我们可以证明任何我们想要的结果（JJYY：插一句。常常在项目中，研究中，甚至生活中，我们会去证明自己想要证明的，发现自己想要发现的，看到自己希望看到的。这是无数错误的开始）。此外还有很多引起扭曲的因素如新奇效果。

6. 出版偏见

编辑总是遵循“人咬狗”的原则去突出新的、有趣的故事，不论科学期刊还是流行杂志都一样。这可能造成十分新奇、与众不同的研究结果得以曝光，即便它存在着严重偏见或者不实。例如网站响应时间是否重要的故事。

总结

从上我们可以看到定量研究有着与生俱来的风险，如果你在没有洞察力的前提下去依赖数字，你将被绊倒在数字所引导的错误道路上。相比起来，定性研究会更加稳固，也不太会因为一些方法上的弱点缺陷而完全失败，即使研究不见得在每个细节都完美，你仍然可以通过定性分析去了解用户和观察他们的行为来获得许多好结果。

专家会比初学者能从定性研究中获得更多更好的结果。但在定量研究中，只有最好的专家才能得到有效的结果，并且只有当他们十分小心的时候。

如果你感兴趣，可以接下去看全文。

全文 -----------------------------------

统计分析常常会出错、存在偏见或过于狭隘。数字崇拜者常因专注于统计分析而把可用性研究引入歧途。强调洞察力和定性研究更为重要。

用户研究有两种类型：定量研究（统计学）和定性研究（洞察力）。定量研究有着奇特有趣的优势，但定性研究能以最少的金钱交付最好的结果。并且定量研究常常太过狭隘并会产生误导。

定量研究的主要好处十分明显：把复杂的情况变成单一、便于理解和讨论的数字。我自己有所体会，例如在对人们使用网站的报告中：残疾用户比普通用户要困难206%，成年人用户比主流用户要困难122%。

当然，上面的数字结果忽略了需要厚厚一叠纸来解释的细节：为什么对于这些人群来说网站难于使用？我们应该要怎么做？

在上面的例子中，数字的确告诉了我们一些事情：

它告诉我们相比成年人用户，残疾用户所处的情况要糟糕得多。知道这个数值能帮助公司更好决定如何分配宝贵的资源。

它还告诉我们这不是一个小问题。如果一部分用户使用网站只比其他人难了5%，绝大部分人会说“无所谓，就这样吧”，但206%对我们许多人来说难以接受。

数字也可以帮助比较不同设计的优劣和进行长期跟踪。如果十年后，成年人使用网站的难度只比年轻用户高50%，那就可以说我们取得了实质改进。

提防数字崇拜

当阅读其他人的研究报告时，我常发现他们的定性研究结果要比定量研究结果更为可靠和有价值。认为统计研究比基于洞察力的观察研究更有价值是一个危险的倾向。实际上，绝大多数统计研究比定性研究的可靠性更低。设计研究和医学不一样，在传统学科中最为接近它的是人种学。

UI和可用性是与情境高度相关的，它的有效性依赖于对人类行为的深刻了解。典型的情况是设计师需要对设计指导规范（Design Guidelines）进行组合和取舍，这就要求去了解这些设计准则后的基本原则及原理。针对一个特定功能的事件常常和实际设计毫不相关。

迷恋数字、抛弃定性的洞察会把可用性研究引入歧途。在接下来列举的这方面，定量研究存在着与生俱来的风险：

风险1：随机结果

研究人员常常用统计分析来决定哪些数字结果具有“统计显著性”。根据惯例，小于5%的界限常被认为更可能是随机结果而不是具有重要意义的发现。

听起来十分合理，但这也暗示着如果研究者完全依赖定量分析的话，1/20的“显著结果”也许只是随机现象。

幸运的是，许多优秀的研究员——特别是那些在用户界面（UI）领域的，并不单纯使用定量研究。他们发布的报告在简单统计数字之上常有着更高的洞察力。

还有一个反面例子：有时因为研究实验的设计原因，一个真正有价值的发现在统计上却并不引人注目。也许是没有包含足够的参与者从而观测到真正重要、但是稀有的发现。仅仅因为没有出现在定量研究结果中而把相关因素给剔除，可能是错误的。

2000 年大选时在弗洛里达州的“蝴蝶投票”是一个很好的例子：一个基于100选民的研究可能没包含拥有统计显著性的人数，去发现这么一个情况：那些打算投戈尔的票的人却投给了Patrick Buchanan。小于1%的投票者会犯出现这种情况。一个定性的研究可能会揭示投票者的一些行为如“好吧，我想投票给戈尔……等等，看起来 Buchanan更加靠谱，我还是不投给戈尔了”。犹豫不决和差不多抉择是观测研究者的宝藏，但是把它们翻译为设计建议需要定性分析去观察并组合可用性原则。

风险2：魔术般变出许多相互关联来

如果测量了足够多的变量，你不可避免会发现其中一些看起来是相互关联的。用软件统计所有测试然后一定会有几个具有“统计显著性”的关联蹦出来（记住：1/20的分析是“显著的”，即便根本就没有真正有价值的现象）

测量7个标尺的研究会在变量之间产生21种可能的联系。因而根据平均值，这里面有1个关联会被统计认为“显著重要”，即便这里面根本就没有真正的联系。

在我2004年的一个网页可用性项目中，我们从53个不同方面收集用户行为的衡量标尺，因而有1,378种可能的关联可以让我丢到漏斗中去。即便在研究中我什么都没有发现，还是有69个关联会表现出“统计显著性”。

很明显我不会弯下腰去专注于捕捉相互关联，我只会报告有合理假设的、基于有真正潜在价值的统计数据。（实际上，统计研究程序假设研究员是拥有一个假设为前提的。如果你只是为了捕捉“统计上的显著重要”，你就是在滥用软件）

风险3：忽略了协变因素

即便一个关联看起来表现出真正重要的现象时，也有可能产生误导——如果真正的关联是并不是在你当前测量的两个变量之中，而是和第三个变量有关。

例如研究显示智力随着出生的顺序而递减。换句话说第一胎的孩子会比第二胎的孩子拥有更高的平均智商，以此类推，第三胎、第四胎孩子的智商会更低。这个研究看起来非常明显的警告父母：“不要生太多的孩子，否则他们会变得越来越蠢”。

其实根本不是这样。

在这个例子中有着隐藏的第三个隐藏变量：聪明的父母往往更倾向于拥有更少的孩子。当你想要衡量第一胎孩子平均智商低的时候，你针对所有的父母进行采样，却不关注他们拥有孩子的数量。但是当你衡量平均值的时候，很明显你只对那些拥有五个或更多孩子的父母进行采样。这样会造成低智商的后生孩子比重更高。当衡量随机取样的孩子智商的时候，你忽略了他们的父母——这个真正起影响的因素。

（2007年的补充：最新研究揭示家庭大小和父母的经济教育因素对首胎智商的影响是非常小的，但是要点仍然是你需要去更正这些协变量，当你做了这点的时候，智商的差异会比那些你可能会相信的偏差平均值要小很多。）

拿网页上的例子来说，你也许会观察到更长的链接文字会和用户的成功访问有正面相关性，这并不意味着你就应该去写更长的链接。在这里网页设计师是隐藏的协变式：粗心的设计师会倾向使用“更多”、“点击这里”之类的短链接文字，或自己创造的词语。相反注重可用性的设计师会试着把选项解释为用户容易理解的语言，去强调文字和内容丰富的设计元素，而不是用一些幻想的元素如“微笑的女人”。

风险4：过度简化的分析

为了获得好的统计结果，你必须严密控制实验的条件——严密到结果不足以推广和解决现实世界中的问题。

这是大学研究中的一个普遍问题，他们测试的目标常常是倾向于大学生而不是主流用户。同时许多学生并不是使用真正的网站进行测试（真正的网站常有着复杂多样的情景和上下文联系），他们往往用数张简化了的、只有简单内容的设计进行测试。

举个例子，可以非常容易搞一个研究来说明面包屑设计是无用的：给用户一个清晰的任务，要他们沿着一条直线到达目的地然后停在那里，这些用户会毫无疑问的忽略所有的面包屑线索。实际上呢？面包屑在许多网站设计中都被推荐使用，不仅仅因为它十分轻量化，它更重要的意义在于对那些通过搜索引擎或者导向link直接进入到网站深处的用户十分有帮助，而不是从头一步步走进来的用户。

狭隘的研究常忽略掉考虑宏观整体的可用性，例如重新访问行为、搜索引擎友好性、多用户决策等。类似这些的因素对设计的成功至关重要，如B2B或企业软件的设计。

风险5：扭曲了的测量尺度

通过在错误的时间帮助用户，或者使用错误的任务，我们可以很容易误导一个可用性研究。实际上只要有针对性的设计实验，我们可以证明任何我们想要的结果。这正是那些旨在表明一个厂家产品比竞争对手产品更好的赞助研究背后的原理。

即使实验者不欺诈，人们也很容易因为实验方法的弱点而受欺骗，如引导用户去注意屏幕上的特定细节。非常重要的事实是：你应该去询问一些设计元素，而不是引发用户的注意，从而改变他们的行为。

一项在线广告研究试图避免这种错误，不过却弄出了另一个错误来代替：这个实验没有公开要求用户对广告发表评论，他们要求用户评价一批页面的整体设计。实验后，研究者开始衡量用户对不同品牌的认知度，结果在页面上有banner的公司得到的更高的分数。

这个研究能够证明banner广告对品牌是有利的吗？即便它没有任何证据表明可以推动销售？不能。记住用户被要求直接对页面设计进行评价，这个动机使用户比平时更加仔细的去观察页面，特别当人们去评价设计的时候，他们会仔细检查页面上所有独立的设计元素，包括广告。

许多网页广告研究都具有误导性，因为大多数研究都来自广告代理机构。最常见的扭曲是新奇效果：每当介绍新广告格式时，它总伴随一项研究显示新类型的广告创造了更多用户点击。当然，因为新玩意总会获得一个临时优势：引起用户的注意可能只是因为它的新用户还没有培养起忽略它的习惯。这项研究在他完成的那个时段来说可能是正确的，但它不会揭示任何长期优势——当新奇的影响消退后。

风险6：出版偏见

编辑总是遵循“人咬狗”的原则去突出新的、有趣的故事，不论科学期刊还是流行杂志都一样。虽然可以理解，但这可能造成带有严重倾向的新奇、不同的研究结果得以曝光。

可用性是一个非常稳定的领域。年复一年，用户的行为几乎是相似的出现。在过去的许多研究中，我一直能发现很多相似结果。不论过去还是现在，发表一篇伪造或偏见的结果会得到更大的关注。

想想关于网页下载时间的问题。所有人都知道更快更好。自1968年以来相应时间的重要性就被写入交互设计理论中，从1995年到现在无数的网页研究都证实了这一点的重要性。电子商务网站的响应时间越快，卖的就越多。你服务器慢的那一天，你就在失去流量。（这最近在我身上发生过：1月14日， Tog被 slashdotted，因为我们共用一个服务器，和平时相比我的网站失去了10 ％的浏览量）（JJYY 注：slashdot.org是非常著名的科技新闻网站，常常会发生一些小网站因为被slashdot收录后流量剧增，而变成龟速甚至导致临时关闭，作者在这里把slashdot用做了动词）

如果20人研究下载时间，19个会认为更快更好。但是，每1/20的统计会给出错误结果，然后这一个研究可能会被广泛的讨论，仅仅因为它很新奇。其他 19个正确的研究反而可能不会引起注意。

对奇异结论的判断

奇异的结果有时有着似乎令人信服的数字支持。您可以使用的我在这里已经提出来的问题作为理智检查：这个研究是不是创造出了一些不存在的相互联系？它是不是有着偏见或者过于狭隘？它仅仅是因为与众不同而被强调吗？还是仅仅是个侥幸？

通常你会发现偏差的结果应该被忽略。人类行为的广义概念在交互式系统中应该是稳定的且容易被理解的。

例外通常正如其名：它仅仅是一个例外。当然，有时一个奇异的发现具有革命性，而不是虚幻。这极其罕见，但它确实发生过。关键在于发现是否会被重复，以及当知道在哪里可以发现的时候其他人是不是也能观察到。

一个例子，1989年我发表了一篇论文，折扣可用性工程，指出小型、快速的用户研究均优于大型研究，并测试约5个用户就足够的。这在当时是和主流思想（大预算测试）对着干的。在我发布后的15年间，其他一些研究人员也得出了类似的结论，为此我们制定了一个数学模型来证实这个基于我经验观察的理论。如今，几乎所有做用户测试的人都知道只需要做5个用户他们就可以得到绝大部分的东西。

另一个例子，有四个不同的研究都支持我的结论“ PDF文件对于在线信息访问是糟糕的”。在最新的研究中我们也发现同样的问题，这个结论被封存了数年。我当时非常犹豫要不要站出来反对在线PDF格式，因为它在其他情况下非常有用（最显著的如下载文件去印刷，这是它设计的目的）。随着越来越多的证据不断浮出来，最终一切变清晰了，结果就是在线PDF格式和用来印刷的PDF格式是非常不同的。

您可能会反驳其中某一项研究，但是4、5个研究建立了一个趋势，这大大增加了该项发现作为一个稀有事件的可信度。

总结

以上列出了许多定量研究可能会带来误导的理由，它也针对于糟糕的研究。做一个好的定量研究、通过测量获得有价值的洞察是可能的，但这样做会比较困难和昂贵。

定量研究必须在每一个细节和被检测的数字上做得非常正确，有太多的陷阱可能让你陷入进去。

如果你在没有洞察力的前提下去依赖数字，事情出错时你将没有任何备选方案。你将被绊倒在数字所引导的错误道路上。

定性研究会更加稳固，也不太会因为一些方法上的弱点缺陷而完全失败，即使您的研究不见得在每个细节都是完美的，您仍然可以通过定性分析去了解用户和观察他们的行为来获得许多好结果。

当然专家会比初学者能从定性研究中获得更好的效果。但在定量研究中，只有最好的专家才能得到有效的结果，并且只有当他们十分小心的时候。

从塔吉特公司的ClearRx药瓶识别系统得到的四点启发

孙亮 — 2009-06-16 13:01:05

Peter Merholz 版权所有
作者：Peter Merholz
译者：UCD翻译小组，孙亮；校对：吴隽辰 JunChen；
原文地址：http://blogs.harvardbusiness.org/merholz/2009/06/four-customer-experience-lesso.html

塔吉特公司的ClearRx药瓶识别系统是我最喜欢的用户体验案例之一。这一产品由塔吉特公司在四年前（译者注：2005年）推出，因其采用了和传统药瓶迥然不同的革新设计，将竞争对手远远抛在了后头。ClearRx系统有着非常棒的设计，清晰的字体排版、巧妙的色彩识别，以及更易读的平板瓶身。

很多人都没有意识到的是，任何公司都会出现好的设计作品，甚至是那些看似和杰出设计八杆子打不着的公司。然而区别在于，塔吉特公司能将如此了不起的设计推向大众生活。任何希望传达美好体验的人，都可以从ClearRx的故事中有所收获。

1. 事先制作原型

ClearRx的故事早在其设计师黛博拉·阿德勒（Deborah Adler）就读视觉艺术学校时就开始了。当阿德勒听说自己的祖母误吃了祖父的药后，她选择了重新设计药瓶作为她的博士论文。后来阿德勒将自己的设计成果称作SafeRx。毕业后她四处推广自己的设计，后来她找到了塔吉特（Target）公司。

在塔吉特公司，黛博拉阿德勒介绍了自己的商业计划，然后用简单PPT列表说明了新药瓶的功能特点，接着她用原型进行了很好的演示，她声情并茂的阐述了药瓶还可以（而且应该）是那样的。如果她没有用原型来展示，那么她不会获得塔吉特公司的注意。好的原型能让在人们聚集在这个创意之下。

后来阿德勒的原型也作为开发过程中的灯塔和指北星。虽然最终的药瓶设计有很大不同，但还是继承了原设计的所有精华之处。

2. 准备接受磨难

因为ClearRx看起来完全就是塔吉特公司的产品风格，你或许会以为设计过程很短，而实际上他们花了一年的时间，期间进行了极大量的资源协调工作。

塔吉特公司为了让自己的供给链可以生产，对药瓶外形作了重新设计和完善——比如去掉标签上的色彩标识（彩色打印机价格太高，没法给每个药房配备）换成了瓶颈处的彩色圆环；为了在每个药瓶上标注个人信息，IT系统，尤其是客户关系管理和销售终端部分都需要进行重大升级。成百上千的药剂师必须接受新系统的培训；公司还要加强营销工作来宣传这种新的方式。

我见过无数的提升用户体验失败的例子，就因为公司不愿意深入的、如数的投入提升体验所需要的成本。有时这是因为缺乏动力，但更多的还是因为受限于公司的决策流程。有些类似 ClearRx的产品，从研发到实施要经过数十个（就算没有数百之多）决策点和“审核”，其中任何一个点都可能造成产品的夭折或者极大的妥协改动。对于这样优秀的产品最终可以发售，我始终心存敬畏。原因之一，前文已经说过，就是原型的力量。原因之二，就是成功的将体验传达到用户。

3.结合自有品牌价值

塔吉特公司的使命是：“ 传递非凡价值，不断创新，创造出色用户体验，始终履行物美价廉的品牌承诺，以成为用户最爱的购物商店为目标。”ClearRx如果是在沃尔玛或者美国零售（CVS）进行销售则不会成功，因为这降低了塔吉特公司的产品的差异性，而且ClearRx在塔吉特自己的零售商店出售是一种非常有力的联合，这样的强力联合提供了塔吉特所需的动力，使得塔吉特公司大力投入，最终走完了ClearRx从原型到实现服务的艰苦历程。

你无法轻易的去传达某种好的用户体验，因为在你想推出任何很棒的新体验之时都会面临极大困难，在传递任何体验之前，你必须要明白这种体验的本质，以及它是否适合你自身品牌。

4.用户体验靠员工打造

黛博拉阿德勒在一次“是什么造就了ClearRx”的访谈中说，“药剂师对我们来说是最重要的，因为他们在最前沿。他们需要给顾客解释怎样来使用这个新产品。”对我来说，这和西南航空的创始人赫伯凯莱赫（Herb Kelleher）所说的是一个意思：“如果你创造的环境让人们真正参与进来，那你就不必控制。人们知道需要做什么就会去做，并且他们越是自愿、甘愿的付出越多，他们就越不需要管理和控制。”

很多——就算不是大多数——服务性公司都不愿意舍弃对体验的控制，因而他们控制那些直接和顾客打交道的员工。这是因为前线员工在公司最低层，公司无法信任这些人会做对的事情。所以，公司让员工遵守守则，服从规定，员工被当作自动执行的程序。然而专注于传达用户体验的公司，会感激前线员工的重要工作，并赋予他们权利来打造好的用户体验。

想更多了解关于ClearRx的故事的话，我建议读读《The Perfect Prescription》，还可以听一下《A Dose Of Design》。

美国塔吉特公司简介

Target公司位于明尼苏达州明尼阿波利斯美市，在美国47州设有1，330家商店，为客户提供当今时尚前沿的零售服务，物美价廉。不管是在 Target商店还是在线Target.com，客户都能从数千件风格独特的商品中作出选择，享受到乐趣横生、简单方便的购物体验。公司每周都要通过捐赠和其它一些活动把200万美元回馈给当地社区。自1962 年开设第一家商店以来，Target公司已与许多非赢利组织、客户和组织成员合作来帮助满足各地社区的需要。

相关话题：UCD翻译小组源地址：http://www.mrsunliang.com/?p=96

网页设计趋势发展历程之2009下

波希米亚 — 2009-06-07 22:21:39

More Web Design Trends For 2009
Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚
原文地址： http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/

译者序：09年快过去一半了，虽然文章早翻译好了，但懒了，一直没上。不过这篇文章有效期不止12个月，它依然可以指导我们在未来的设计中做出更好的页面，值得好好阅读和收藏。

系列文章：网页设计趋势发展历程之2009上

2009年网页设计趋势下

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。

1. 出格布局

2. 单页布局

3. 多栏布局

4. 巨型插图和充满活力的图形

5. 比以往更多的留白

6. 社会设计元素

7. 对话式导航

8. 动态的tab

9. 大搜索框

10. 为分类增加视觉效果

11. 作者头像

12. 图标和视觉提示

13. tag索引（替代tag云）

14. 在blog中使用插图

15. 水彩画

16. 手写体

17. 复古

18. 用有机材质、砖瓦和摄影作品做背景

19. 标记印章

20. 价签

21. 丝带

出格布局

正如在几个月前所做的40个创新设计布局：出格布局的展示那样，我们正在观察一种向更具个性和创新性布局发展的强大趋势。与使用传统四四方方的盒状布局不同，设计师们正在尝试新的信息结构、呈现和表达方式。

在这些出格布局设计中，整体创意往往比具体内容更重要，也更令人难忘。尽管如此，可用性、版式和视觉设计也很少被忽视，并被谨慎地执行。创新布局在大项目、网站设计机构和宣传网站（如大公司的商业活动）中尤为流行，但它也同样流行于blog中。

提到创意，可用和不可用设计之间的界限就非常模糊了；因此，可用性测试就显得尤为重要，因为一项新的创意能打破网站故有的东西。通常，折中考虑创意、经典和传统设计是一个不错的主意，也就是说要设法去取得一个“坚不可摧”（甚至最终很单调）的可用设计与一个有创意但不可用设计之间的平衡。记住，创意需要时间来成长：重新思考、修改、调整、优化，最终整合到你的设计当中。

我们强烈鼓励设计师打破传统盒状布局的惯例，去尝试新方式和你大胆疯狂的想法。施展你的才华吧！

单页布局

另一种设计师经常使用的、给访问者留下深刻印象的方式，就是所谓的单页布局：这种布局使用一个单独的页面来呈现网站的内容。它并不一定意味着这些设计就是极简的（遵循“少即是多”原则）。而刚好相反，这种设计往往十分复杂，它包含了丰富的图像和生动的动画效果，因此需要加载一段时间。

当用户点击了一个导航选项，页面随之改变（部分变化），新的内容就出现在了显示先前内容的区域里。这种布局中导航滑动和滚动的效果，由公共JavaScript库来支持。

对用户来说最主要的优势来自于一个简单的事实，即通过更少的鼠标移动和点击，来获得用户想要的信息。由于这个方法非常新，对那些使用非传统导航就会感到困惑的用户来说是个好机会。有些种情况下，一个“静态”版本可能会派上用场，甚至是有必要的；比如你将不得不为搜索引擎，和禁用了JavaScript的用户提供另一版本。

多栏布局

多栏（3栏以上）不一定就是复杂的设计。从反面看，如果设计得当，多栏对访问者会十分有帮助，因为它们为可见的导航选项提供了更好的综览，从而使得用户可以快速地找到他们想要的信息。

过去几年里，我们见证了网站内容的爆炸，这降低了用户在网站上所投入的注意力和时间（详情查看ReadWriteWeb）。所以，难怪设计师们都开始尝试寻找更简洁的信息呈现方式，既能让访问者在网站上停留的时间尽可能的长，又能更简单的找到内容。

实现这一目的的方法之一，就是使用多栏相邻的布局。这个想法十分合理。屏幕分辨率在最近几年里不断增加（然而，像华硕Eee PC这样的上网本得以广泛使用的话，情况可能会有所改变），从而可以为用户提供更多横向空间，也能给设计师提供额外空间去填充内容。

结果表明：现在越来越多的设计师，采用越来越多的栏在设计中。我们研究发现有向这些所谓多栏布局发展的强大趋势，通常在1000像素的屏幕中，宽度固定为850像素。多栏常被用在杂志布局和大项目中。在这些布局里，栅格常被用来保证结构平衡、层级和次序。

使用多栏布局，主动留白以及各自内部栏之间的重要性不能被夸大。（主动留白是故意留出空白，以更好地表现页面结构，强调内容的不同区域。）

为此，设计师常利用“Shneiderman的真言”（“首先表达大局，随后显示细节”），先为用户提供一个功能概况，然后按需提供细节——稍后，当某个链接被点击时（Mozilla Labs就是个最好的例子）。

巨型插图和充满活力的图形

如同巨型版式主宰当今网页设计一样，无论是专业还是个人网站项目中，巨型插图似乎都越来越受欢迎。设计师正试图用互动元素（植入式视频区）和视觉元素（导言区和插图）来传达网站的信息。在近来的设计中，插图比原来占据更大的空间，通常作为巨型版式的补充。它们更具吸引力，并且更加生动，因此更容易被访问者记住。

另外，设计师也运用一些充满活力的图形，尤其是为背景，也为其他设计元素。不同的风格和图形均被使用：如陈旧物、拼贴画、剪贴册、饰品、复古样式、水彩、有机材质和摄影背景等。

比以往更多的留白

或许最可预知、也最为有益的事情之一，就是在过去几年的网页设计中，留白日益突出。它在许多设计中处于首要位置，并被广泛用于改善网站的文章流和结构。

事实上，我从未见过内容区和导航菜单上有这么多内边距。外框和内容区的内边距在20至25像素正逐渐成为一种约定俗成的法则，甚至更大的内边距也被普遍接受。希望，这一趋势继续发展下去。

社会设计元素

纵观blog圈，你几乎找不到一个不使用社会性图标或区块，让读者通过知名社会性媒体网站去推广它们内容的blog。每个作者都希望得到可观的流量和认可，这也是为什么在当今设计中，社会性元素变得更大、更具吸引力。

社会性图标到处可见，但多出现于文章的右上角或底部。社会性区块经常被放在文章下面，有时也出现在相关文章列表旁边。Twitter，Flickr和Last.FM的混合仍然是blog和项目中常见的组合。

对话式导航

去年我们曾写过一篇名叫“对话式导航”的文章，在现在的很多网站中，貌似这个元素依然流行。导航所要完成的最大任务，是清晰地引导用户到达网站的不同地方。然而，要通过一两个关键字来表达内容是极其困难的，特别是使用横向导航。

这就是为什么通常导航没法用适当的关键字一个接一个简单列出的原因（即使用“无对话的”导航）。取而代之，设计师正在试图具体解释什么选项可用，什么是访问者点击网站链接后所期望的。

因为设计师正尝试开展与访问者之间的更多对话，所以我们愿意称这种方案为“对话式”导航，相对于那种建立在关键字列表基础上的“无对话的”导航。

导航区通常都是具有相同高度和宽度的区块，因此访问者感觉内容能被轻松引导。大图标也使用的很频繁，但在大多数情况下，它们是否适用取决于网站的内容和总体布局。导航设计中的鼠标悬停效果会让浏览变得更愉快。

动态的tab

作为交互设计中最流行的趋势之一，tab可以动态地改变内容区域。活动tab背后的想法是，当页面被加载时，所有tab的内容也被加载，但一次只显示一个tab部分的内容（属性展示被用来实现这种效果）。你可以参照教程动态的tab 和tab在jQuery中的视觉控制来创建动态的tab。

系列文章：网页设计趋势发展历程之2009上

个性化：从排序方式看用户心理

小小UCD — 2009-04-09 17:32:00

Article copyright by Linda Bustos

作者：Linda Bustos 发表于2009年3月18日；译者：UCD翻译小组，萧小小；校审：明月星光

原文地址：http://www.getelastic.com/personalization-and-sort-by/

很多电子商务网站都提供对搜索结果、分类和二级分类结果再按照价格、用户平均打分、销售量、新品上架等方法进行排序。这种方法在提升可用性的同时，也可以收集并利用这些用户信息在主页、产品页、促销banner甚至营销邮件里提供有针对性的产品宣传。

在主页

Amazon 就是一个在其主页开辟商品销售宣传区域的经典案例。不管是用户在搜索还是随便浏览的时候，操作意图一变，推荐的产品就随之改变。

甚至连历史记录都被保存起来以便在以后的访问中使用，不管用户是登录状态还是以游客身份浏览所生成的cookies都不会被删除。

想象这样一个场景，一个星期二的晚上，用户在某个网站的分类中浏览着，不过当时没有购买：

小孩益智学习玩具，以用户平均打分排序
TiVo/DVRs，价格从低到高排序
消费者眼中的商业书籍，以销量排序

星期4晚上用户回到该网站主页，看到主页商品宣传区域的如下内容：

“最受好评益智学习玩具”
“价格最低的TiVo/DVRs"
”商业投资书籍销量冠军榜“

当用户意图被识别处理后，就增强了推荐项目的关联性和吸引力。

在产品页面

交叉销售/向上销售（译注:“向上销售”就是通过一些方式把客户原本没有打算卖的东西卖给他）

如果通过了解某个用户浏览的产品分类结果的排序方式，并以这些字眼“最受欢迎的背包”“消费者最爱”或“最火爆的背包买卖”，来代替“你可能也喜欢。。。”或“浏览该商品的用户也看了。。。”，想象一下你将获得多高的关联点击率。

产品副本

想想Future Now公司的这4个Persuasion Architecture 购买气质：求胜型，自然型，感性型，理性型。（译注：“求胜型”气质特征包括喜欢最先拥有新产品，对产品摘要感兴趣，不深究细节，倾向于搜索而不是类目浏览，对交叉销售和向上销售感兴趣不过不想点击看更多信息；“自然型”气质特征包括对促销、打折、限量、限时有反应，扫描点击得很快，喜欢先看看衣服穿在别人身上是啥样；“感性型”气质特征包括关注别人所说，喜欢在线交流或者是电话客服，喜欢和朋友交流在网站上面的经历，比较有评价产品的动力；“理性型”气质的特征包括喜欢产品详细介绍，对购买深思熟虑，需要比较产品来做购买决定，相信专家评论，视频的更好。对这4种气质的详细解释在这里）。你会用什么筛选方法来决定某个用户是哪种气质呢？

有的可能是这4种气质里面比较典型的一种，但是他（她）可能在做不同购买决定的时候表现很不一样。例如，我觉得我是“理性型”气质类的——为了买个便携式GPS我花了几个月时间研究，竭尽我所能地读那些评论，不过在买玩具或别的礼物的时候我也依据销售量最高或者用户平均最高分（这是属于“感性型”的），在买衣服的时候想都不多想因为我觉得衣服会被很快卖光（这是属于“求胜型”的）。

如果你确切了解了用户的特征购买气质，你就可以给不同用户显示更具吸引力更具效率的产品副本，你甚至可以使用不同的页面布局（特色评论，最佳评论，少强调爆炸式营销等等）。

在线客服邀请

相比以价格从低到高排序并在各个页面跳跃浏览的用户而言，以用户平均打分排序并在此页面上面逗留了很久的用户是更好的在线洽谈候选人。这样可以给在线交流节约成本。

而价格从高到低排序可能就表明了你的筛选导航不够明确。例如，某人也许会对珠宝首饰价格从高到低排序来找到最大克拉重量的，或者GPS导航部分去看看最新或功能最多的产品。如果你通过标识为用户“价格从高到低”的在线聊天日志发现他们对客户服务或连串搜索查询的回答，你就会明白怎样的筛选才能够提高产品被找到的几率。

促销banner

你会推出买一赠一，超过100免运费的活动吗？你会用什么活动标题呢—— “20 Beauty Finds Under $20″ or “As Seen on Oprah: Such-and-Such Eye Cream!” ?

在email促销中

试想在促销邮件里面根据搜集的用户浏览历史记录和排序操作习惯加以更多个性化词语、标题/横幅和报价的情况。

实际上，我们仅仅掌握了点皮毛。

在我的一篇名为“Optimizing Landing Pages to Match Customer Motivation”的博客里面我写到：

“要准确预测个性用户的购买角色和顾客特征几乎是不可能的（和技术一起不断改进，我们也许能够预测）。但是你可以优化你的着陆页面来“满足所有用户”，如果你知道不同用户想要的是什么。”

我仍旧不明白市场上在用户刚到网站就读懂用户意图的ESP应用，但是想想网站浏览者留给你的那些线索来帮助你更有效地为他们个性化服务，这不仅仅限于排序。

网站管理：全自动...是靠不住的

JunChenWu — 2009-05-05 22:52:07

作者：Gerry McGovern
译者：UCD翻译小组，JunChen
原文地址：http://www.gerrymcgovern.com/nt/2009/nt-2009-04-20-web-automate.htm

对网站管理者来说，最大的挑战不是CMS或搜索引擎如何工作，而是理解人如何“工作”。

最近我开展了一个工作坊，听众是一些工程师。当我谈到最基本的理解客户的方法是观察他们行为时，一位工程师对我说：“我可不想浪费半小时观察一个人”。

首先呢，我要说我对工程师是满怀敬意的。他们的天赋异禀为大家在这个摩登世界中带来无穷的便利。我们离不开工程师。

然而，工程的核心，尤其是软件工程，是一种信念——一切都有其自动化的方法。工程师研发的引擎，大部分是用于取代人的工作。

在第一次听到“内容管理”这个说法时，我天真的以为内容管理是一种专注于专业地管理内容的原则。事实却并非如此。内容管理以前以及现在仍然都指的是内容管理软件（CMS）。

内容管理给我们带来了诸如门户、自定义、个性化、分布式发布等发展。这些无管理成本、技术驱动的解决方案使互联网、内部网充满了低质量、差组织、过时的内容。

当你个性化垃圾内容时得到的是什么？不过是个性化了的垃圾内容。把发布权限分发给那些不写作的人们，或者对自己所写内容漠不关心的人们，或者认为 Metadata 是蒙古的一个邻国¹的人们，或者对所发布内容从不回顾或删除的人们，这个时候你会得到什么？这都是你自找的啊。

为什么很多企业认为简单地给网站买一款时髦的搜索引擎，就能解决客户查找的问题呢？既没有工作人员，也没有搜索流程的管理。神奇蘑菇（Magic mushroom）²可能存在，但神奇的搜索引擎却是不存在的。

技术很重要，甚至是决定性的，但如果想让网站为企业创造价值，我们仍然需要有能者来管理网站。网站管理者的首要任务就是深入理解客户在网站上的行为。最佳的办法就是观察，观察他们在你的网站上试图完成的任务。

最近，Amazon 遇到了很多麻烦，因为“技术故障”及“分类错误”导致很多图书在网站上难以找到³，包括很多同性恋主题的书籍。“要不是因为 Amazon（更不用说其他站）在人工客服方面是出了名的反应迟钝，这件事早可以很简单地避免。” MSNBC 的 Helen Popkin 如此写道。

“和很多其他同行一样，Amazon 想要全自动。”Ann All 为 ITBusinessEdge 撰文谈到。Amazon 是一个真正的以客户为中心的企业，持续不断地在理解其客户方面投入，但有时候即使是他们也会犯错。

对于理解网络自助式服务（Web Self-Service，WSS），理解人们在在线环境中的行为，其重要性更胜于掌握任何技术。

译注1：原文为“think metadata is a country bordering Outer Mongolia”，metadata 听上去难道不像一个国家的名字？

译注2：一种具有迷幻性的毒蘑菇，或称“致幻魔菇”，据说原产于墨西哥。

译注3：4月10日那个周末，因技术故障（官方原因），全球范围内 Amazon 受到影响的书达到 57310 本，这些书都被莫名降权了，所以在网站上难以找到。

译后

原文作者用 Amazon 作为例子，或许有嘲讽的意思，对于本文的论点也并没有十足的说服力。简单的说我倒是认为有些悲观主义。请勿理解为自动化是不好的，或者只有依靠人力才能成功。这个，需要辩证的去看。

任何一家公司，尤其是像 Amazon 这样的全球巨擘，走的任何一步都有其意义，而且影响巨大，平衡、平衡、再平衡。Amazon 是值得尊敬的。

5种在设计中应用光线和阴影的简单技法

rocchow — 2009-05-07 23:59:20

原文标题：5 Simple Tricks To Bring Light and Shadow Into Your Designs

原文地址：http://www.smashingmagazine.com/2009/04/20/5-simple-tricks-to-bring-light-and-shadow-into-your-designs/

作者：Rob Morris

翻译：Roc Chow，UCDChina翻译小组

凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回光线，也都或多或少产生阴影。光线和阴影帮助我们去感知我们的所见，并且帮助我们理解材质纹理、尺寸大小以及位置空间。

所以，当我们试图让Web页面设计更加自然生动、栩栩如生的时候，对于光线和阴影的透彻理解就显得相当重要了。以下5种利用光线和阴影的技法让你的页面得以重塑，使它们在屏幕上变得引人注目。

光线和阴影的快速解析

在下面这个简单的图例中，我们可以看到，光源从画面左上方投射过来，高光在光线最强的那一面上，而阴影则落在离光源最远的那一面。在这张图片中，通过光和影的表现，我们得以了解物体的外观和纹理质感。

但是你有疑问了，这些和Web设计有什么关系?

如果你正尝试投身入丰富、真实的界面和网站设计，那么光线和阴影无疑是你的良师益友。同样的，许多传统艺术家运用此法让笔下所画之物跃然纸上，你也可以利用光影让你的设计空间感十足并博得人们的视觉兴趣点。让我们开始吧。

1、使用光源

也许运用光线的最重要的一点就是要了解光是从哪里来的。光源的方向几乎决定了高光和阴影投射的位置（虽然在Web设计中你可以适当的调整一下规则）。如果你使用的是Photoshop，使用“全局光”可将所有的光照效果遵循同一个光源方向。

在设计中（哪怕只是线性或径向渐变）控制光源有助于为你的设计增添一种环境效果。当然也可以为设计添加一个视觉焦点。

案例

Campaign Monitor 运用一个放射性的光线以表现一种太阳在页面后升起的效果。

Icebrrg 运用光线让网站有种处于水面之下的感觉。

Mike Precious 使用了多处光源以增加视觉兴趣点，并且风格上合（右上角的）工作灯联系起来。

Deaxon在其logo背后运用一个细微的光源，起到了突出logo视觉效果的作用。

2、渐变

在真实世界种，几乎没有什么是单一色调的。光影无处不在。巧妙的渐变运用是让设计具有深度并让设计在屏幕之上变得真实生动的绝好方法。

渐变的关键点是不要太过生硬。如果你使用Photoshop，可在图层样式中添加渐变。你可以随意的设置渐变的起始点；如果你改变了元素的大小，那么渐变也将重新调整。

案例

nclud’s website 是渐变运用的经典教案，它告诉我们即使细微的渐变也可以在分割和组织内容版面上取得非常好效果的。

CSS Ninjas 给人的第一眼印象是单调的颜色，但细看之下每种颜色都有着细微的渐变，使其变得具有质感。

3、高光

高光可以平衡阴影，并且需要在靠近光源的物体边缘上使用。巧妙的设计之下，高光往往被忽略掉，因为你甚至没有注意到它。虽然不是每一处设计都适用，但是一个细小的高光往往可以让界面在光亮度上显得不同。高光越“明晰”，界面呈现上就越显光亮。

要细致的体会高光，我们需要放大拉近观察它。添加高光的一个妙计就是在200%或者更大的放大比例下工作，因为原始尺寸之下你很难清楚地观察你所做的一切。

案例

Icon Dock 以及 Newism 两者都运用一个半透明白色线条以给页面元素的顶端边缘添加一个高光。几乎难以察觉的效果却让设计十分出彩。

你也许已经去过Apple的网站。但是，你也许没有注意到它导航栏中元素底部的漂亮的高光效果，这让导航文字变得凹凸有致。

4、阴影基础

就像渐变一样，阴影也是Web设计师手中“常用武器”之一。如果运用恰当，阴影可以很好的增加立体感和质感。关键是不要用过火了。

阴影的特征取决与光线的方向和强弱，以及物体和阴影投射面之间的距离。光线越强，阴影随之越深和明显；光线越弱，阴影随之越柔和。

案例

由于应用起来十分简单，当阴影效果在网上崭露头角时，无数的网站便开始选择使用这种设计。如果经过巧妙运用的话，哪怕是很细微的一处设计也能让空间感油然而生。

LinkedIn 在它侧边栏的底部添加了一个非常细微的阴影，从而产生立体感。

Google —— 也许是互联网上最忙碌的页面 —— 依然在它的搜索页上加入细微的阴影效果。

5、阴影进阶

你可以用很多方式超越基础的阴影效果，从而赋予一个物体以三维空间感。拉长投影是一种在页面上改变物体空间位置关系的很好的途径。

在下面这个例子中，同样一听可乐罐依靠阴影呈现出完全不同的空间位置感觉。

案例

Emotions by Mike 很聪明的用阴影（以及光线）将一个原本是平面的背景变成地面。

Superkix 运用阴影让运动鞋像是“浮”在网站之上。当你改变页面大小的时候，阴影也跟着改变，好像光线在移动一样。

Sofa 在光线和阴影的优秀运用下，白色背景上产生了地面的空间感觉。

组件和模式

stan — 2009-04-15 00:15:39

译者：UCD翻译小组，Stan
校审：远骋，Angela
原文地址：http://www.uie.com/articles/components_vs_patterns

编者按:今年四月,在UIE应用高峰会议上，应我们的要求，Nathan Curtis会做一次关于实现组件和模式重用的演讲。其间，Nathan讨论了组件和模式之间的不同。

常常在你计划构建一个组件库的时候，股东会这样问你“这样阿,我们正在构建模式库么?”实际上，并不是这样。尽管这两个概念非常相关，但它们之间的不同会影响你构建一个对你而言正确、适用的库的决策。

什么是模式？
模式是一种通用的解决方案，尤其对于常见的设计问题，如此一来，你可以多次使用这种解决方案，而每次的用法都不尽相同。
举个例子，对于一个设计者来说，没有什么理由不去使用这些通用设计方式：Tab(至少要有2个Tab)、视频播放器（可以播放或暂停）、登录（一个需要用户名和密码的最简表单）。模式是交互设计的精髓，提供给设计者基本的、约定俗成的应用方式，不管这些解决方案是否会被收集在一起，作为一个库提供给某个企业或网站。

什么是组件？
另一个方面，所谓组件则是在一个页面中针对某个特定系统而设计的、可复用的块。这样的组件──也被叫做模块、块、portlets，widgets、区块……或其他的名字，这依赖于设计的背景，它们被集合到一起，便组成了一个完整的页面或视觉效果。在一个页面布局里面，每一个组件都有其特定的应用、预定义的行为方式、格式、编辑方式、视觉效果，以及各种各样的处理方式等等。

组件和模式二者之间是如何联系的？
模式和组件，在设计中互补且共存，尽管它们常常并不是同样的东西。

看一下这2个首页的不同体验，分别是fancast.com和comcast.net，两者都是Comcast Interactive Media的网站，相关关联。这两个首页都可以分解为多个组件（桔色标明），其中很多都可以在其他页面上重用。这2个首页，每一个都使用了很多模式（红色标明）。

图A:组件（桔色）和模式（红色）在comcast.net（左）和fancast.com（右）首页面上的效果

这些组件和模式是一样的么？不完全是。这2个设计方案中，没有任何相同的组件，包括整个视觉栅格，排版、布局、颜色、导航模式都不一样。然而，这2中设计使用了至少5种相同的模式，包括搜索、登录、跑马灯、头条、和Tab。

一个模式的多种组件设计
通常，一个组件库中的多个组件使用相同的模式。举个例子，Tab模式，设计者可以用它把内容分割成不同的部分，所有Tab都可访问，但每次只有一个Tab呈现可见。在cnn.com网站上，Tab被实例化成很多个组件，通过全球区域分组财经市场（Asia, Europe, US）建议不翻译Asia, Europe, US，这样用户可以更直观的和图片联系着看、通过形式分组文章（文字、视频、地图、图表）、通过类型分组视频（热点、排行、小编推荐等）。

图B:Tab在cnn.com上被用作唯一分类、内容类型、精化组织。

在每一个例子中，设计都遵循Tab模式的基本理念，比如要区分当前激活的Tab和其他Tab。然而，具体到每个用法、页面分区、风格，以及设计细节，在每一个组件中都迥然不同。

海纳百川：多个组件、一个模式
同样，很多组件的各种千奇百怪的设计都能够归结成一个模式，并形成一个基本准则，适于团队并共飨之。

举个例子，试想一个网站中的很多的视频播放器，各种衍生的无用的设计形式到处泛滥，嵌入到一个产品的焦点区域嵌入到产品介绍的页面，在不同的焦点区域使用不同的播放器，在弹出框中使用特殊的播放器，在培训组的内容帮助文档中使用另外新的播放器，等等。所有设计的播放器UI组件，在不同的团队中多次开发，便有了很多不一样的呈现状态和用户交互方式。

各个团队，可以通过模式来解决分歧，基本的表现要有播放/暂停、scrubber、时间轴（播放时间和总时间）、音量。通过使用模式，一致性得到提高，但团队依然可以灵活的取舍各种附加控件和功能，比如，视频大小、全屏观看、百分比、添加评论、视频代码等，一个特殊的组件就可以用在他们自己的设计方案中了。

相同点
对特定的问题，模式和组件都是可重用的设计方案。重用是两者的关键售卖点，其结果都是为了取得一致性和降低成本。
另外，模式和组件能够还能做以下的事情：

通过使用诸如时间、基本原理、和方案原则来描述
通过形成一个库来管理
因为可重用，那么无论在html/css feameworks代码中还是在设计库线框图中都可以使用。
在很多方案中使用，比如信息架构，交互设计，视觉设计，设计技术（html/css/js脚本）等其他准则。
通过一个定义的工作流成进行开发和维护
以一个组织的设计需求为基础
以用户研究来影响和把握

不同点
尽管两者相似，但在很多重要的方面，组件和模式还是不同的。一方面，模式是一些准则，设计者可以拿来去阐述和运用；另一方面，组件是特殊的实现，有着很多的规定和硬性要求。

其他不同点包括：

区别	模式	组件
类型	可以成为页面的一部分（登录模块）、流程（使用购物车、结账、签收买东西）、行为（自动完成填写），或其他等等	总是页面或屏幕设计的一部分
特征	具有通用性，在一些环境中，甚至元素都相似	在一个设计方案中是一个特定的设计，包括布局、颜色、类型和行为
定位	对设计者来说，在屏幕中，是应用的准则和定位	着眼在一个页面布局中的特殊位置，以习惯用法为基础。
风格	从很多特殊的皮肤中抽象出来，可灵活运用以适应多种视觉处理	已经在一个视觉中完成，很多可变之处已经被预先定义好了。
可变性	大概是一些基本的可变的基准	特定的数据、格式、原则、风格、甚至是feed
标记和代码	即使标记的代码可用，但还是需要定制以适应系统	通过格式化的html、js和css进行了完美的呈现，如果组件库已经建立的话
如何工作	在一个特定条件下，描述一个设计应该如何工作（但也许会建议如何取得一个折中方案）	描述了一个设计是如何工作的，在设计过程中，包含了各种折中方式和预先规定

你应该构建的那一种库？
既然两种库是不同的，那你该采用哪一个呢？

模式库是理想的方式，对于有过很多设计经验的团队来说，比如一个像Yahoo那样的团队，设计过很多的产品，每一个产品都有其独有的视觉系统，但这些都依附在一个大的通用的品牌上。对于其他团队来说，组件库被证明是完美的方式，诸如sun的 sun.com 网站库，合成了大量的页面，片段，团队，内容，都归并到一个通用的、简单的设计系统和体验上。

但这或许不是一个问题，因为要依赖于你的环境，你可能会从一个或两个库中受益。实际上，一个团队会构建2个库，并且像构建组件库那样构建模式库。其他团队会采用拿来主义，同时领会要义，通常的做法是把一些类似模式的指导原则结合运用到更多的模块定义中去。

如果你的团队具备以下条件，你可以考虑构建模式库：

有很多的视觉系统，各不相同，并且不会整合统一
有能力把模式文档化，相比起来要比公开一个已有的库要更有意义
明白阻力重重，触及到既有的习惯，但依然乐于使用统一标准

考虑建立组件库，需要具备以下几点

一个特定的视觉系统，包括栅格，布局，色调，排版等
在系统中很多可重用的组件（比如页面的块）
多个团队必须要一起工作,共同推动和发布
有兴趣并且有能力把你的设计和代码系统贯穿在团队、项目、和时间管理中
能够强势，可以以己为中心的影响构建、部署和维护一个库（或通过构建一个库来提升影响力）

更多
2009年4月21日，Nathan Curtis 将会在加利福尼亚Newport Beach的UIE Web应用高峰会议上做演讲，题目是“实现模式和组件的重用”。这是一个非常理想的讨论会，与会者可以充分展示其设计才能，并徜徉其中，感受各种各样的作品

我一直是这样的，很想听到你对这个主题的想法。加入到我们的本周讨论中来吧，在这里“UIE Brain Sparks blog”。

Adaptive Path：我们最爱的草图工具

Junchen — 2009-04-13 12:11:29

作者：Adaptive Path
译者：UCD翻译小组，JunChen
原文地址：http://www.adaptivepath.com/ideas/newsletter/archives/031109/index.php

有件事呢本应该是显而易见的，我是指如果你用恰当的工具，那么画起草图来会变得相当、相当简单。

我不会穿着网球鞋去滑雪，但我却常常假想自己可以用蜡笔、羽毛笔或者用剩的铅笔头画出工业级效果。喔，太蠢了。最近我才意识到，拥有一套良好的“装备”是多么重要，真是杀牛要用牛刀啊。

下面就是我的“装备”，看看它们是怎样帮助我成为一个更好的用户体验设计师。

1. 网纹收纳袋

我知道你在想什么。收纳袋不是一个画草图的工具。那你就错了，因为：它可以将你的所有工具收纳在一起，方便拿取和带走。这意味着你更可能将它们随身携带，并且因此能够在更多情况下使用。

如果你能够在人们讨论过程中为讨论的对象画一些草图，那么你通过绘画就可以阐明人们所表达的意思，并且可以使每一个人有相同的认识。这种交流过程中实时产生的草图，在促进想像力方面具有无与伦比的力量，并且会被不断地引用、引用、再引用。比如，“记得那天我们画的一个框和两个圆圈。我想我们漏掉了另外一个圆圈...”

2. 暖灰色马克笔

如果你犹豫踌躇于将看上去挺搞笑的线条草图作为专业的业务交付物，那么一支暖灰色的马克笔立即能够使草图更加美观。我通常用灰色来描绘重点，加一些简单的阴影、细微地区分出前景和背景。这样可以使草图更有层次感，并且可以使眼睛更容易解读具体的情景。

3. 蓝色铅笔

蓝色铅笔对初学者来说是很有帮助的，用来先打底稿，然后再墨水描绘。蓝色的铅笔线条易于擦除，并且不会被复印出来或拍出来。

但是注意不要过分依赖于蓝色铅笔。草图又不是艺术品，不需要在细节上尽善尽美或过分挑剔。蓝色铅笔确实能让你给草图修饰过头，哪怕并不需要这样。但在画故事版，或需要描绘特定位置和姿势的人物时，蓝色铅笔确实能让你有如神助。

4. 红色马克笔

红色马克笔很容易就能够让人关注草图的某些部分。尤其是在箭头和动作的指示上。

5. Sharpie®斜头记号笔

我特喜欢用Sharpie®的斜头记号笔。就像其他好工具一样，它能胜任多种角色。我最常用的是调整草图线条的粗细，来凸显最重要的部分。调整线条粗细（基本上就是通过重复描绘的方式）是画草图的一项最简单、最有效的技巧。能够立即让草图具有对比和视觉层次感，使人眼看上去更加舒适，使大脑更容易处理。

我也用斜头记号笔来写字。我觉得，文字和标记像是草图中默默无闻的英雄。我们总担心我们画的草图，但Jessica Hagy却在她《Indexed》封面上欣欣然地用了一个清晰、有冲击力的箭头指向右侧的文字，一下子使得草图具备了“可读性”。

6. Sharpie®常规记号笔

Sharpie®的常规记号笔是整套装备的主力。你将用它来画人、流程图、标记、界面、方块、箭头等等。事实上最好是多准备一些这种笔，因为大量使用它的笔头很容易用旧或起毛。

7. Sharpie®特细记号笔

Sharpie®的特细记号笔尤其适合画界面。在Adaptive Path，我们通常会在设计一开始画一些缩略尺寸的界面想法，之后再为其中一小部分绘制更具体的草图。缩略的尺寸强迫你关注本质的东西。标题、文本区块、照片或功能特性的位置——这些都通过方块和曲线的形式来简单表示。要让这些方块和曲线看上去有意义，就需要较细的笔头了。我们将在 [Good Design Faster] 工作坊(http://www.adaptivepath.com/events/2009/apr/)中作更深入具体的探讨。

8. 小贴纸（Drafting Dots）

小贴纸可以使任何垂直表面变成你的草图展示空间。这些圆形的贴纸能够附着于大部分表面，不会有痕迹而且粘性能够保留很长时间（所以你能够将草图重新贴在其他任意地方）。将草图挂贴起来看上去很简单，但这样使得其他人也能看到，就让草图从一种个人想法转变为了集体解决问题的工具。

所以啦，我是有些喜欢这些工具的，办公用品、缝纫用品之类。去哪里买？可别让我再罗嗦下去啦。但当然了，真正重要的并非这些工具。照片、草图，这些都不是终点。它们是为了告诉我们该如何做。

我们该做什么？

在对未来的设计中，为了展示现在仅存在于想像中的事物，草图是我们最无拘束的工具。它们看上去会怎样？怎么运行？什么形态？如何展示？以及最重要的，我们如何与之交互。如果每一个新的应用我们都是用Visio的绘图形状，那么我们将生活在一个满是单选框和下拉菜单的世界中。过去可能就是这样，但在现在我们所为之设计的世界中——移动设备、多渠道、服务至上——显然并非如此。这意味着是时候考虑用新的工具了，或者说那些老朋友。

如果你有兴趣学习更多关于次世代用户体验设计工具，可以参加我们4月2-3日在旧金山举办的Good Design Faster工作坊。用“NEWS”促销代码来获得10%的注册折扣。

网页设计趋势发展历程之2009上

波希米亚 — 2009-03-12 14:44:19

网页设计师是变幻无常的。我们喜欢拿东西做试验，喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法，这些在将来可能会成为主流和经典。因此，随着新设计方法的兴起，越来越多的设计师关注他们、使用他们，新的趋势也就诞生了。

在过去的几个月，我们分析了很多网页设计，观察新趋势，权衡设计决策和代码解决方案的优点。在这篇文章里，我们将展示2009年网页设计趋势：动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗？发表评论吧，好让我们知道！

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。

2009年网页设计趋势

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。

1. 凸版印刷

2. 富UI

3. 透明的PNG

4. 大字号(版面)

5. 自定义字体（sIFR 等）

6. 模式化对话盒/会话窗

7. 多媒体区

8. 杂志外观

9. 旋转木马（幻灯片）

10. 导言模块

好，现在就让我们到具体内容中去仔细看看上面提到的每个趋势。

1. 凸版印刷

在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷术到现今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。

2. 富UI

我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决方案。

特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像Newspond.com和Quicksnapper.com上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，更适用的用户界面将在2009年到来。

上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。

3. 透明的PNG

透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。有时透明PNG也作为模式化对话盒(会话窗)的背景。

去年，我们描述了许多可以利用透明度发挥网页设计创意的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也有些设计超越了这种定式。

4. 大字号(版面)

在之前的文章（1，2 ）中，我们列举过一些大字号(版面)的杰出案例。2009年，大字号(版面)将成为主流。特别是设计机构，开发大型项目，做产品网站和在线服务的，他们会使用大字号(版面)来传达自己网站最重要的信息。

这些设计元素的字体大小通常都要超过36px，在很多情况下，为迎合观众都会使用非常漂亮的字体。总的来说，设计师投入更多精力在排版的细节方面，如主次关系，行高和字体的选择。其结果是：网站更漂亮，风格更一致，看起来可靠且值得信赖。

5. 自定义字体

就像设计师花费了更多精力在排版上一样，他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在，我们仍观察到有一股向自定义字体发展的微弱趋势（例如使用sIFR）。

有趣的是，这些字体往往无缝结合于网站设计中；它们几乎从不需要网站因它而“更新”排版。设计师们试图融合漂亮的版式和炫目的视觉设计，以此来改善网站的外观和用户体验。

6. 模式化对话盒/会话窗

模式化对话盒（会话窗）其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口，并且使用户的注意力始终集中在网站最重要的区域内。状态窗通常是被用户的动作所触发（如注册或登录），并且出现于主内容之上，就像桌面应用中的一个窗口。状态窗往往以一个非常微妙的方式出现：它们通常采用半透明，并且有一个“关闭”按钮。

7. 多媒体区

随着更多宽带网络的接入，相比两三年前，用户已经可以浏览更丰富的内容，设计师可以借此机会，用更具吸引力和值得回忆的方式来呈现内容。怪不得一些产品网站用多媒体区（录像和视频）来展示他们的内容。这类元素的主要优势还在于，它们可以快捷有效地表达内容，并使用户更易于消化这些信息。

用户要做的只是靠在椅背上欣赏；它们会把每件事按部就班地展示出来，不需要用户点击，搜索说明，或是学习导航如何使用。影片通常都简明扼要；它们大多正式，但也不乏娱乐。

但请明白，视频只是网站内容的一种替代形式（而不是主体和唯一！）。不是所有人都通过宽带上网，也不是所有人都愿意看视频（因为他/她可能正在听广播或音乐），更不是所有人的机器上都安装了Flash和JavaScript.

8. 杂志外观

在Blog的设计中有一个非常有趣的现象，许多手法通常来自于传统（印刷）媒体。从页面文章的排列、排版的运用、插图，甚至到文字对齐方式都与传统印刷技术的手法相似。栅格化设计变得日益普及，但多用于大型项目，产品页面和大型的Blog；它们几乎不在公司网站或网上商城中出现。

9. 旋转木马（幻灯片）

旋转木马其实就是幻灯导航，它的内容垂直或水平轮转（因此得名“旋转木马”）。要达到轮转导航的目的，用户需要点击其中某一个切换元素（通常是左/右或者上/下箭头）。当进行切换时，内容就向所选的方向轮换了。

过去用户为寻找他们所喜爱的内容需要点击网站中的很多章节，取而代之，现在可以快速浏览可见的内容，省去了滚屏和不必要的鼠标移动。这样做的好处是：用户不但节省了时间，而且使他们的注意力更加集中到内容中，而不是被分散到浏览器窗口上。这类幻灯导航经常被使用在娱乐网站和大型Blog上，但设计师也可以把它用在大型项目中，以更互动的方式来展示自己的工作。

10. 导言模块

网站的左上部是页面中最重要的区域，因为它最能吸引访问者的注意力。因此，把网站最重要的信息放在那里是再明智不过的了，这样就能确保访问者尽可能快的看到信息。

事实上，这也是许多设计师正在做的事情。不管是为网站应用、公司设计、在线服务还是大型项目，设计师们都会把他们的标语和简要导言放在页面顶部，通过使用粗体和生动的排版，给用户留下一个好的第一印象。一些导言是简短的，也有一些够啰嗦的；无论哪种，它们都会占一大块区域；与布局等宽，高度在 250-400px之间，已成为这些导言模块的通用尺寸。值得注意的是，这些模块几乎从不出现在Blog中，网上商城中也很少出现。

敬请期待！

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待

Skittles—主页的终结者吗？

萧小小 — 2009-03-12 09:06:38

Article copyright by Tim Leberecht

作者：Tim Leberecht；译者：UCD翻译小组，萧小小；校审：jarod tang ，Cloud Zhang

原文地址： http://designmind.frogdesign.com/blog/skittles-the-end-of-the-homepage-as-we-know-it.html

品牌推广（现在多为在线的品牌推广）总是瞬息万变。信息控制时代已经过去，品牌经营之道在无为而治。

这里有个最新最大胆的推广例子：昨天（译注：就是3月2日），著名食品品牌Skittles（译注：skittles-彩虹糖，DOVE-德芙等都是是玛氏旗下的品牌）做了很多市场营销人士敢想却不敢做的激进壮举——“Interweb”。昨天，Skittles的主页缩小为Skittles logo般大小悬浮在Twitter里搜索关键字为“Skittles”的页面。今天它悬浮在了Facebook的该关键字页面。

在这信息极度透明的年代，这样战略性地完全放弃品牌操纵，把所谓的劣势（译注：这个劣势应该指的是信息太透明）变成了强势，无论你喜欢与否，你不能控制人们在社区网站上对你的言论，“蚂蚁都有扩音器”（译注：这句话是Chris Anderson所说，意思大概是蚂蚁都有扩音器，更何况人呢？）。因此，正如 Federated Media 所说：Skittles的主页是场对话。

"Interweb" 运动铁定会给 Skittles 带来短期的轰动（在这眼球经济年代，这本身就是一笔巨大的财富），但是这种轰动效应会消失得很快。然而这却表明了分布式互联网的持续进步和在传统网络营销（译注：产品的官方主页）上的一次成功对话。再说了如果你可以用大量动态内容去教育和吸引用户，谁会需要静态的站点呢？

以Skittles为模板，也许以后品牌在网站中的呈现将主要包含以下4个要素。

-一个twitter 订阅（简短实时的内容）``

-一个博客或者杂志（长篇幅的内容，自有品牌或第三方的）

-链接到社区网络（比如LinkedIn, Facebook 等等）

-一个强大的搜索功能，能搜到该品牌在Google，Twitter等其它网站（热点新闻或大事件，诸如Slideshare等的社会媒体网站）的话题。