淺析Facebook改版設(shè)計(jì)

6 評(píng)論 13940 瀏覽 74 收藏 7 分鐘

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

舊版首頁(yè)VS新版首頁(yè)

兩個(gè)版本初看,首頁(yè)視覺上變化最大當(dāng)然還是圖標(biāo)上的優(yōu)化和卡片。

  • 視覺上:卡片拉通到兩邊,圖標(biāo)整體優(yōu)化,更加輕量的線性圖標(biāo),評(píng)論樣式改為氣泡
  • 交互體驗(yàn)上:進(jìn)入內(nèi)容詳情頁(yè)動(dòng)畫更加順暢,留言評(píng)論板塊上的氣泡點(diǎn)贊動(dòng)效比較吸引人,表情動(dòng)效,不在是長(zhǎng)按選擇了,而是可以長(zhǎng)按后放手再去選擇合適的表情

內(nèi)容卡片樣式

Facebook為不同的內(nèi)容流單獨(dú)設(shè)計(jì)了6種卡片模式,分別是純文字、大文字、圖片、鏈接、視頻、滾動(dòng)類型卡片,就類似之前分析Spoify一樣,它們通過不同圖形模式來區(qū)分不同曲風(fēng)內(nèi)容,這樣便于用戶去快速識(shí)別內(nèi)容。

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

評(píng)論區(qū)域

評(píng)論區(qū)域修改是這次改版的重點(diǎn)區(qū)域,F(xiàn)acebook官方表示,這次修改評(píng)論區(qū)域的目的是為了用戶發(fā)表的動(dòng)態(tài)能夠獲得良好反饋,促進(jìn)用戶之間的交流。

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

導(dǎo)航

評(píng)論區(qū)域最大的優(yōu)化是導(dǎo)航的優(yōu)化,圖標(biāo)整體呈線性,蘋果今年剛退出的ios11的圖標(biāo)是面型,在這里facebook的圖標(biāo)是朝著另外一個(gè)方向走的。

  • 視覺上:圖標(biāo)優(yōu)化,視覺重量減輕,導(dǎo)航視覺重量減輕,并沒有很強(qiáng)度品牌了,更多是以內(nèi)容為主。
  • 功能架構(gòu):導(dǎo)航結(jié)構(gòu)弱化,而是通過頭像加一個(gè)返回箭頭組合形成,筆者猜測(cè),F(xiàn)acebook是想用戶更多的停留在這里和發(fā)布信息者更多互動(dòng),評(píng)論更貼蓋樓,但是導(dǎo)航確實(shí)是一個(gè)非常重要的功能,目前改版估計(jì)會(huì)有一部分用戶不適應(yīng),那就后面等著用戶反饋吧。

整體視覺分析

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

總結(jié)&設(shè)計(jì)趨勢(shì)

Facebook整體改版上視覺是更加輕量,年輕化,用戶目標(biāo)發(fā)生轉(zhuǎn)變,聚集內(nèi)容,更加注重關(guān)心用戶發(fā)布內(nèi)容后的所得到反饋,評(píng)論區(qū)域和內(nèi)容卡片著重優(yōu)化設(shè)計(jì),以下幾點(diǎn)根據(jù)facebook改版分析推測(cè)出來的一些設(shè)計(jì)趨勢(shì),改版方向。但是這些設(shè)計(jì)效果優(yōu)化是否都是另用戶滿意的呢?我們目前尚不可知道,只有等待用戶來評(píng)論。

 

作者:Tony,微信公眾號(hào):洞見設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂意幫助年輕設(shè)計(jì)師成長(zhǎng),簡(jiǎn)歷指導(dǎo),每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn),擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì),關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文由 @TONY 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感覺中國(guó)的設(shè)計(jì)師都太在意摳平臺(tái)規(guī)范,然后做出來都差不多的玩意兒

    來自廣東 回復(fù)
    1. 規(guī)范是讓你了解這個(gè)平臺(tái)的,用戶使用習(xí)慣,運(yùn)用規(guī)范要善于變通,合理運(yùn)用

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

    來自北京 回復(fù)
    1. 已經(jīng)更新最新版本呢,是最新方案,你去下載體驗(yàn)看下

      來自新加坡 回復(fù)
  3. 內(nèi)容有意義,但很多錯(cuò)別字。既然是投稿文章,上傳時(shí)還是審一遍吧。

    來自廣東 回復(fù)
    1. 好的,下次一定注意這些細(xì)節(jié)

      回復(fù)