YouTube在12年后終換 logo ,你可了解其背后的設(shè)計故事?

十二年后,YouTube 終于換 logo 啦!今天,本文作者將帶我們一起去了解這款產(chǎn)品背后的設(shè)計故事。enjoy~
在過去的十二年里,YouTube 的 logo 是由兩個過時的元素攪在一起組成的。YouTube 設(shè)計部門負(fù)責(zé)人 Christopher Bettig 說:
“我們把單詞 tube 塞進(jìn)了 tube 里(譯者注:tube 是管子的意思)。很奇怪是吧,其實(shí)沒有人看得懂之前的 logo 要表達(dá)什么?!?/p>
在美國,Tube 是電視機(jī)的俚語,因為以前的電視機(jī)里滿是 vacuum tube(譯者注:vacuum tube 是真空電子管的意思,一種電子元件)。但是,無論電視還是真空電子管,都不是世界上最大的視頻網(wǎng)站的核心?,F(xiàn)在 YouTube 每個月都為超過15億的用戶提供服務(wù),它幾乎可以通過互聯(lián)網(wǎng)連接到任何屏幕上。
當(dāng)下,YouTube 正在進(jìn)行一個史上最大的“變臉”計劃。YouTube 的 logo 已經(jīng)更新,將重心從單詞 Tube 移到家喻戶曉的播放鍵上。YouTube 的播放鍵已經(jīng)成為公司的一個標(biāo)志。YouTube 還采用了新的字體,配色方案,以及一系列針對桌面端和移動端的重大改進(jìn),涉及視覺設(shè)計,用戶體驗和產(chǎn)品功能。
用戶體驗研究員 Melissa Smith 在 San Bruno,CA 的 YouTube 辦公室展示新的移動端應(yīng)用功能。
雖然今天的 logo 改版是 YouTube 歷史上最重要的事,但它并不是徹頭徹尾的,并不像?Uber 把銀色的 U 改為反轉(zhuǎn)的 C?一樣。Bettig 說:
“這是一個革新,而不是革命?!?/p>
但是,公司也利用這一刻宣布了一系列的新功能,更新計劃和正在進(jìn)行的嘗試。 新 logo 是將這一系列動作拴在一起的捆繩,強(qiáng)調(diào)了 YouTube 從一個單一的視頻網(wǎng)站產(chǎn)品朝由跨平臺的不同產(chǎn)品組成的平臺的轉(zhuǎn)變。
YouTube 設(shè)計和交互團(tuán)隊在兩年前推出他們重新設(shè)計的界面時,面臨的挑戰(zhàn)是如何將眾多的產(chǎn)品與不同口味的觀眾,不同的使用場景結(jié)合在一起。這個在2005年為桌面互聯(lián)網(wǎng)用戶建立的網(wǎng)站現(xiàn)在已經(jīng)存在于手機(jī),平板電腦,游戲機(jī)甚至電視上了。并且,YouTube 不再是一個簡單的品牌。在過去的幾年中,它孵化了一系列服務(wù):YouTube Kids,Gaming,Red,TV,和 Music?!拔覀冇X得,由于這些不斷新增的服務(wù),原來的 logo 越來越難以涵蓋。 Bettig 說:
“我們希望設(shè)計一些更統(tǒng)一,更有凝聚力的東西,一些一看就是 YouTube 的東西。我們希望搭建一種視覺語言,使用戶可以輕松識別?!?/p>
Bettig 是一名法國人,六年前加入 Google,過去三年一直在 YouTube。他主導(dǎo)這次對 logo 的重新思考。由于 YouTube 正在逐步進(jìn)化為一整套服務(wù),并且已經(jīng)適應(yīng)了各種尺寸的屏幕和視頻格式,Bettig 和他的團(tuán)隊一開始嘗試了一個動態(tài)的品牌。
“我們有一個讓人輕松聯(lián)想起 Y 的符號,但它會伴隨動效持續(xù)變化,并從你在觀看的視頻中汲取顏色。 它可能從你在觀看的頻道拉出個人資料配圖或頻道封面。所以,這些動態(tài)的元素都是相互交叉的。“
當(dāng)設(shè)計師在工作室的白板上和簡單的手機(jī)應(yīng)用原型上做實(shí)驗時,這個點(diǎn)子很行得通。 Bettig 說:
“但是當(dāng)我們把這個點(diǎn)子放在產(chǎn)品里,就會亂七八糟,根本不奏效?!?/p>
一個布滿新 logo 和應(yīng)用界面的草圖的墻
最后,設(shè)計部決定保持簡潔。他們嘗試?yán)迷瓉淼?logo,基于這個 logo 多年以來已經(jīng)代表品牌,深入人心的形象。
“多年以來,播放鍵作為 UI 元素,居中出現(xiàn)在每個視頻的正面,成了一個非官方的 YouTube 象征?!?/p>
在用戶調(diào)研中,團(tuán)隊發(fā)現(xiàn)用戶在識別 YouTube 時,播放鍵和 YouTube 單詞本身效果幾乎一致。
“播放鍵自己偷偷發(fā)芽了?!?/p>
既然決定采用播放鍵加文字的方案,設(shè)計團(tuán)隊開始著手讓它們更現(xiàn)代化。Bettig 說:“之前 logo 上的文字字體是1903年的 Alternate Gothic No.2號,而且被人為調(diào)整過,所以有些奇怪的呆板的設(shè)計元素。Tube 中的 U 與 You 中的 U 不一樣,所以如果你把它們疊起來,會發(fā)現(xiàn)并不吻合?!辈シ沛I也有類似的問題,四個圓角并不相同。對于那些對設(shè)計敏感的人來說,這些年來設(shè)計在擴(kuò)展產(chǎn)品和支持新功能上并沒有起到作用。在 Bettig 三年前來這里時,YouTube 還沒有設(shè)計部?,F(xiàn)在,他和自己的團(tuán)隊有機(jī)會規(guī)整這些設(shè)計了。
?YouTube 的設(shè)計師 Robert Thompson 展示了一個記錄創(chuàng)意的筆記本
他們決定將原來的字體淘汰,并設(shè)計出自己的一套。 他們嘗試基于經(jīng)典的電視和錄像帶時代風(fēng)格的字體,和更現(xiàn)代的外觀來設(shè)計。 最后,他們采用保留了印刷時代的元素?!拔覀兿MA粢环N時代感。1903年被設(shè)計用于手動排版的印刷用字體,如今借助數(shù)字化平臺繼續(xù)發(fā)光發(fā)熱,突破了時代局限。”對于播放按鈕的新配色,團(tuán)隊嘗試在日常的媒體中尋找方案。最后他們決定采用#FF0000,Bettig 解釋到:“看著紅色,我們就會聯(lián)想到一些和視頻強(qiáng)聯(lián)系的事物。而且,這是一個純粹的紅,是視頻中 RGB 三原色里的紅”。
新的字體,logo 和配色于今天在 YouTube 的桌面端、移動端推出。當(dāng)前階段是希望新設(shè)計元素能夠有效滲透 YouTube 提供的所有服務(wù)中。Bettig說:“由于我們與主產(chǎn)品的差異,我們該如何在保持?jǐn)U張的同時清晰的傳達(dá)品牌,讓一個即使在隨意瀏覽應(yīng)用商店的用戶,也能一眼發(fā)現(xiàn) YouTube 的產(chǎn)品。“
隨著 logo 的更新,桌面端和移動端應(yīng)用也都更新了,新版本更符合?Material Design?的設(shè)計美學(xué)。視頻觀看和導(dǎo)航的設(shè)計主管 Robert Thompson 表示:“我們是個高耦合度的網(wǎng)站,這使 Material Design 成為構(gòu)建我們設(shè)計的絕妙基石。遷移到 Material Design 風(fēng)格意味著每個頁面上的投影,線框和表格都會減少。這有助于提高網(wǎng)站的可讀性和舒適度,將舞臺留給內(nèi)容?!毕裥碌?logo 一樣,向 Material Design 風(fēng)格的遷移,有助于給不斷增長的應(yīng)用群搭建一套通用的設(shè)計語言。
伴隨統(tǒng)一的設(shè)計,YouTube 也致力于為旗下不同的產(chǎn)品帶來一致的功能。比如今天在移動端上線的變速回放功能,之前只存在于桌面端。設(shè)計團(tuán)隊表示,手機(jī)上非常受歡迎的功能很快就會遷移到桌面端,他們已經(jīng)著手開始做了。比如移動端的迷你播放器,可讓你在瀏覽內(nèi)容的同時繼續(xù)觀看正在播放的視頻,桌面端的這個功能的已經(jīng)進(jìn)入測試環(huán)節(jié)了。
YouTube 網(wǎng)站隨著時間的推移發(fā)生的變化
如果 Bettig 的挑戰(zhàn)是統(tǒng)一 YouTube 不斷增多的應(yīng)用的外觀和風(fēng)格,產(chǎn)品團(tuán)隊的目標(biāo)則是即使用戶使用產(chǎn)品的方式一直在增多,也要確保他們在 YouTube 獲得最佳的體驗。產(chǎn)品副總裁 Manuel Bronstein 說:
“YouTube 起航于一個簡單的網(wǎng)站和低清晰的視頻。我們正處于一個人們在移動設(shè)備、平板電腦和電視上觀看高清視頻的時代。我們必須不斷優(yōu)化人們在不同設(shè)備和環(huán)境中使用產(chǎn)品的體驗?!?/p>
拿視頻橫寬比舉個例子。當(dāng) YouTube 剛開始時,它只支持橫向視頻。但是現(xiàn)在,內(nèi)容貢獻(xiàn)者上傳的視頻可能是縱向的或方的。這常帶來糟糕的體驗,因為縱向的視頻只占可用屏幕的一小部分。YouTube 的產(chǎn)品管理副總裁 Bronstein 說:
“我們都討厭一個小畫面配上兩邊黑漆漆的背景。”
正如 Bettig 和他的團(tuán)隊一樣,產(chǎn)品團(tuán)隊第一個想法就是創(chuàng)造一些動態(tài)的,讓使用場景帶來最棒的設(shè)計。他們采用了視差效果,你可以晃動手機(jī)來實(shí)現(xiàn)在豎著的視頻內(nèi)上下偏移。Bronstein 說:
“這個想法陣亡于和用戶的首輪接觸?!?/p>
相反,團(tuán)隊將播放器固定,把幾乎整個屏幕提供給原始比例的縱向視頻,只在底部留下一個小小的控件,如果用戶想要全屏的話可以自行關(guān)閉。如果縱向視頻播完后下一個視頻是橫向的或方的,那么播放界面會自動調(diào)整。
YouTube 的新視頻播放器,可以自動適應(yīng)縱向視頻
很多這些改版,從桌面端界面重構(gòu)到縱向自適應(yīng)功能,都已作為測試功能推出,推送給一小部分的用戶和自愿參加測試的。與任何大規(guī)模的在線服務(wù)商一樣,在保持穩(wěn)定飛行的同時更新飛機(jī)的部分零件。YouTube 知道自己一定要小心行事,以免惹惱數(shù)百萬通過創(chuàng)作視頻謀生的用戶,還有那些會被細(xì)微的布局或功能變動觸及底線的人。雖然它們不像閃亮的新 logo 那么有故事性,但這樣的改變往往考慮得更加深遠(yuǎn),將 YouTube 朝著原汁原味的移動端體驗持續(xù)優(yōu)化,符合時下大多數(shù)用戶和 YouTube 視頻服務(wù)的交互方式。當(dāng)然,YouTube 的最終目的是讓你看更多的視頻,在他的服務(wù)里停留更多的時間。一個功能越簡單,就越可能會有人用。
再講一個今年二月推出的新功能,即用戶可以通過雙擊屏幕來實(shí)現(xiàn)快退、快進(jìn)。有一小部分用戶習(xí)慣于雙擊播放器來查看視頻剩余時間,他們討厭這個總導(dǎo)致他們快進(jìn)快退的新功能。主管視頻導(dǎo)航設(shè)計的 Thompson 表示:
“直到我們大規(guī)模投放這個功能后我們才知道這事,聽到的都是投訴,完全沒有任何積極的反饋。當(dāng)我們停止實(shí)驗來調(diào)整這個功能時,我們被淹沒在要求將該功能回歸的反饋中。我們這才知道這個設(shè)計還是成功的。”
這個雙擊手勢現(xiàn)在每天被使用數(shù)十億次,上線沒多久就超過了播放器進(jìn)度條的使用頻率。
YouTube 正在嘗試一種移動端瀏覽視頻的新方法。只需向左滑動,YouTube 就會根據(jù)推薦算法提供新視頻,就像有著數(shù)不清的娛樂內(nèi)容的視頻自助餐。錯過一個自己感興趣的視頻?只要右滑即可找回。對于一個被數(shù)十個國家和數(shù)十種語言的15億用戶所使用的服務(wù)來說,尋找與用戶產(chǎn)生共鳴的手勢才是團(tuán)隊給產(chǎn)品帶來黏性的最佳方式。
“我們正在嘗試為所有的應(yīng)用構(gòu)建一個統(tǒng)一的語言,通過設(shè)計賦予這些應(yīng)用一致的元素?!癇ronstein 說,“我們始終致力于讓 YouTube 更加人性?!?/p>
原文作者:Ben Popper,Aspiring drone pilot and parenting robot.
原文地址:The Verge
譯者:徐小馬,Teambition 交互設(shè)計師
譯文地址:https://zhuanlan.zhihu.com/p/28925584
本文由 @徐小馬 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
很棒~但是最后一段向左滑動提供新視頻的功能我怎么沒找到?