realazy


Smallest effective difference

抱歉还没有找到合适的词来翻译这三个单词的组合。它出自Edward Tufte,意思是:Make all visual distinctions as subtle as possible, but still clear and effective,翻译过来就是说,让元素视觉差别尽可能细微,但依然保证清晰和效率。一个典型的例子是:

nytimes navigation
消息来自Typographical Contrast

这是The New York Times的导航系统。看上去有什么特别的吗?没有。但是可以很明确地知道哪些是主导航,哪些是次级导航吗?答案是明确的,但是从视觉上说,并不见得是显而易见的,但你却可以明确区分主次,何也?难道真只可意会而不可言传?让我们来分析一下吧。

最重大的视觉差别在哪?颜色?确实次级导航颜色稍微浅一点。等等,我们来做个实验。以下是我处理过的图片:

nyt navigation with same font

这下,仔细看,依然可以区分主次,但是得费更大的劲。注意,我只是把次级导航的字体族(font family)改了一下,从视觉上说,这是很细微的变化,如果不细心根本感觉不出来。但是给你的感觉发生了很大的变化,很明显,主次的清晰性大打折扣,即使是细微到很难觉察(当然,如果你是一个称职的视觉设计师,你一眼就能看出来)的变化。

这就是Smallest effective difference。如果感兴趣,推荐你继续这篇:Design Decisions: Basecamp help.

让我们看看百度之前的首页(由于找不到相关截图,这是我自己加工的,估计就这么个样,如有不对或者你有之前的真实截图,请指出或者提供,谢谢):

百度推行空间前的首页

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

现在的首页,把空间拎出来,放到了搜索条的下方:

百度现在的首页

空间两字没有套红,也没有加粗加大,只是挪动了一下位置。但是效果就出来了,搜索条产生的非平衡感(不知道这算优点还是缺点,看久了会产生不安,还好用户在这停留的时间很短)让用户迅速把注意力集中到了空间上。Bingo! 目的达到。

尽管我不知道最终决定了这个方案的设计师是否知道Smallest effective difference,但是这确实是一个Smallest effective difference的经典案例。

更新:根据Seven的留言,我的加工图是错误的,而且说是空间跟前面内容逻辑不符而另拎出来(小疑问:那怎么更多就可以跟空间在一块呢),当并妨碍我们的Smallest effective difference的理论,即使百度设计师真的没有过这样的想法。为我的错误图片感到抱歉,但还是不更换了,留着对比能有说服力。

自然,如果没有参与,永远不要去猜测设计师背后的动机或者支持理论是什么,就像机遇只可遇不可求一样。很多事情往往是无心插柳而成,百度如此设计无意中支持Smallest effective difference了,从而也加大了空间的举重。

11 Responses to “Smallest effective difference”

  1. Gawain Says:

    用“最小差异特效”来翻译?是否已经把意思表达完全呢?

    我的理解是用最小的变化实现较好的效果。

  2. 炎藤 Says:

    too small, and nobody would care;
    我们不是视觉专家~
    而且每个人对视觉的理解也不同的

  3. yanglei Says:

    楼上的说的对呀,每个人每个人可能读视觉的理解是不同的
    所以我们要找出一个适用大众群体的设计方案。

  4. 每日阅读 » links for 2007-02-21 Says:

    [...] realazy » Smallest effective difference (tags: UI) [...]

  5. Seven Says:

    baidu之前没有把空间放到上面去的

    当时的想法就是怎么把空间加上去,显然,直接加到“MP3 图片”后面是不妥的(不是没有突出的问题)。也就是你自己加工的这个图是错的。

  6. Snowyytree.com Says:

    人與人之間的聯系就是這麼奇妙,因為今天PorkFat回覆了我的文章,所以我去了他的博客,而又從他的博客到了你的博客,看到這篇文章,進而轉到另一篇英文文章,受益匪淺是也!

  7. winst.yue Says:

    to realazy
    拜读大作,获益匪浅,但对“让元素视觉差别尽可能细微,但依然保证清晰和效率”中“细微”一词不敢苟同,似乎”精细”更值得体味,精确细致。差别细微似乎与第一个例子所表达的意思相悖。我理解为让不同元素在视觉上的差异尽量精确,只要能保证它们都清晰且有效率地显示即可。
    另外,对于百度首页“空间”的摆放,我认为设计师更多地考虑的是那个位置原本就是百度的黄金广告位,百度上发生的需要对外宣传的重要事件基本都放在这个位置。这样的摆放是利用了用户的阅读习惯,而不仅仅是出于元素差异处理的考虑,甚至可以说放弃了这种考虑。

  8. 鬼仔’s Blog » links for 2007-03-08 Says:

    [...] realazy » Smallest effective difference (tags: 设计) [...]

  9. DreamBox Says:

    说到底就是要做到简介明了,主次分明,层次清晰,当然这些并不容易办到。

  10. 王二online Says:

    我用TT看这个页面非常混乱
    以为是IE7的问题
    但是用IE7看了又是好的
    很奇怪

  11. IDSON Says:

    各人的看法都不同!给客户看的和自己的审美都不同!但客人给钱就要尊重他的想法。

Leave a Reply


第三届 D2 前端技术论坛 (上海)

realazy (懒到死) is proudly powered by WordPress | Entries (RSS) and Comments (RSS)