﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>视觉设计的误区 - UCD大社区</title>
 			<link>http://ucdchina.com/rss/topic_posts?id=98</link>
 			<description>视觉设计的误区 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2026-05-01 22:18:36</pubDate>			<item>
				<title>视觉设计不只是图形</title>
				<link>http://ucdchina.com/snap/2438</link>
				<description>&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;一般情况下我鼓励视觉设计师在设计之前一定更加深刻的了解设计需求：&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;1、这个产品需要给什么样的一群人用，他们需要什么样的视觉感受。&lt;br /&gt;比如，你在给一帮老干部做一套软件，就别搞的像qq那样热闹。（曾经介绍过一次 &amp;ldquo;通过收集典型用户身上的视觉元素确定视觉风格&amp;rdquo;的方法）&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;2、这是一个什么样的产品，它需要展现给用户什么样的&amp;ldquo;气质&amp;rdquo;和情感感受。&lt;br /&gt;上次说维信的视觉设计感觉很好，其实很大一部分是在说它对于那些ajax动画效果的应用符合该产品&amp;ldquo;灵巧、迅速&amp;rdquo;的定位。它让我在感官上认为&amp;rdquo;这个产品很轻巧、快捷，不会占据我手机的大量空间也大量的上网流量&amp;rdquo;。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;3、我有多少的创意空间可以发挥，是否需要遵循一些认识上的&amp;ldquo;定式&amp;rdquo;。&lt;br /&gt;比如，你做的一个产品在行业中已经有了很多同样的，他们已经把这样产品的定义上了某种感官的形态，那么是否需要遵循？ 如果更改自己的创意有多大风险？ 你有把握做到更好吗？&lt;br /&gt;（抱歉，这里没有典型的例子。我认为绝大多数时候视觉设计还是需要体现自我特色的）&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;视觉设计中的加法和减法：&lt;br /&gt;1、一个产品的视觉设计需求下来时，你不能马上就有很多的想法，这是一个非常普遍的现象。但，很多时候市场不等人，你的老板会要求你必须快速完成设计方案。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;2、那么，开始动手吧。 先从&amp;ldquo;减法&amp;rdquo;开始做起，用最简单的风格初步完成你的设计。也许他没有什么色彩和风格，也没有很绚缓的视觉展示效果。&lt;br /&gt;等你完成这个减法设计的时候，再后头看看想想，大部分时候你已经有了一个好的创意可以优化进去。&lt;br /&gt;就算没有，你只要在这个设计上做一些点晶式的修饰就可以完成这个设计了。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;3、当然，有些时候设计需求一下来你就会有很多的创意想法。&lt;br /&gt;那么，千万不要压制自己也不要蹑手蹑脚不敢去按照&amp;ldquo;创意&amp;rdquo;做。 把他们都给做出来。然后，把这些创意放在一起对比，结合起来，形成你的风格。&lt;br /&gt;但，最后一定要去做足够的&amp;ldquo;减法&amp;rdquo;。&amp;ldquo;把多余的都去掉&amp;rdquo;是一个必须认真作的工作。我们现在几乎成天都能看到很多为了视觉而视觉的多余设计。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;4、产品的存在是为了帮助用户完成某项任务。第一眼的&amp;ldquo;视觉感官&amp;rdquo;固然重要，但因为过多的多余修饰而影响了用户完成任务的过程就很不值得了。所以，警惕某些视觉效果会成为&amp;ldquo;多余的设计&amp;rdquo;，让你的视觉效果的应用应该适当其所，是设计师必备的素质。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;这几年&amp;ldquo;用户体验设计&amp;rdquo;逐渐成熟，反到很多&amp;ldquo;视觉设计师&amp;rdquo;纷纷转行做&amp;ldquo;交互设计&amp;rdquo;或者&amp;ldquo;可用性工程师&amp;rdquo;。&lt;br /&gt;这是一个比较可怕的现象。归结这个现象，我认为主要原因大概有：&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;1、视觉设计师的职能范围很小，导致很多有想法的设计师没有发挥的空间，经常在工作中受挫，能力得不到发挥和认可。&lt;br /&gt;他们的工作往往都具体于&amp;ldquo;颜色&amp;rdquo;&amp;ldquo;造型&amp;rdquo;等纯粹的&amp;ldquo;图形表现&amp;rdquo;上，连一个按钮的大小都很难有话语权。更有甚者：在很多对于设计不够重视的企业，视觉设计师只是作为一个&amp;ldquo;执行的工具&amp;rdquo;，视觉设计师连&amp;ldquo;用什么颜色&amp;rdquo;&amp;ldquo;按钮用圆形还是方形&amp;rdquo;都必须听命与管理者。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;2、比如，做电子商务网站的时候有一个&amp;ldquo;商品列表&amp;rdquo;的页面，pm告诉你&amp;ldquo;商品的名字要用14号的加粗蓝色字，商品描述用12号的黑色字&amp;rdquo;，这个时候大多数设计师会很不爽，往往甚至会开始闹情绪：&amp;ldquo;视觉上的事情你就不管了，你们丫根本不懂设计，这里用14号的加粗字太难看了。&amp;rdquo;，然后改成了一个自己认为更加&amp;ldquo;好看&amp;rdquo;的设计，往往这个时候pm也会较劲：&amp;ldquo;叫你用14号你不用，你看现在列表密密麻麻的用户根本不能一眼就明了的看到商品名&amp;hellip;&amp;hellip;&amp;rdquo;&lt;br /&gt;其实原因很简单：如果一开始pm就告诉设计师&amp;ldquo;这个列表一定需要用户很清晰的一眼就能看到商品名，其他商品描述不用那么突出抢眼&amp;rdquo;，根本不用具体说用什么字体之类的要求，设计师就明白了；如果设计师可以主动思考pm提出需求的原因，然后在保证设计需求的基础上让界面更&amp;ldquo;好看&amp;rdquo;一切都解决了。所以，问题应该是双方的。&lt;br /&gt;通过这个例子我们能看到：视觉设计师没有&amp;ldquo;理解产品思想&amp;rdquo;的机会，对自己应该表现什么样的产品形象和气质没有概念。很多时候不要说他们能提出来对于产品视觉传达的合理见解了，就算提出来也是会被否定。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;3、当我们把&amp;ldquo;视觉设计&amp;rdquo;只定位成&amp;ldquo;图形设计&amp;rdquo;的时候，&amp;ldquo;视觉设计师&amp;rdquo;的门槛越来越低，导致所有&amp;ldquo;视觉设计师&amp;rdquo;的待遇一致下降，更导致整个行业对于&amp;ldquo;视觉设计&amp;rdquo;的价值和能力产生比较的质疑，不愿意再在其中投入过多的成本。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;4、很多视觉设计师发现和他在一起的所谓&amp;ldquo;交互设计师&amp;rdquo;比自己的待遇好，而且他们做的那些&amp;ldquo;交互设计&amp;rdquo;（其实这只是&amp;ldquo;视觉交互展现的设计&amp;rdquo;而已，真正的交互设计pm都给合在&amp;ldquo;产品架构和业务流程设计&amp;rdquo;的时候给一起做了）自己也能做。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;5、很多视觉设计师觉得：做图形越来越没有空间，改做交互设计将来可以转行做pm，最后说不定还可以成为产品管理者。他们给了自己一个&amp;ldquo;被错误现实误导&amp;rdquo;的职业规划。（推荐：ued的职业规划应该是什么）&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;我必须马上解释一下关于&amp;ldquo;交互设计&amp;rdquo;的误区：&lt;br /&gt;如，我们在设计一个im软件其中涉及到这样的一个功能：当有新的好友信息时在右下角弹出一个提示的&amp;ldquo;气泡&amp;rdquo; 窗口。那么，这个&amp;ldquo;气泡&amp;rdquo;是&amp;ldquo;从下往上缓缓推出&amp;rdquo;、&amp;ldquo;从右往左缓缓推出&amp;rdquo;、&amp;ldquo;从右角往左角缓缓推出&amp;rdquo;、&amp;ldquo;直接在固定位置弹出&amp;rdquo;、&amp;ldquo;由浅变深由大变小在一个固定位置缓缓出现&amp;rdquo;、&amp;ldquo;&amp;hellip;&amp;rdquo;？？？&lt;br /&gt;这个工作本不应该是由&amp;ldquo;交互设计&amp;rdquo;来完成了，所谓的&amp;ldquo;交互设计&amp;rdquo;指&amp;ldquo;用更加合理的信息展现方式更加高效的表现用户使用过程&amp;rdquo;，而非上例中说到的&amp;ldquo;视觉上如何动态展现&amp;rdquo;。&lt;br /&gt;好的交互设计师在产品设计过程中应该完成的任务是：用合理的信息架构准确的将&amp;ldquo;产品结构&amp;rdquo;表现在&amp;ldquo;界面&amp;rdquo;上，并保证其充分的延展性；将&amp;ldquo;产品的业务及数据流程&amp;rdquo;准确的转换为最终展现给用户的（更加高效易用的）&amp;ldquo;使用流程&amp;rdquo;。&lt;br /&gt;所以，各位交互设计师：把&amp;ldquo;视觉互动&amp;rdquo;的工作交给你的视觉设计师吧！在视觉上他们比你专业。你们应该更加关注&amp;ldquo;信息架构&amp;rdquo;和&amp;ldquo;用户使用流程&amp;rdquo;。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;这个提到了视觉设计占据整个体验46％的报告被我多次提及，最后在这里再提一次。&lt;br /&gt;很多人反对这个报告的结论，但某种程度上我是持赞成态度的。因为我认为这里占据46％体验的视觉设计不只是图形，它应该包括一切和&amp;ldquo;视觉&amp;rdquo;相关的东西。对于任何一个产品来说，视觉设计不应该仅仅只是&amp;ldquo;用什么颜色、圆角还是直角、什么样的造型&amp;rdquo;等纯粹的静态&amp;ldquo;图形界面&amp;rdquo;。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/98&quot; target=&quot;_blank&quot;&gt;视觉设计的误区&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://hi.baidu.com/web7/blog/item/f20b41c20f5fba31e5dd3bf9.html&quot; target=&quot;_blank&quot;&gt;http://hi.baidu.com/web7/blog/item/f20b41c20f5fba31e5dd3bf9.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>zf0712</author>
				<pubDate>2009-03-06 12:11:59</pubDate>
			</item>			<item>
				<title>视觉设计不只是图形</title>
				<link>http://ucdchina.com/snap/122</link>
				<description>&lt;div id=&quot;entry_content&quot; class=&quot;entry&quot; style=&quot;font-size: 13px;&quot;&gt;
&lt;p&gt;一般情况下我鼓励视觉设计师在设计之前一定更加深刻的了解设计需求：&lt;/p&gt;
&lt;p&gt;1、这个产品需要给什么样的一群人用，他们需要什么样的视觉感受。&lt;br /&gt;比如，你在给一帮老干部做一套软件，就别搞的像qq那样热闹。（&lt;a href=&quot;http://uicom.net/blog/?p=256&quot; target=&quot;_blank&quot;&gt;曾经介绍过一次&lt;/a&gt; &amp;ldquo;通过收集典型用户身上的视觉元素确定视觉风格&amp;rdquo;的方法）&lt;/p&gt;
&lt;p&gt;2、这是一个什么样的产品，它需要展现给用户什么样的&amp;rdquo;气质&amp;rdquo;和情感感受。&lt;br /&gt;&lt;a href=&quot;http://uicom.net/blog/?p=646&quot; target=&quot;_blank&quot;&gt;上次说维信&lt;/a&gt;的视觉设计感觉很好，其实很大一部分是在说它对于那些ajax动画效果的应用符合该产品&amp;rdquo;灵巧、迅速&amp;rdquo;的定位。它让我在感官上认为&amp;rdquo;这个产品很轻巧、快捷，不会占据我手机的大量空间也大量的上网流量&amp;rdquo;。&lt;/p&gt;
&lt;p&gt;3、我有多少的创意空间可以发挥，是否需要遵循一些认识上的&amp;rdquo;定式&amp;rdquo;。&lt;br /&gt;比如，你做的一个产品在行业中已经有了很多同样的，他们已经把这样产品的定义上了某种感官的形态，那么是否需要遵循？ 如果更改自己的创意有多大风险？ 你有把握做到更好吗？&lt;br /&gt;（抱歉，这里没有典型的例子。我认为绝大多数时候视觉设计还是需要体现自我特色的）&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;视觉设计中的加法和减法：&lt;br /&gt;1、一个产品的视觉设计需求下来时，你不能马上就有很多的想法，这是一个非常普遍的现象。但，很多时候市场不等人，你的老板会要求你必须快速完成设计方案。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;2、那么，开始动手吧。 先从&amp;rdquo;减法&amp;rdquo;开始做起，用最简单的风格初步完成你的设计。也许他没有什么色彩和风格，也没有很绚缓的视觉展示效果。&lt;br /&gt;等你完成这个减法设计的时候，再后头看看想想，大部分时候你已经有了一个好的创意可以优化进去。&lt;br /&gt;就算没有，你只要在这个设计上做一些点晶式的修饰就可以完成这个设计了。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;3、当然，有些时候设计需求一下来你就会有很多的创意想法。&lt;br /&gt;那么，千万不要压制自己也不要蹑手蹑脚不敢去按照&amp;rdquo;创意&amp;rdquo;做。 把他们都给做出来。然后，把这些创意放在一起对比，结合起来，形成你的风格。&lt;br /&gt;但，最后一定要去做足够的&amp;rdquo;减法&amp;rdquo;。&amp;rdquo;把多余的都去掉&amp;rdquo;是一个必须认真作的工作。我们现在几乎成天都能看到很多为了视觉而视觉的多余设计。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;4、产品的存在是为了帮助用户完成某项任务。第一眼的&amp;rdquo;视觉感官&amp;rdquo;固然重要，但因为过多的多余修饰而影响了用户完成任务的过程就很不值得了。所以，警惕某些视觉效果会成为&amp;rdquo;多余的设计&amp;rdquo;，让你的视觉效果的应用应该适当其所，是设计师必备的素质。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;这几年&amp;rdquo;用户体验设计&amp;rdquo;逐渐成熟，反到很多&amp;rdquo;视觉设计师&amp;rdquo;纷纷转行做&amp;rdquo;交互设计&amp;rdquo;或者&amp;rdquo;可用性工程师&amp;rdquo;。&lt;br /&gt;这是一个比较可怕的现象。归结这个现象，我认为主要原因大概有：&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;1、视觉设计师的职能范围很小，导致很多有想法的设计师没有发挥的空间，经常在工作中受挫，能力得不到发挥和认可。&lt;br /&gt;他们的工作往往都具体于&amp;rdquo;颜色&amp;rdquo;&quot;造型&amp;rdquo;等纯粹的&amp;rdquo;图形表现&amp;rdquo;上，连一个按钮的大小都很难有话语权。更有甚者：在很多对于设计不够重视的企业，视觉设计师只是作为一个&amp;rdquo;执行的工具&amp;rdquo;，视觉设计师连&amp;rdquo;用什么颜色&amp;rdquo;&quot;按钮用圆形还是方形&amp;rdquo;都必须听命与管理者。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;2、&lt;br /&gt;比如，做电子商务网站的时候有一个&amp;rdquo;商品列表&amp;rdquo;的页面，pm告诉你&amp;rdquo;商品的名字要用14号的加粗蓝色字，商品描述用12号的黑色字&amp;rdquo;，这个时候大多数设计师会很不爽，往往甚至会开始闹情绪：&amp;rdquo;视觉上的事情你就不管了，你们丫根本不懂设计，这里用14号的加粗字太难看了。&amp;rdquo;，然后改成了一个自己认为更加&amp;rdquo;好看&amp;rdquo;的设计，往往这个时候pm也会较劲：&amp;rdquo;叫你用14号你不用，你看现在列表密密麻麻的用户根本不能一眼就明了的看到商品名&amp;hellip;&amp;rdquo;。&lt;br /&gt;其实原因很简单：如果一开始pm就告诉设计师&amp;rdquo;这个列表一定需要用户很清晰的一眼就能看到商品名，其他商品描述不用那么突出抢眼&amp;rdquo;，根本不用具体说用什么字体之类的要求，设计师就明白了；如果设计师可以主动思考pm提出需求的原因，然后在保证设计需求的基础上让界面更&amp;rdquo;好看&amp;rdquo;一切都解决了。所以，问题应该是双方的。&lt;br /&gt;通过这个例子我们能看到：视觉设计师没有&amp;rdquo;理解产品思想&amp;rdquo;的机会，对自己应该表现什么样的产品形象和气质没有概念。很多时候不要说他们能提出来对于产品视觉传达的合理见解了，就算提出来也是会被否定。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;3、当我们把&amp;rdquo;视觉设计&amp;rdquo;只定位成&amp;rdquo;图形设计&amp;rdquo;的时候，&amp;rdquo;视觉设计师&amp;rdquo;的门槛越来越低，导致所有&amp;rdquo;视觉设计师&amp;rdquo;的待遇一致下降，更导致整个行业对于&amp;rdquo;视觉设计&amp;rdquo;的价值和能力产生比较的质疑，不愿意再在其中投入过多的成本。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;4、很多视觉设计师发现和他在一起的所谓&amp;rdquo;交互设计师&amp;rdquo;比自己的待遇好，而且他们做的那些&amp;rdquo;交互设计&amp;rdquo;（其实这只是&amp;rdquo;视觉交互展现的设&amp;rdquo;计而已，真正的交互设计pm都给合在&amp;rdquo;产品架构和业务流程设计&amp;rdquo;的时候给一起做了）自己也能做。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;5、很多视觉设计师觉得：做图形越来越没有空间，改做交互设计将来可以转行做pm，最后说不定还可以成为产品管理者。他们给了自己一个&amp;rdquo;被错误现实误导&amp;rdquo;的职业规划。（推荐：ued的职业规划应该是什么）&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;我必须马上解释一下关于&amp;rdquo;交互设计&amp;rdquo;的误区：&lt;br /&gt;如，我们在设计一个im软件其中涉及到这样的一个功能：当有新的好友信息时在右下角弹出一个提示的&amp;rdquo;气泡&amp;rdquo; 窗口。那么，这个&amp;rdquo;气泡&amp;rdquo;是&amp;rdquo;从下往上缓缓推出&amp;rdquo;、&amp;rdquo;从右往左缓缓推出&amp;rdquo;、&amp;rdquo;从右角往左角缓缓推出&amp;rdquo;、&amp;rdquo;直接在固定位置弹出&amp;rdquo;、&amp;rdquo;由浅变深由大变小在一个固定位置缓缓出现&amp;rdquo;、&amp;rdquo;&amp;hellip;&amp;rdquo;？？？&lt;br /&gt;这个工作本不应该是由&amp;rdquo;交互设计&amp;rdquo;来完成了，所谓的&amp;rdquo;交互设计&amp;rdquo;指&amp;rdquo;用更加合理的信息展现方式更加高效的表现用户使用过程&amp;rdquo;，而非上例中说到的&amp;rdquo;视觉上如何动态展现&amp;rdquo;。&lt;br /&gt;好的交互设计师在产品设计过程中应该完成的任务是：用合理的信息架构准确的将&amp;rdquo;产品结构&amp;rdquo;表现在&amp;rdquo;界面&amp;rdquo;上，并保证其充分的延展性；将&amp;rdquo;产品的业务及数据流程&amp;rdquo;准确的转换为最终展现给用户的(更加高效易用的)&amp;rdquo;使用流程&amp;rdquo;。&lt;br /&gt;所以，各位交互设计师：把&amp;rdquo;视觉互动&amp;rdquo;的工作交给你的视觉设计师吧！在视觉上他们比你专业。你们应该更加关注&amp;rdquo;信息架构&amp;rdquo;和&amp;rdquo;用户使用流程&amp;rdquo;。&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;&lt;br /&gt;&lt;br /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a id=&quot;more-299&quot; name=&quot;more-299&quot;&gt;这个提到了&lt;/a&gt;&lt;a href=&quot;http://www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm&quot; target=&quot;_blank&quot;&gt;视觉设计占据整个体验46％的报告&lt;/a&gt; 被我多次提及，最后在这里再提一次。&lt;br /&gt;很多人反对这个报告的结论，但某种程度上我是持赞成态度的。因为我认为这里占据46％体验的视觉设计不只是图形，它应该包括一切和&amp;rdquo;视觉&amp;rdquo;相关的东西。对于任何一个产品来说，视觉设计不应该仅仅只是&amp;rdquo;用什么颜色、圆角还是直角、什么样的造型&amp;rdquo;等纯粹的静态&amp;rdquo;图形界面&amp;rdquo;。&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/98&quot; target=&quot;_blank&quot;&gt;视觉设计的误区&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://ucdchina.com/blog/?p=299&quot; target=&quot;_blank&quot;&gt;http://ucdchina.com/blog/?p=299&lt;/a&gt;&lt;/p&gt;</description>
				<author>白鸦</author>
				<pubDate>2008-07-26 23:01:17</pubDate>
			</item>			<item>
				<title>视觉设计常见误解</title>
				<link>http://ucdchina.com/snap/1091</link>
				<description>&lt;p&gt;原文作者：Luke Wroblewski&lt;br /&gt;原文链接：&lt;a href=&quot;http://www.uxmatters.com/MT/archives/000344.php&quot; target=&quot;_blank&quot;&gt;Common Visual Design Misconceptions&lt;/a&gt;&lt;br /&gt;翻译：&lt;a href=&quot;http://www.yeeyan.com/space/show/27449&quot; target=&quot;_blank&quot;&gt;lu2ux&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 最近，我有机会研究对视觉设计作用的常见误解，这些误解仍然盛行于行政主管、产品主管，工程经理和市场专家中。设计团队成员如何说明这些认识是错误的？又该如何向同事和老板展示视觉设计真相？&lt;/p&gt;
&lt;div class=&quot;wiki-content&quot;&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;视觉设计师在特定产品领域或职业生涯中会面对各种困难，但有三种误解频繁发生：&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 视觉设计是美化产品；&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 突出显示能改善视觉设计；&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 可以分割评估视觉设计。&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;视觉设计常见误解-&amp;nbsp;视觉设计是美化产品&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&amp;nbsp;视觉设计是美化产品&lt;/h2&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 这种信条可能起源于工业时代的设计理念引入。从那时起，产品以前所未有的方式进行设计，并形成风格。Raymond Lowey等工业设计师对呆板产品进行美学设计，而声名大噪。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 视觉设计固然能美化产品，但其与人交互的潜能早已超越美丽外观。通过组织视觉元素，设计师可以传达回答关键问题的核心信息：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 这是什么？ &lt;/li&gt;
&lt;li&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 怎么使用？ &lt;/li&gt;
&lt;li&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 为什么要使用？ &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 回答这些问题是功能和可用性的关键组成部分，尤其是对于交互产品。举些例子来说明：&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图1到图3，某个网络应用工具，相同基本设置的三种表现方式，字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/e14d52cab55c1ed0f34b731f33dd44b5.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图1------网络应用工具设计示例&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图1，表现方式清晰显示出主要功能------查找客户联系信息；其次，用户可以编辑、删除或者增加备注。图2，重点是顾客和公司之间的交流；其次，用户可以查看、编辑和删除联系人信息。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/f03151e85f5f44a49c0f0d58131c9d42.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图2---相同网络应用工具，不同视觉组织&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图3，关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/dac455b9ab93159d719ae739b0d5b9c2.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图3---另一种视觉组织&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 相同应用工具，三种不同视觉组织，三种不同主操作：查找联系人信息、管理客户交流以及维护客户记录。每个例子中，影响视觉设计的因素大体一致：颜色、字体、渐变和图片。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 显而易见，视觉设计不仅是美化此工具。它传达工具的核心功能：它是什么？如何使用？为什么要使用？，而同时有美化了界面。&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;视觉设计常见误解-能让这个更突出吗？&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;能让这个更突出吗？&lt;/h2&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 很多网站都喜欢把logo做得比较大，客户和老板常要求视觉设计师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素，但也常引发视觉设计的另一常见误解：改善网站视觉设计，通过加大、加粗、变红或同时使用三种方法来实现！&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈，会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体设计的一个过程，并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡，搅乱相关元素、主操作等之间的关系。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 要是满足客户和老板每个强化某些功能的需求，页面所有元素都会去抢&lt;span style=&quot;color: #000000;&quot;&gt;着吸引用户注意&amp;mdash;&amp;mdash;&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;结果就是都得不到注意。图&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: &quot;&gt;4&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;和图&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: &quot;&gt;5&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;，两个互联网浏览器下载页面。&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: &quot;&gt;Firefox&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;页面，下载浏览器号召很明显，页面其他元素&lt;span style=&quot;font-family: &quot;&gt;&amp;mdash;&amp;mdash;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: &quot;&gt;Thunderbird&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;、&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: &quot;&gt; Mozilla&lt;/span&gt;&lt;span style=&quot;font-size: 10.5pt; font-family: 宋体;&quot;&gt;商店和最新内容&amp;mdash;&amp;mdash;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;没有干扰。&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/b10905e5151292999a52bbda8dbc1787.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp; 图4---Firefox下载页&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图5，Flock下载页面强调了许多不同元素，设计团队决定提供四个下载入口------右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素，Flock下载页面或许可以和Firefox一样只用一个下载按钮。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/6ea8fc8f5faaf40b938b262478315bea.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图 5---Flock下载页&lt;/p&gt;
&lt;h2&gt;&lt;a name=&quot;视觉设计常见误解-可以分割评估视觉设计&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;可以分割评估视觉设计&lt;/h2&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 没有从设计整体考虑，而强调单个元素会非常困难，同样做出孤立改变也很难。但是视觉设计师收到的大部分反馈集中在孤立元素上：可以把Logo做大点吗？能改变标题颜色吗？这里可以换张图吗？&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 这些的确帮助设计师明白用户和老板想要的东西，但他们没有考虑优秀设计必需的整体分析。改变颜色需要反复思考整体配色，因为设计师必须确保颜色对比明显，才能突出关键操作。改变图片意味着同时要改变周边元素，因为原图片形成的焦点可能已不存在。诸如此类。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 产品总体视觉设计源于谨慎平衡页面元素------传达产品功能、可用性和优势的关键信息。如果要调整一项元素，设计师需要重组全局，重归平衡。孤立设计决策无法保持修改前后整体一致。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 孤立评估基于互联网的产品特别脆弱。单个产品可以进行独立测试，所以产品团队就会假设&quot;这些产品结合在一起也会很好&quot;， 而常常把单独表现良好的产品组合起来。图6，孤立决策的后果。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 在这个eBay页面，页头水桶测试（bucket testing）表现良好，PayPal保护机制的logo在焦点小组（focus group）中获得好分数，摄影物品宣传也获得不错点击流，但把三个元素综合到一个页面上，并没有形成有效设计。事实上，页面上很多元素似乎互相竞争，互相干扰。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;img style=&quot;border: 0pt;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/e99e07aa73fda8e7d851fb129addc1e6.gif&quot; border=&quot;0&quot; alt=&quot;&quot; align=&quot;absMiddle&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 图6---eBay意大利主页&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 希望这些例子能解释对视觉设计角色的一些常见误解。只有同事和老板能直接体验视觉设计潜能，他们才会相信视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/98&quot; target=&quot;_blank&quot;&gt;视觉设计的误区&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.yeeyan.com/articles/view/27449/17730&quot; target=&quot;_blank&quot;&gt;http://www.yeeyan.com/articles/view/27449/17730&lt;/a&gt;&lt;/p&gt;</description>
				<author>lu2ux</author>
				<pubDate>2008-11-12 22:30:58</pubDate>
			</item>			<item>
				<title>常见视觉设计误区</title>
				<link>http://ucdchina.com/snap/1096</link>
				<description>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Article copyright by &lt;a href=&quot;http://www.uxmatters.com/authors/archives/2005/11/luke_wroblewski.php&quot;&gt;Luke Wroblewski&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;http://www.uxmatters.com/authors/archives/2005/11/luke_wroblewski.php&quot;&gt;Luke Wroblewski&lt;/a&gt;版权所有 &lt;br /&gt;作者：&lt;a href=&quot;http://www.uxmatters.com/authors/archives/2005/11/luke_wroblewski.php&quot;&gt;Luke Wroblewski&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;译者：&lt;a rel=&quot;nofollow&quot; href=&quot;http://ucdchina.com/topic/59&quot;&gt;UCD翻译小组&lt;/a&gt;， Helicopter &lt;br /&gt;原文地址：http://www.uxmatters.com/MT/archives/000344.php&amp;nbsp;&lt;/p&gt;
&lt;p&gt;最近一次&lt;a id=&quot;d4tv&quot; title=&quot;机遇&quot; href=&quot;http://www.uie.com/brainsparks/2008/07/30/spoolcast-visual-design-misconceptions-with-luke-wroblewski/&quot;&gt;机遇&lt;/a&gt;让我重新检视了业界对于视觉设计这一角色的常见误区。这些误区至今仍普遍存在于高管、产品领导、工程经理和营销人员中。设计团队成员能如何说明某些观念是错误的？他们又该如何向同事和相关利益方展示视觉设计的实质？&lt;br /&gt;&lt;br /&gt;虽然视觉设计师在不同的产品领域和职业生涯阶段会遇到不同的阻碍，但有三种误区是常见的：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;视觉设计只是为了美观&lt;/li&gt;
&lt;li&gt;吸引眼球的东西有助于加强视觉设计&lt;/li&gt;
&lt;li&gt;视觉设计可被分割成细部来评估&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;视觉设计只是为了美观&lt;/h2&gt;
&lt;p&gt;虽然很少人赤裸裸地要求设计团队把东西做漂亮就好，但认为视觉设计乃蛋糕上的裱花是由来已久的观念。视觉设计被当作是上市前的最后一道工序，如同为了让产品更有吸引力而加上的蝴蝶结装饰。&lt;/p&gt;
&lt;p&gt;这种观念也许源于工业设计时代大众对设计的初步认识。在那个年头，人们对产品进行了各种前所未有的风格化尝试，工业设计师如Raymond Lowey等人改良呆板产品的美学方法被捧上了天。&lt;/p&gt;
&lt;p&gt;视觉设计固然有改善产品美感的作用，然而它与人沟通的潜力并不限于好看的外观。通过对元素的视觉组织，设计师可将核心信息传递给用户，让他们知道：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;这是什么？&lt;/li&gt;
&lt;li&gt;我该怎样使用它？&lt;/li&gt;
&lt;li&gt;为什么要关注它？&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;让人们了解这几点对于功能性和可用性都非常重要，尤其是交互性产品。还是举例说明吧！&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;图1到图3呈现了某个网络控件的同一组基本功能，字体、颜色、渐变和图片的使用都是一模一样的。主要区别在于元素在各个界面有不同的视觉组织，而这些区别分别引导了三种不同的使用。&lt;/p&gt;
&lt;p&gt;图1&amp;mdash;&amp;mdash;控件设计图例&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/613b5ca1c03130b4a805c5d22fe67406.gif&quot; alt=&quot;Sample Web application design&quot; width=&quot;446&quot; height=&quot;195&quot; /&gt;&lt;/p&gt;
&lt;p&gt;图1里，呈现层清晰地表明这个控件的主要功能是查找客户联系信息。其次，用户可以用小便签去编辑、删除或补充这些信息。在图2里，重点首先是客户与公司之间的交流。其次，用户可以查看、编辑和删除联系信息。&lt;/p&gt;
&lt;p&gt;图2&amp;mdash;&amp;mdash;同样的控件，不同的视觉组织&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/391f39227ef369bab994f6db17ad0ef5.gif&quot; alt=&quot;Different visual organization&quot; width=&quot;446&quot; height=&quot;251&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;最后，图3将焦点放在了编辑客户信息的功能上。查看联系信息和追踪进行中的对话被弱化。&lt;/p&gt;
&lt;p&gt;图3&amp;mdash;&amp;mdash;同样的控件，又一不同的处理&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/89d5cbd7a2398390299eb7671d82cc9f.gif&quot; alt=&quot;Another approach&quot; width=&quot;446&quot; height=&quot;199&quot; /&gt;&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;对同一控件的视觉组织进行三种调整，引导了三种相异的起始行为：查找联系信息，管理进行中的客户交流和维护客户档案。在三种情况中，核心的视觉设计层面是相同的：颜色，字体，渐变和图片。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;显而易见，视觉设计的作用远不仅是美化这个控件。视觉设计传达了该控件的核心功能&amp;mdash;&amp;mdash;它是什么？&amp;mdash;&amp;mdash;怎样发挥该功能？&amp;mdash;&amp;mdash;我该怎么用它？&amp;mdash;&amp;mdash;同时，视觉设计为控件带来审美愉悦。&lt;/p&gt;
&lt;h2&gt;能设计得更吸引眼球吗？&lt;/h2&gt;
&lt;p&gt;相关利益方常要求视觉设计师对页面中某些元素进行强化处理，从&amp;ldquo;&lt;a id=&quot;mv54&quot; title=&quot;弄大我的图标&quot; href=&quot;http://www.makemylogobiggercream.com/&quot;&gt;弄大我的图标&lt;/a&gt; &amp;rdquo;这类网站的流行可见一斑。虽然这种意见有时有助于识别最重要的设计元素，但也恰恰说明了另一常见的视觉设计误区：要增强一个网站的视觉设计，必须把东西弄大、弄粗，或弄红，甚至在极端情况下大粗红通杀！&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;然而，任何元素在一个界面中的相对重要性，最终取决于它周围有些什么。在白纸上画个红圈，自然会吸引眼球。但把红圈放在十个粉圈旁边就不会达到同样效果了。因此，强化重要元素是一个整体性设计的过程，而非对任何单个元素进行特别处理。为单个元素附加视觉权重会破坏布局的平衡，搅乱相关元素、初始行为之间的关系。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;如果你迎合每个相关利益方的要求，将某个功能设计得更吸引眼球，那么很可能导致布局上的每个元素彼此争夺客户的注意力，但到头来客户没被任何元素所吸引。思考一下图4、图5两个网络浏览器的下载页。火狐的页面首先将用户吸引到下载这一行为上，页面的其他元素如 Thunderbird邮件、Mozilla商店和新闻都没有干扰用户。&lt;/p&gt;
&lt;p&gt;图4&amp;mdash;&amp;mdash;火狐下载页&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/f525c1d23fcc33a2495b44de137b4808.gif&quot; alt=&quot;Firefox download page&quot; width=&quot;446&quot; height=&quot;549&quot; /&gt;&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;图5 Flock的下载页强调了很多不同的元素，以至于设计师必须放入四个&amp;ldquo;下载&amp;rdquo;&amp;mdash;&amp;mdash;在右上角、左侧菜单底部、水平线的新闻板块、还有页脚。若非这么多页面元素被强化，Flock也许只需像火狐那样有一个下载按键就OK了。&lt;/p&gt;
&lt;p&gt;图5&amp;mdash;&amp;mdash;Flock的下载页&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/932d078dd5731096a66af01846a3df85.gif&quot; alt=&quot;Flock download page&quot; width=&quot;446&quot; height=&quot;450&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;视觉设计可被分割成细部来评估&lt;/h2&gt;
&lt;p&gt;上文谈到了只重局部不顾整体的设计是困难的，基于同样的因素，单独的改变也将是困难的。然而给视觉设计师的反馈往往集中在单独的元素上：能把logo放大吗？改改头条的颜色吧？图片换一张怎么样？&lt;/p&gt;
&lt;p&gt;这种意见虽然能使设计师进一步明确客户和相关利益方想要的效果，却忽视了优秀设计应有的整体性。改变某个颜色或许就要重新考虑整个色盘了，但色盘原有的对比度是设计师为突出某些关键行为而调配好的。更换某张图片或许意味着周边元素也要被调整，因为原图所创造的注视效果可能不复存在了。诸如此类。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;一个产品整体的视觉设计是对各个元素精心平衡的结果，以传达该产品的功能性、可用性和欲求性。因此，当设计师调整了其中一个元素，他/她需要对整个结构的因素进行重新定义以重获平衡。孤立的设计决策无法成就一个和谐的整体。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;基于网络的产品最经不起被孤立地评估。由于可以将设计拆分成各部份进行测试，产品团队常将在各细部测试中表现良好的个体加以整合，以为效果也会是良好的。图6展示了孤立决策的后果。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;虽然这个eBay页面的页头在水桶测试（&lt;span style=&quot;color: #ff0000;&quot;&gt;译注&lt;/span&gt;）中表现良好，PayPal的logo在焦点小组得到了不错的分数，促销的相机广告点击率也较佳，但三者组合起来放在一个页面里并没有形成一个有效的设计。事实上，这个页面的众多元素都在彼此竞争。&lt;/p&gt;
&lt;p class=&quot;sub-p&quot;&gt;&lt;span style=&quot;font-size: x-small;&quot;&gt;（&lt;span class=&quot;tdvamseel&quot;&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;译注&lt;/span&gt;：水桶测试与A-B测试相似，即测量不同设计对于网页计量的影响。基本方法是让两个版本同时上线，并计算点击、流量、交易等方面的区别。）&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;图6&amp;mdash;&amp;mdash;意大利文版eBay主页&lt;/p&gt;
&lt;p&gt;&lt;img class=&quot;figure-left&quot; src=&quot;http://img.ucdchina.com/upload/snap/2008-12/75451d133fa14a5807ab4f8d0cb75f12.gif&quot; alt=&quot;eBay Italy home page&quot; width=&quot;446&quot; height=&quot;400&quot; /&gt;&lt;br /&gt;&lt;br /&gt;希望以上例子阐明了那些被常见视觉设计误区掩盖的事实。但是要说服你的同事和相关利益方，视觉设计并不仅是进行风格化、让元素吸引眼球或做出孤立的设计决策，也许需要他们&lt;a id=&quot;xzmf&quot; title=&quot;亲身体验&quot; href=&quot;http://www.jilles.net/perma/2008/10/27/on-user-experience/&quot;&gt;亲身体验&lt;/a&gt;才能真切地了解到视觉设计的潜力。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/98&quot; target=&quot;_blank&quot;&gt;视觉设计的误区&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://ucdchina.com/topic/59&quot; target=&quot;_blank&quot;&gt;UCD翻译小组&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.uxmatters.com/MT/archives/000344.php&quot; target=&quot;_blank&quot;&gt;http://www.uxmatters.com/MT/archives/000344.php&lt;/a&gt;&lt;/p&gt;</description>
				<author>Luke Wroblewski</author>
				<pubDate>2008-11-13 09:46:52</pubDate>
			</item></channel></rss>