Firfox Logo的簡化改版

pythontab發表於2013-07-26

Firfox Logo的簡化改版

 今天我們來談談關於FireFox 的Logo改版,Firefox透過此次Logo的簡化,營造了一種適用性更好的瀏覽器形象。本文將簡明的比較舊版和新版的不同。

何謂新,何謂舊?

2009-2013年Firefox的Logo可謂是了不起的藝術品。像是一種視覺上的進化,更精確的圖形元素似乎像是一種宣言:我們要打造更有力、更新穎的瀏覽器——優秀的產品理念打造優秀的產品。那時候我每天都要用Firefox,感謝Mozilla的品牌理念,越來越多的使用者加入了Firefox的使用中。

Firefox能幫助我和客戶互動,透過影片、文字、介面的形式,表達的效果清晰而又漂亮。Firefox使用可縮放向量圖和顏色一致性的原則。檔案傳遞、進行反饋都非常迅速精確。現在,Firefox透過重塑他們的Logo,來進行新一輪的品牌進化之路。

讓Logo更簡單

風格上的簡化不意味著將圖形打回基礎的幾何形狀,然後使用純色。實際上,簡化應該是採用更協調的色調、更合適的比例、更完美的細節和形狀來一點一點修正影像,去掉那些不必要的細節,強化核心上的細節。在此次簡化中,確實是去掉了很多細節,但是也有增添,為了能夠相容現今高解析度的螢幕。我們將影像製作成能夠相容SVG(可縮放向量圖)的形式,以便廣泛的應用。

重塑Logo的第一步,就是去除細節,我們去掉了圖層混合模式中一些諸如正片疊底、濾色、重疊的細節,這能體現在圖中 1 尾巴處。

為了實現在可縮放向量圖中效果完美無瑕的這一目標,我們在內部架構上採用了SVG和CSS漸變。我們在圖中2狐狸的背部模糊了形狀,並且進行更柔和的漸變。然後繼續剔除那些不必要的細節。為的是讓整個圖片更小,傳達的形象更清晰。

在我們去除掉大量的細節之後,我們就開始考慮,哪些細節我們是需要強化的,尤其是在大尺寸的時候,如何將這些細節表現的更明顯?Stephen Horlander重新刻畫了Logo裡面3處的陸地輪廓。與此同時,我們去除了4處的高光,為的是將整個地球的色調變得更加柔和、更加深邃。加深地球的藍色的同時,點亮5出狐狸頭部的毛皮,這樣深刻的對比關係就出來了。即使尺寸不同,這種對比也很明顯清晰。

最後,你可能會發現新Logo中狐狸的整個肩部都伸出來了,而原來的只露出了手臂,首先,這傳遞了Firefox更加開放的姿態。其次,你仔細觀察,會覺得新版Logo中狐狸與地球的聯絡更緊密,而舊版相較之下元素之間的聯絡顯得生澀。

這就是Firefox Logo重塑的秘密。記住,簡化有的時候不光是減法,如有必要,也需要加法。


相關文章