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