近日，Facebook、Messenger和Instagram热门主流的国外应用软件对新闻流的设计进行了调整，Facebook在他们官方博客发布了他们改版一些界面，这次改版的重点是加入更多的线条，目的是使新闻Feed流更易读，更方便交流，更容易导航，以内容为核心，减少不必要的UI元素，吸引用户点击和评论。
对Facebook有所了解的朋友应该知道，它会周期性的升级自己的设计。目前为止Facebook界面中干净白色区域越来越多，其主要目的是降低用户的视觉疲劳，新内容的弹出时呈现的效果更舒适。他们一直努力想要给到用户最极致的体验。
一般大厂产品改版，可能会带着一些设计趋势，我们作为UI/UX设计师自然要多关注下，通过对比，分析他们此次改版的视觉风格、交互体验与之前版本的一些细微的差别，总结了一下供大家参考。
那么，Facebook的到底在哪些地方进行了优化？
一、旧版首页VS新版首页
首页视觉上变化最大的是图标上的优化和卡片式设计。
在视觉上：卡片拉通到两边，图标变为更加轻量的线性图标，图标整体呈线性，苹果今年刚推出的ios11的图标是面型，在这里facebook的图标是朝着另外一个方向走的，另外评论样式改为气泡。
在交互上：进入内容详情页动画更加顺畅，留言评论板块上的气泡点赞动效比较吸引人，表情动效，由长按选择改为长按后放手再去选择合适的表情
二、内容变为卡片式设计
Facebook为不同的内容流单独设计了6种卡片模式，分别是纯文字、大文字、图片、链接、视频、滚动类型卡片，通过不同图形模式来区分不同风格的内容，这样便于用户去快速识别。
在视觉上：评论区域圆形输入框，去掉了之前沉余灰色底，去掉了干扰了的分割线，视觉上更加聚集内容，图标视觉重量减轻，头像由之前方形变为圆形，相对来说留白空间要多一些，整体上看起来比较轻松有呼吸感，风格更加统一，更加人性化。
在功能上：点赞、评论和分享图标位置做了调整，放在了图片下面，这样图片和图标集中在一起，用户看完图片内容，觉得好，立马可以点赞或者评论。
三、评论区域
让评论区更加活跃是Facebook近期设计的主要目标。 在新的评论区中，Facebook用上了Messenger中的气泡设计，这样的设计看起来更加清晰，同时也鼓励用户快速的交流。
在视觉上：评论区域引用了苹果消息的气泡模式，相对来说文字内容信息更集中在气泡区域里面，功能图标在气泡外面。但是，假如一条信息超多文字的时候，视觉效果看起来似乎并不是很好。
在功能上：导航上文字居中显示了，这明显和安卓规范不一致，但是现在区平台化慢慢逐步形成，体量大的企业都想在一些微小的区域做一些体验上的提升，导航右边新增了一个更多icon，里面功能目前尚未得知，猜测应该有投诉等信息。
四、导航
评论区域最大的优化在导航这里，新版本中，导航栏和反馈按钮变得更大也更显眼了，防止用户在复杂的新闻流中迷失，用户还能在点击链接前获知网站的大致属性。 同时，Facebook在新闻流、视频、市场、点赞、评论和分享等按钮上也做了这种改变。
在视觉上：图标优化，视觉重量减轻，导航视觉重量减轻，并没有很强度品牌了，更多是以内容为主。
在功能架构：导航结构弱化，而是通过头像加一个返回箭头组合形成，目的是想用户更多的停留在这里和发布信息者更多互动。导航确实是一个非常重要的功能，改版后估计会有一部分用户不适应，那就后面等着用户反馈吧。
总结&设计趋势
Facebook整体改版上视觉是更加轻量，焦点色更加年轻、科技感、安全，去除一些多余的UI元素，如分割线，灰色底，突出用户更关心的内容，更加注重用户之间的互动。聚集内容，更加注重关心用户发布内容后的所得到反馈，评论区域和内容卡片着重优化设计。
从Facebook此次改版可以看出，扁平化流行到今天，设计方向发生了改变，更加聚焦内容，聚焦核心功能，关心用户。华丽的装饰不再有，多余的元素会被干掉，更多的是留白。平台规范越来越弱，品牌色不再是通过颜色来强调，从Facebook的二级页面导航可以看出，他们目前更加注重的是用户的心声，就像他们说的，希望用户华仔他们产品上的时间是有意义的。
知行办公，专业移动办公平台https://zx.naton.cn
团队签名：
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】狼行天下，897221533@qq.com；
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】喜乐多，42151960@qq.com；
【安全】保密，你懂的。
网友评论