“译文”目录存档

[译文]前车之鉴 — 那些好看不好用的网站案例

2011年09月21日,星期三

尽管”外观服从于功能“这一观点备受争议却被广泛的认可。在设计网站方面,通常是指网站功能的易用性和是否可以方便访客完成自己的目标。

在接下来的案例中,我们将展示那些设计得漂亮但可用性差的网站。可用性差的原因包括:布局混乱不堪,载入速度过慢,导航识别性差。尽管这些网站在视觉设计上很有特色,但很不幸他们可用性的确很差。让我们研究下这些失败的案例避免出现在自己的设计中出现易用性差的情况。

杂乱无序的设计

我看到的是什么网站?我要在那里点击?接下来我该怎么做?设计的杂乱无序是给访客最糟糕的印象。访客不知道设计师所要表达的意图(因为都被隐藏在了杂乱无序的设计中),从而导致访客在未做任何动作之前就要关闭该网页。

 

Creative With aK

导航信息超载!不仅我们不知道要看什么,甚至都不知道应该点击那里。通过鼠标扫描方式查找可点击区域无助于提升网站的易用性。并且,整个网站的载入过程连个进度条都没有。而且更令哥震惊的是,还要花时间搞清楚必须关闭欢迎的窗口才可以点击页面其他地方。栏目里缺少滚动条的内容让哥对藏在里面的内容顿时失去了兴趣。

 

Marc Ecko

Marc Ecko是一个拥有数不清楚生意的成功商人,貌似他也希望许多人了解这些生意。问题是,他展示了太多我们甚至不知道从那里开始阅读页面的内容,该网站还使用了飘忽不定的横向滚动条。坑爹啊!找到所需的内容的确需要相当长的时间。

 

Content Of

即便是已经阅读”关于我们”页面并文字里有许多的随机链接,哥还是很疑惑这个页面到底是不是打酱油用的。最合适的猜测可能这是个人介绍页面,而乱七八糟的链接和找不到导航栏,哥只能带着困惑和不解离开这个网站。

 

There Studio

有一半的圈圈看上去是可以点的,实际上却不能。如果拖拽一个圈圈,它会跳到其他圆圈中去。当然,这些坑爹的圈圈动画效果充分的体现出公司比较xxx的理念,这明显有些过度了嘛!用58秒等待一个动画的确太漫长了。并且,如果你想需要更多的圈圈,点击或拖拉空白区域就会出来,同时也带给访问者更多迷惑。

加载问题

随着跳出率上升,页面停留时间变得越来越短。能立即抓住访问者眼球就变得尤为重要。网站加载时间越长,访问者返回google或facebook寻找下一个合适网站可能性也就越大。加载时间、跳过按钮、无固定导航栏与其他部分都是我们需要思考的点。

 

Coke Light

这是另一个很糟糕的情况,flash设计师强迫用户看介绍动画。没有跳过按钮的介绍动画会让访问者在进入网站前就放弃访问。点击又没立即响应的按钮或是视觉上不像是导航栏的设计将导致访问者失去兴致继续访问即便是足够漂亮的网站。该网站花费许多周折浪费访客的时间才能回到首页将给人感觉进行次”世界之旅”。在网站地图里需要查找隐藏在里面的许多泡泡。

 

Desing Sul

哥从未见到过加载问题如此之杯具的网站。多重加载元素,即使你看到了网页内容实际上还有东西要再次加载。也没有迹象可以表示加载结束了,这样做也让哥非常的困惑不解并且该网站还不易使用。事实上,找到阅读的内容也需要花些功夫,而网站在牛奶卡通包装盒所做的效果与内容根本没有毛关系嘛。

 

Nicola Waibeck

进入网站要花很长时间痛苦的等待,如果接下来打开的网站足够漂亮,易用性再好些也算是能接受的。可惜,打开页面后哥彻底傻眼了,里面每张图片还要继续下载,我去!并且还要强迫看模糊图片。更好的改进是,加载图片时有加载进度条示意正在加载中。如果访客的带宽足够也许问题还不算严重。但如果不是,那么访客很快就会变得抓狂起来。还有那个返回按钮不够明显,这也让哥觉得这个网站很杯具。

导航栏

对于那些信息量大或是栏目结构复杂的网站来说,良好的导航显得尤为重要。你可以想象没有地图的情况下开车或在没有标签的杂货铺里购物有多么困难。导航栏会告诉我们应该去那里,而在下面的案例中的网站导航几乎没有提供任何有用的信息。你甚至可以考虑带个指南针了,因为这些案例实在是太容易让人迷失方向了。

 

EContent

经过漫长的加载后,网站需要访客点击”进入”按钮。好吧,我们点它下。尽管网站上有坨快捷菜单,但很不幸的是这坨菜单并没有引起访客的注意。并且,访客需要将鼠标挪到图片上才能查看子类目。而这些导航按钮需要访客非常仔细的查找才行。

 

Prism Girl

易用性差的网站通常都有同样的通病。当哥在这么漂亮的网站上看不到导航时,就不得不用鼠标乱戳的方式查找链接。这个网站很漂亮但也非常复杂,复杂到我们需要花费一个小时来找链接,但你可能都猜不到点击跟随鼠标的图标方式进入网站。并且,这个网站除了令人印象深刻的设计之外就没提供个毛内容出来!

 

On Toyota’s Mind

缓慢的加载导致访客不明白接下来要做点啥:导航栏的视觉不清晰与难以发现的返回按钮问题一样严重。哥很疑惑:当访问该丰田网站时到底要传递给访客什么样的概念呢?

 

Theologos

无跳过介绍的按钮。无视觉清晰的导航栏。加载很慢。而牛x的是页面与播放的背景音乐竟然是分开的。当网速快的访客访问网站时,网站的动画都可能引起访客的反感。

构架与目录问题

你的网站加载情况良好,你知道访客来你网站想做什么,你的网站有固定的导航。但访客一旦进入你的网站却无法知道你的目录结构。就好比,要吃肉就应该去肉食店,而不是牛奶店。很不幸的是,有些网站就是这么干的。

 

Self Titled

隐藏的菜单与类目不清楚导致网站导航难以使用。当访客想找到他想了解的类目将会是非常困难的。

 

Vanalen

该网站的类目由竖条折叠而成。当哥点击时却提供了非常少的信息。如果是第一次访问该网站,可能需要花点时间才能找出你需要的东西。

 

GripLimited

该网站的确告诉我们要”点击与拖拽”,但这个区域看上去更像是份海报,我很怀疑到底会有多少人知道那里是可以点击的。该网站也的确的意识到了上面说的这一点,于是在页面顶部创建了菜单。但有多大的几率会被人看到呢?

 

Kyle Tezak

这是另一个视觉效果很好但由于糟糕的用户体验会引起访客不爽的案例。网站上没有固定的导航栏,而只是个悬浮着的固定导航条(感谢江列农同学的纠正)。如果要找到联系方式,需要到左下角点击”Information”(信息)。使用更传统的方式将有助于提升访客体验:例如,放一个电子邮箱或是将文案改为”contact information”(联系信息),亦或是在页面底部添加联系方式。这是典型的通过细节提升用户体验的方式。

可视化与滚动条

即便是网站布局并不混乱,导航也十分清晰。但如果关闭了鼠标交互效果或页面不能滚动了,那也就意味着无人可以看到这些内容了。原本可见的元素因为变为不可见会导致访客直接离开你的网站。

 

Real Casual

除非你用鼠标点击不同的区域,否则可点击元素是根本看不见的。点击某个区域后又是长时间的等待,点击后额外增加的效果也在考验访客跳出网站的几率。

 

Lego Click

网页的滚动通常是从左至右,从上到下。而这个坑爹的网站却是从网页底部开始。加上不能关闭的关闭按钮和其他些小问题,你会觉得乐高这个网站很莫名其妙(虽然设计很漂亮)。

 

Journey to Zero

该网站非常巨大,但事实上你打开后根本就不可能知道这个情况。拖动滚动条后也没有提示信息,就离开内容区域。如果你拖拉滚动条太快甚至都可以跑出网站设计部分。而且,回到内容部分也很麻烦。该网站的设计好但也太难用了吧。

 

Faub(现已离线)

这是另一个设计漂亮,但却导航无鼠标交互效果或提示信息。

 

Uniqlo

优衣库网站看上去很美观也很易用。但直到访客添加10件商品到购物车才发觉无法结账。而事实上这根本就不是购物车而是愿望清单。该体验完完全全的把每个使用过的用户都给坑了。

 

Bio Bak

这是另一个拖动方式进行导航的网站,很显然它对于这种导航方式自我感觉非常良好。从视觉/乐趣角度来说是个好网站,但设计公司设计了用户体验很糟糕的导航方式:必须要使用鼠标滚轮才能看到比首屏更多的内容。

小结

设计要服务于网站功能以及访客沟通。如果你的网站同时也能够达到美观,那就一举两得了。设计得美观漂亮仅当网站首要任务是视觉美观才适用。

注意那些无序的排版,尤其是在导航栏与访客首次访问的页面。设计的排版过于杂乱无序会导致访客不知道如何使用你的网站。最糟糕的可能是访客在首个页面没有打开就走掉了。网站访客不喜欢等待。确保网站的加载速度快,并且能让访客知道可以加载完毕所花费的时间。减少访客流失的最小风险是一打开网页就能够吸引他们的注意。

一旦访客访问,你希望他们访问你网站上的某个页面。确保访客可以轻松找到你的导航栏,以及每个导航元素的动作。不要让访客猜测或胡乱点击寻找链接。在有许多内容的的大网站,信息构架与组织尤为重要。要确保访客可以浏览你的内容。确保菜单易识别,节省访客的时间,让访客知道导航可用。

内容的可见性很重要,但许多人都无视它。确保访客可以在最小的分辨率下也可以看到所有你希望他们看的内容。如果你正在为销售产品做设计,确保你的设计是为销售服务的。必须明确你的设计是为推销产品服务的。你的网站越是没为销售产品服务,你赚得钱就越少。

[原版英文]http://uxdesign.smashingmagazine.com/2010/11/25/showcase-of-beautiful-but-unusable-websites/

[译文]http://davidw.me/translate/showcase-of-beautiful-but-unusable-websites/

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

[译文]关于A/B测试批评的反驳

2010年12月12日,星期日

最近,A/B测试在互联网各界都受到了甚至是不公正的批评。这些批评包含了A/B测试的一些相关要点,但基本论点是站不住脚的。这些批评混淆了(例如,测试红色与路色按钮的区别或是其他)与A/B测试方法之间的关系。现在让我们看下最近在网络上的些争论,为什么他们的批评是没有根据的。

争论一:A/B测试与局部极小化

Jason Cohen在他的文章《Out of the cesspool and into the sewer: A/B testing trap》中文翻译版本:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》中认为:A/B测试往往得到的结果是局部最小值,而非真正想得到的全局最小值。对于那些把页面上每个区块作为提升转化率的部分,而又不清楚局部最小值与全局最小值区别的人来说。这就好比说,在网页里每个区块都是都是个变量:这些的数值自然越低越好。通过下面来自jason Cohen的图 ,就可以知道出局部最小值与全局最小值的区别。

即便是在jason文章里,争论的焦点也不在于A/B测试,因为激进的调整页面并使用相同的测试方法也可得到全局最小值。因此声称局部最小值是A/B测试陷阱是不公平的,因为这与A/B测试方法根本就没关系。相反,在争论中却揭示出微调并做测试的方法是徒劳无功的。

那么,如果A/B测试没有问题,那么是局部最小值的问题吗?即便打了折扣的局部最小值的理论是错误的,答案依旧是否定的。上面的图片展示了非常浅显易懂的一维度曲线。你可以把x轴当作背景色y轴当作跳出率。Jason的文章可以归纳为:如果测试了一组不同的蓝色,你可能减少跳出率。但如果你尝试着将颜色改掉(例如,黄色),你可能会得到可能是最低的跳出率。

下面是本争论的两个问题:

1、你永远都不知道是否已经得到了全局最低值

全局最低值仅存在于理论中。让我们继续之前的改为黄色背景得到跳出率全局最小值的范例。在进一步的测试中,如果我们发觉没有背景色得到更低的跳出率该怎么办?或者放置张可爱小猫的背景得到更低的跳出率呢?问题的关键点在于,除非可以把跳出率降低到0%(或转化率达到100%),否则你将永远怀疑自己是否达到真正意义上的全局最小值。

另一个检测是否找到全局最小值的方法是穷举所有可能性。理论上,你页面仅修改背景色(你不能使用背景图片,因为你老板讨厌用背景图)。那么你可以将所有可能的颜色尝试一遍并取其中最小值的方案。在穷举所有可能色彩中,那个得到最小值的背景色就有可能是全局最小值。这就带出了下一个问题…

2、这不仅仅是背景色的问题

当优化页面时,你需要面对成百上千的变量(背景色只是其中的一个)。标题、文案、布局、页面长度、视频、文字颜色、图片这些仅是其中的一小部分变量。优化页面取决于页面所有的一切。这意味着之前看到的曲线不只是我们所见到的一维的。在现实中,它是被上千个变量影响着的多维结构。

再强调一下,把图中的山峰想像成你的转化率(或是跳出率),变量在不同的维度上(尽管貌似就只有两个变量,但事实上有上百个)。与一维的例子不同的是,在真实页面上穷举所有可能性是不可能的。因此,你不必刻意去追求全局最大(最小)值。吸取教训:接受局部最小值。

争论二:A/B测试的细微改版

SEOMoz的Rand Fishkin写了篇《Don’t Fall Into the Trap of A/B Testing Minutiae》中文翻译版本:《[译文]不要落入A/B测试的局部最小值陷阱中》的文章,在文中他重申了Jason关于不要浪费时间在测试页面细小元素上(如,标题,文字等)。他的主要论点是:使用细微改版得到局部最大值的方法花费了太多精力和时间,这样做并不值得。下面的图片来自他的博客,稍有调整。

首要指出的是机会成本不是需要足够的时间来测试(这可能需要以几周时间),而应该是设置测试的时间(这需要几分钟)。一旦设置好测试,就几乎是自动的,其风险仅是设置测试时花费的时间。如果,投资15分钟的时间可以进行次按钮颜色测试最终的结果可以提升1.5%的转化率,这还有什么错误吗?

许多A/B测试工具(包括我启动的visual website optimizer)可以很容易的进行小的测试。这些测试工具可以在后台监测测试,如果结果不理想就会自动停止。那么做这样的测试会有什么样的风险呢?我只看到好的一面:增加了销售额与转化率。
Rand为了证实自己的观点,他给出一份最近的Basecamp 首页重新设计稿,该设计将Basecamp转化率提升了14%。你能想像得到进行这样的一次重新设计(相比于改变按钮颜色测试)所带来的影响吗?事实上,由于曲线是在于多维度上的,一个完全的重新设计有很高的失败概率。复杂的重新设计导致失败的可能性要比改动一个按钮的颜色大得多。因为我们从来没有听说过重新设计导致失败的案例眼睛,我们也不能就此认为版面大幅度的改动要比版面微调的效果好(尤其是,版面大幅度改动所需要的投入与时间要比版面微调多得多)。

通过局部最小值,你至少知道转化率正在增长,这是往增长利润前进的方向。但这并不代表说将放弃追求全局最小化的目标。全局最佳就像是世界和平:很难达到目标,但我们一直朝着正确的方向努力。要吸取的教训是:理想的策略包含了小测试(红色与蓝色对比)与版面大幅度改动这两者。跳过转化率曲线山脉,可以确保你不断的找到更好的转化率。

争论3:

Jeff Atwood 写到电影《偷天情缘》( 译者注:电影中的男主角是个气象预报员,在去一小镇报导当地的土拨鼠日庆典后。第二天醒来发觉时间依旧停留在前一天的土拨鼠日。昨日的一切又重复上演。无论他如何选择渡过这一天,他都无法前进一步。 )与A/B测试相比,得出结论由于男主角失败了所以A/B测试也会失败。在jeff的所有比较中,他认为A/B测试缺乏激情并且扼杀创造力。他继续引用Natha Bowers的一tweet:

A/B测试就像是张砂纸。你可以用它优化细节,却不能用它创造新东西。

谁能声称A/B测试可以创造新东西呢?创意来自思维而非工具。这论点可以应用于画笔:

画笔好像一根棍子上粘了些毛发。你可以用它来戳你的猫,但你不能用它来创作东西。

A/B测试好比是个画笔,它只是一个工具如别的工具一样。它有自己的特性与局限性。它没规定你可以用来测试的东西;因此诶它也就不能约束你的创意。不管使用A/B测试与否,你可以使用自己全部的创意与想法为你的网站进行全新的设计。通过它可以使得你所用于网站的设计与技术更加合理,并评估新的设计是否比原有的更好。记住:A/B测试仅仅是一种方法,而不是设计指导。

总结:

重申上述三个点所得到的教训:

接受局部最小值,因为你永远不可能得到全局最小值。细节测试仅需要花费几分钟时间,但获得的潜在收入将远远超出花费这几分钟的价值。

  1. 通过细节调整与重新改版的方式这两种方式不断的探索更好的方法提升转化率。
  2. A/B测试仅仅是个工具,它不会扼杀你的想法(事实上,当在设计时你需要更多的想象力)。
  3. 最后,不要觉得做A/B测试会产生任何罪恶感。

原文地址:《In Defense Of A/B Testing》
译文地址:《关于A/B测试批评的反驳》

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

[译文]不要落入A/B测试的局部最小值陷阱中

2010年12月9日,星期四

在Jason Cohen最近的一篇文章英文版:《Out of the cesspool and into the sewer: A/B testing trap》 | 中文翻译版本:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》引起业界广泛注意与深刻反省。许多在网上营销的人都知道A/B测试所带来的能量:可以提高点击量、用户注册数量与转化率。可使访客在页面上进行动作可能性的百分比更高。
然而这些举动是充满着危险的,因为这些过程都是通过我们人为的揣测、设计、制作和测试得出来的。最不易引起注意的是许多内在的危险源自于测试内容是我们自己选择的。
“局部最小值”示意图

这个现象非常的确有趣,并且有时值得去测试landing page上的每个独立元素。但这种做法通常下不适合于在产品或landing page的刚开始阶段。正如转化率专家指出的:“我们需要把它们先挂到墙上观察其表现”的方法可得到小改进。但研究访客的问题与解决访客的这些问题是完全两回事。

问题太简单了以至于很多人认为很容易解答。

具有简单问题回答的测试页面

因此,提升转化率所需要做的就是改变按钮的颜色。

你之前所读过的案例或许类似于下面的样子:

  • 将按钮的颜色从红色改为绿色获得72%的提升
  • 使用“承诺复选框”后将转化率提升了11%
  • 如何添加“免费的”提升28%
  • 人头像照片将转化率翻倍
  • 不知名的Twiitter follwing 命令测试

在上面所述的案例中,由于某些简单的改动使得转化率或点计量大大的增长,从而得到广泛的赞赏并且越来越流行。问题是,这是个例而非规律。事实上,这就是这些案例变得有新闻价值并得到如此多关注的原因。这不是说,你就不应该了解这些案例或是不接受这些案例中有价值的部分 (事实上你应该吸取有价值的部分)。但案例中的做法可以让市场人员的心理产生错误想法。

鲜有网站具有通过改变按钮的颜色或更改标题摆弄下文案就可以将转化率大大提升的经验。如果你有充分的理由觉得自己是个外行,那么就下决心去学习吧。只是要注意:通过小变化就可以产生积极的影响不是个事实。因为,你根本付不起之后花费的时间与精力。

使用简单令人信服的数学模型消除干扰

假设你在转化率提升方面做得非常优秀 – 对于你来说A/B测试与多变量测试是非常简单的事,在这方面你有很好的基础。在处理landing与测试版页面方面得心应手。
在这些理想的情况之下也会聚集着成堆的问题:

花费几周的时间去获得小小的增长是非常不值得的。

要知道,每次测试都需要花费大量的时间才能得出令人满意的数据。并且,更多的小规模测试(收益不多的测试)将花费更多的时间,这是要改为使用新的想法做大改动的原因。这也不是唯一要改变的原因。假如你对一个自己满意的页面/创意开始测试里面的元素-优化局部最小值。你也许需要4-6个月的时间,然后整体转化率提高了5%你觉得很满足了。

直到…

你开始实施另一个新想法大改动,发觉在测试中改进得更好。这就是我所推荐的方式:始于新想法大改动,省略那些想当然的测试。让你的用户先使用较好的那个方案,然后对其进行优化。

你应该进行的测试

什么是我所说的“新想法”与“大改动”呢?37signals昨天做的Basecamp页面重设计提供了个很好的例子。

他们记录到新版本比旧版本改善了14%。并且,现在他们可以考虑是否需要重新设计新方案或是优化在新版本中的小元素了。当然,这个小测试所取得的数值并不像有些会得到更大幅度的提高。我认为他们在用正确的方法做事。对于旧版本来说一个小的改动可能提升了相当多。而对于新版本来说,在一开始就有更高的转化率基数,因此许多的小改动都得益于更高的基数。
另一个很好的范例是:关于转化率专家为SEOmoz自己做的案例研究。该测试中PRO landing page的转化率提升了52%。额外的,在今年的4月份,我们创建了一个简短的,更少介绍的类landing page,该测试以小时为单位。我们希望它能够击败老版本页面。经过几周的测试后,这个页面没有获胜。接下来的夏天,我们将测试一些完全不同的版本以期待打败现有的页面版本。
在Stephen Pavlovich的文章里很好的描述了如何提高转化率与测试方法。在他的pdf很简洁的列出这些问题:

遵循这些步骤,不要沉迷于细节中。你将会使用自己的方式得到期望的效果。

英文原版地址:《Don’t Fall Into the Trap of A/B Testing Minutiae》
中文翻译版:《[译文]不要落入A/B测试的局部最小值陷阱中》

顺便提下,细心的同学应该能猜到了:《[译文]不要落入A/B测试的局部最小值陷阱中》《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》是为接下来的:《In Defense Of A/B Testing》做的铺垫。

敬请期待!!

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

[译文]小心A/B测试的陷阱:从水沟流入下水道的水

2010年12月5日,星期日

当本应该流入下水道的水,却停滞在水沟时。A/B测试就是个陷阱。

你不觉得A/B测试其实是类似于液体那样工作的吗?如果是不,那么我将给出正确的缘由。

在奥斯汀的某地的院子里经常有些深坑。依照常理说,水可以自然的流到大街的下水道里,但在重力作用下的水并不是这么工作的。

水总是在寻找院子里最低点,这个方法很狭隘。水并不考虑全局关系—即流到最低的地方。而是流向附近最低点。水并不知道越过栅栏就可以流到更低的地方,如:下水道。

在数学理论上,水达到的最低点不是“全局最小值”而是“局部最小值” 。也许水这是在一木障林了。

也许A/B测试有时也出现正如上述的情况

典型的A/B测试就像是这样:开始于某一点,然后改动其中一处。也许将标题由“酸奶酪将你挤垮?”改为“如何知道酸奶酪坏掉了?”然后进行测试,其中一个胜出。接着你又继续另外个测试“酸奶酪是好还是坏的?”将你改进的诸如此类的想法付诸行动后。一点一点的你会觉得收入也会随之增加。但事与愿违,往往不是这样的。

时常发生的情况是:做的小改动几乎起不到任何改进作用。并且,你很难意识到这一点。这时,你也许尝试放弃,但这也许是错误的。

你已经知道数学家所说的“局部最小值”也就是我说的“臭水沟”。 你要测试的是院子里流入最低点的水。彻底改变你的观点、话语、布局、价值主张、颜色,或是目标受众可能揭示的新的,断续的,不能增长的变化。真正的关注点在下水道(全局最小值—译者注),你需要越过障碍。由于全新地方寻找的利益有时要比改进有更好的提升。你需要从起点开始寻找那些不连续的点。

做好上述的事情你需要做好两方面:不仅需要将A增长到A2,也需应用于不同于A版本的B版本。这样一来,即可以得到由于小调整带来的增长,也可以通过改进某些地方来获得提升。这也许可以让你的收益增长的更快。

当你在玩弄新想法与新个性的时候,也需要有些微小的变化。

英文地址:Out of the cesspool and into the sewer: A/B testing trap
译文地址:《[译文]小心A/B测试的陷阱:从水沟流入下水道的水》

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

[译文]Twitter上值得借鉴的背景范例与实践

2010年06月12日,星期六

Smashing杂志(@smashingmag)在Twitter上已经快一年了。Twitter是个很好的媒介工具,通过它我们与读者们建立起了联系,讨论与设计相关的话题,并且还赠送些不错的奖品。然而,这一年内我们的twitter依然没有属于自己的背景,现在是到了改变的时候了。为了能做个出色的背景,我们想先了解下其他设计师是使用何种方式方法做出漂亮的界面。

twitter上的个人资料页是唯一可以用来展示个人视觉形象与尽可能多的额外信息地方,设计好个人资料页面要比发布单个tweet能传递给读者更多的信息。你可以通过改变背景图片、文字与超链接颜色来自定义个人资料页。这就如同更换皮肤一样简单,仅仅通过更换背景图片可以让设计师设计出非常有个性的页面。

本文主要目的是介绍使用不同的方法设计出独特、让人印象深刻的twitter页面。在这之前,解下twitter的个人资料页的结构是很有必要的。

Twitter 的个人资料页

最值得注意的是twitter 个人资料页内容宽度被固定为765像素,区块居页面中间放置。这样的布局很好,这意味着在高分辨率显示器上可以将你的背景图片展示在两边空白的区域上了。

Twitter上值得借鉴的背景范例与实践

Twitter上值得借鉴的背景范例与实践

其他几个需要记住的是:

  • 时间表(timeline)背景一直是白色的
  • 菜单条(menu bar) 背景一直是白色的
  • 页脚栏(footer bar) 背景一直是白色的
  • logo一直是twitter的logo
  • 图片可以替换
  • 可以改变文字颜色、超链接颜色、侧边栏背景色
  • 可以改变背景图片与背景颜色
  • 也可以平铺背景图片
  • 背景图片开始位置一直是左上角

如果你仅仅是对设计个漂亮的个人资料页感兴趣,你仅仅需要一张很炫的背景图,并自定义文字、超链接颜色和侧边栏颜色。但如果你希望还可以展示品牌与额外的联系信息,就需要在背景图片上花更多的心思了。

技巧与方法

下面是些个人资料页,理解这些技巧与方法,将他们运用到属于你自己的背景之中去吧。请记住,许多的个人资料页用到不只是一种技巧,你应该根据自己的需求将这些技巧混合的运用起来。

 

将背景与时间表(timeline)/侧边栏合并

这或许是下面列举的方法中最少用到技术的方法,通过将将背景与timeline(时间表)/侧边栏合并,你可以创做出一个看上去非常独特的页面。

@adamplitt

Adamplitt-a 之 Twitter上值得借鉴的背景范例与实践

Adamplitt-b 之 Twitter上值得借鉴的背景范例与实践

@gaksdesigns

Gaksdesigns-a 之 Twitter上值得借鉴的背景范例与实践

Gaksdesigns-b 之 Twitter上值得借鉴的背景范例与实践

平铺背景与其他图片的组合

Twitter可以指定背景图片是否平铺。将这两者结合就可以让你的个人资料页显得与众不同了。

@spurrachel

Spurrachel-a 之 Twitter上值得借鉴的背景范例与实践

Spurrachel-b 之 Twitter上值得借鉴的背景范例与实践

使用头像关联内容

你的图片(它可以是一张头像,logo或照片)是你在twitter上的主要标识;每次你向你的粉丝发tweet时,它都会被展示在每个tweet的下方。比方说,你使用的背景图片的某些地方与你的profile图片有关联,在你的图片里可以包含更多关于你或你的品牌的信息。换句话说,你可以在你的logo与品牌识别之间建立起某种必然的关系来强化二者之间的关联。

@Doubleolee

Doubleolee-a 之 Twitter上值得借鉴的背景范例与实践

Doubleolee-b 之 Twitter上值得借鉴的背景范例与实践

@mailchimp

Mailchimp-a 之 Twitter上值得借鉴的背景范例与实践

Mailchimp-b 之 Twitter上值得借鉴的背景范例与实践

通过页面层叠效果展示更多内容

如果你已经建立好了视觉识别,你可以通过页面层叠的效果展示给用户在twitter之后的内容。这种方式给你想设计什么就设计什么的自由度,因为你已经不需要再考虑与twitter页面设计上、色彩上的相互整合了。

@sitepointdotcom

Sitepointdotcom-a 之 Twitter上值得借鉴的背景范例与实践

Sitepointdotcom-b 之 Twitter上值得借鉴的背景范例与实践

@benek

Benek-a 之 Twitter上值得借鉴的背景范例与实践

Benek-b 之 Twitter上值得借鉴的背景范例与实践

在个人资料页上增加自定义侧边栏

接下来的profle是使用了前面第一种方法的特殊应用:通过增加侧边栏到布局中。你可以增加这样的面板来高亮那些你希望给用户看的内容。

@aaronmillerillz

Aaronmillerillz-a 之 Twitter上值得借鉴的背景范例与实践

Aaronmillerillz-b 之 Twitter上值得借鉴的背景范例与实践

@robingood

Robingood-a 之 Twitter上值得借鉴的背景范例与实践

Robingood-b 之 Twitter上值得借鉴的背景范例与实践

@sickbrain

Sickbrain-a 之 Twitter上值得借鉴的背景范例与实践

Sickbrain-b 之 Twitter上值得借鉴的背景范例与实践

展示你自己

在社会媒体世界里,你自己就是品牌。通过twitter你可以成为社会媒体的发布者,通过非常有个性的方式展现你自己来强化你的网站相关品牌与联系。

@problogger

Problogger-a 之 Twitter上值得借鉴的背景范例与实践

Problogger-b 之 Twitter上值得借鉴的背景范例与实践

@unmarketing

Unmarketing-a 之 Twitter上值得借鉴的背景范例与实践

Unmarketing-b 之 Twitter上值得借鉴的背景范例与实践

使用图标与标识

接下来的个人资料页很简洁,然而通过展示与作品相关的图标或标识却能给给人留下深刻的印象。

@lanesa

Lanesa-a 之 Twitter上值得借鉴的背景范例与实践

Lanesa-b 之 Twitter上值得借鉴的背景范例与实践

@rjacquez

Rjacquez-a 之 Twitter上值得借鉴的背景范例与实践

Rjacquez-b 之 Twitter上值得借鉴的背景范例与实践

增加标题栏

增加标题栏可以让你的个人资料页看上去外观更独特。并且,通过可以通过标题栏将twitter的标识与顶部菜单与你的页面内容分离开。

@thegraphicmac

Thegraphicmac-a 之 Twitter上值得借鉴的背景范例与实践

Thegraphicmac-b 之 Twitter上值得借鉴的背景范例与实践

@elitistsnob

Elitistsnob-a 之 Twitter上值得借鉴的背景范例与实践

Elitistsnob-b 之 Twitter上值得借鉴的背景范例与实践

少就是多

Andre Gide (安德烈·纪德,1869-1951是法国20世纪最重要的作家之一。译者注)曾经说过“上帝与艺术家之间的合作就是艺术,设计的越简洁就越好”。这里列举了些用简洁的思路设计出的图形。

@line25blog

Line25blog-a 之 Twitter上值得借鉴的背景范例与实践

Line25blog-b 之 Twitter上值得借鉴的背景范例与实践

@idesignstudios

Idesignstudios-a 之 Twitter上值得借鉴的背景范例与实践

Idesignstudios-b 之 Twitter上值得借鉴的背景范例与实践

兼容1024px的宽度

如果你在意个人资料页展示在1024px宽的屏幕,你需要基于左上角设计背景图。下面些范例就很好的解决了在不同分辨率下的问题。

@SohTanaka

SohTanaka-a 之 Twitter上值得借鉴的背景范例与实践

SohTanaka-b 之 Twitter上值得借鉴的背景范例与实践

这是另一个很好的方法确保你的个人资料页在1024px与1280px下看起来很相似。

@adamplitt

Adamplitt-a 之 Twitter上值得借鉴的背景范例与实践

Adamplitt-b 之 Twitter上值得借鉴的背景范例与实践

使用字体排版

在twitter背景上使用字体排版会显得与众不同;使用这种方式你可以设计出传递附加信息的又与众不同的个人资料页。

@dickieadams

Dickieadams-a 之 Twitter上值得借鉴的背景范例与实践

Dickieadams-b 之 Twitter上值得借鉴的背景范例与实践

@iamFinch

Finch2 之 Twitter上值得借鉴的背景范例与实践

Gallery-iamFinch 之 Twitter上值得借鉴的背景范例与实践

让显示的内容值得回味

计划性的摆放的元素与位置,你可以在背景上排列出令人回味的感觉,并将案例信息展示给你的读者。你可以创建一种氛围来展示你个人个性与额外的信息。

@sharebrain

Sharebrain-a 之 Twitter上值得借鉴的背景范例与实践

Sharebrain-b 之 Twitter上值得借鉴的背景范例与实践

@iamkhayyam

Iamkhayyam-a 之 Twitter上值得借鉴的背景范例与实践

Iamkhayyam-b 之 Twitter上值得借鉴的背景范例与实践

尽管做你想做的

将你的背景图做成有原创的、创意的、独特的来加强你的网上印象。尝试使用漂亮的个人插画,背景图片与字体排版。确保你的背景图有独立的个性,而不是看起来很普通。你的访问者会在首次访问时就感受到这点。

@ramesstudios

Gallery-ramesstudios 之 Twitter上值得借鉴的背景范例与实践

@NIK0_BELLIC

Gallery-NIK0 BELLIC 之 Twitter上值得借鉴的背景范例与实践

一些好的作品

我们已经讨论了一些关于twitter背景图的表现方式。下面是一些设计的比较好的网站,仅供大家参考。

@MdFilmFestival

Gallery-MdFilmFestival 之 Twitter上值得借鉴的背景范例与实践

@fragments77

Gallery-fragments77 之 Twitter上值得借鉴的背景范例与实践

@happytreefriend

Gallery-happytreefriend 之 Twitter上值得借鉴的背景范例与实践

@LoungeKat

Gallery-LoungeKat 之 Twitter上值得借鉴的背景范例与实践

@ellingson

Gallery-ellingson 之 Twitter上值得借鉴的背景范例与实践

@hootsuite

Gallery-hootsuite 之 Twitter上值得借鉴的背景范例与实践

@G_Obieta

Gallery-G Obieta 之 Twitter上值得借鉴的背景范例与实践

@willbryantplz

Gallery-willbryantplz 之 Twitter上值得借鉴的背景范例与实践

@grant_clark

Gallery-grant Clark 之 Twitter上值得借鉴的背景范例与实践

@hugeinc

Gallery-hugeinc 之 Twitter上值得借鉴的背景范例与实践

@JJunkins

Gallery-JJunkins 之 Twitter上值得借鉴的背景范例与实践

@Baldy67

Gallery-Baldy67 之 Twitter上值得借鉴的背景范例与实践

@thelaughbutton

Gallery-thelaughbutton 之 Twitter上值得借鉴的背景范例与实践

@bickov

Gallery-bickov 之 Twitter上值得借鉴的背景范例与实践

@jayjdk

Gallery-jayjdk 之 Twitter上值得借鉴的背景范例与实践

@nathanhoad

Gallery-nathanhoad 之 Twitter上值得借鉴的背景范例与实践

@robertomas

Gallery-robertomas 之 Twitter上值得借鉴的背景范例与实践

@mayhemstudios

Gallery-mayhemstudios 之 Twitter上值得借鉴的背景范例与实践

@ThirstEase

Gallery-ThirstEase 之 Twitter上值得借鉴的背景范例与实践

@cameronolivier

Cameronolivier-b 之 Twitter上值得借鉴的背景范例与实践

@studio3k

Studio3k-b 之 Twitter上值得借鉴的背景范例与实践

@sixreffie

Gallery-sixreffie 之 Twitter上值得借鉴的背景范例与实践

@TheTwiddict

Gallery-TheTwiddict 之 Twitter上值得借鉴的背景范例与实践

@mountainash

Gallery-mountainash 之 Twitter上值得借鉴的背景范例与实践

@Hallisar

Gallery-Hallisar 之 Twitter上值得借鉴的背景范例与实践

@mywayhome

Gallery-mywayhome 之 Twitter上值得借鉴的背景范例与实践

@TheArtificer

Gallery-TheArtificer 之 Twitter上值得借鉴的背景范例与实践

@webdude75

Gallery-webdude75 之 Twitter上值得借鉴的背景范例与实践

@colourofair

Gallery-colourofair 之 Twitter上值得借鉴的背景范例与实践

@jodyphillips

Gallery-jodyphillips 之 Twitter上值得借鉴的背景范例与实践

@emilychang

Gallery-emilychang 之 Twitter上值得借鉴的背景范例与实践

@ijustine

Gallery-ijustine 之 Twitter上值得借鉴的背景范例与实践

@boagworld

Gallery-boagworld 之 Twitter上值得借鉴的背景范例与实践

@collis

Gallery-collis 之 Twitter上值得借鉴的背景范例与实践

@chrisspooner

Gallery-chrisspooner 之 Twitter上值得借鉴的背景范例与实践

@webb_art

Gallery-webb Art 之 Twitter上值得借鉴的背景范例与实践

@Hicksdesign

Gallery-Hicksdesign 之 Twitter上值得借鉴的背景范例与实践

@rww

Gallery-rww 之 Twitter上值得借鉴的背景范例与实践

@ThemeForest

Gallery-ThemeForest 之 Twitter上值得借鉴的背景范例与实践

@technikwuerze

Gallery-technikwuerze 之 Twitter上值得借鉴的背景范例与实践

@Designfeedr

Gallery-Designfeedr 之 Twitter上值得借鉴的背景范例与实践

@Malarkey

Gallery-Malarkey 之 Twitter上值得借鉴的背景范例与实践

@Trenti

Gallery-Trenti 之 Twitter上值得借鉴的背景范例与实践

@zomigi

Gallery-zomigi 之 Twitter上值得借鉴的背景范例与实践

@carsonified

Gallery-carsonified 之 Twitter上值得借鉴的背景范例与实践

@WiliamAu

Gallery-WiliamAu 之 Twitter上值得借鉴的背景范例与实践

@wpbeginner

Gallery-wpbeginner 之 Twitter上值得借鉴的背景范例与实践

@brandonacox

Gallery-brandonacox 之 Twitter上值得借鉴的背景范例与实践

@inspiredmag

Gallery-inspiredmag 之 Twitter上值得借鉴的背景范例与实践

@guardiantech

Gallery-guardiantech 之 Twitter上值得借鉴的背景范例与实践

@DesignerDepot

Gallery-DesignerDepot 之 Twitter上值得借鉴的背景范例与实践

@carywood

Gallery-carywood 之 Twitter上值得借鉴的背景范例与实践

@designia

Gallery-designia 之 Twitter上值得借鉴的背景范例与实践

@_finderskeepers

Gallery-finders 之 Twitter上值得借鉴的背景范例与实践

英文出处:http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/

翻译版:http://davidw.me/translate/effective-twitter-backgrounds-examples-and-best-practices/

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)