2009年4月28日星期二

30款优秀Logo设计与分析

任何企业如果拥有一个抢眼的Logo对企业来说都是非常好的事,因为尽管Logo千千万,但真正设计的让人过目不忘的却是很少。精彩的Logo必须量体裁衣,迅速传递出企业的价值和理念!
1. Castle Print
一个打印机品牌,该Logo直截了当地体现了了企业的业务性质:利用减色模型,直指其打印行业背景,同时通过色彩的混合塑造出一个与其品牌相符的城堡(Castle)形象。

2. Ryan-Biggs
负空间的运动使得这幅Logo有一种奇幻的效果,完全考验你的空间想象力!B和R两个字母代表了这个品牌,微微的倾斜让整个设计看起来更有深度和立体感。色彩搭配极为简单—红色,赋予了Logo更广的使用范围。


3. One Leaf
One Leaf, 顾名思义,即一片树叶。以此为轴线,就呈现出了如此简洁巧妙的画面。


4. Greener
设计师用粗细不同的灯芯体(San-serif)字体塑造出一种现代感。该Logo不但层次感强,更重要的是可以用单一色调复制重现(这也是评判Logo好坏的重要标准之一)。


5. Talkmore
Talkmore字面意思是“多说点儿”。设计师采用象征的手法,用英文中的单引号分别代替字母“a”和“e”,从而在图形上给予品牌最鲜活的注解。


6. Black Sparrow
看上去很简单的图标,但在细节处理上却达到了极致。从麻雀(即Black Sparrow的中文)的图案到字体,柔和的曲线与平滑的字体相得益彰,将完整的设计融入品牌表现。


7. Swannie Lake
富有时代气息的Avenir字体配合平滑的图案,不但与该Logo完美贴合,而且增添了一许微妙的色彩。
8. Elara Systems
先介绍一下,Elara Systems是一个动画和动态模型工作室,也必然要求2D和3D的结合。体现在Logo上,就是大家所看到的效果:柔软弯曲的字体配上3D的字母“e”(即首字母),很好的创意。
9. Onwine
完美的字体搭配独到的理念,Onwine Logo为我们展现出一个酿酒商的特质,无论是图案还是字体设计都无可挑剔。
10. Popp
什么叫一气呵成?这幅Logo将基于同一字体的设计方法带上了全新的高度。每个字母都包含字母“O”,只是做了细微的改动就成了“P”,独具匠心。


11. Therauz Fashions
能看出这个Logo的绝妙之处吗?该公司从事时装设计业务,所以针线活是少不了的。画面中央的长针,不仅反映了公司业务,而且将中间一串字母给“缝”了起来,成了必不可少的一部分,内涵之深可见一斑。


12. Alatau
无论是字母还是彩色远点,共同的特点就是间距较大,这种手法带来的效果就是严肃而前卫。这样排列的好处还在于以中间两个字母中心,整个Logo看起来非常平衡。


13. Spiffy Sparrow
作品采用复杂的形状、线条和色彩,为以后的调整打好了基础。另外,用负空间来塑造鸟的躯干也是令人叫绝的地方。


14. About Thyme
干净利落的线条和形状,是Logo设计的固有套路。不过,本作品似乎摆脱了这样的条条框框:粗糙的手绘图案,给人以一种亲和力,也给体现了品牌所有者作为调味品公司的价值。


15. Ta Jevi
一个娱乐网站。Logo的每一部分都闪烁着欢乐感。箭头组成的笑脸传递出了这样的信息—欢乐无止境。跳跃的色彩和超酷的手写字更突出了该网站的娱乐价值。


16. Anti Particle
中文名—反粒子,是一家电影制作公司。这里有必要做个小小的科普,反粒子其实很简单,比如负电子的反粒子就是正电子,质子的反粒子就是反质子……好了,回 到Logo上,很明显,这又是一个用公司名做文章的范例。首先首字母“a”有无数颗粒组成,但里面恰恰有一颗蓝色颗粒,这就体现了“反粒子”的概念。


17. 69 Monos
不同于平面2D设计,有些Logo,就像69 Monos,通过3D效果给Logo增添深度和趣味。改变角度就能带来动感,何乐而不为?


18. Green Dolphin
Logo使用海豚(Dolphin)的轮廓和绿色来传递品牌信息,同时也隐藏了次级画面—即大写字母G。


19. Aramova
经典的莫比乌斯带(Mobius Strip)使用案例!柔软的质地+奇幻的色彩,整幅画面让人体会到永不停息的动感。


20. Vize
并不是所有的Logo都需要附属图案,比如我们看到的这个。虽然只有字体,但由于在排版上做足了功夫,Logo同样可以表达品牌的理念。

21. Friends in Places
交友网站,很明显。看似纷繁复杂的箭头构成了一幅世界地图,表现了互联网时代网络社交的全球性和广泛性,企业的品牌价值由此得到体现。


22. Koloroo
一款色彩方案的软件产品。随机的颜色搭配勾勒出了一只袋鼠的形象,这也符合其产品形象。字体设计同样出众,因此可以说,该Logo两部分合起来是精品,拆开来也是优秀的图案和文字标识。

23. Pangur
手工玻璃制造商。通常而言,透明的运用在Logo设计中是慎而又慎的,不过随着打印技术的改进,已经没有理由限制这种技法的使用了。设计师用不同色彩的玻璃碗进行简单堆砌,且呈现不规则倾斜,这恰恰抓住了玻璃手工艺的特点。Futura字体也给作品锦上添花。

24. Tammy Lenski
美国一家争端解决公司(比如劳资纠纷等等)。现在,搭上千纸鹤,来一趟意境之旅吧。大多数Logo都直截了当地反映目标企业的各个方面,然而这个设计却通过千纸鹤的故事和寓意来展现企业形象(编者注:之所以这么说,是因为西方人并不了解千纸鹤的含义)。


25. Eco Cafe
图案简洁又不是标识性,整幅作品看起来就像破土而出的生命。生态咖啡馆—该企业的名称—得到了最鲜明的宣示。而正因为标识本身的简洁,使得它贴在窗户上,也可以印在咖啡杯上。


26. Firefish
这又是一个运用流行技术—比如透明—塑造多层次标识的典范。火焰拼成的鱼(即Firefish,火鱼)搭配上经典的大写灯芯体(san-serif)字母,堪称一绝。


27. Boxbound
立体和透明同属当今Logo设计潮流,这幅作品同时运用了这两种技巧。生动的色彩加上浑圆可爱的字体,俨然一副基于网络的时代先锋形象。

28. AdMagik
看完这个Logo,你应该能学会用颜色区分信息。品红色部分突出了公司的名称“Magic”(魔术),而灰色字体暗示了该公司的身份,也是Logo的重点 所在,即“Ad”(广告)。最后,在字母J和I上做图,使之成为兔子的形象(编者注:兔子在西方是魔术的象征),再一次强调了企业点石成金的业务能力。





29. Jivespace
这个Logo用爆炸性的手法给人以强烈的视觉冲击,既有深度又充满活力,同时,全部小写字母的排版方式体现出其时代气息。

30. Core
和前面提到的“Popp”Logo类似,它也是基于一个形状延续下去,线条干净利落,颜色单一,该Logo的功能性可想而知有多么强大。


优秀网页设计应当遵守的十条原则

网页设计虽是设计的一种,但它并不完全是视觉设计网页设计必须“以用户为中心”为标准,用户不用的功能,就不该存在。 为了能够实现这样的原则,我们首先需要理解用户是怎样浏览网页的,是怎么思考的,行为的基本模式又是怎样的?

用户是怎么思考的?
通俗地讲,用户在互联网上的行为习惯与日常商店中的顾客们并无二样。来访者们扫视每个新页面,浏览其中的一些文本,点击他们最感兴趣的链接,或者隐约觉得能带他们找到他们想要内容的链接。事实上,页面的绝大部分,他们根本不看。
许多用户找寻感兴趣(或者他们觉得有用)且可以点击的信息,只要一些看起来符合期望的目标出现,用户就会去点击。如果新页面没有满足用户的期望,用户将点击“后退”,继续搜索。
用户看重质量和信誉。如果一个网站向用户提供了高质量的内容,用户就演绎忍受广告和糟糕的设计。这就是为何有些网站设计平平,但提供了高质量内容,就年复一年拥有着骄人的流量。内容重于形式。
用户不是阅读,而是浏览。用户分析一个网页的时候,寻找一些重要的节点或者锚点,目的是希望这些链接能够指引他们到期望的内容。

用户不是阅读,而是扫视浏览。主要“高亮”区域在页面内容的中间断开了

互联网用户是无耐心且必须立即被满足的。非常简单的原则:如果一个网站没有达到用户的期望,设计师的工作就失败了,公司也会有经济损失。认知负荷越高、导航越不直观,用户越倾向于离开这个网站,寻找它的替代品。
用户不做最优的抉择。用户不会寻找最便捷的方法找到他们需要的信息。他们也不是线性浏览一个网页,按顺序从一个站点跳转到另一个站点。相反,用户是很容易满足的,他们通常选择第一个让他们满意的选项。只要他们找到一个他们觉得能指向期望目标的链接,他们通常会立即点击。最优的抉择是有难度的,需要花费很多时间。满意即可非常高效。




两个图片都显示网页阅读模式是非线性。右下方路径图显示用户浏览一个网页的视线轨迹

用户遵从他们的直觉。在通常的情况下,用户杂乱无章地扫视而非阅读设计师们呈现的信息。根据Steve Krug的研究,最根本的原因是:用户不关心。“如果我们发现一些东西奏效,我们就会被吸引。这些东西是怎么运作的对我们来说不重要,我们只要能够使用它们就足够了。如果你的受众喜欢大的公告栏,就要做的就是设计一个更大的,公告栏。”
用户希望有可控感。用户想控制他们自己的浏览行为本身,且依赖网站呈现的连续的内容。例如,他们不想一个新窗口出乎意料地弹出,他们希望用“后退”按钮返回刚刚的页面;因此,从不在一个新的浏览窗口中打开超链接是一个好的行为。

1.别让用户思考
根据Krug的可用性第一原则,网页应当清晰且不言自明。当你创建一个网站的时候,你的工作就是避免问题——那些需要用户反复慎重考虑前因后果才能做出决定的选择。
如果网站的导航和结构不是直观的,产生的问题就会数量大增,且使得用户很难理解系统是如何工作的,怎样才能从A点跳转到B点。一个清晰的架构,中等强度温和的视觉引导,易于识别的链接,可以帮助用户找到实现目标的途径。



让我们来看一个案例。Beyondis.co.uk 宣称自己是“超越栏目,超越产品,超越分布”的。这是何含义呢?自从发现用户倾向于“F”模式的网页浏览习惯,以上提到“栏目、产品、分布”是用户浏览网页时,首先必见的三元素。
虽然设计本身非常简单且直观,但用户仍然需要去找寻才能明白这个网页是做什么的。这就是所谓的不必要的问题。设计师职责是要让问题降到0。具有视觉效果的解释已经放在右边。只要交换左右模块的位置,可用性就会增加。

ExpressionEngine 使用了与Beyondi非常相似的结构,但避免了不必要的问题。更进一步的是,宣传性的口号起到了效果,用户们会选择尝试服务,下载免费使用版本。
通过减少认知负荷,你可以使访客更容易获取系统背后的思想。只要你做到了这一点,你就可以理解为何这个系统是有用的,而用户又是怎样从中获益的。如果人们在你的网页上迷路的话,他们是不会使用你的网站的。

2. 别浪费用户的耐心
在任何一个你想向用户提供服务或者使用工具的项目工程了,尽量使你的门槛降低,对用户的要求减少。一项服务要求用户付出的越少,越有可能被一个随机进入的访者真正尝试。如果不用填那些他们以后都不会再次用到的长长的网页表格,首次来访的用户都会愿意尝试服务。请让用户自由浏览网页,让他们不用交换私人信息就能尝试你的服务。强迫用户填写电子邮箱地址来测试用户特征是不合理的。
正如37Signals team的开发者Ryan Singe所言,用户们如果在看到产品之后被要求留下电子邮箱地址的话,可能是愿意的,因此他们对于留下电邮的回报是有想法的。

Stikkit是一个用户友好的极佳例子,它清晰易懂,且几乎不向访客索取任何东西。这也是你在你的网站应当使你的用户体验到的。



很明显,Mite就索取很多。但是整个注册表可以在30秒之内完成——因为网页是横向的,用户不需要滚动页面。
如果要理想化地去除所有的障碍,首先就是不需要贡献些什么或者填写注册。仅仅一个用户注册表本身就足以阻碍用户在网站的随意浏览行为,且会对网站浏览产生很大不利影响。

3. 抓住用户的注意
因为网站都是通常既提供静态的内容又提供动态的内容,一些用户界面就会比另一些更加吸引人。很明显,图像比文本更吸引眼球——就好像加粗的句子比未加粗的更容易引起注意。
人类的眼睛是一个高度非线性运作的设备,网页用户能够直觉地识别边界、模式和运动。这是为什么视频广告特别容易引起反感,但是从市场营销的角度来说,他们的确完美地吸引了用户的注意。


Humanized.com很好地利用了焦点原理。这个页面上直接呈现给用户的视觉元素只有一个“free”,它非常地吸引注意力,当仍然非常简洁且信息传递单纯。细小的线索给用户提供了充分地信息去找到“free”的产品。
使用中等强度的视觉元素来将用户的注意力吸引到网页的特定区域,能够使你网站的访客不假思索地从A点轻松到达B点,忽略背后可能存在的逻辑关系。访客遇到的问题越少,就越会具有良好的方向感,且会更加信任这个网站呈现的公司。换言之:对于这个屏幕呈现的内容需要琢磨的越少,可用性的首要目标 ——用户体验,就会越好。

4. 尽量使特征明显呈现
当代网页设计总是嘲笑用鲜明视觉效果的大按钮指示用户:第一步——第二步——第三步……但是从设计的角度来说,这些元素事实上并非化石。相反的,这些导航是极其有效的,因为他们能够以一种非常简单和友好地方式带领网页的浏览者在网站内容间穿梭。

Dibusoft.com将视觉的宜人性和清晰的网站结构相结合。这个网张有9个主要的导航选择,都放置在一眼能够看见的位置上。尽管,这些导航的颜色也许有些太浅了。
让用户看清楚功能的合理性是成功用户界面的基准。这个是否达到了,实际上并不重要,重要的是内容是否被很好地理解了,而用户是否觉得他们与这个系统的交互非常舒服。

5. 有效书写
由于网站与打印出版史不一样,它需要与用户喜欢的书写方式相匹配,且与浏览习惯相契合。鼓吹浮夸的文字将不会被阅读。大段没有图像、标粗或者斜体关键字的文本将被忽略。夸张的语言将被忽略。
说正经的。避免太过于高校或者自作聪明的名字,市场导向的名字,公司名,或者不被树枝的技术名词。例如,如果你描述了一种服务,需要用户注册一个账户,“注册”比“就从这开始吧!”要好,而后者依然好过“探寻我们打服务”。

Eleven2.com直击要害。没有华丽的语辞,没有夸张的陈述。取而代之的是一个价格:这就是用户来此需要的。

有效书写的优化解决方案
使用简短的语句(直击要害,越快越好)
使用铺陈的方式(将内容分类,使用多层标题,用视觉线索和树状图)
使用平白直观的语言(一个宣传口号不用听上去像广告;给用户一些理性和客观的理由,让他们驻足在你的网站,享用你的服务)

6. 尽量简洁
“简洁”是网站设计的首要原则。用户们很少驻足一个网站是因为喜欢它的设计,通常情况下他们是在找寻他们需要的信息,当然设计为他们提供了寻找帮助。尽量简洁,而不是复杂。


Crcbus为网页访客提供了一个整洁简单的设计。也许因为它是意大利语的,你不能明白这个网站是干嘛的,但是,可以可以清晰地识别出导航,标题,内容区域和脚注。注意,图标都可以清晰地传递信息。只要将鼠标悬浮在图标上,更多的信息就自动呈现出来。
从用户的角度出发,好网页应当是一个纯文本的,没有广告的,新加内容与用户寻找目标密切相关的。这也是一个方便打印的网页带来用户良好体验的原因之一。

Finch清晰地呈现了网站信息,让用户在没有无关内容干扰的情况下,做出进一步浏览的选择。

7. 别怕留白
事实上,在网页上留出空白区域的好处怎么估计都不过分。它不仅使网页访客的认知负荷减少,而且更容易获取网页所呈现的信息。新用户浏览网页时要做的第一件事情,通常是扫视全页,将内容区域在心理上划分成合适的组块,然后再对信息进行加工。
复杂的结构不易于阅读,扫视,分析和使用。如果有两种选择,一是用明显的竖线将两个区域隔开,另一个是使用一些空白达到这种效果,通常比较好的选择是后者,即留出空白。分层减少页面复杂感(Simon法则):视觉上的层次感觉越好,你网页上的内容信息就越容易被获取。

空白区域是很好的。Cameron.io用空白区域作为设计的主打元素。这样就使得主要信息被层次鲜明地突出了。

8. 用“可视化”语言有效交流
Aaron Marcus在“有效的视觉表达”一文中,曾经提及过三个基本原则,其中一个就“视觉语言”,即用户在屏幕上所看到的内容。
组织:为用户提供清晰稳定的概念结构。一致性,页面布局,模块关系和页面导航是组织中的重要概念。同样的表达方式和规则适用于所有元素。
经济化:尽量少地使用视觉元素。简约、清晰、区别性和重点突出,这四个要点需要被权衡。简约的含义是:只有表达需要的重要元素才可以被呈现。清晰则指的是:所有的组件都应当与它们传递的意义相吻合,不要引起歧义或者表达含糊。区别性是非常重要的,它要求所有元素都应当是独一无二的。重点突出则是指:关键的元素要能够被认知轻易捕获。
表达:使用用户能力能够接受的表达方式。为了使得表达顺畅,用户界面必须在可读性,易读性,结构,象征性,许多的观点,颜色和材质效果之间来找到一种平衡。在一个页面里最多只能用三种字体,最多只能用3种字号——文本每行最多呈现18个字或者50-80个字符。

9. 规范是我们的朋友
使用传统的元素设计出的网站并非索然无趣。事实上,传统规范非常有用,因为他们减少了学习的周期且节省了去收集有效性的精力。例如,如果所有网站对于RSS源都启用不同的视觉特征,这将是可用性的一个梦魇。这与我们习惯于对数据规范整理,或者对于商场的货架规律摆放,并无区别。
如果你遵从规范,你将获得用户的信心,信赖,信任,且证明你的可靠。遵从用户的希望——理解他们对于一个网站导航、文字结构、搜索栏位置的期望,等等。(参考Nielsen: Usability Alertbox)

BabelFish in use: Amazon.com in Russian.

在可用性测试方面一个典型的例子是:将网页翻译成日语(假设你的网站用户不懂日语,例如,是使用Babelfish的),然后请你的可用性测试被试在异种语言的网页中寻找一些内容。如果规范被良好的遵从,那么用户是可以找到一些不适特别特殊的目标内容的,尽管他们对于这种语言一窍不通。
Steve Krug建议仅仅在你确认自己有一个更好的想法的时候再去创新,但是如果没有的话,好好遵守现有规范。

10. 早些测试,常常测试
TETO原则可被应用于任何网页设计,因为对于现有布局的重要的问题和细节,可用性测试总是能提供关键的洞见。
测试不要做的太迟,太少,或是为了不合适的理由而做。“不为了不合适的理由儿测试”的意思是,许多设计方面的决策是为着当下的,你不能普适性地宣布某些布局方式就一定优于其它,因为你需要从一个特殊的角度去权衡(考虑需求,投资者的利益,预算,等等)

一些要点需要牢记于心:
根据Steve Krug的研究,测试一个用户要比一个都不测好一倍,且在项目启动之初测试一个用户要比项目告罄的时候测试五十个要好得多。根据Boehm的法则一,错误在需求和设计活动中是非常常见的,而越迟被发现,代价就越昂贵。
测试是一个迭代的过程。这意味着你需要设计些东西,然后接着就测试它,修正它,然后再接着测试。也许第一轮不能发现一些问题,因为这些问题可能被其它问题所覆盖,用户们在其它问题上就已经被绊住了。
可用性测试总是带来有用的结果。无论是被指出现有网站存在的问题或者是没有触犯某些主流的设计错误,都会使您对于自己的项目做出一个有意义的审视。
根据Weinberg’的法则,网站的代码开发者不适合做为测试人员。这个原则同样适用于设计师。因为你对一个网站设计了相当长的时间,你已经不能够从一个全新的角度去审视它。你知道它是如何搭建的、如何工作的——你比独立的测试人员和网站访客们“知道的太多”。

怎样设计有效提高网站用户转换率?

本文从网站设计的角度上分析了一些取得用户信任、改善整体品牌形象、提高用户体验的方法,具有很好的启发意义!
1. 使用潜意识
简单来说就是在网站设计中更多地应用图片来间接传达一些信息。一些和产品无关的图片也可以改变用户对网站的印象,在潜意识中影响用户的消费欲。

2. 避免滥用产品比较
提供给用户选择权是好事,但如果强迫用户在过多的选项中作出选择时,可能会流失部分用户。如果必须要让用户作出选择,完全可以先推荐给用户一个默认选项,并且在视觉中强调出来。


3. 把真实产品展现出来
用户经常会“以貌取人”,一定要让用户能够想象出他们将来使用的产品长什么样。

4. 提供给用户试用产品的机会
延续了上一点所说的,提供试用机会是进一步提高用户参与度的做法。在你的产品质量OK的前提下,每一个认真试用的用户都会在作出是否购买的决定前有足够依据,并且已经成为一个花了时间和精力使用你产品的潜在客户。


5. 注意力、兴趣、意愿和行动
用出色的设计吸引用户注意力,通过产品简介让用户产生兴趣,告诉他们你的产品能带来什么好处来让用户产生购买的意愿和冲动,最后用便捷和清晰的流程帮助用户将消费意愿转化为购买行为。


6. 引导用户的浏览方向
在视觉和排版设计中多运用一些如箭头之类的元素,人们常常好奇箭头所指处的内容,所以引导用户一步步完成上一点所说的几个步骤,并且最后指向“注册”、“购买”等链接。

7. 永远要让用户有东西可点
在所有主要的及用户可能访问到的地方都要明显地告知用户接下来可以做什么、怎么做,并且留下可点击的按钮或者链接让用户采取进一步的行动。

8. 古腾堡法则
基本上就是从上到下、从左到右浏览顺序(希伯来和阿拉伯语系除外)。用户的视觉中心往往在页面的左上方,而最后结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并且采取行动。