YouTube 改版體現了移動優先設計的權威

2020-12-22 動點科技

YouTube 歷時數月的實驗室改版,終於在上周正式推送給所有用戶,過去幾個月間測試的桌面端和移動端改進,可以納入 YouTube 創立 12 年來最大的變革行列。

這樣說的理由是新版 Logo 的啟用。自從 YouTube 誕生以來,它的標誌一直沒有經過大幅的變動,這是目前為止最大幅度的改變。本次改版其他內容主要是桌面端符合 Material Design 設計語言,加入深色背景的夜間模式,移動端只有小幅更新。

不出我們所料,谷歌說這個標誌的最新變動,是為了適應在不同屏幕上面顯示的縮放效果。以前的文字為主體的標誌,在小屏幕上會看不清楚。

經過本次修改,YouTube 標誌分為圖標和文字兩個分離的部分,圖標可以單獨在更小的屏幕,或者是瀏覽器收藏夾圖標上使用,一樣可以讓用戶分辨清楚。

為小尺寸和低解析度設計是適應數碼時代的一個基本準則。因為 YouTube 一直沒有針對縮小的圖標設計官方版顯示方案,有做系統界面美化的設計師,自行的將圖標進行了修改,比如將 You 和 Tube 拆開上下排列,但這樣的圖標還是會在縮小後糊成一片。

最早揭示這一設計趨勢,並廣為人知的應該是 90 年代末的 BBC 標誌系統設計。三個簡單的正方形當中分別嵌入優雅的 Gill Sans 字體顯示的「B」「B」「C」字母,被國內部分網民戲稱為「我用畫圖都能做出來」的圖標,整個項目花了 180 萬美金。

然而在當年就能認識到數碼設備可能會導致低解析度顯示問題,並讓圖標靈活富有延展性,充分說明這個設計值這個價。

與此同時,桌面網頁版的新設計,或者不如講整個 Material Design 設計語言本身,也體現出了強烈的優先照顧行動裝置的特徵。響應式設計自然是應有之義,按鈕以及文字顯示的大量留白,無疑是適應了觸屏,特別是小屏幕觸屏的使用。

甚至於就連夜間模式本身,也是一種針對行動裝置的臣服。如果在桌面版設備上,因為多數都是白背景的界面,更好的方案是使用屏幕偏黃光的夜燈模式,而不是整體界面都變成黑底白字。在所有光源都取消,且屏幕尺寸不大的情況下,手持設備用黑底白字的界面同時降低亮度,才會讓眼睛更舒服。

Material Design 體現出「桌面版是移動版的從屬」這一設計思想,也就是對應了微軟現任 CEO 納德拉喊出來的口號——「移動優先」。對這句話的最通俗的解釋就是:以前,手機版是「縮小了的桌面網頁」,而現在桌面版是「放大了的手機 App」。

手機版相對的變化沒那麼大,但值得提到的一點是,現在可以不僅根據屏幕方向,更對應視頻本身畫幅的橫向或者縱向,來調節播放進度控制條所在的位置。

例如,視頻在拍攝時手機是豎著拿的,此時在橫屏播放,畫面就會蜷縮到中間一小條。而在手機端把播放界面豎起來,糟糕了,畫面變得更小了。現在就不會出現這個問題,豎屏下豎著拍攝的視頻會佔滿整個屏幕。

Snapchat 在推動這樣的變化過程中起了巨大的作用,它刻意的倡導使用豎屏,已經讓它的年輕人用戶群與其他的視頻網站及社交媒體明顯的區別開來。這也是 YouTube 為了與其競爭而想出的辦法,如此便可以更多保住 MCN 播主在平臺的活躍度。

僅從設計角度來說,幾年前「移動優先」體現為微軟的 Metro 設計語言的時候,還不被多數人理解,它跟微軟很多其他項目一樣都超前於時代。

當時人們覺得桌面版和移動版隔離的設計才是他們習慣的;移動版受限於流量必須簡單粗糙,桌面版則極盡華麗之能事。但現在「移動優先」幾乎成為一句「正確的廢話」,因為它變成了幾乎所有矽谷主流企業的常識。

今後,我們可能會在更多的國內外 App 看到實踐「移動優先」的案例,甚至不僅在設計上——也會有更多首先推出手機客戶端,甚至一開始連網站都沒有的產品。不過它們若有機會做大,還是會繼續做網頁版的;只不過那是為了方便更多不想下 App 的手機用戶,而讓 PC 瀏覽器能訪問到僅僅是無心插柳的副作用了。

本文 YouTube 改版體現了「移動優先」設計的權威來自動點科技.

相關焦點

  • YouTube改版:弱化圖標顯示,強化圖標輪廓
    youtube在最近的一次改版當中弱化了圖標的顯示,強化了圖標的輪廓功能。背後暗藏的深意到底是什麼?以兩個BLACKPINK視頻為例,你會發現以前是一個顯示圖標,現在是一個輪廓圖標編者認為有可能是要強化單獨功能的核心,也就是說明要讓用戶知道自己目前正在哪一個位置,哪一個功能區。
  • YouTube展示新版PC首頁設計 增加夜間模式
    新浪科技訊 北京時間5月3日消息,本周二,YouTube展示了改版設計,讓用戶預覽,該設計針對PC。預覽版設計只有全球的少數用戶能看到,YouTube只是想收集用戶的建議。如果你想欣賞新設計,可以點擊youtube.com/new,從帳戶菜單選擇「Restore classic YouTube」就可以回到現有設計。整體來看,新的桌面版YouTube設計與移動App更加相似。
  • 如何規範化做好設計改版
    對於工作1-3年左右的新人來說,實在沒有好的落地項目,拿改版設計練習來面試也是OK的,但前提是,你的改版練習確實是合情合理的優化。那如何規範化做好設計改版以及如何整理自己的思考方式甚至面試話術就顯得尤為重要,本篇文章將完整解讀一個優秀的改版練習到底要如何做,一起來學習吧!
  • 以實例講產品改版(下):需求與設計
    《以實例講產品改版方法論》系列,是一個時間跨度接近半年的全站改版大項目,留下的一點經驗,共分為兩個部分:上篇《改版的立項與推動實操經驗》;本文為下篇,主要講改版語境下的需求規劃與互動設計方法技巧。經過對需求池的分類統計,我們定義了原版web端最主要、優先級也最高的四大問題,大家可以參照上述原則看例子:首頁子欄目混亂,曝光欠缺。首頁、資訊詳情頁停留時長較短,跳出率高。
  • 移動社交時代,搜狗百科:給你一張權威的名片
    我們需要專業的資訊,需要更加權威、準確、豐富的信息,因此更加需要快速更新的百科詞條內容。搜狗百科產品於2017年中旬進行了全新升級改版,針對熱門的明星、影視、企業人物、高校百科等多個領域進行了百科詞條的升級優化,將設計移動化、信息多媒體化、知識信息圖譜化等多方面交互升級應用於百科產品之中。
  • 【設計資訊】YouTube統一PC端與移動端用戶界面風格,採用Material Design設計語言
    YouTube正在重新設計PC端的網頁視頻播放器,試圖統一其與移動端的用戶界面風格。新版播放器的設計遵循了Google目前的設計語言Material Design。原先獨立於視頻播放界面的純黑條塊,被重新設計為直接覆蓋在視頻畫面的透明條塊,控制條上的功能鍵也頗似Material Design按鈕的設計風格。
  • 國投官網移動版、英文版全新改版上線
    國投官網移動版、英文版全新改版上線 2020-04-30 20:47 來源:澎湃新聞·澎湃號·政務
  • WPS Office 移動端全新改版項目總結
    改版背景 Background Story 改版的原因是什麼? 在這次改版前,WPS Office 移動端由於平臺項目多年發展方向不同,在 Android 和 iOS 系統平臺下是截然不同的,功能操作和視覺風格都存在很大的差異。我們不是做一個工具,而是做一個辦公品牌。當向用戶介紹、推廣 WPS 產品的時候,拿出各端界面一致的產品,品牌歸屬感更強。
  • 百度百科首頁改版 學術委員會權威上線
    近日,全球最大中文百科全書百度百科推出了全新首頁,新版首頁不僅對欄目進行了全新的規劃和設計,對內容展現也進行了重大的梳理。在頁面設計風格方面,整體上更加協調統一,也更加清新簡潔。
  • YouTube統一PC端與移動端用戶界面風格,採用Material Design設計語言
    YouTube正在重新設計PC端的網頁視頻播放器,試圖統一其與移動端的用戶界面風格。 新版播放器的設計遵循了Google目前的設計語言Material Design。 除了界面設計的更改,PC端YouTube還在交互和功能設計上做了修改:第一,當視頻開始播放時,控制條將會消失,帶給用戶全屏的沉浸式觀影體驗,這和YouTube移動端的應用設計一致;第二,新增「稍後觀看」功能鍵
  • 陳佼:國內仿youtube視頻網站首頁分析
    恰好最近網易和奇虎已經完成首頁及各頻道的改版,而新浪和搜狐也正在對頁面進行調整,不知道它們又是憑什麼做「Face-Lift」的。  言歸正傳,本文重點是分析國內仿youtube視頻網站首頁的設計。按照目前這些站點的規模,肯定是都沒有SDS部門的了,不過這不妨礙網站的UI設計師們基於各種因素去揣摩用戶的喜好。
  • 從蝦米音樂的改版,看未來設計趨勢
    沒錯蝦米這次又大改版啦!哈哈~前幾次改版被吐槽,那麼,今天和大家一起看下蝦米改版中那些值得學習的點。先看下一系列版本變化蝦米從V.6.0.5 – V7.0 最大變化是產品內容變化和視覺風格改變,當然呢,也許是因為跟誰最新的蘋果風,最新版本的設計更加簡潔,輕量,呼吸感更強。
  • 微軟MSN 門戶改版,中文網新版明年上線
    基於「移動為先,云為先」的戰略,微軟對MSN門戶網站進行了全新改版。改版後,新門戶網站將聚合來源於世界權威媒體的優質內容和個人能效工具,幫助用戶實現更多價值。同時,無論用戶身處何地或使用什麼設備,都可以暢享新門戶網站提供的信息知識,洞察最新趨勢,豐富精彩生活。
  • 移動端網站設計:它是什麼及其重要性
    在創建網站以在行動裝置上獲得最佳用戶體驗時,在計劃項目之前,您應了解兩個關鍵的行業術語:響應式網頁設計和移動優先設計。 響應式網頁設計---成都雲思禾網絡運營 響應式網頁設計是一種設計和開發技術,旨在在儘可能多的設備和瀏覽器上為用戶提供最佳體驗。
  • Redesign:Lofter的信息架構改版設計
    信息架構,是互動設計師成長的一個關鍵點,也是互動設計大局觀的錘鍊基石。在做信息架構改版的時候分為前期調查,中期產出和後期評判。值得注意的是,在你開始著手做改版工作的時候很容易陷入其中而忘記思路,所以需要一個清晰的方法指導你完成整個改版設計而不迷失自己。除了上篇文章提到的在設計方案之前要做好需求分析,競品分析之外,還需要靈活運用各個研究方法,比較卡片分析法,用戶訪談,尼爾森十項原則等等,這些方法很好的幫助你完成你的設計,也讓你的設計更專業有理可循。什麼是信息架構?
  • 米大師web改版之設計總結
    本文作者將對本次的米大師web改版設計進行了總結,主要是針對已知問題,從三個方面進行解決。2、為什麼要改版?原版米大師web的後臺和前端還停留在09年,隨著接入業務增加,用戶的體驗問題也隨之出現。二、設計目標改版需要針對已知問題進行解決,設計主要從三個方面進行解決:
  • 逐幀分析youtube
    用最直觀的感受來解釋就是使用quic後網站的性能提升15%,弱網環境提升20%,如果你的用戶會頻繁的wifi 4g之間切換或者經常乘坐高鐵、地鐵高速移動,quic讓他們ip變更時不要重新建聯,這對視頻網站來說是非常有意義的提升。
  • 印象筆記移動端升級改版:界面更簡潔 操作更快捷
    4月24日,印象筆記APP完成了移動端(iOS端和Android端)的升級改版,以更加簡潔的互動設計和功能布局,提升用戶的信息處理體驗,讓記錄更便捷、筆記更簡潔、操作更快捷。隨著產品功能的不斷豐富,如何高效布局APP頁面空間、如何為用戶提供更便捷流暢的使用體驗,成為印象筆記產品團隊的重要任務,也是本次印象筆記APP移動端升級改版的出發點。
  • 百度百科個人中心全新改版 引領網絡知識時代
    截止2015年5月,百度百科已經收錄了超過1155萬的優質詞條,用戶數高達540萬人以上,幾乎涵蓋了所有已知的知識領域,並擁有多個領域的權威專家協助把關內容。如今「權威、豐富、時效性」的百度百科,已經成為全球最大的中文百科全書,並且開創了中文知識領域「詞媒體」的先河。
  • 力美移動廣告平臺網站全新改版
    北京2011年11月2日電 /美通社亞洲/ -- 中國領先的移動營銷解決方案提供商力美廣告傳媒旗下的移動廣告平臺力美平臺宣布,本著不斷汲取國內外先進移動廣告理念、不斷為平臺注入新鮮血液的原則,Lmmob 平臺網站已經全新升級改版上線。