随着响应式设计趋势的不断发展,不少站长在研究响应式网站设计趋势、响应式图片或文本等方面很花心思,但却常常忽略了怎样让网站Logo做到响应式。Logo是企业的重要标识之一,最直观展示了一个企业的文化特色、价值取向,代表着公司的整体形象。如果网站的Logo无法做到响应式,在小屏幕等移动设备上可能会出现显示不清的问题,这样容易影响公司品牌形象在用户心目中的树立,难以发挥Logo在品牌宣传等方面的作用。因此,怎样做到Logo的响应式,让它适应不同大小的屏幕、不同分辨率的设备是一个值得我们仔细研究的课题。
在今天这篇文章中,小飞将介绍响应式Logo设计的基本原则,从众多实例中分析(包括Twitter、Facebook、Google等知名公司 ),教大家做好Logo的响应式设计。前面提到的这些公司在Logo的响应式设计方面都有着不俗的表现,设计出了很多令人印象深刻、耳目一新的Logo,也正是这些Logo让它们在移动设备市场上的竞争优势愈发凸显出来,相信它们的经验能够给大家提供一定的借鉴意义,让大家能够对Logo的响应式设计有一个全新的认识。一起来看看吧!
基本原则:简洁性
相比复杂的事物,人脑更能记住简单的,品牌Logo的设计也是一样。简洁性是响应式Logo设计最基本的思想和原则,它也是区别Logo设计优劣的一个重要特征,很多高质、成功的品牌Logo都是简单易懂的。
不过简洁性这个概念并不是最新提出的,它在响应式网站设计兴起之前就已经广为人知了。这一点我们可以看看Apple在1976年设计的Logo(下图左侧),它结合了牛顿受苹果落地启发悟出万有引力定律的故事,看上去确实很有创意, 但是这个logo实在太复杂了,元素太多了。不出意外,第二年Apple就重新设计了一个Logo(下图右侧)。据说这是因为Steve Jobs强烈要求设计师设计出一个更加简单、深刻、现代化的logo。尽管Apple新设计的Logo颜色比较多彩,但在接下来的三四十年中Apple公司一直沿用了整体的形状设计。毫无疑问,Apple的Logo是历史上最具辨识度和标志性的Logo之一。从这我们也可以看出,logo设计中简易性的重要,如果Logo足够简单,它可以轻易适用于不同尺寸的所有设备。Apple的Logo几乎算得上是响应式设计的完美范例,尽管几十年前它主要针对的是网站的可用性。
下图也是一个关于Logo简洁性的栗子。左侧是Great Lakes Golf的Logo,上面有很多元素(文字、线条、图形),一眼看上去觉得很拥挤。而且在全屏显示时,基本元素可以看清,但是如果它缩小50%,网站上球形已经无法辨认了,这影响了品牌形象、重要信息特征的有效传递。而右侧skype的Logo就很简洁、干净(主要就是字体),一目了然,更能让人记住,在小屏幕的移动设备上进行缩放时它也可以完美适应,就算缩小到最小比例,Logo仍能呈现为可辨认的"S"字符。这两个网站的对比让我们看到了简单的Logo设计的优势所在,简单的Logo设计更加符合响应式网站的设计。
科技行业的范例:
Facebook不愧为业界领先的巨头,它紧跟响应式网站设计的潮流,注重Logo在不同设备上的一致表现,一直在如何简化公司Logo这个问题上不停探索。2013年,去掉了F下方的淡蓝色线条,2015年,将字母a从双层字体设计变成单层设计α,其他字母也进行了不同程度的改良,字母间的空隙也有所增大。这种改变可能并不大,但改良后的Logo却更加圆滑,给人更友好的感觉,也方便在更小、更低分辨率的设备上识别。
Spotify
Spotify是一款流行的音乐服务软件。2006年,Spotify的Logo还是spotify几个字母加上一些波浪的元素,整体配色为黄绿色,不过这个Logo在小屏幕上展示时波浪元素不明显,无法突出这个音乐软件的品牌标识。因此,2013年,Spotify对Logo重新设计,将它简化成黑色的spotify字母以及绿色的波浪图标。后来Logo的配色又进一步微调,统一变成更为清爽的浅绿色。Spotify为什么要简化网站Logo?背后的驱动力显而易见:很多用户开始通过手机、平板等移动设备来寻找想听的音乐,做出响应式的网站还远远不够,网站的Logo也需要灵活适应移动设备,这样才能获得较大的市场份额。
Google在简化Logo这方面也算得上一个典范。1998,谷歌正式成立时,公司Logo还是使用短粗的字体搭配红色阴影,还带有"!",算是向当时的搜索巨头"Yahoo!"致敬吧。接下来的十年里,谷歌的Logo一直在进行微调,去掉感叹号,字体逐渐变修长,阴影、高光效果越来越浅。
2013年,为了迎合扁平化的设计风潮,谷歌推出了新款Logo,其中最大的改变就是去掉了字母上的阴影效果。2014年,谷歌逐渐意识到单薄的衬线字体不能很好的适应响应式网站设计,所以它开始使用无衬线字体,让Logo看上去更加简洁,这算得上谷歌Logo很大的一次变动了。随后谷歌又推出了紧凑版的"G"图标,它与整体Logo的栅栏系统相同,四色的填充也确保了视觉的平衡感。从这一系列的改动之中,我们可以看出Google在Logo改动方面是比较保守谨慎的,但它一直致力于创造出更加简单、更能与用户互动的Logo。也正是因为Google的孜孜不倦,它才会在响应式迅速发展的今天依旧深受用户的喜爱。
其他范例:
在科技行业公司简化Logo设计的同时,其他领域的不少公司也开始了自己的Logo改良之旅。与将Logo简化为单纯的字母相比,它们更加倾向于一个扁平的、简单的图案。下图就很好的证明了这一点,从左至右分别是Twitter,Nike,Apple,星巴克,Pinterest。
接下来小飞就以Twitter为例重点分析。还记得twitter过去使用的Logo吗?圆形的字体以及小鸟图案,Twitter对这个Logo不断进行微调,去掉字体的外框,小鸟图案更加扁平化,更加简单,但整体变化不是很大。直到2012年,Twitetr发布了全新简化版的Logo:更光滑,颜色更蓝,羽毛更少。它放弃了"Twitter"的标志字,没有任何字体进行描述。没有什么比简单的几何图案更加能表现Logo的简洁性了吧!Twitter在发布这个新Logo的时候也宣称:从今以后,Twitter就是这只小鸟,这只小鸟就是Twitter。这有利于公司建立自己的标志性象征物。
看到这里可能不少人会提出质疑,认为小飞列举的都是一些比较成功的大公司,觉得并不是所有的网站都一定要简化Logo。小飞承认,并不是每个公司都适合扁平化图标或是无衬线字体的Logo,但是响应式设计的潮流趋势不可忽视。由于移动设备的不断兴起,小飞相信所有的行业最终都会以这样或那样的方式迎合响应式的设计。以上这些公司能够成功不也恰好明了他们采取的举措顺应了响应式发展的潮流,简化Logo提高了品牌标识在移动设备上展示的灵活度,Logo的响应式设计拓宽了它们的市场,从PC端到移动设备。认为Logo设计完成就不应该改动的想法已经过时了,现在Logo的响应式设计更加开放自由,从水平样式到垂直重叠,从文字到简单图标,我们甚至可以改变Logo的整体配色让它更好的适应深浅色不同的屏幕背景。
怎样做好Logo的响应式设计?最重要的是把握简洁性的基本原则,简单的Logo设计不仅可以保持公司品牌的一致性,还能更好的适应不同大小屏幕的设备。快去给自己的Logo来个变身吧!快来起飞页自助建站平台做一个网站吧!