facebook改版

Tony(作者):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一樣眨攘,它們通過(guò)不同圖形模式來(lái)區(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ì)來(lái)說(shuō)文字內(nèi)容信息更集中在氣泡區(qū)域里面,功能圖標(biāo)在氣泡外面至耻。但是這里有個(gè)問題若皱,如果一條信息超多文字咋辦,這樣看起來(lái)似乎并不是很好尘颓。頭像由之前方形變?yōu)閳A形走触,相對(duì)來(lái)說(shuō)留白空間要多一些,整體上看起來(lái)比較輕松有呼吸感疤苹。

功能架構(gòu):導(dǎo)航上文字居中顯示了互广,這明顯和安卓規(guī)范不一致,不過(guò)我們可以看出現(xiàn)在區(qū)平臺(tái)化慢慢逐步形成卧土,體量大的企業(yè)都想在一些微小的區(qū)域做一些體驗(yàn)上的提升惫皱,導(dǎo)航右邊新增了一個(gè)更多icon,里面功能目前尚未得知尤莺,不過(guò)已猜出應(yīng)該有投訴等等信息旅敷。

導(dǎo)航

評(píng)論區(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)弱化首量,而是通過(guò)頭像加一個(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è)出來(lái)的一些設(shè)計(jì)趨勢(shì)偶垮,改版方向。但是這些設(shè)計(jì)效果優(yōu)化是否都是令用戶滿意的呢帝洪?我們目前尚不可知道似舵,只有等待用戶來(lái)評(píng)論。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末葱峡,一起剝皮案震驚了整個(gè)濱河市砚哗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌砰奕,老刑警劉巖蛛芥,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件提鸟,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡仅淑,警方通過(guò)查閱死者的電腦和手機(jī)称勋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)涯竟,“玉大人赡鲜,你說(shuō)我怎么就攤上這事÷” “怎么了银酬?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)筐钟。 經(jīng)常有香客問我揩瞪,道長(zhǎng),這世上最難降的妖魔是什么篓冲? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任李破,我火速辦了婚禮,結(jié)果婚禮上壹将,老公的妹妹穿的比我還像新娘嗤攻。我一直安慰自己,他們只是感情好瞭恰,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著狱庇,像睡著了一般惊畏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上密任,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天颜启,我揣著相機(jī)與錄音,去河邊找鬼浪讳。 笑死缰盏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的淹遵。 我是一名探鬼主播口猜,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼透揣!你這毒婦竟也來(lái)了济炎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤辐真,失蹤者是張志新(化名)和其女友劉穎须尚,沒想到半個(gè)月后崖堤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡耐床,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年密幔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片撩轰。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡胯甩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出钧敞,到底是詐尸還是另有隱情蜡豹,我是刑警寧澤,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布溉苛,位于F島的核電站镜廉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏愚战。R本人自食惡果不足惜娇唯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寂玲。 院中可真熱鬧塔插,春花似錦、人聲如沸拓哟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)断序。三九已至流纹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間违诗,已是汗流浹背漱凝。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诸迟,地道東北人茸炒。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像阵苇,于是被迫代替她去往敵國(guó)和親壁公。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容