視覺形象改造是'面子工程'還是'產(chǎn)品驅(qū)動'
執(zhí)牛耳網(wǎng)編輯Aira 發(fā)表于 2017-05-16 16:33
閱讀數(shù): 13533

近來,不少應用都對自己的“臉面”動起了手腳——將Logo重新設(shè)計或調(diào)整,作為視覺形象改造邁出的第一步。
很多人可能對臉面工程并不在意,甚至嗤之以鼻,“改個Logo就能轉(zhuǎn)型成功了?”別說,還真能。“改頭換面”其實是對市場變化的敏銳察覺,或追求年輕化,或變得更設(shè)計感,這是產(chǎn)品革新內(nèi)驅(qū)力的外顯?! ?/p>

在傳媒領(lǐng)域,我們看到越來越多的移動閱讀產(chǎn)品、社交產(chǎn)品也在悄悄進行形象升級。今天,全媒派(qq_qmp)就來探究小Logo背后的大文章。
赫芬頓郵報改版 視覺形象重塑顯示改革決心
作為互聯(lián)網(wǎng)媒體的第一個探索者,赫芬頓郵報曾憑借其力推的公民新聞、博客評論體、UGC等新事物在本世紀初的第一個十年里迎來它的黃金時代,然而,當Buzzfeed等后起之秀崛起,赫芬頓郵報網(wǎng)站流量大幅驟減,其年輕讀者正在以驚人的速度流失。
于是,我們便看到,亟待轉(zhuǎn)型的赫芬頓郵報在其形象整形上大刀闊斧地開工了?! ?/p>

首先,一起來看看赫芬頓郵報此次改版,在視覺形象上都動了哪些手術(shù):
將曾經(jīng)的官方名稱“Huffington Post”替換為由讀者所取的更短、更時髦也更緊湊的昵稱“HuffPost”;
將有襯線細體字logo重新設(shè)計為顏色更淺的薄荷綠無襯線粗體字logo;
將原本的大寫字母H兩條豎線之間的橫杠變成向右傾斜的斜杠,以象征公司的不斷前進,并致敬第一份“互聯(lián)網(wǎng)報紙”的身份;
將原本的靜態(tài)logo改為可以插入HuffPost字樣的動態(tài)圖標以及可以與視頻內(nèi)容相切換的標識;

對于赫芬頓郵報12年來的首次視覺形象大手術(shù),Brand Union的CEO Sam Becker這樣評論道:“傾斜的無襯線樣式和粗硬的幾何形狀看上去就像是把這個品牌推向了小報的領(lǐng)域,但是對于赫芬頓郵報而言,它有足夠的影響力和歷史來重新定義這些外形變化的內(nèi)在涵義?!贝送猓珺ecker還認為,從logo的設(shè)計中,很明顯能看出赫芬頓郵報想要打造數(shù)字化品牌的野心,“新的名稱和新的視覺形象,是赫芬頓郵報為公司的下一階段發(fā)展鋪路的工具?!?/p>
不只是赫芬頓郵報,對于許多媒體而言,視覺形象的重塑常常都是其改革的第一步。在國外數(shù)字媒體和轉(zhuǎn)型媒體的視覺設(shè)計之中,都有哪些值得我們注意和借鑒的新趨勢?
這一波視覺革新釋放什么信號? 圖案+配色+頁面布局,越來越“輕”
去年開始,Instagram啟用新logo的消息被炒得沸沸揚揚。它以扁平化設(shè)計且顏色明亮鮮艷的圖標,取代了之前的棕色寶麗來相機圖標。同時,其家族旗下的其他應用也換上了統(tǒng)一風格的logo,其中包括Hyperlapse、Boomerang 和 Layout。
Logo:扁平化/漸變色/非襯線字體/動態(tài)化

由于跟微軟、蘋果、谷歌等APP的扁平化logo相似,有不少人都抱怨道,Instagram的新logo失去了原有的復古感?! ?/p>

除了新logo的扁平化特點,絢麗漸變的“彩虹色”也引起了不小的爭議,對此,Instagram公司設(shè)計負責人Ian Spalter表示,此次以彩虹為主題的圖標正代表著Instagram的多元化以及各種生活的色彩。
看到Instagram的絢麗彩虹色,讓人聯(lián)想到英國收視率最高的數(shù)字電視Freeview的新logo——

這配色,是不是有異曲同工之妙?
實際上,早在2015年,內(nèi)容平臺Medium就曾推出彩色漸變的新logo。在創(chuàng)立伊始,Medium的logo是一個又大又方、白底黑字、Stag 字體的大寫字母“M”。雖簡潔有力,卻顯得過于平淡沉悶,缺乏特點。在嘗試了各種“M”造型之后,Medium重磅推出充滿設(shè)計感的漸變色新logo?! ?/p>

作為一個點睛之筆,他們圓潤了“M”字母中的各個尖銳拐角,以確保用戶在視覺上不會產(chǎn)生不適感。此外,這個新Logo還應用了很多設(shè)計哲學,比如是否應該有透視、等距,或者中間是否要有投影等。Medium最終創(chuàng)造了一個覆蓋非常多不同尺寸和角度的范圍,以確保這個“M”能夠呈現(xiàn)出最穩(wěn)定又最賞心悅目的視角效果。

除了漸變色、扁平化的趨勢,縱觀媒體公司的logo更迭,把襯線字體改為非襯線字體,簡潔化logo中的單詞和圖形,logo是動態(tài)化,跨平臺、跨屏幕被認真考慮也是幾個重要的趨勢。除了已經(jīng)提到赫芬頓郵報,Google的新logo同樣是一個極好的例子。

相較于舊版本,采用非襯線字體的新logo俏皮、活潑,4個動態(tài)圓點可以表示語音輸入中“正在傾聽”的狀態(tài)或是搜索加載的過程,簡單的大寫字母G可以靈活地用在小屏幕上……這些改變都很容易被用戶接受。因此,在Google推出新logo之時,其遭遇的口水聲遠不及Instagram半分。
頁面布局:卡片式引領(lǐng)潮流
隨著信息碎片化問題的加劇,2014年,新媒體集團Vox曾推出一種新的頁面布局形式,即卡片堆(card stacks)。這種新型布局為用戶構(gòu)建起了一個完整的閱讀鏈條,通過建立標題精煉、易于瀏覽的索引式卡片堆,讀者能夠更快速、更方便地了解整個新聞事件

一時間,卡片式的頁面布局方式風靡了整個媒體界,半島電視臺旗下的數(shù)字新聞應用 AJ+在推出的第一時間便使用了這一全新的頁面布局方案。App界面以不同的資訊卡片形式為主顯示各類內(nèi)容,視訊卡片提供視頻新聞,圖像卡片采用圖形信息發(fā)布新聞。此外,還有對話與辯論形式的卡片,方便網(wǎng)友發(fā)表評論討論新聞價值。通過卡片堆棧的頁面形式,AJ+意圖吸引更多的年輕用戶,并為其提供一種深入挖掘主題信息的體驗?! ?/p>

看到這一新型頁面布局的發(fā)展?jié)摿?,許多傳統(tǒng)媒體在重新設(shè)計網(wǎng)站頁面布局時也對卡片式方案進行了嘗試。2015年,《連線》(Wired)雜志宣布對雜志網(wǎng)站進行全新改版。改版后的網(wǎng)站,瀏覽量與顏值齊飛。而網(wǎng)站上的內(nèi)容正是以卡片式形式呈現(xiàn),板塊被大刀闊斧的精簡,分為了Business, Culture, , Design, Gear, Science, Security,Transportation六部分,看上去清楚大方,一目了然?! ?/p>

界面配色:極簡or炫彩,滿足不同審美
自扁平化設(shè)計興起之后,媒體頁面極簡化愈發(fā)得到推崇。在配色上,黑白極簡風便大為盛行。
在Instagram去年的改版中,除去logo的變化,其內(nèi)部界面也發(fā)生了重大改變:UI元素變成了簡單的黑、白、灰三色,去除了藍色,使得視頻和照片更加顯眼。比起此前霸屏的色塊,這樣的黑白配色讓整體觀感也變得更為清新?! ?/p>

這樣的黑白極簡風迅速占領(lǐng)了界面配色的風口,眾多網(wǎng)站/APP都采用了這種單色調(diào)的設(shè)計風格,以突顯頁面中的具體內(nèi)容。

不過,好的配色絕不止有黑白極簡這一種。作為一家科技新媒體網(wǎng)站,The Verge在成立不到兩年后一舉拿下了五項被譽為“互聯(lián)網(wǎng)奧斯卡”的威比獎,它之所以能如此成功,就離不開其出“色”的網(wǎng)站設(shè)計。The Verge網(wǎng)站首頁平均分配4至8篇頭條新聞,不同的新聞通過不同的色塊進行區(qū)分?! ?/p>

文字元素:突出字體和色彩的功能性
在上文提到的The Verge網(wǎng)站中,其對字體功能性的運用也很值得稱道。比如網(wǎng)站的新聞標題會采用單獨設(shè)計的字體,增加辨識度的同時也能夠突出文章內(nèi)容。
The Verge網(wǎng)站的創(chuàng)始人Joshua Topolsky離開The Verge之后,進入了彭博社,而他的下一個作品,Bloomberg Business網(wǎng)站,同樣非常注重文字元素的功能性特點。
不過,這一次,除了字體的變化,Topolsky還在文字色彩上進行了大膽的嘗試。你看,這耀眼的藍色和粉色文章標題,確實能夠很好地與文章內(nèi)容形成區(qū)隔,不過爭議也不少,大膽之舉招來不少吐槽之聲?! ?/p>

然而,面對社交媒體上暴風般的吐槽,Topolsky表示,“有些人看到新網(wǎng)站瞬間嚇壞了,不過我認為,最好的新聞和最好的設(shè)計,在你第一眼看見它的時候都會覺得有一點兒不舒服?!?/p>
當然,堅持繽紛的文字元素的媒體不止Bloomberg Business一個。由雅虎發(fā)布的基于Summly的新聞APP Yahoo News Digest,其對于文字色彩的設(shè)置同樣追求功能性。例如,每條新聞之上會用不同顏色的文字來區(qū)分該新聞具體屬于哪一個特定領(lǐng)域,在每條新聞中,采訪對象的直接引語則用彩色字體進行突顯。正是這些別具心意的設(shè)計,使其一舉獲得2014年蘋果設(shè)計獎?! ?/p>

圖像+影音:一直在嘗試可視化
實際上,追求信息的可視化對于歐美媒體而言,并不是這幾年才追起來的風。由于人類大腦處理文字只能按照線性順序,速度較慢,許多國外媒體一直將視覺化傳播手段視為提升影響力甚至于開辟市場的利器。
HuffPost啟動圖像講述并展示當天最重要的新聞;
《洛杉磯時報》引入“視覺瀏覽”模式,讓讀者可以通過滾動圖片瀏覽新聞;
Yahoo News Digest的每篇新聞都由圖片+標題+新聞摘要構(gòu)成,用最直接的方式告訴讀者今天發(fā)生了一件什么事情;
《衛(wèi)報》設(shè)計出“收納箱”模式,將文字、圖片、視頻、表格和數(shù)據(jù)都集中在一起,形成一個個像“收納箱”一樣的信息模塊;
《時代》雜志改版后“影音”成重頭戲,網(wǎng)頁左側(cè)欄滾動播放最新資訊,中間部分設(shè)置要聞,而右邊則增加了視頻和專欄;

Yahoo News Digest頁面
這些媒體公司的信息可視化手段各不相同,但實際上都離不開對于影/像/音的精準把控——在這個時代,以文字為主的傳統(tǒng)傳播思路早已過時了。
視覺形象改造這股風如何刮起來?以用戶為轉(zhuǎn)移+跨屏體驗融合
在媒體生態(tài)急劇變動的當下,出生于1980至2000年間的“千禧一代”成為最受傳媒行業(yè)青睞的“利基市場”。這些聽膩了傳統(tǒng)媒體陳詞濫調(diào)的年輕人,是新聞媒體想要站穩(wěn)腳跟必須得攻下的高地。
新形象能吸引千禧一代嗎?
作為號稱“全球青年文化之聲”的全媒體公司,Vice Media在搶占年輕人市場上很有發(fā)言權(quán)。打開Vice中國的網(wǎng)站, 黑白灰的版面顏色,“一些想法”“你是吃貨行了吧”“他們沒法不獨行”“NOISEY”“這是歷史”這些符合年輕人表述方式的標簽,都能夠第一時間戳中年輕人的G點。

當媒體們蜂擁而來接連入局年輕人市場,也有不少摔了跟頭。2015年,《紐約時報》發(fā)布了題為《我們一路前行》(Our Path Forward)的內(nèi)部報告,試圖推出數(shù)字媒體品牌來贏得市場,卻不料這一舉措竟被網(wǎng)友們評價為像看到了“夜店里的爺爺”。看來,想要真正攻占“千禧一代”的心,像《紐約時報》這類老牌媒體可得跟Vice與Buzzfeed等新媒體多取取經(jīng)了。
移動端閱讀與跨終端融合
隨著手機和平板電腦的普及,“移動為先”以及統(tǒng)一不同平臺閱讀體驗的原逐漸成為新聞媒體視覺設(shè)計中的重要法則。
《連線》網(wǎng)站參考了其印刷版的排版方式?!坝∷骐s志給人‘高端’的感覺,我們認為網(wǎng)站也應該達到這種效果,” 主編Scott Dadich如是說,“設(shè)計完全從手機屏出發(fā),再依次兼容桌面、平板?!痹凇哆B線》的各個平臺上,色調(diào)、字體、版式和各種新功能的設(shè)置都大同小異。

而宣稱要實現(xiàn)手機、平板、PC端跨設(shè)備無縫對接呈現(xiàn)的《洛杉磯時報》,其新版網(wǎng)站的網(wǎng)頁設(shè)計則與iPad等平板設(shè)備的寬大方框外觀相呼應,打破了傳統(tǒng)博客網(wǎng)頁的束縛。由此,我們仿佛看到,若干年前許多報紙放棄老一套的版面設(shè)計,按照電視觀眾的口味重新設(shè)計自身版面的歷史,似乎又一次上演了。
探討外媒視覺設(shè)計新變化背后的深層動因,除了是要吸引千禧一代的年輕讀者,以及要追求移動端閱讀和跨平臺呈現(xiàn)的最優(yōu)化,還離不開其在互聯(lián)網(wǎng)時代追求商業(yè)變現(xiàn)和內(nèi)容融合進化的目的。在這些動力的共同作用之下,一場浩浩蕩蕩的媒體視覺設(shè)計改革正在全面展開。
0條評論