Design Facebook collage

ByChristophe  Tauziet（Facebook designer）  译 Zach Yan（Didi chuxing UX designer）

Link：https://medium.com/facebook-design/designing-facebook-collage-304436764ca8#.ex6etuz36

Facebook图片分享产品设计

一段设计与讲故事的交织之路

我加入Facebook图片团队已经有一年多的光景了，秉持着在Facebook上探索讲故事的未来为我们前进的方向。那时候我们觉得让Facebook平台引领设计趋势，帮助人们更好的分享他们的故事，正当其时。一个小团队应运而生，逐步开始一些研究和原型设计。

痛点

讲一个有吸引力的故事日难。照片和视频炉火渐青（即使我们不支持你鱼和熊掌二者兼发），但是仅有照片布局美观，文笔舒畅时，一个故事才能吸引他人阅读。没有经过组织和文字结合的相册经常胎死腹中，人们虽然发布量很高，但是阅读量却乏善可陈，很难被阅读者消费或者产生关联感。

通过和我们研究人员和数据分析员的合作我们发现了这个问题，认识到了什么才是让阻挠人们讲他们自己故事的“幕后元凶”。我们的发现显示人们很多照片集中的照片都是他们带着分享的目的去拍的，但是拍完后却没有下文。人们经常说，应景的挑选出最好的照片是有选择困难的：你拍了很多自拍，一个图片流中五六张相同的…虽然挑选几张照片，将会向你的好友们展示你的远途旅行很棒，或者你的晚餐派对经过精雕细琢，但是人们却经常忘记分享这些故事。看起来应该是我们试图去解决的问题点，帮助人们分享他们在意的照片。

随着我们拍摄的照片越来越多，选择恐惧症也愈演愈强

服务流程

在研究的基础上，我们团队尝试寻找一些能够指导我们整个设计之旅的方针原则。当打造一款产品时，在基础问题上能够对最终结果产生影响的很多决定需要明确。设计原则能够补充有说服力的观点并且影响每一个决定，以确保我们做出的每一个决定与我们最开始试图解决的问题保持一致，不使方向偏离。

我们在我们想要打造的产品上达成了一致性：

（1）帮助人们记住他们有故事要分享

（2）使分享一个丰富、可视化的故事更加快速、方便

（3）设计一个版式，能够让人们为他们分享的故事引以为傲，使整个消费体验更加有迷人和快速。

然后我们开始探索理想的消费体验是什么。经过一系列的头脑风暴后，我们又一些想法去开始设计和原型：一本手翻书，一个长页垂直图文故事，基于地理位置的图片信息，一个像书一样的界面，相簿，视频……

我为消费体验做的一些设计概念和原型

设计原型

众所周知，Facebook的设计团队中很多人都使用原型工具去创作高保真原型去展示真正使用一个功能时其样式和感受。在设计相簿的过程当中，我主要使用了framer.js和Origami，并制作了一些概念和交互的端对端的原型。快速原型帮助我们更好的感知一些人在他们的设备上消费这些故事的体验。尽管一些交互感觉十分有趣——例如，下滑展示故事的交互时间线——我们知道我们需要创建一个灵活的系统，要求尽可能少的用户输入。我们也在尝试脱离干扰，集中与真正重要的东西上面。

经过一些原型之后，我们选定在图片网格作为我们产品最灵活的基础。我们认识到这种格式拥有最大的益处去支持各种媒体类型（照片、视频、文字、地图……），并且非常紧密，这意味着故事能够很快的被滚动到，然后被用户消费，单独的照片或者视频就不需要拘泥于他们本身，并且质量依然很高。

在我们在消费体验上取得进展时，我们开始思考什么样的方式能够让用户更简单的创建这些故事。我们决定刚开始时只聚焦于照片和图片，开始探索怎么样去自动产生这些故事的草拟人们能够组织和分享。

我设计的关于一些挑选照片体验的概念

设计我们的北极星

正如我们的设计主管Julie Zhuo在她的文章“设计的北极星”中建议的那样，在产品设计过程当中，在你的想象里面什么是最重要的故事。你想要你的产品在未来的两年的产品形态是什么样子？为什么这个产品这么重要并且它将怎样改变人们的生活？

结合在我们探索过程当中所获得的，我们开始设计我们想象中我们的产品最终形态的样子，将一些细节和技术限制置于一旁，在Facebook内部与其他的设计团队一起分享，开始一些讨论。

研究和内部测试

一旦我们定义了我们的北极星，我们开始致力于简化我们的产品，直至它最核心的部分。

（1）哪些是Facebook还未提供，这个产品正在做的最基础的部分？

（2）跳出这些事情之外，哪些是最有可能直接给人们带来收益的？

我们设计了我们最低限度的可行性产品，开始和我们的研究团队一起致力于我们怎样能够通过一些真实用户的使用验证我们的一些假设。为了确保人们能够使用他们真实的照片与原型交互，我们的工程师建立了一个单独的iOS

app能够通过时间和地点组成照片和视频，并且能够展示每个时刻作为一个相簿。

在我们的可用性测试实验室中，我们的研究团队帮助我们识别了大量有价值的关于用户对照片的感知以及哪些他们认为有趣的拿来分享的标准。我们有了机会去回答一些之前的问题：什么故事才是用户心中的好故事？用户需要什么样的管理工具？用户希望在他们的动态信息中看到什么？

我们同样让这项功能对所有的Facebook员工可用，开始在内部收集一些反馈。员工们能够通过故事来组织他们的照片，并且反馈给我们故事是否值得去分享，以及为什么。通过这些数据，我们知道在用户研究实验室我们开始优化我们的算法，并且提高故事本身的吸引力。我们很快认识到用户不希望分享那些在相册中重复的照片，因此我们尝试将相同的照片糅合到动画幻灯片展示中——用户超赞这个功能。

我设计的关于一些挑选照片体验的概念

场景还原

既然我们又一些我们感觉很棒的事情，我们开始将我们的代码放入Facebook中。对于我作为一个设计师而言，也是开始打磨UI元素和优化交互布局的时刻。

我们开始重新定义我们最小化可行产品（MVP，minimum viable product）的细节，抛弃不需要的元素，确保我们在每一步流程中我们有最优的解决方案。作为重新定义的一部分，我为建议设计了很多入口，为故事设计了很多标题，也为能够与动态消息相匹配的故事设计了很多附属元素。这些迭代和探索在整个设计过程中都是举步维艰的，逼迫设计师不要沉溺于很小很小的细节，而是持续去关注最好的解决方案。

我们尝试在照片集中展示我们对讲故事的探索

公测

当开始打造产品时，你对产品做了很多设计决策，但是很大一部分都是基于假设或者你自己对于问题的理解上面。然而更有效的办法莫过于通过公测来验证这些假设来的有效，并且越早收集数据越好。可用性测试能够辅助你做一些产品决策。但是公测将能准确的告知你你的产品或者功能对于整个系统的影响。同样它也能让你更好的理解用户如何与产品交互：

（1）何时、何地用户从流程中退出？

（2）用户能不能轻易的发现x，或者y…等等功能，他们怎么使用Z功能？

公测的方法能够在测试产品的表现和稳定性时不去打破所有用户的体验，是很通常的选择。

我们也经常将这套原则用在Facebook上，我们为产品进行公测。首先要确定我们的目标，就是去确认我们的产品真正帮助人们解决了我们当时认知到的问题，以及测试我们的假设和更好的理解人们怎么使用我们的功能。我们在瑞士、挪威、丹麦发布了产品，因此我们能够看到发布这项产品特色所产生的社会影响。

设计网页端和安卓端的体验也对产品公测关系重大

持续

除了在斯堪地维亚纳进行测试，我们也继续打磨我们的体验，主要聚焦在我们系列管理工具上，以及产品表现和稳定性上。我们也开始推进我们市场宣传，与我们的研究、市场、内容策略团队努力，想到了一个合适的名称（collage！），准备截图，拍摄宣传视频…以及其他的一些努力去准备这次发布。

总结

在设计产品时，我们要学会温故知新，回首这段设计之旅，试图看到那些你本可以做的更好的部分，下次你就能将这次的收获运用进去。总结你对于用户行为的观察也是很重要的，因为这会是确认需要解决的下一次一系列问题的关键。

作为一个团队，回顾我们原来的目标。我们调研了已经使用了这个产品的用户，这能帮助我们理解我们离我们目标的距离：

（1）支持用户，让他们控制——我们创造了这样一个产品，她能够给通过管理他们的照片和视频放入Collages中，能够推荐故事，减少照片的重复，为用户提供创新型的工具，并且将她们的声音传达到故事中；

（2）创造一条分享自豪的途径——照片即自豪。我们在一遍遍的测试发现人们喜欢这个产品的地方，我们让它快速简单的分享丰富的和可视化的故事，这些能够让用户以这些故事自豪。

我们生活在一个信息过载的时代。每个人都拍了很多的照片。时间飞逝，提醒用户你拍了什么变成了真实的需求。回忆应该被分享，技术也应该帮助我们理解我们能够分享什么、怎么样去分享我们的日常时光。

在设计collage的过程中，我们学到了你没有办法去产生令每一个用户满意的故事。一部分用户可能喜欢分享他们在商场的模糊自拍，而另一部分用户可能只关心分享他们旅行的照片。我们也知道了只要你提供了简单的工具去管理或者创造，用户普遍对自动生成的并不十全十美的故事也很开心。最后，我们学习到了创造一个影响整个系统其他模块的产品是很难的，经常将产品曝光于内部反馈。

设计Collage迄今为止经历了一段难以置信的冒险，我期望未来几个月继续提升产品，去看看人们将要在Facebook上分享的故事。

我想要感谢整个团队，感谢他们在创造这个体验的过程中付出的艰辛，迈出了让这个世界更加开放、连接的又一步。