Smallest effective difference
抱歉还没有找到合适的词来翻译这三个单词的组合。它出自Edward Tufte,意思是:Make all visual distinctions as subtle as possible, but still clear and effective
,翻译过来就是说,让元素视觉差别尽可能细微,但依然保证清晰和效率。一个典型的例子是:
这是The New York Times的导航系统。看上去有什么特别的吗?没有。但是可以很明确地知道哪些是主导航,哪些是次级导航吗?答案是明确的,但是从视觉上说,并不见得是显而易见的,但你却可以明确区分主次,何也?难道真只可意会而不可言传?让我们来分析一下吧。
最重大的视觉差别在哪?颜色?确实次级导航颜色稍微浅一点。等等,我们来做个实验。以下是我处理过的图片:

这下,仔细看,依然可以区分主次,但是得费更大的劲。注意,我只是把次级导航的字体族(font family)改了一下,从视觉上说,这是很细微的变化,如果不细心根本感觉不出来。但是给你的感觉发生了很大的变化,很明显,主次的清晰性大打折扣,即使是细微到很难觉察(当然,如果你是一个称职的视觉设计师,你一眼就能看出来)的变化。
这就是Smallest effective difference。如果感兴趣,推荐你继续这篇:Design Decisions: Basecamp help.
让我们看看百度之前的首页(由于找不到相关截图,这是我自己加工的,估计就这么个样,如有不对或者你有之前的真实截图,请指出或者提供,谢谢):

有一天李老板说,我们要强势推广空间,设计师给我想个方案,在首页上重点突出空间。相信,设计师也准备了大量的方案,套红,加粗,加大等等,这些都是突出的手段。但是,太过突兀会不会伤害用户体验?有没有可能保证空间这一条目跟其他条目之间的差异尽可能小,但是能够重点突出它,吸引用户的注意而又不会让用户产生惊怵?
现在的首页,把空间拎出来,放到了搜索条的下方:

空间两字没有套红,也没有加粗加大,只是挪动了一下位置。但是效果就出来了,搜索条产生的非平衡感(不知道这算优点还是缺点,看久了会产生不安,还好用户在这停留的时间很短)让用户迅速把注意力集中到了空间上。Bingo! 目的达到。
尽管我不知道最终决定了这个方案的设计师是否知道Smallest effective difference,但是这确实是一个Smallest effective difference的经典案例。
更新:根据Seven的留言,我的加工图是错误的,而且说是空间跟前面内容逻辑不符而另拎出来(小疑问:那怎么更多就可以跟空间在一块呢),当并妨碍我们的Smallest effective difference的理论,即使百度设计师真的没有过这样的想法。为我的错误图片感到抱歉,但还是不更换了,留着对比能有说服力。
自然,如果没有参与,永远不要去猜测设计师背后的动机或者支持理论是什么,就像机遇只可遇不可求一样。很多事情往往是无心插柳而成,百度如此设计无意中支持Smallest effective difference了,从而也加大了空间的举重。


February 20th, 2007 at 21:44
用“最小差异特效”来翻译?是否已经把意思表达完全呢?
我的理解是用最小的变化实现较好的效果。
February 21st, 2007 at 05:15
too small, and nobody would care;
我们不是视觉专家~
而且每个人对视觉的理解也不同的
February 21st, 2007 at 15:23
楼上的说的对呀,每个人每个人可能读视觉的理解是不同的
所以我们要找出一个适用大众群体的设计方案。
February 21st, 2007 at 23:38
[...] realazy » Smallest effective difference (tags: UI) [...]
February 24th, 2007 at 20:53
baidu之前没有把空间放到上面去的
当时的想法就是怎么把空间加上去,显然,直接加到“MP3 图片”后面是不妥的(不是没有突出的问题)。也就是你自己加工的这个图是错的。
February 26th, 2007 at 00:22
人與人之間的聯系就是這麼奇妙,因為今天PorkFat回覆了我的文章,所以我去了他的博客,而又從他的博客到了你的博客,看到這篇文章,進而轉到另一篇英文文章,受益匪淺是也!
March 1st, 2007 at 17:05
to realazy
拜读大作,获益匪浅,但对“让元素视觉差别尽可能细微,但依然保证清晰和效率”中“细微”一词不敢苟同,似乎”精细”更值得体味,精确细致。差别细微似乎与第一个例子所表达的意思相悖。我理解为让不同元素在视觉上的差异尽量精确,只要能保证它们都清晰且有效率地显示即可。
另外,对于百度首页“空间”的摆放,我认为设计师更多地考虑的是那个位置原本就是百度的黄金广告位,百度上发生的需要对外宣传的重要事件基本都放在这个位置。这样的摆放是利用了用户的阅读习惯,而不仅仅是出于元素差异处理的考虑,甚至可以说放弃了这种考虑。
March 8th, 2007 at 10:11
[...] realazy » Smallest effective difference (tags: 设计) [...]
March 14th, 2007 at 10:54
说到底就是要做到简介明了,主次分明,层次清晰,当然这些并不容易办到。
May 8th, 2007 at 19:39
我用TT看这个页面非常混乱
以为是IE7的问题
但是用IE7看了又是好的
很奇怪
May 9th, 2007 at 17:09
各人的看法都不同!给客户看的和自己的审美都不同!但客人给钱就要尊重他的想法。