特别声明：此篇文章由Sunnylost根据Hongkiat.com的英文文章原名《Everything You Need To Know About Facebook’s Latest News Feed Design》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.hongkiat.com/blog/facebook-news-feed-design/以及作者相关信息

——作者：Hongkiat.com

——译者：Sunnylost

在下文中，大部分地方没有对Feed这个词语进行翻译，而按照惯例将「News Feed」翻译为「信息流」。关于Feed的具体含义可参照：维基，或者百度百科。

——译者：Sunnylost

Facebook的最新改版与你息息相关。面对日益混乱的个人feed，Facebook试图采取一种新管理方式，它将所有你喜爱的feed放入一个称作“个人报纸”的地方，从这里你可以获取到名人、相关本地来源和你的社交圈的所有高质量内容。

在新设计的帮助下，你可以时刻关注话题的进展，也可以深入了解话题的精髓——Facebook的新设计允许你同时采取这两种方式。

新版Facebook会从Pinterest网站获取tip，将其推送到一个视觉上更具有冲击力的界面，把关注的重点从纯文本转移到图片上来。新版信息流能为我们提供更丰富的故事，更好的关于feed的筛选，和在桌面与移动Facebook之间更一致的用户体验。

接下来就是你关心的Facebook信息流最新设计的所有内容。

推荐阅读：更好的Facebook粉丝页面：基本的技巧、App与示例

——作者：Hongkiat.com

1.自定义信息流

在当前的Facebook信息流中，你真正关心的内容只占了40%。新设计将重点放在如何使故事的展现形式更生动。其中一个方式就是同时借助单张图片与完整的相册来实现更清晰、更震撼的视觉效果。

文章分享也全面改版，界面更加整洁、专业。文章摘要显示的更多，发布者的logo则更加醒目。

2. 更加容易的确定关系

放入时间线内的信息以一种更好的方式展现给来访者，有助于确定彼此之间的关系。个人照片变大，并且在对方头像右侧能查看到你和此人的共同好友。

所有能让你用于确定关系的信息都放在同一位置。页面、品牌与服务也同样如此。

3、签到更加紧密

在新的设计下，当你在某个位置签到后，你可以在地图上查看到该位置与它的介绍信息，这个点子棒极了。与其只依赖朋友的描述，现在你能够从一个清晰的照片中发现这到底是什么位置，你能够在哪里找到它。

这会更有效的使你朋友的旅行与你关联的更紧密。

4.记录你在第三方应用上做过什么的Logbook

喜欢Pinterest或者Spotify？Facebook能够帮助你记录你在这些应用上的动作，让你的朋友能够了解你在Facebook之外的活动。“把你在其他地方的活动分享给在Facebook上的朋友们”这样的重复操作现在可以由Logbook来完成，你还可以用它来将多个活动整合到一条feed中，使你的信息流看起来更加的统一。

5.突出的「多次分享」

如果相同的文章或视频被不同用户多次分享，它将不会重复的扰乱你的feed。在当前设计中我们已经解决了这个问题，但新的设计可以让你按照文章、视频左侧的好友头像顺序，进入到每个特定分享的单独对话中去。

6.简单的管理

除了文章和视频外，你还可以将同一作者的所有投稿，与一个话题或名人相关的所有头条新闻进行整合，这样访问起来就更为方便。在之前，这些内容很可能就是让你的feed变得混乱的罪魁祸首，但现在它们被聚合在一起成为一个更容易管理的设计。

Feed选择

1.Feed切换

在新设计中，你可以通过顶部右侧的切换进入到不同的feed。对于移动端，你只需要向下滑动屏幕就能找到你想要的feed。feed切换让你能够像使用报纸一样切换到不同版块(喜欢体育版块？那就翻到体育版块)。

借助于新设计，你甚至可以创建自己的feed，比如说你是一个狂热的游戏爱好者，那么你就可以创建一个游戏feed来获取所有关于你最喜欢游戏的最新信息。

2.所有好友

新设计还带来了一项旧的功能。我们恢复了「所有好友」，在这个单独的feed中，你能看到在你好友列表中的所有人的更新内容，它们全部按照时间先后排序。别担心，这还有一个单独的「亲密好友」feed，这样所有的排序对该feed依然有效。

3.音乐

你可以获得自己喜爱的音乐家的最新动态，例如在附近举办的演唱会或者新发布的专辑。当然在音乐版块里还包含了你的好友们在听的音乐。

这样在Facebook上，音乐家们就拥有了更宽广的渠道来发布他们的信息，相比而言在其他不那么流行的社交网络上则无法办到。

4.照片与页面

照片也有了自己的版块，你可以在好友们的手机或者是Instagram滤镜的帮助下，透过他们的眼睛来观察他们的生活。如果你关注了页面，这些内容将出现在同样的「关注」feed中，当你坐下并开始浏览，你将在同样的频道下看到按照时间顺序排列的所有图片。

5.Feed的优先排序

如果你经常进入音乐feed，该feed在你的feed排序策略(基于你最近交互的频率)中会自动获得更高的排名。因为你能够创建各种类型的feed，这将对你在Facebook上获得的信息带来更好、更个性化的管理。

移动端的一致性

1.全局导航

为了让Facebook在不同平台与不同尺寸的屏幕上拥有相同的外观与体验，新版设计在Facebook视图左侧增加了托盘功能。这个设计在平板电脑、智能手机与桌面电脑上是一致的。

这个设计避免了当你通过不同设备访问Facebook时对如何导航的重复学习。

2.新提醒，新外观

新故事的提醒也被重新设计，以简洁的气泡形式出现在feed顶端。这样当我们要访问新故事时，就不必滚动页面，也就不会忘记我们当前阅读到了哪里。

3.响应式设计

新的设计实际上来源于移动客户端，那种像在智能手机或者平板上在一个页面上不用回到首页就可以访问其他页面的这种模式现在被移植到了桌面系统上。

非常感谢@鬼懿群中的@Rong.l同学帮我理解这段话。非常感谢。

大漠

结论

等不及要尝试新界面了吧？加入候选名单，亲自体验新的Facebook。

整体效果，可以参照下面的缩略图：

特别声明：上图截取：https://www.facebook.com/about/newsfeed

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Sunnylost

08年开始自学java，09年加入北漂行列，从事Java Web工作，出于对JavaScript的喜爱，在2011年以外包身份进入新浪微博从事JS开发，目前就职于一淘。由于工作关系，逐步接触CSS，开始完善自身的前端技能。欢迎随时关注我：新浪微博

如需转载烦请注明出处：

英文原文：http://www.hongkiat.com/blog/facebook-news-feed-design/

中文译文：http://www.w3cplus.com/css/facebook-news-feed-design.html