淺析Facebook改版設計

6 評論 13894 瀏覽 74 收藏 7 分鐘

Facebook最近在他們官方博客發布了他們改版一些界面,并且官方已拋出此次改版的目的,新聞Feed流更易讀,更方便交流,更容易導航,內容為核心,減少不必要的UI元素。一般大公司產品改版,可能會帶著一些設計趨勢,我們作為UI/UX設計師當然要多關注下,這次本著好奇心去研究分析下他們此次改版的視覺風格、交互體驗和老版本的一些細微的差別。目前新版本可以看到他們改版的風格,大家可以下載更新體驗下。

舊版首頁VS新版首頁

兩個版本初看,首頁視覺上變化最大當然還是圖標上的優化和卡片。

  • 視覺上:卡片拉通到兩邊,圖標整體優化,更加輕量的線性圖標,評論樣式改為氣泡
  • 交互體驗上:進入內容詳情頁動畫更加順暢,留言評論板塊上的氣泡點贊動效比較吸引人,表情動效,不在是長按選擇了,而是可以長按后放手再去選擇合適的表情

內容卡片樣式

Facebook為不同的內容流單獨設計了6種卡片模式,分別是純文字、大文字、圖片、鏈接、視頻、滾動類型卡片,就類似之前分析Spoify一樣,它們通過不同圖形模式來區分不同曲風內容,這樣便于用戶去快速識別內容。

  • 視覺上:頭像由方向變成圓形,評論區域圓形輸入框,風格更加統一,去掉了之前沉余灰色底,去掉了干擾了的分割線,視覺上更加聚集內容,圖標視覺重量減輕
  • 功能架構:點贊、評論和分享圖標位置做了調整,放在了圖片下面,這樣圖形化的元素集中在一起(指圖片和圖標),用戶看完圖片內容,覺得好,立馬可以點贊或者評論

評論區域

評論區域修改是這次改版的重點區域,Facebook官方表示,這次修改評論區域的目的是為了用戶發表的動態能夠獲得良好反饋,促進用戶之間的交流。

  • 視覺上:評論區域引用了蘋果消息的氣泡模式,相對來說文字內容信息更集中在氣泡區域里面,功能圖標在氣泡外面。但是這里有個問題,如果一條信息超多文字咋辦,這樣看起來似乎并不是很好。頭像由之前方形變為圓形,相對來說留白空間要多一些,整體上看起來比較輕松有呼吸感
  • 功能架構:導航上文字居中顯示了,這明顯和安卓規范不一致,不過我們可以看出現在區平臺化慢慢逐步形成,體量大的企業都想在一些微小的區域做一些體驗上的提升,導航右邊新增了一個更多Icon,里面功能目前尚未得知,不過而已猜出應該有投訴等等信息

導航

評論區域最大的優化是導航的優化,圖標整體呈線性,蘋果今年剛退出的ios11的圖標是面型,在這里facebook的圖標是朝著另外一個方向走的。

  • 視覺上:圖標優化,視覺重量減輕,導航視覺重量減輕,并沒有很強度品牌了,更多是以內容為主。
  • 功能架構:導航結構弱化,而是通過頭像加一個返回箭頭組合形成,筆者猜測,Facebook是想用戶更多的停留在這里和發布信息者更多互動,評論更貼蓋樓,但是導航確實是一個非常重要的功能,目前改版估計會有一部分用戶不適應,那就后面等著用戶反饋吧。

整體視覺分析

Facebook整體設計給人的第一印象是更加輕量,焦點色更加年輕、科技感、安全,不像之前舊版顏色比較重,去除一些多余的UI元素,如分割線,灰色底,更加突出用戶更關心的內容,更加注重用戶之間的互動

總結&設計趨勢

Facebook整體改版上視覺是更加輕量,年輕化,用戶目標發生轉變,聚集內容,更加注重關心用戶發布內容后的所得到反饋,評論區域和內容卡片著重優化設計,以下幾點根據facebook改版分析推測出來的一些設計趨勢,改版方向。但是這些設計效果優化是否都是另用戶滿意的呢?我們目前尚不可知道,只有等待用戶來評論。

 

作者:Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文由 @TONY 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺中國的設計師都太在意摳平臺規范,然后做出來都差不多的玩意兒

    來自廣東 回復
    1. 規范是讓你了解這個平臺的,用戶使用習慣,運用規范要善于變通,合理運用

      來自新加坡 回復
  2. 作者講的方案貌似不是 NewFeed 的最終上線方案,而是迭代方案,這個方案在 Feed 里來說不太符合用戶閱讀習慣。 ?

    來自北京 回復
    1. 已經更新最新版本呢,是最新方案,你去下載體驗看下

      來自新加坡 回復
  3. 內容有意義,但很多錯別字。既然是投稿文章,上傳時還是審一遍吧。

    來自廣東 回復
    1. 好的,下次一定注意這些細節

      回復