當前位置:首頁 >  站長 >  網(wǎng)站運營 >  正文

怎樣玩轉響應式Logo設計 快速建立品牌形象?

 2017-10-24 14:22  來源: A5企業(yè)專欄   我來投稿 撤稿糾錯

  阿里云優(yōu)惠券 先領券再下單

隨著響應式設計趨勢的不斷發(fā)展,不少站長在研究響應式網(wǎng)站設計趨勢、響應式圖片或文本等方面很花心思,但卻常常忽略了怎樣讓網(wǎng)站Logo做到響應式。Logo是企業(yè)的重要標識之一,最直觀展示了一個企業(yè)的文化特色、價值取向,代表著公司的整體形象。如果網(wǎng)站的Logo無法做到響應式,在小屏幕等移動設備上可能會出現(xiàn)顯示不清的問題,這樣容易影響公司品牌形象在用戶心目中的樹立,難以發(fā)揮Logo在品牌宣傳等方面的作用。因此,怎樣做到Logo的響應式,讓它適應不同大小的屏幕、不同分辨率的設備是一個值得我們仔細研究的課題。

在今天這篇文章中,小飛將介紹響應式Logo設計的基本原則,從眾多實例中分析(包括Twitter、Facebook、Google等知名公司 ),教大家做好Logo的響應式設計。前面提到的這些公司在Logo的響應式設計方面都有著不俗的表現(xiàn),設計出了很多令人印象深刻、耳目一新的Logo,也正是這些Logo讓它們在移動設備市場上的競爭優(yōu)勢愈發(fā)凸顯出來,相信它們的經(jīng)驗能夠給大家提供一定的借鑒意義,讓大家能夠對Logo的響應式設計有一個全新的認識。一起來看看吧!

基本原則:簡潔性

相比復雜的事物,人腦更能記住簡單的,品牌Logo的設計也是一樣。簡潔性是響應式Logo設計最基本的思想和原則,它也是區(qū)別Logo設計優(yōu)劣的一個重要特征,很多高質、成功的品牌Logo都是簡單易懂的。

不過簡潔性這個概念并不是最新提出的,它在響應式網(wǎng)站設計興起之前就已經(jīng)廣為人知了。這一點我們可以看看Apple在1976年設計的Logo(下圖左側),它結合了牛頓受蘋果落地啟發(fā)悟出萬有引力定律的故事,看上去確實很有創(chuàng)意, 但是這個logo實在太復雜了,元素太多了。不出意外,第二年Apple就重新設計了一個Logo(下圖右側)。據(jù)說這是因為Steve Jobs強烈要求設計師設計出一個更加簡單、深刻、現(xiàn)代化的logo。盡管Apple新設計的Logo顏色比較多彩,但在接下來的三四十年中Apple公司一直沿用了整體的形狀設計。毫無疑問,Apple的Logo是歷史上最具辨識度和標志性的Logo之一。從這我們也可以看出,logo設計中簡易性的重要,如果Logo足夠簡單,它可以輕易適用于不同尺寸的所有設備。Apple的Logo幾乎算得上是響應式設計的完美范例,盡管幾十年前它主要針對的是網(wǎng)站的可用性。

下圖也是一個關于Logo簡潔性的栗子。左側是Great Lakes Golf的Logo,上面有很多元素(文字、線條、圖形),一眼看上去覺得很擁擠。而且在全屏顯示時,基本元素可以看清,但是如果它縮小50%,網(wǎng)站上球形已經(jīng)無法辨認了,這影響了品牌形象、重要信息特征的有效傳遞。而右側skype的Logo就很簡潔、干凈(主要就是字體),一目了然,更能讓人記住,在小屏幕的移動設備上進行縮放時它也可以完美適應,就算縮小到最小比例,Logo仍能呈現(xiàn)為可辨認的"S"字符。這兩個網(wǎng)站的對比讓我們看到了簡單的Logo設計的優(yōu)勢所在,簡單的Logo設計更加符合響應式網(wǎng)站的設計。

科技行業(yè)的范例:

Facebook

Facebook不愧為業(yè)界領先的巨頭,它緊跟響應式網(wǎng)站設計的潮流,注重Logo在不同設備上的一致表現(xiàn),一直在如何簡化公司Logo這個問題上不停探索。2013年,去掉了F下方的淡藍色線條,2015年,將字母a從雙層字體設計變成單層設計α,其他字母也進行了不同程度的改良,字母間的空隙也有所增大。這種改變可能并不大,但改良后的Logo卻更加圓滑,給人更友好的感覺,也方便在更小、更低分辨率的設備上識別。

Spotify

Spotify是一款流行的音樂服務軟件。2006年,Spotify的Logo還是spotify幾個字母加上一些波浪的元素,整體配色為黃綠色,不過這個Logo在小屏幕上展示時波浪元素不明顯,無法突出這個音樂軟件的品牌標識。因此,2013年,Spotify對Logo重新設計,將它簡化成黑色的spotify字母以及綠色的波浪圖標。后來Logo的配色又進一步微調,統(tǒng)一變成更為清爽的淺綠色。Spotify為什么要簡化網(wǎng)站Logo?背后的驅動力顯而易見:很多用戶開始通過手機、平板等移動設備來尋找想聽的音樂,做出響應式的網(wǎng)站還遠遠不夠,網(wǎng)站的Logo也需要靈活適應移動設備,這樣才能獲得較大的市場份額。

Google

Google在簡化Logo這方面也算得上一個典范。1998,谷歌正式成立時,公司Logo還是使用短粗的字體搭配紅色陰影,還帶有"!",算是向當時的搜索巨頭"Yahoo!"致敬吧。接下來的十年里,谷歌的Logo一直在進行微調,去掉感嘆號,字體逐漸變修長,陰影、高光效果越來越淺。

2013年,為了迎合扁平化的設計風潮,谷歌推出了新款Logo,其中最大的改變就是去掉了字母上的陰影效果。2014年,谷歌逐漸意識到單薄的襯線字體不能很好的適應響應式網(wǎng)站設計,所以它開始使用無襯線字體,讓Logo看上去更加簡潔,這算得上谷歌Logo很大的一次變動了。隨后谷歌又推出了緊湊版的"G"圖標,它與整體Logo的柵欄系統(tǒng)相同,四色的填充也確保了視覺的平衡感。從這一系列的改動之中,我們可以看出Google在Logo改動方面是比較保守謹慎的,但它一直致力于創(chuàng)造出更加簡單、更能與用戶互動的Logo。也正是因為Google的孜孜不倦,它才會在響應式迅速發(fā)展的今天依舊深受用戶的喜愛。

其他范例:

在科技行業(yè)公司簡化Logo設計的同時,其他領域的不少公司也開始了自己的Logo改良之旅。與將Logo簡化為單純的字母相比,它們更加傾向于一個扁平的、簡單的圖案。下圖就很好的證明了這一點,從左至右分別是Twitter,Nike,Apple,星巴克,Pinterest。

接下來小飛就以Twitter為例重點分析。還記得twitter過去使用的Logo嗎?圓形的字體以及小鳥圖案,Twitter對這個Logo不斷進行微調,去掉字體的外框,小鳥圖案更加扁平化,更加簡單,但整體變化不是很大。直到2012年,Twitetr發(fā)布了全新簡化版的Logo:更光滑,顏色更藍,羽毛更少。它放棄了"Twitter"的標志字,沒有任何字體進行描述。沒有什么比簡單的幾何圖案更加能表現(xiàn)Logo的簡潔性了吧!Twitter在發(fā)布這個新Logo的時候也宣稱:從今以后,Twitter就是這只小鳥,這只小鳥就是Twitter。這有利于公司建立自己的標志性象征物。

看到這里可能不少人會提出質疑,認為小飛列舉的都是一些比較成功的大公司,覺得并不是所有的網(wǎng)站都一定要簡化Logo。小飛承認,并不是每個公司都適合扁平化圖標或是無襯線字體的Logo,但是響應式設計的潮流趨勢不可忽視。由于移動設備的不斷興起,小飛相信所有的行業(yè)最終都會以這樣或那樣的方式迎合響應式的設計。以上這些公司能夠成功不也恰好明了他們采取的舉措順應了響應式發(fā)展的潮流,簡化Logo提高了品牌標識在移動設備上展示的靈活度,Logo的響應式設計拓寬了它們的市場,從PC端到移動設備。認為Logo設計完成就不應該改動的想法已經(jīng)過時了,現(xiàn)在Logo的響應式設計更加開放自由,從水平樣式到垂直重疊,從文字到簡單圖標,我們甚至可以改變Logo的整體配色讓它更好的適應深淺色不同的屏幕背景。

怎樣做好Logo的響應式設計?最重要的是把握簡潔性的基本原則,簡單的Logo設計不僅可以保持公司品牌的一致性,還能更好的適應不同大小屏幕的設備??烊ソo自己的Logo來個變身吧!快來起飛頁自助建站平臺做一個網(wǎng)站吧!

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關標簽
起飛頁建站

相關文章

  • 響應式網(wǎng)站中優(yōu)化用戶體驗的7個關鍵點

    隨著移動設備的不斷興起,響應式設計越來越受到大眾的喜愛,站長們在搭建網(wǎng)站時也更加傾向于選擇響應式網(wǎng)站。不過,大多數(shù)站長們都認為既然響應式網(wǎng)站可智能根據(jù)設備屏幕大小呈現(xiàn)不同的展示效果,那就不用再對移動端的網(wǎng)站進行手動調整了。其實這種看法是片面的,響應式網(wǎng)站雖然自身具備一定的特質,但有時PC端網(wǎng)站和移動

  • 盤點2017年最受歡迎的10個商城范例:我們從中可以得到哪些啟示?

    在電商和線上購物快速發(fā)展的今天,擁有一個商城網(wǎng)站很是必要,關于試水獨立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網(wǎng)站?》查看。但是,搭建商城網(wǎng)站并不簡單,慶幸的是目前市面上涌現(xiàn)了不少建站平臺,起飛頁自助建站平臺就是其中一個,各位商家可以借助起飛頁輕松搭建出一個好看、實用的商城網(wǎng)站。不過

    標簽:
    起飛頁建站
  • 讓首頁背景動起來是怎樣一種感覺?8張圖告訴你真相!

    現(xiàn)在越來越多的設計師開始在網(wǎng)頁中使用循環(huán)視頻作為背景,這種現(xiàn)象的出現(xiàn)主要有兩個原因。一方面,移動設備性能不斷完善,網(wǎng)速越來越快,用戶能夠且有條件在移動設備上瀏覽視頻背景的網(wǎng)站;另一方面,隨著HTML5技術的發(fā)展,很多主流瀏覽器的視頻標簽都支持循環(huán)(Loop)屬性,網(wǎng)頁上單個或一系列視頻短片的循環(huán)播放

    標簽:
    起飛頁建站
  • 缺乏靈感?給你8個值得每天學習的頂尖設計網(wǎng)站

    網(wǎng)站設計是一種藝術,它離不開靈感和創(chuàng)意。但靈感與創(chuàng)意的涌現(xiàn)是需要碰撞、需要時機的,大多數(shù)設計師都不可能每時每刻都靈感爆棚。當您缺乏設計靈感時,不妨看一看下面這些網(wǎng)站,它們都收錄了豐富的素材,都有許多獨立設計師上傳的優(yōu)質作品,沒準這些設計就能讓你眼前一亮,獲得一些想法或啟發(fā)。趕緊和小飛一起看看這8個值

    標簽:
    起飛頁建站
  • 目前為止用戶體驗度最好的表單:浮動標簽式的表單

    在當今這個互聯(lián)網(wǎng)時代,填寫表單對用戶來說就是家常便飯,在網(wǎng)站進行注冊登錄時、在網(wǎng)上購物時,都免不了填寫表單這一環(huán)。表單是網(wǎng)頁設計中重要的組成部分之一,在獲取用戶信息方面發(fā)揮著不可或缺的作用,它是用戶和網(wǎng)站的一種互動形式,這種形式的互動越順暢,網(wǎng)站的用戶轉化率就越高。這也是為什么許多站長們一直在研究如

熱門排行

信息推薦