SKYUI设计案例研究-Firfox Logo 重塑的秘密

#设计案例研究#“案例1：FirfoxLogo重塑的秘密：”“简化有的时候不光是减法，如有必要，也需要加法。”不同于其他行业，设计界的团体一直在致力于分享知识和经验，很荣幸我们有这样良好的学习环境，我们应该保持这种状态，信仰知识，渴望知识，乐于分享。#SKYUI设计#

FirfoxLogo的简化改版

今天我们来谈谈关于FireFox的Logo改版，Firefox通过此次Logo的简化，营造了一种适用性更好的浏览器形象。本文将简明的比较旧版和新版的不同。

何谓新，何谓旧？

2009-2013年Firefox的Logo可谓是了不起的艺术品。像是一种视觉上的进化，更精确的图形元素似乎像是一种宣言：我们要打造更有力、更新颖的浏览器——优秀的产品理念打造优秀的产品。那时候我每天都要用Firefox，感谢Mozilla的品牌理念，越来越多的用户加入了Firefox的使用中。

Firefox能帮助我和客户交互，通过视频、文字、界面的形式，表达的效果清晰而又漂亮。Firefox使用可缩放矢量图和颜色一致性的原则。文件传递、进行反馈都非常迅速精确。现在，Firefox通过重塑他们的Logo，来进行新一轮的品牌进化之路。

 

让Logo更简单

风格上的简化不意味着将图形打回基础的几何形状，然后使用纯色。实际上，简化应该是采用更协调的色调、更合适的比例、更完美的细节和形状来一点一点修正图像，去掉那些不必要的细节，强化核心上的细节。在此次简化中，确实是去掉了很多细节，但是也有增添，为了能够兼容现今高分辨率的屏幕。我们将图像制作成能够兼容SVG（可缩放矢量图）的形式，以便广泛的应用。

 

重塑Logo的第一步，就是去除细节，我们去掉了图层混合模式中一些诸如正片叠底、滤色、重叠的细节，这能体现在图中1尾巴处。

为了实现在可缩放矢量图中效果完美无瑕的这一目标，我们在内部架构上采用了SVG和CSS渐变。我们在图中2狐狸的背部模糊了形状，并且进行更柔和的渐变。然后继续剔除那些不必要的细节。为的是让整个图片更小，传达的形象更清晰。

在我们去除掉大量的细节之后，我们就开始考虑，哪些细节我们是需要强化的，尤其是在大尺寸的时候，如何将这些细节表现的更明显？StephenHorlander重新刻画了Logo里面3处的陆地轮廓。与此同时，我们去除了4处的高光，为的是将整个地球的色调变得更加柔和、更加深邃。加深地球的蓝色的同时，点亮5出狐狸头部的毛皮，这样深刻的对比关系就出来了。即使尺寸不同，这种对比也很明显清晰。

最后，你可能会发现新Logo中狐狸的整个肩部都伸出来了，而原来的只露出了手臂，首先，这传递了Firefox更加开放的姿态。其次，你仔细观察，会觉得新版Logo中狐狸与地球的联系更紧密，而旧版相较之下元素之间的联系显得生涩。

这就是FirefoxLogo重塑的秘密。记住，简化有的时候不光是减法，如有必要，也需要加法。