[译] 优化 Facebook 新鲜事,使其为您提供更好的服务

本文讲的是[译] 优化 Facebook 新鲜事,使其为您提供更好的服务,




从去年年底开始,我们就着手探索如何让新鲜事(News Feeds)更加易于阅读、易于交流和易于浏览。可以想象,为一个连接 20 亿用户的社区进行设计,可能会面临一些不同寻常的挑战。

作为将 News Feed 带到每天生活中的两个设计团队的管理人员,我们清楚地意识到,我们做出的任何改变都会在整个 Facebook 体验中产生共鸣。在与世界各地使用 Facebook 的用户沟通中,他们觉得 News Feed 变得很混乱、难以浏览。解决这个问题意味着需要优化 News Feed 的设计系统,这对于一个高度优化的产品而言,无疑是一个重大的挑战。一些类似额外像素的填充或者调整按钮的色调之类的小变化,可能会带来巨大的、意想不到的影响。

提高 News Feed 的可读性

我们的设计和研发团队坚持每天和真实的用户交流。日积月累,我们了解到用户最关心的是以下几点:

  1. 内容本身,例如分享的照片
  2. 分享内容的人
  3. 他们如何对正在浏览的内容留下反馈(像是评论或是交互操作)

带着从真实用户那里得来的反馈,我们深入分析了常见的 story 类型的结构。我们的想法是,将问题分解成一个一个的小问题,再从我们之前所完成的设计中确定一个能立刻满足我们用户的需求的选择。



改版前:这是在我们优化前现有的 News Feed 的 story 样式。

我们问自己,是否符合 3 个主要目标:

我们如何改进 News Feed 使其更易读阅读,并能与内容的主要部分区分开来?

我们如何让内容自身更具吸引力和沉浸感?

如何才能让用户更容易地留下反馈?

这些问题促使我们在设计 sprint 中不断地探索和实验,在两个设计师团队、研究人员和内容战略师中展开了为期一周的头脑风暴,并为新想法绘制原型。这次 sprint 的成品成为了一个指引,对形成未来的 News Feed 提供了很大的帮助。



我们设计 sprint 的第一版迭代更新的 story 样式

我们尝试了各种设计处理,以找寻机会去改进每种内容类型展示的方式。

  • 通过优化视觉层次结构、增加文字大小和颜色对比来增加 News Feed 详情的易读性
  • 通过改进图标样式、放大点击目标尺寸来帮助用户更好地理解 News Feeds 的操作并与之进行交互
  • 通过扩大内容展示区域、减少不必要的 UI 元素来提供更精彩的内容体验

我们的设计 sprint 都会有一个研究机会来验证我们的探索。在 sprint 中,我们确保把作品展现在真实的用户面前,来看看他们的反应。



第一轮测试的用户反馈。

通过几轮迭代和测试,我们了解到我们最初的一些设计方案有助于让界面整洁,但是诸如将文案放置在照片顶部、删除明确的文本标签等决定,又引发了新的易读性问题。每次迭代都让我们离最终的设计又进了一步,我们的目标是布局和板式更易使用而又不牺牲可理解性。



改版后:我们最后一轮的 News Feed 的 story 优化。

让评论更具对话性和吸引力

我们的目标是让人们容易参与到有意义的交流中去,让交流更为集中的同时产生更多的互动,并为人们提供更多元的表达自己的方式。我们现有的样式植根于留言板的风格,可供个人表达的方式大多相似且有限。当我们开始寻求其他评论样式时,很明显,消息传递设计范能够使人们比以前更好地进行交流。



以前的评论样式(左图)以及优化后的(右图)。

让 News Feed 详情间的浏览更容易

我们想改进的另一个方面是用户如何在整个系统间进入和离开 News Feed。根据内容类型,我们观察发现实验室研究中的用户打开他们的 Feed 后,仅仅只是陷于消费内容。我们也注意到,用户如何努力寻找「返回」按钮,而这是因为多年来我们与执行一致的功能可见性原则相违背。



以前的导航(左图)以及优化后的(右图)。

除了减少导航栏和 story 标题间的冗余之外,我们团队选择了在所有沉浸式视图中一致的返回可供性。我们还优化了从 News Feed 到 story 视图页的跳转,通过扩展内容显示区域,营造一种专注于情境的感觉。我们也改善了导航的手势,让用户可以滑动屏幕回到 News Feed。



我们将继续从这里开始构建系统,在 Facebook 没有什么事情「做完」过。作为 Facebook 的设计师,我们以用户为中心,所以我们着手以有意义的方式改进用户体验。这将是一个独特的设计挑战,因为我们不希望仅仅「在无关痛痒的地方瞎搞」,而是真正让数十亿人每天使用的东西不那么令人沮丧。我们会在新基础上继续学习、迭代和改进,但是我们希望这一步可以迈向更好的 Facebook 体验。

在这里,我想祝贺我们成功发版,并衷心感谢团队的每位成员!没有你们的巨大努力和牺牲,是不可能做到的。

还要感谢 Geoff Teehan、John Evans、Julie Zhuo、Lars Backstrom、Hady ElKheir、John Hegeman、Mark Hull、Adam Mosseri、Tom Alison、Chris Cox 和 Mark Zuckerberg,以及其他参与过这个项目的所有人,感谢你们提供的支持和咨询,并最终帮助推进项目上线。





原文发布时间为:2017年8月29日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-10-23 19:22:54

[译] 优化 Facebook 新鲜事,使其为您提供更好的服务的相关文章

优化eMule配置使下载占用更少系统资源

  eMule电驴已经成为世人皆知的P2P下载软件.但通常这款软件占用系统资源比较多,尤其是同时下载大量资源的时候.通过下面一些设置可以优化eMule的资源占用.点击"选项"菜单,进行如下设置: 常规: 1) 不要选中"显示欢迎窗口" 显示: 1) "进度条样式"滑动至扁平. 2) 不要选中"在标题栏中显示传输比例". 3) 不要选中"在分类标签上显示下载信息". 4) 选中"禁用已知客户列表&q

[译] SQL 指引:如何写出更好的查询

本文讲的是[译] SQL 指引:如何写出更好的查询, 原文地址:SQL Tutorial: How To Write Better Queries 原文作者:Karlijn Willems 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:临书 校对者:steinliber, xiaoyusilen SQL 指引:如何写出更好的查询 结构化查询语言(SQL)是数据科学行业的一种不可或缺的技能,一般来说,学习这项技能是相当简单的.然而大多数人都忘记 SQL

[译] 优化 Swift 的编译时间

本文讲的是[译] 优化 Swift 的编译时间, 原文地址:Improving Swift compile times 原文作者:John Sundell 译文出自:掘金翻译计划 译者:Deepmissea 校对者:atuooo,1992chenlu 优化 Swift 的编译时间 在 Swift 所有的特性中,有一件事有时会相当恼人,那就是在用 Swift 编写更大规模的项目时,它一般会编译多久.尽管 Swift 编译器在保证运行时安全方面做的更多,但是它的编译时间要比 Objective-C

【译】使用 currentColor 属性写出更好的 CSS 代码

本文讲的是[译]使用 currentColor 属性写出更好的 CSS 代码, 总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持,但却很少被开发者使用. currentColor 就是这样的属性之一. MDN 把 currentColor 定义为: currentColor 代表了当前元素被应用上的 color 颜色值.它允许让继承自属性或子元素属性的 color 属性为默认值而不再继承. 在本文中,我们将通过一些有趣的方式来概述如何使用 CSS currentColor 这一关键

[译] 在 Facebook 发一张登机牌,你就有可能被盗号了

本文讲的是[译] 在 Facebook 发一张登机牌,你就有可能被盗号了, 原文地址:Post a boarding pass on Facebook, get your account stolen 原文作者:Michal Špaček 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:lampui 校对者:Tina92. zhangqippp 假期正在火热地进行中,当你想要晒晒自己去了哪儿的时候,留心自己发上 Facebook 或 Instagram

3种使公司业务效率更高的办法

工作环境正在历经着变迁已不是什么秘密.我们该如何工作.如何完成团队协作.又该如何相互交流?的确,现如今我们的工作被越来越多的被日新月异的高科技工具来代替,以提高我们的工作效率.然而,当我们陷入与电子邮件为伴后为什么会和现实的工作越来越远?我们到底失去了什么?前不久,一些企业领袖从美国各地聚集在芝加哥,参加芝加哥创意周的活动.在此,他们讨论了该如何在未来的工作中做得更好.更有效率.接下来,我们将向你介绍,他们提供的摆脱在办公室里低效工作的秘诀.贾斯延·罗森斯泰因,是旧金山Asana软件公司的创始人

Photoshop如何优化图片后在浏览器里更快打开显示

  很多做淘宝的朋友都遇到过,别人发的淘宝图片显示很快,而自己做的显示特别慢,如果网速慢的话,根本打不开,直接影响了店铺生意,现在教大家Photoshop如何优化图片后在浏览器里更快打开显示的方法,希望能对大家有所帮助! 工具/原料 Photoshop 方法/步骤 1.首先,我们下载安装Photoshop,然后选择一张需要优化的照片,点击"文件"→"打开"(也可以按快捷键Ctrl+O),今年是羊年嘛,小编选了一张喜庆的图片,祝大家羊年吉祥.大家可以仔细看一下图片尺寸

深度Facebook定制 HTC G15网购更优惠

[PConline上海站行情] 虽然定位中低端,但是HTC G15无论是外观还是配置都显得较为不错.其搭载有高通800MHz处理器,标配双核512MB内存,在1500元级的手机中可以说是较为不错.方正的机身显得更为阳光,内置了HTC Sense 2.1界面,上手简单,深度定制的Facebook功能在国内基本没有作用.3月27日,HTC G15商家报价为1550元,需要的朋友不妨关注. 上海手机最新价格变动表型号之前报价(元)现价(元)升跌(元)备注HTC G151550水货采集日期:2012年3

怎样将交付物打造的直观易懂,使它们具有更强的沟通能力

摘要: [编者按]本文作者Barnabas Nagy ,译者@C7210.Barnabas是一名拥有六年从业经验的UX设计师.信息架构师,其对用户体验设计的交付提出一点:你的合作伙伴未必会看懂你的交付. 为了让自 [编者按]本文作者Barnabas Nagy ,译者@C7210.Barnabas是一名拥有六年从业经验的UX设计师.信息架构师,其对用户体验设计的交付提出一点:"你的合作伙伴未必会看懂你的交付". 为了让自己的设计能够让人更容易理解,交付一个优秀可视化的成果是一个不错的选择