看到网易这篇文章就像看到前几天腾讯CDC的那篇专题banner设计一样激动，无论哪个网站对于banner的设计都格外重要

写在前面的话

有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。

·顾及需求方的频道定位

因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。

图2
/历史频道的专题，做出厚重沧桑的历史感还是很切题的。
/banner 赞助  10

·顾及此专题的定位

专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。

从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。

·分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

·如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’‘年’‘第X届’这种信息量不大的词。

·如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。

3种文字和辅助视觉常见的搭配方式：

1，   文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。

图9
/banner 赞助 胡子

图10

2，   文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。

图11
/banner 赞助 淑华

3，   主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。

图13

1，严肃话题也能做出新感觉

做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。

图16
/主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。

2，轻松话题可以做出幽默感

有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。

图19
/这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。

3，作品也能带点小情调

有时候来一些小的创意也会让banner增色不少。

图21
/摇滚的不是乐器，还是文字
/banner 赞助 竆

后面的话

有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。

转自网易UEDC http://uedc.163.com/2044.html

您可能还关注的？

• 视觉设计时不应产生新信息
• 当视觉设计师遇上产品经理、开发工程师…
• 浅析Banner构成与创意设计
• 浅析网页色彩应用
• WEB2.0时代活动类网页我们该如何设计？

情况往往是这样的：
视觉设计师：设计稿被批说很难看，我都是按照原型图做的啊
交互设计师：我把产品文档中的功能、流程都顺利的实现了，且比较合理吧
产品设计师：哭了。。。

还有一种情况：
产品设计师：这个功能很重要，希望用户能明白且觉得有意思
交互设计师：我的原型图把这个功能的来龙去脉都写清楚了啊，视觉设计师你发挥吧，这里需要设计一下
视觉设计师：我的设计稿又被要求反攻了，到底要做成什么样啊？

这里其实提到了两种情况，一种是没有思考的结果，一种的没有共同创造的结果

很多大公司组织结构很复杂，每个人都负责自己流水线上的那一块方寸地，每一个流水线上的工人只需负责自己这一段的事情，按照规矩，接上游的结果完整的实现自己的部分即可。殊不知这种方式对设计师来说是自杀式的行为。如果以这种态度来对待设计，那其实称不上设计师，充其量是个美化技师而已。

别把自己当成某个特定的身份对你来说绝对是有好处的，在需求被实现之前，你应该既是产品设计师，又是交互设计师，还得是视觉设计师，你需要同时拥有这三种意识去处理事情。大家是在一起创造，而不是单纯的完成工作。

所以，多去参加产品方案会、交互方案会，拿到原型图或者产品文档别急着动手，想想为什么产品这么考虑、交互原型这么设计，一定就是最好的方案了吗？是否还有更好的方式来表现？整件事轻的来龙去脉是什么？用户将要怎么接受我做出来的这个东西？把自己当一个混合体来看待。

每个人应该都是创造这个生命的一员，而不是完成这项工作的其中一个工人。
转自：http://ucdchina.com/snap/6710

您可能还关注的？

• 什么是用户研究？全解析
• 《从》之“产品设计是什么？”
• 如何做得Banner通情达意
• 电子商务网站“用户评论”模块浅析
• 也谈谈做平台产品初期运营的困境

用户研究能做什么？

目前，业界更多的是结合产品设计和开发流程来描述用户研究的，如下图所示：

用户研究随着产品开发周期不断迭代进行。

以上这种解释，很好地描述了用户研究在产品设计和开发过程中的持续性和阶段性。然而，基于产品设计和开发的用户研究只是我们工作的一部分，更有 效、更专业的用户研究，应该还可以为市场拓展、广告推广、营销策略、甚至公司的品牌战略提供专业协助。也只有通过多方位、多角度的调研，我们才能更系统地 了解用户的行为和动机，提出更全面、更有建设性的意见。

所以，它也应该对影响用户体验的其他因素进行研究，从而获取一个更为全面的用户模型。

用户研究的三种类型

上面提到了用户研究的主要工作内容，那么，以互联网产品公司为例，作为一个用户研究人员，如何规划这些工作，从广度和深度两方面获得对用户的深 入了解，是我们应该思考的问题。

我把用户研究分为以下三种类型，这三种类型的研究工作相互联系，互为基础和补充。

项目型研究，是解决临时问题的调研，比如，解决产品研发、营销策划等工作中临时出现的问题，这些调研需求会 在产品的不同阶段，由各相关部门提出。

常规性研究，是我们需要持续不断进行的工作，比如，定期/不定期用户满意度调查，用户反馈和渠道反馈的监测 等等。当常规性用户调研的结果中，出现了需要深入了解和验证的问题，我们可以立项，进入项目型研究的范畴。

策略型研究，是在多方位、多层次的用户研究基础上，结合其他部门或者外部的研究成果，提炼和拓展，进行新机 遇探索的前瞻性研究。

成功开展用户研究的五大要素

好的规划是基础，好的实施是保证。在用户研究的实施过程中，以下几点非常重要：

1.理清研究目的和要回答的问题

研究计划之前，弄清楚为什么要做这次研究，研究要回答哪些问题，并且书面确定下来。

很多时候，客户会希望一次研究就能解决他们很多疑问，但这往往是不现实的。这种情况下，和客户一起理清这些问题的优先级次序，制定一个可行的研 究计划，将是一个好的开始。

2.发动相关人员参与研究过程

即便在计划初期，广泛收集了大家的需求，争取他们参与到调研过程中，仍然非常重要。

一方面，通过观察后的讨论，了解大家的想法，更多的背景知识可以让用户研究报告更全面，更深入；另一方面，让研究成果成为大家共同的成果，提高 客户对它的接受度和认同感。

我经常会碰到这样的情况，在研究成果汇报会议上，有人提出疑问，在我还没来得及发言的时候，已经有参与过观察的客户在帮我解释了:)

3.研究成果的可操作性

研究成果不应该停留在我们发现了什么，更应该建议我们下一步要做什么，如何做。

4.研究成果的专业展示和汇报

好的报告内容同样需要好的包装。视觉化的信息，更容易被人理解和接受。

根据听取汇报的对象，选择对于他们而言生动有趣的形式来阐述研究成果。

5.研究成果实施情况的跟踪

针对每一项研究结果，都应该和相关负责人确定实施计划，存档并跟踪，保证用户研究的成果落实到后续的工作中去。

最后我想说，好的用户体验，不是某个人或某个部门努力就能实现的，公司各部门资源的整合和统一，是实现良好用户体验的关键。各部门人员都有着自 己的专长和专业视角，只要每个人都主动地沟通和分享，并朝着统一的目标去寻求解决方案，我相信，更好的用户体验触手可及。
原文：http://cdc.tencent.com/?p=2317

您可能还关注的？

• 设计师要会思考
• 《从》之“产品设计是什么？”
• 如何做得Banner通情达意
• 电子商务网站“用户评论”模块浅析
• 也谈谈做平台产品初期运营的困境

其实我们日常生活中很多事情，办起来过程很罗嗦，办事的工作人员说这是应该的，都这样做，可应该不应该，谁是评判标准呢？

交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中，尽可能的消除每一个附加工作，做到尽可能一次操作而完成任务。一次操作是个概念，并不是完成任务只能点击一次，而是减少用户操作次数。使之提高工作效率。

交互产品经常包括一些不必要的具有繁重工作量的交互，对于用户而言，这些就是附加工作，附加工作不直接实现目标，但对于实现目标是有用因素。附加工 作的问题是它们在消耗我们的精力，而不是直接实现我们的目标，如果能够消除附加任务，我们就能让用户更加又效率，更有生产率。并且能够改善软件的可用性。 作为一个交互设计者，你应该对附加工作的存在非常敏感，用户界面中附加工作的存在是造成用户不满的首要原因，因此每一个设计者都值得关注各种形式的交互附 加工作。（About face 3,第11章：消除附加工作）

那么，如何减少用户的附加工作，保证用户工作效率呢？

1，保证主操作以及用户常用功能的方便展现。
这是用户快速完成任务的核心。比如播放器需要突出播放按钮，而收起了快进功能。ps的滤镜里会第一个展示出你上次应用过的滤镜效果，方便再次应用等。

2，合适的关闭与隐藏新手培训工具
用户不会长期停留在新手状态，所以新手的任务对于中间用户和高级用户来说就是附加工作，需要关闭或者隐藏。

3，平衡好视觉装饰元素对用户操作的干扰
适度的装饰性元素会有助于创造特殊情绪和氛围，以及产品个性便于品牌记忆。但是过度的装饰会干扰用户工作效率，因为用户不得不分析、破解，以区分哪些是关键信息、操作功能等。

这点对从视觉转过来的交互设计师尤为重要，视觉设计在缺乏系统的用户交互行为认知的情况下，很容易使设计浮于表面，从而做到吸引用户眼球后又让用户不明白如何方便的应用，这也是产品设计和广告设计的根本区别。

4，不要轻易打断用户操作流
用户高效的使用工具会进入一种自然流的状态，这个时候需要一些努力才能打断，例如突然电话响了。错误消息对话框就是如此。一些打断是不可避免的，但另外一些则不是必要的。

5，改善导航
更好的利用导航将保证用户的任务操作，明晰导航里将详细讲述。

下面讲一个关于不要轻易打断用户操作例子：

在windows xp系统以前，用户点击关机后，会弹出一个提示窗口，一定要用户再次确认下关机，这对用户快速关机存在着强行的打扰，很多人甚至按机箱按钮强行关机（非常不好的做法）。

在vista之后，关机终于可以一键关机，并把以前弹出框里的功能收起（非常用功能），vista还是保留了两个按钮：关机和锁定，而且是图标显示，在win7中，只保留了关机，其他都收起，并且关机按钮使用文字，更加清晰了用户操作的思路。

提高用户的效率，就在这些常用操作上的改善，能不能快点？步骤再少点？再清晰点？直到用户说：爽了！

原文：http://ued.taobao.com/blog/2010/02/05/%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1%E5%AE%9E%E7%94%A8%E6%8C%87%E5%8D%97%E7%B3%BB%E5%88%979%E2%80%94%E4%B8%80%E6%AC%A1%E7%82%B9%E5%87%BB/

您可能还关注的？

• 交互设计实用指南(5) – 突出重点，一目了然
• 交互设计实用指南(3)-“有效性”之“适时帮助”
• 交互设计实用指南(2)–“有效性”之“可及”
• 交互设计实用指南(1)–“有效性”之“操作入口明确”
• 交互设计实用指南(8)—深广度平衡

原始人带骨制的项链，为的是看上去很美。在身上弄纹身，显然也不是拿自己的皮肤当记事本用。（现代人中，michael scofield是个例外。）

现代人新修缮的前门大街。这条大街的北段，基本上是依照原有建筑翻新的，可以理解为新古典主义吧。南段则是新建的房子，由于没有明确的参照，设计师可以自由发挥，这给饱学了现代主义理念的设计师提供了机会，设计了很据现代主义的房子—无装饰的，平顶，方方正正的（也许可以节约建筑成本，至少在现代主义兴起的阶段是这样考虑的）。作为一条传统商业街上的建筑，使用了与周围大杂院一致的灰色，门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

前门大街南段

前门大街北段

由南至北走过来，明显能感觉出，南段显得更为冷漠，没人气，虽然最高只有两层楼，但走在其中还是会觉得压抑。与北段相比，同样是作为商业街，南段显得缺少亲切感，没有繁华闹市的氛围。当然这差异和在营业的店铺数量也多少有些关系。（前门大街重修后，正在招商，很多铺面都还没有商家入住，北段入住率更高些。）现代主义、后现代主义对追求纯粹的视觉效果“不感冒”，这使得这类风格的建筑视觉效果上相对单调、枯燥。

google的产品是清晰、简单的，它的设计是不特意追求视觉美感的。

adobe.com网站信息传达清晰、明确，同时通过视觉设计使网站看上去科技、有品味、有现代感、有… 在保证了信息传达准确性、高效的基础上使浏览者得到更好的体验。

对美的视觉效果的追求是人本能的需要。

然而，由追求视觉美感所引发出的一些问题又使得我们不得不提出一些要求、建议、原则来限制那些不恰当的视觉设计。

以下是我们已有的一些观点：
● 避免使用纯粹装饰性的图标。

● 链接应该用蓝色，非链接不要用蓝色。

● 不要使用英文作为装饰性元素。

……

这些纷繁的观点是不是可以再概括？
可以这样概括：
为了追求视觉效果的设计过程中，不应产生新的信息。

图标不可避免的会传达信息，无论是画个小旗子还是整个小房子，都会代表特定的含义，传达了特定的信息，所以我们之前说到，不要使用装饰性的图标，要用图标就是用图标表示特定的含义，比如，“添加”使用一个加号，“关闭”使用一个叉子…

蓝色在网页上通常表示链接，这个惯例使得蓝色也传达了特定的信息。那么，文字颜色不可以滥用蓝色。

英文也是文，虽然看着不如中文明白。对于绝大多数比较年轻的中国人，多少都懂些英文，在中文标题旁边加上英文译文，翻译的不准确反而会让用户误解，即使翻译的正确也是在增大信息量，显然没必要一个标题写两边吧~
这样说来，如果用大家都看不懂的阿拉伯文之类的放在中文标题下做装饰或许倒更好些，全当是个花边儿了…

“是否传达这个信息”应该是有计划的、理性的，而不应该是在设计视觉效果的过程中high着决定的。不应该在追求视觉效果的过程中产生新信息。

（本文转载自腾讯ISD交互设计组月报第九期）-臭鱼的交互设计

您可能还关注的？

• 如何做得Banner通情达意
• 当视觉设计师遇上产品经理、开发工程师…
• 浅析网页色彩应用
• WEB2.0时代活动类网页我们该如何设计？
• 垂直栅格与渐进式行距(下)

【译者的话】很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。

由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。

Factor Design网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。

这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。

版面结构：

书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。

点击上图看大图

颜色：

在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。

点击上图看大图

文字颜色对比：

不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。

图片区域：

放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始：

充满表现力的变化：

在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。

本文所用颜色数值（RGB）：

原文出处：www.bamagazine.com

转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html

您可能还关注的？

• 如何做得Banner通情达意
• 设计师要会思考
• 什么是用户研究？全解析
• 交互设计指南系列(9)—一次点击
• 视觉设计时不应产生新信息

　　我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。 

　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

　　● 视觉设计就是怎样把东西做得更漂亮
　　● 做流行的东西就可以提高视觉设计的品质
　　● 我们从单个元素出发来评价视觉设计的效果
 
　
视觉设计就是怎样把东西做得更漂亮

　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。

　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。

　　显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：

　　● 这是什么？
　　● 我怎么使用？
　　● 为什么我只使用它？

　　上述3个问题在交互式产品的设计上尤其显得至关重要。下面我们通过一个实例来说明。

　　图1到图3呈现的是同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。

　　　　　　　　　　　　　　　图1

　　上图中，我们可以清晰地看出页面的主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。在图2中，页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。

　　　　　　　　　　　　　　　图2

　　最后，图3的设计重点是用户信息的可编辑性。查看和实时跟踪客户信息的功能被弱化了。

　　　　　　　　　　　　　　　图3

　　这3种不同的视觉呈现方案告诉了我们用户的3个主要任务：查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片。

　　视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。“这是什么？”“怎么使用这些功能？”“怎样更高效地使用？”

做流行的东西就可以提高视觉设计的品质

　　就像现在很流行的网站“make my logo bigger”所为客户做的事一样，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这些意见在帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，你要把这个做得大一下，这个字体用粗体，变成红色！”

　　然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，它会很引人注目。如果把同一个圆放在10个粉色的圆边上，它就不会那么醒目了。因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。

　　如果你答应每个利益关系人去逐个调整页面的不同细节，你每次的调整都要在用户需求和产品需求之间做抉择，然而，大多数情况下，两种需求是无法同时得到满足。图4和图5是两个不同下载页面的比较。火狐的页面中有一个醒目的下载按钮来触发这个行为。而页面中其他的元素，比如产品特性等就不会那么明显。

　　　　　　　　　　　　　　　图4

　　图5是Flock的下载页面，有4个地方可被点击来触发下载的行为：页面的右上角、左边菜单的底部、新闻板块的右上角和页脚的位置。如果不是因为每个下载细节都被强化的话，Flock可能就会像火狐一样——只有一个下载的按钮。

　　　　　　　　　　　　　　　图5

我们从单个元素出发来评价视觉设计的效果

　　如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…

　　这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师还需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在…等等。

　　一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。

　　互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了。图6就表明了独立设计可能造成的结果。

　　当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告是，都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。

　　　　　　　　　　　　　　　图6

　　但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。

　
《Common Visual Design Misconceptions》
By Luke Wroblewski
原文链接：http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php

您可能还关注的？

• 如何做得Banner通情达意
• 视觉设计时不应产生新信息
• 浅析网页色彩应用
• WEB2.0时代活动类网页我们该如何设计？
• 垂直栅格与渐进式行距(下)

看到这张照片，我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品，最重要的一点，就是这 个照片是否有焦点，照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法，其实就是在让一个照片能够有其焦点，并且利用这些艺术手法来烘托气 氛，提升主题。 一个优秀的页面亦如此：应当突出重点，一目了然。相信大家也知道，一个用户在浏览网页的过程中，只是扫描页面，而不会像是在看书似的阅读每一处地方，每一 行文字。一个网页呈现在用户面前的时候，应该在5秒之内，就能理解：这个页面是干什么的？我大致能通过这个页面做些什么？接下来我该去哪里？ 我们网站上的每个页面都可以是任务流上的一个点。这个点上包含着用户需要的信息，也许是继续找到任务流的下一个点的信息(例如导航)，也许是用户想找到的 最终内容。而一个页面上存在着上百甚至上千个链接（淘宝的宝贝详情页面通常有700多个链接），要在这样茫茫大海中找到用户需要的链接，可见，“突出重 点，一目了然”是多么重要。

测试您的页面

测试您的页面是否达到“突出重点，一目了然”，能够让用户在短时间内找到他们所需要的信息，其实可以是个低成本的小型测试。fivesecondtest.com 这个有趣网站是一个专门做5秒测试的站点。测试者上传一张站点的截图，然后被试观看截图5秒，然后说出刚才看到了哪些东西。另外一种方式是被试看到截图，在5秒的时间中，点击他所关注到的所有焦点，最后给出每个焦点他认为的描述。

下图是本文开篇的时候，8个用户的测试结果：

这种测试比起眼动议来说，测试的成本要低得多，而且能够明确得测试出你的页面的浏览者是否能在第一时间发现他们所需要的内容，并且可以比较出，这是否符合你的设计的初衷。

达到“突出重点，一目了然”

那么，如何达到这样的“突出重点，一目了然”呢？据鄙人不完全归纳，可以有以下方法：

为扫描而设计，不是阅读

你几乎需要把每个用户都想象成大忙人——他们没有时间停留在你精心设计的页面上，去阅读每一行你辛苦撰写的问题，去欣赏你精心设计的高光与圆角—— 他们想要的只是尽快地找到有用的信息。如果找不到，互联网上也许有很多替代品，可能是你的竞争对手，用户可以轻而易举地到其他网站上去寻找他们需要的信 息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计，不是阅读”时，

给出了几种方法：

1. 尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。
2. 在页面把越重要的东西越突出，建立清楚的视觉层次。
3. 可以点击的地方必须突出，让人明显知道可以点击。
4. 把页面划分成明确定义的区域
5. 省略多余的文字

Yahoo Small Bussiness的页面改版很具有代表性。 改版前：

两次改版后：

我们可以发现，改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮 “Sign Up”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，使用列点和大图的 方式传递了相同的信息。“Sign Up”显而易见，而且视觉上有突起的渐变效果也马上让人知道，那是个按钮。

将功能“藏起来”

部分产品经理有一个这样的通病，他们每每作出一个新功能，就爱向用户炫耀新的工作成果。看起来，这样挺好，一来让用户知道本网站还没死，而且还在为 他们不断得制作新的功能，二来辛苦开发了数天甚至数月的功能要是没人用，那该多“杯具”啊！于是乎，你就会发现，长期“坚持”下来，界面上的元素越来越 多。 假设某一天，这样的产品经理全部被谷歌挖走，那么谷歌的首页将会是一个放满“杯具”的餐桌：

还有一个例子来自于某BSP，它的博客顶端存在着一个工具栏，有30个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。

如果你了解20-80原则，你应该知道：80%的用户只会使用20%的功能。所以，为什么要让那些少人使用的80%的功能总是放在显眼的位置，扰乱 那些只需要20%的功能的大部分用户呢？(此句有些拗口，我承认，麻烦看官们可能要反复阅读几次。。)其实那些80%的功能大部分是专家用户所喜欢的，我 们应当将这些功能“藏起来”，目的就是不影响新手和中间用户，并等着他们去发现，然后大叫：“哦，居然这个网站有这个功能，太棒了！”我们来看看 Google Reader iPhone/Android 版本最近的小改版：

改版前：

改版后：

大家可以发现，原来占据垂直空间的New items/all items的切换、mark all as read等功能，全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。 关于将功能“藏起来”、功能肥胖症是个说不完的话题，《哈佛商业评论》早在06年的时候也详细探讨过这样的问题，这部分内容，我过段时间也整理整理，为大家奉上吧，本文中，就不作深入探讨。

关注于用户的主要任务流

关注于用户想要的，而不要强迫用户查看、理解与操作无关的事情，是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法，解决了什么元素该被 “突出重点”从而达到界面“一目了然”的问题。从用户角色到场景，到任务流，可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业 目标，即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子： 这是个书籍的搜索结果页面。

我们能够发现，这个页面觉得凌乱不堪。各种大小，各种颜色，各种粗细的字体混杂在一起，眼花缭乱。就像《气球》这首歌唱的：

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD（或者是其他方式）分析出，这个书籍的结果页，用户需要这些信息：

1. 书籍内容。这本书标题是什么，是关于什么的？
2. 书籍评价。这本书好吗？别人对它的评价如何，这些评论可信么？

根据这个目标，重新设计后的结果如下：

我们可以看到，这本书内容和评价都一目了然，信息结构利于扫描和比较。重要的信息大而具有色彩，次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点，一目了然”。如何测试页面是否“突出重点，一目了然”，以及如何达到“突出重点，一目了然”。 有句话我挺喜欢，作为结局吧。在《What’s Next in Web Design?》中说道的：

“Simplicity is when someone takes care of the details.”

“简单而不简陋！”(谢谢青云给出的翻译！)

我们所追求的界面或者功能做得简单，不是粗制滥造，而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易，但是把东西做好做精难啊！
原文：http://ued.taobao.com/blog/2010/01/11/the-practice-guidelines-of-interaction-design-emphasis-and-clarity/

您可能还关注的？

• 交互设计指南系列(9)—一次点击
• 交互设计实用指南(3)-“有效性”之“适时帮助”
• 交互设计实用指南(2)–“有效性”之“可及”
• 交互设计实用指南(1)–“有效性”之“操作入口明确”
• 交互设计实用指南(8)—深广度平衡

Larry keeley 提供过这样一个“产品三要素”的模型，由三部分组成：“可行性”、“可能性”、“期望值”。“可行性”由商业和市场评估来解决，“可能性”由技术来解决，用户“期望值”靠的是产品设计来满足。

那么，我一直在想：产品设计要解决的只是期望值吗？
是不是满足好了用户的期望值，“让设计超出用户的期望值”，甚至说做好了“引导用户期望值”，就是完美的产品设计、就可以出来很成功的产品？

即便答案是肯定的。那么“什么是期望值”呢？ 或者说，我们应该给“期望”一个什么“值”呢？

上图这两款手机，左边是中国移动的OPhone，右边是一款“山寨IPhone”。 OPhone具体的使用体验要比山寨IPhone好很多。

假设，这两款手机定价都在1000元左右，同时拿到深圳的“华强北”市场上销售，哪一款销量会更好？
答案是：“IPhone”。
为什么？

没错，固然不少原因是因为“Apple和IPhone的品牌影响”，促进了一些消费者的购买。但，实际上“IPhone”对于这个消费层次的消费者影响并没有那么大。

在“华强北”，一份可靠的调研结果显示原因是：山寨IPhone内置并首屏默认显示了QQ，而OPhone只有他自己的“飞信”。数据同时显示：70%左右的潜在消费者认为“你的手机没有QQ，我不买”。

也许这个数据很多人会认为“太夸张”，但事实就是如此。当用户认定了自己的需求时，他选择的会很坚决。

曾经在一次杭州5G上，我编了一个未来的段子：几年后，电视都可以搜索到几百个频道，观众选频道会成为一个极其复杂的事情。看的最多的频道，变成了是遥控器上默认的“快捷频道”。可，这些“快捷频道”里没有一个是CCAV。CCAV急了，他们说“你们这些电视厂家，不给我放进默认的“快捷频道”，老子自己制造电视去！”，最后CCAV开始卖电视，把自己电视的遥控器上全默认CCAV自己的频道… 但它的电视就是卖不出去。

这个段子听起来是一个搞笑的杯具。但，如果移动的手机真的只有飞信没有QQ，它就真的只能是一个杯具。

所以：
市场运营的策略必须要从用户出发，针对于用户期望的市场策略，才会是一个好的策略。同时，产品设计不能是死板围绕着“市场运营战略”在做，还要回归到用户的需求上。

.
.

上图是两个搜索结果界面。左边我们给他叫“综合搜索”，右边我们给他叫“整合搜索”。
Google和百度的默认都是“网页搜索”，显然当互联网的信息呈现方式越来越多样，甚至blog、news、vido、map都开始成为搜索引擎独立“分类”的时候。如果这个默认搜索出来的结果还只有“网页”的话，显然产品已经不能很好的满足用户需求了。

于是，最早最快想出来的方案就是左边这种“综合搜索”：在一个搜索页面，按照不同业务产品线，分区块显示各自产品块的搜索结果。即将不同分类“综合”罗列到一起。（当然，最大块区域还是网页的）

事实告诉我们，而这种“综合搜索”的做法很不合理，过份的死搬硬套既定产品业务模型，给用户所提供服务的过于“业务化”。在用户心里并没有去给你分什么“博客、资讯、问答”，他只知道输入一个关键词，就应该给他需要的结果。业务模型和用户认知是两个维度上的事情。

今天，搜索引擎都开始采用了右侧这种“整合搜索”。（百度的“框计算”也是整合搜索的升级版嘛～，Google的新版其实已经开始用“整合搜索+综合搜索导航”的方式做）

可以用一句话来综合这个原因：用户对于满足的需求的方式是直接干脆的，他们并不愿意再去进行二次“分解”的。

所以：
产品的业务模式同样需要从用户出发，针对于用户的需求设计业务模式，比针对于系统架构设计业务模式更合理。当然，产品设计也不能只围绕着固有的业务模式展开思路，还需要回归到用户的原始需求。

.
.

这里是一个运营商的手机缴费流程。它可以直接通过充值卡进行充值，也可以通过“预缴费”的方式直接在花费管理系统进行缴费。

左边是按照既有业务模式设计出来的用户使用流程。基本上是：选择地区 >选择运营商 >查询欠费 > 充值或缴费。 用户需要点击鼠标基本上接近20次。
右边是经过优化的流程。基本上是：输入手机号码 > 输入缴费金额 > 确认。 通过几次点击即可完成。

这个改进其实根本没有改变产品业务流程，更没有触及市场运营策略。只是做了几个小小的处理： 135一定是中移动，不用让用户选择运营商；13501xxxxxx一定是北京的号码，不用让用户再选择地域。欠费与否边输入边可以查询到 …

这种改进的体验效果无疑会是很好的。用户的订单流失率也会下降很多。

所以：
即使在业务模型不可改变的时候，产品设计也不能照搬业务模式直接呈现给用户。
从业务模型到体验模型的再设计过程是一个必须的过程。

.
.

最后，本节观点：
产品和业务模式、市场和运营策略、用户体验和界面设计都必须围绕着用户进行，且三者不可分割，必须融为一体。产品设计是一份综合性工作，只做好任何一块都不会成就好的产品。
转自：白鸦，以用户为中心的设计 http://uicom.net/blog/?p=852

您可能还关注的？

• 设计师要会思考
• 什么是用户研究？全解析
• 如何做得Banner通情达意
• 电子商务网站“用户评论”模块浅析
• 也谈谈做平台产品初期运营的困境

任何一个交互过程的操作，对于用户来说都有学习成本，谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应的帮 助，这一点非常重要。适时帮助，是指在用户使用流程中，在需要的时候能及时地得到帮助；反之，在不需要帮助的时候,不要出现信息干扰。
不及时的帮助会造成用户使用进程中断，或者增加用户达成目标的难度。无效的帮助则可能给用户造成干扰，影响用户完成任务。

“适时帮助”是一个偏正结构，首先是帮助，然后制约条件是适时。我们分开来讲。

在理想的交互设计状态下,我们当然希望用户在使用过程中”无师自通”,但受制硬件、使用环境、用户层次等各种原因，有一个”老师”帮助用户是非常必要的。
韩愈在《师说》里一开始就讲到：古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？
同理，我们的帮助也是相似的作用，传道授业解惑。

1.传道
传道主要是理论上的帮助，告诉别人这是什么，主要指一些名词解释，规则说明等等。
2.授业
授业主要是操作上的帮助，告诉用户怎么作才能完成整个流程。很多当前操作提示，流程示意图等都属于这个范畴。
3.解惑
解惑主要是在用户迷惑不解的时候提供解决方案，比如对用户操作出错的建议，某分流程结束后的帮助提示等等。

然后主要来说一说“适时”。这就要讨论用户在什么时候需要帮助。一般有以下三种情况：
A.在用户第一次使用某产品功能的时候。
当新用户使用一个产品的时候需要帮助，或者老用户在使用一项新功能的时候，由于认知不足，用户会觉得陌生，不知所措。此时帮助应该及时出现，但不能一直强制出现，应该让用户有选择的余地。
B.在用户已经出错或者将要出错的时候。
当用户在流程中不小心与系统现在规则有了冲突的时候应该及时提醒，不能任其为之，到最后显示一句“对不起，你出错了”，这样可能会造成用户主动中断流程。
C.在用户遇到不明白的问题的时候。
用户遇到不明白的名词或者操作时，应该及时给出解释。用户了解信息主体时候，如果有必要的补充说明也应该及时出现。

当出现以上三种情况的时候，我们应该采取适当的方法来为用户提供帮助。
1.帮助信息明显，提示方式灵活。
看案例:

google文档的新功能帮助信息，第一次访问时，用明显的形式出现，用户点击关闭以后再也不会出现；如果点击以后提醒我，帮助信息会暂时关闭，下次访问还会出现。

2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。
看案例:

上图针对错误页面的帮助提示，分析用户可能出现的原因，并给出了一些建议。我们再来看看下面这个反面案例。

用户在注册过程中，用户已经存在的情况下，输入是没有提示的；直到所有资料填写好之后提交，才弹出结果页面，说用户名已经被注册，然后让用户重新填写。这个帮助信息来得太晚了，如果在注册用户填写用户名的时候，就检测该用户名是否有效，就不会让用户觉得前功尽弃了。

3.及时补充，信息完整

再看QQ会员页面，在开通会员的大按钮下有一个“QQ会员是什么”的帮助信息，这个帮助就是为了让用户首先在理论上对QQ会员有一个认知。对用户不了解的信息给出了通往答案的道路。

总之，帮助在交互设计的有效性里有相当重要的地位，而适时性是帮助的重要关键点。我们可以用两个词组合起来，形容适时帮助的特点，那就是”聊胜于无，过犹不及”。只有及时而不多余的帮助信息才能更好地帮助用户，从而完成一个具有“有效性”的交互设计。
原文：http://ued.taobao.com/blog/2009/12/24/guyin_help/

您可能还关注的？

• 交互设计实用指南(2)–“有效性”之“可及”
• 交互设计实用指南(1)–“有效性”之“操作入口明确”
• 交互设计指南系列(9)—一次点击
• 交互设计实用指南(5) – 突出重点，一目了然
• 交互设计实用指南(8)—深广度平衡