Tony（作者）：Facebook最近在他們官方博客發(fā)布了他們改版的界面，并且官方已拋出此次改版的目的：新聞Feed流更易讀，更方便交流，更容易導(dǎo)航，內(nèi)容為核心，減少不必要的UI元素。

一般大公司產(chǎn)品改版，可能會帶著一些設(shè)計(jì)趨勢，我們作為UI/UX設(shè)計(jì)師當(dāng)然要多關(guān)注下，這次本著好奇心去研究分析下他們此次改版的視覺風(fēng)格、交互體驗(yàn)和老版本的一些細(xì)微的差別。目前新版本可以看到他們改版的風(fēng)格，大家可以下載更新體驗(yàn)下。

舊版首頁VS新版首頁

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

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

內(nèi)容卡片樣式

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

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

評論區(qū)域

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

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

導(dǎo)航

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

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

整體視覺分析

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

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

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

「通過改版，大幅提升商業(yè)價(jià)值的實(shí)戰(zhàn)經(jīng)驗(yàn)」

1. 《騰訊ISUX丨通過優(yōu)化，我們將QQ會員付費(fèi)用戶數(shù)提高了5倍！》
2. 《我用目標(biāo)導(dǎo)向設(shè)計(jì)法，完成了愛奇藝PC站風(fēng)云榜的改版設(shè)計(jì)》

原文地址：http://www.woshipm.com/pd/685123.html

原文作者：Tony

【優(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