當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  網(wǎng)站運(yùn)營(yíng) >  正文

怎樣玩轉(zhuǎn)響應(yīng)式Logo設(shè)計(jì) 快速建立品牌形象?

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

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

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

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

基本原則:簡(jiǎn)潔性

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

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

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

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

Facebook

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

Spotify

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

Google

Google在簡(jiǎn)化Logo這方面也算得上一個(gè)典范。1998,谷歌正式成立時(shí),公司Logo還是使用短粗的字體搭配紅色陰影,還帶有"!",算是向當(dāng)時(shí)的搜索巨頭"Yahoo!"致敬吧。接下來(lái)的十年里,谷歌的Logo一直在進(jìn)行微調(diào),去掉感嘆號(hào),字體逐漸變修長(zhǎng),陰影、高光效果越來(lái)越淺。

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

其他范例:

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

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

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

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

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
起飛頁(yè)建站

相關(guān)文章

  • 響應(yīng)式網(wǎng)站中優(yōu)化用戶體驗(yàn)的7個(gè)關(guān)鍵點(diǎn)

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

  • 盤(pán)點(diǎn)2017年最受歡迎的10個(gè)商城范例:我們從中可以得到哪些啟示?

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

    標(biāo)簽:
    起飛頁(yè)建站
  • 讓首頁(yè)背景動(dòng)起來(lái)是怎樣一種感覺(jué)?8張圖告訴你真相!

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

    標(biāo)簽:
    起飛頁(yè)建站
  • 缺乏靈感?給你8個(gè)值得每天學(xué)習(xí)的頂尖設(shè)計(jì)網(wǎng)站

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

    標(biāo)簽:
    起飛頁(yè)建站
  • 目前為止用戶體驗(yàn)度最好的表單:浮動(dòng)標(biāo)簽式的表單

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

熱門(mén)排行

信息推薦