徐小馬：在過去的十二年里，YouTube 的 logo 是由兩個過時的元素?cái)囋谝黄鸾M成的。YouTube 設(shè)計(jì)部門負(fù)責(zé)人 Christopher Bettig 說：“我們把單詞 tube 塞進(jìn)了 tube 里（譯者注：tube 是管子的意思）。很奇怪是吧，其實(shí)沒有人看得懂之前的 logo 要表達(dá)什么。“在美國，Tube 是電視機(jī)的俚語，因?yàn)橐郧暗碾娨暀C(jī)里滿是 vacuum tube（譯者注：vacuum tube 是真空電子管的意思，一種電子元件）。但是，無論電視還是真空電子管，都不是世界上最大的視頻網(wǎng)站的核心。現(xiàn)在 YouTube 每個月都為超過15億的用戶提供服務(wù)，它幾乎可以通過互聯(lián)網(wǎng)連接到任何屏幕上。

• 作者信息：
• 姓名：Ben Popper
• 介紹：Aspiring drone pilot and parenting robot.
• 原文：The Verge

當(dāng)下，YouTube 正在進(jìn)行一個史上最大的“變臉”計(jì)劃。YouTube 的 logo 已經(jīng)更新，將重心從單詞 Tube 移到家喻戶曉的播放鍵上。YouTube 的播放鍵已經(jīng)成為公司的一個標(biāo)志。YouTube 還采用了新的字體，配色方案，以及一系列針對桌面端和移動端的重大改進(jìn)，涉及視覺設(shè)計(jì)，用戶體驗(yàn)和產(chǎn)品功能。

△ ?用戶體驗(yàn)研究員 Melissa Smith 在 San Bruno，CA 的 YouTube 辦公室展示新的移動端應(yīng)用功能

雖然今天的 logo 改版是 YouTube 歷史上最重要的事，但它并不是徹頭徹尾的，并不像 Uber 把銀色的 U 改為反轉(zhuǎn)的 C 一樣。Bettig 說：

“這是一個革新，而不是革命。“

但是，公司也利用這一刻宣布了一系列的新功能，更新計(jì)劃和正在進(jìn)行的嘗試。 新 logo 是將這一系列動作拴在一起的捆繩，強(qiáng)調(diào)了 YouTube 從一個單一的視頻網(wǎng)站產(chǎn)品朝由跨平臺的不同產(chǎn)品組成的平臺的轉(zhuǎn)變。

YouTube 設(shè)計(jì)和交互團(tuán)隊(duì)在兩年前推出他們重新設(shè)計(jì)的界面時，面臨的挑戰(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。“我們覺得，由于這些不斷新增的服務(wù)，原來的 logo 越來越難以涵蓋。 Bettig 說：“我們希望設(shè)計(jì)一些更統(tǒng)一，更有凝聚力的東西，一些一看就是 YouTube 的東西。我們希望搭建一種視覺語言，使用戶可以輕松識別。”

Bettig 是一名法國人，六年前加入 Google，過去三年一直在 YouTube。他主導(dǎo)這次對 logo 的重新思考。由于 YouTube 正在逐步進(jìn)化為一整套服務(wù)，并且已經(jīng)適應(yīng)了各種尺寸的屏幕和視頻格式，Bettig 和他的團(tuán)隊(duì)一開始嘗試了一個動態(tài)的品牌。“我們有一個讓人輕松聯(lián)想起 Y 的符號，但它會伴隨動效持續(xù)變化，并從你在觀看的視頻中汲取顏色。 它可能從你在觀看的頻道拉出個人資料配圖或頻道封面。所以，這些動態(tài)的元素都是相互交叉的。“

當(dāng)設(shè)計(jì)師在工作室的白板上和簡單的手機(jī)應(yīng)用原型上做實(shí)驗(yàn)時，這個點(diǎn)子很行得通。 Bettig 說：“但是當(dāng)我們把這個點(diǎn)子放在產(chǎn)品里，就會亂七八糟，根本不奏效。”

△ 一個布滿新 logo 和應(yīng)用界面的草圖的墻

最后，設(shè)計(jì)部決定保持簡潔。他們嘗試?yán)迷瓉淼?logo，基于這個 logo 多年以來已經(jīng)代表品牌，深入人心的形象。“多年以來，播放鍵作為 UI 元素，居中出現(xiàn)在每個視頻的正面，成了一個非官方的 YouTube 象征。“在用戶調(diào)研中，團(tuán)隊(duì)發(fā)現(xiàn)用戶在識別 YouTube 時，播放鍵和 YouTube 單詞本身效果幾乎一致。“播放鍵自己偷偷發(fā)芽了。”

既然決定采用播放鍵加文字的方案，設(shè)計(jì)團(tuán)隊(duì)開始著手讓它們更現(xiàn)代化。Bettig 說：“之前 logo 上的文字字體是1903年的 Alternate Gothic No.2號，而且被人為調(diào)整過，所以有些奇怪的呆板的設(shè)計(jì)元素。Tube 中的 U 與 You 中的 U 不一樣，所以如果你把它們疊起來，會發(fā)現(xiàn)并不吻合。”播放鍵也有類似的問題，四個圓角并不相同。對于那些對設(shè)計(jì)敏感的人來說，這些年來設(shè)計(jì)在擴(kuò)展產(chǎn)品和支持新功能上并沒有起到作用。在 Bettig 三年前來這里時，YouTube 還沒有設(shè)計(jì)部。現(xiàn)在，他和自己的團(tuán)隊(duì)有機(jī)會規(guī)整這些設(shè)計(jì)了。

△ ?YouTube 的設(shè)計(jì)師 Robert Thompson 展示了一個記錄創(chuàng)意的筆記本

他們決定將原來的字體淘汰，并設(shè)計(jì)出自己的一套。 他們嘗試基于經(jīng)典的電視和錄像帶時代風(fēng)格的字體，和更現(xiàn)代的外觀來設(shè)計(jì)。 最后，他們采用保留了印刷時代的元素。“我們希望保留一種時代感。1903年被設(shè)計(jì)用于手動排版的印刷用字體，如今借助數(shù)字化平臺繼續(xù)發(fā)光發(fā)熱，突破了時代局限。”對于播放按鈕的新配色，團(tuán)隊(duì)嘗試在日常的媒體中尋找方案。最后他們決定采用#FF0000，Bettig 解釋到：“看著紅色，我們就會聯(lián)想到一些和視頻強(qiáng)聯(lián)系的事物。而且，這是一個純粹的紅，是視頻中 RGB 三原色里的紅”。

新的字體，logo 和配色于今天在 YouTube 的桌面端、移動端推出。當(dāng)前階段是希望新設(shè)計(jì)元素能夠有效滲透 YouTube 提供的所有服務(wù)中。Bettig說：“由于我們與主產(chǎn)品的差異，我們該如何在保持?jǐn)U張的同時清晰的傳達(dá)品牌，讓一個即使在隨意瀏覽應(yīng)用商店的用戶，也能一眼發(fā)現(xiàn) YouTube 的產(chǎn)品。“

隨著 logo 的更新，桌面端和移動端應(yīng)用也都更新了，新版本更符合 Material Design 的設(shè)計(jì)美學(xué)。視頻觀看和導(dǎo)航的設(shè)計(jì)主管 Robert Thompson 表示：“我們是個高耦合度的網(wǎng)站，這使 Material Design 成為構(gòu)建我們設(shè)計(jì)的絕妙基石。遷移到 Material Design 風(fēng)格意味著每個頁面上的投影，線框和表格都會減少。這有助于提高網(wǎng)站的可讀性和舒適度，將舞臺留給內(nèi)容。”像新的 logo 一樣，向 Material Design 風(fēng)格的遷移，有助于給不斷增長的應(yīng)用群搭建一套通用的設(shè)計(jì)語言。

伴隨統(tǒng)一的設(shè)計(jì)，YouTube 也致力于為旗下不同的產(chǎn)品帶來一致的功能。比如今天在移動端上線的變速回放功能，之前只存在于桌面端。設(shè)計(jì)團(tuán)隊(duì)表示，手機(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)隊(duì)的目標(biāo)則是即使用戶使用產(chǎn)品的方式一直在增多，也要確保他們在 YouTube 獲得最佳的體驗(yàn)。產(chǎn)品副總裁 Manuel Bronstein 說：“YouTube 起航于一個簡單的網(wǎng)站和低清晰的視頻。“我們正處于一個人們在移動設(shè)備、平板電腦和電視上觀看高清視頻的時代。我們必須不斷優(yōu)化人們在不同設(shè)備和環(huán)境中使用產(chǎn)品的體驗(yàn)。“

拿視頻橫寬比舉個例子。當(dāng) YouTube 剛開始時，它只支持橫向視頻。但是現(xiàn)在，內(nèi)容貢獻(xiàn)者上傳的視頻可能是縱向的或方的。這常帶來糟糕的體驗(yàn)，因?yàn)榭v向的視頻只占可用屏幕的一小部分。YouTube 的產(chǎn)品管理副總裁 Bronstein 說：

“我們都討厭一個小畫面配上兩邊黑漆漆的背景。”

正如 Bettig 和他的團(tuán)隊(duì)一樣，產(chǎn)品團(tuán)隊(duì)第一個想法就是創(chuàng)造一些動態(tài)的，讓使用場景帶來最棒的設(shè)計(jì)。他們采用了視差效果，你可以晃動手機(jī)來實(shí)現(xiàn)在豎著的視頻內(nèi)上下偏移。Bronstein 說：“這個想法陣亡于和用戶的首輪接觸。“相反，團(tuán)隊(duì)將播放器固定，把幾乎整個屏幕提供給原始比例的縱向視頻，只在底部留下一個小小的控件，如果用戶想要全屏的話可以自行關(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 朝著原汁原味的移動端體驗(yàn)持續(xù)優(yōu)化，符合時下大多數(shù)用戶和 YouTube 視頻服務(wù)的交互方式。當(dāng)然，YouTube 的最終目的是讓你看更多的視頻，在他的服務(wù)里停留更多的時間。一個功能越簡單，就越可能會有人用。

再講一個今年二月推出的新功能，即用戶可以通過雙擊屏幕來實(shí)現(xiàn)快退、快進(jìn)。有一小部分用戶習(xí)慣于雙擊播放器來查看視頻剩余時間，他們討厭這個總導(dǎo)致他們快進(jìn)快退的新功能。主管視頻導(dǎo)航設(shè)計(jì)的 Thompson 表示：“直到我們大規(guī)模投放這個功能后我們才知道這事，聽到的都是投訴，完全沒有任何積極的反饋。“當(dāng)我們停止實(shí)驗(yàn)來調(diào)整這個功能時，我們被淹沒在要求將該功能回歸的反饋中。我們這才知道這個設(shè)計(jì)還是成功的。“這個雙擊手勢現(xiàn)在每天被使用數(shù)十億次，上線沒多久就超過了播放器進(jìn)度條的使用頻率。

YouTube 正在嘗試一種移動端瀏覽視頻的新方法。只需向左滑動，YouTube 就會根據(jù)推薦算法提供新視頻，就像有著數(shù)不清的娛樂內(nèi)容的視頻自助餐。錯過一個自己感興趣的視頻？只要右滑即可找回。對于一個被數(shù)十個國家和數(shù)十種語言的15億用戶所使用的服務(wù)來說，尋找與用戶產(chǎn)生共鳴的手勢才是團(tuán)隊(duì)給產(chǎn)品帶來黏性的最佳方式。“我們正在嘗試為所有的應(yīng)用構(gòu)建一個統(tǒng)一的語言，通過設(shè)計(jì)賦予這些應(yīng)用一致的元素。“Bronstein 說，“我們始終致力于讓 YouTube 更加人性。”

「最近有哪些值得關(guān)注的改版？」

• 《超過10億人使用的FACEBOOK改版了，新版的設(shè)計(jì)細(xì)節(jié)都在這兒！》
• 《天貓APP 首頁迎來史上最大改版，背后的設(shè)計(jì)過程是這樣的！》
• 《我用目標(biāo)導(dǎo)向設(shè)計(jì)法，完成了愛奇藝PC站風(fēng)云榜的改版設(shè)計(jì)》

本文來自知乎專欄「非科班設(shè)計(jì)」，作者徐小馬。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com