Reactions:生活不仅仅是点赞(2)

接上文 Reactions:生活不仅仅是点赞(1)

图形

另一个棘手的问题是,Reactions该使用怎样的图形。我们想创造一种独一无二、简单通用的图形,并且能优雅的融入整个生态系统。下面是最初的设计方向:

最初的图形设计,在小尺寸下不能起到很好的沟通作用,看起来更像是系统的占位符,不过到了该迭代的时候了。

在互相独立且能够传递意欲表情的前提下,什么样的风格才是最合适的呢?这时候也遇到了重叠的问题,因为最小的设计改动可能就会让某个Reaction与另一个无法区别,甚至完全无法体现所要表达的情感。“Wow”可能忽然就变成“Yay”,“Yay”调整一下微笑的弧度或眼睛的角度又会变成“Haha”。

我们还尝试了是否使用标签。标签有助于定义“Reactions”,而且方便国际化。它们能被普遍理解,如果一位日本朋友对你的Po文做出“React”,你们都得知道那是什么意思。要理解这一点,我们与国际化团队以及非语言交流的专家密切合作,做了各种研究,并在不同的国家进行早期版本的测试。

早期版本的Reactions是静态的,我们也确信动画能让它们更丰富。动画设计师让它们动了起来,同时设计师与工程师都在考虑如何高性能的实现。设计师用伪代码描述每个“Reaction”,然后工程师通过伪代码高精度的还原了设计师想要的效果,并且如黄油般顺滑。

当加上动画效果后,我们觉得每个“Reaction”同时运动会让用户的眼睛过载。所以最初,当手指划过某个“Reaction”时该“Reaction”开始播放动画,其余则保持静止。在某次评审时(大项目通常给Zuck汇报进度),Zuck说如果快速划过“Reaction”时,它们也会同时运动。他建议,当面板出现时让每个“Reaction”同时运动。最后我们采用了这种方式,谢谢Zuck。

整体方案

如果没有大家一致坚守的原则,Reactions将是一个无法扩展的复杂系统。看看这些原则是什么:

  1. Reactions是点赞按钮的扩展。点赞、评论与分享在脸书上如此普及,再添加一个选择将会变得复杂。

  2. 不能让已有的操作增加难度。在增加这项特性的后,不能干扰已有的用户。或者说,要让这项功能像点赞一样简单,点一下代表你喜欢这个Po文。

使用Reactions

最初设计输入机制的时候我们并不知道将会有多少个Reaction,一些早期的研究只给了大概的数字,可能在5~10之间。作为压力测试,我们设计了一个最多可以支持15个Reaction的方案,毕竟删减可比扩展容易。

像这样的早期概念不能告诉我们什么是对的,但通常能告诉我们哪些不对。它们显示出一些我们不知道的东西或者更多。

上面的尝试帮我们快速得到广泛的反馈,暴露了一些问题。换句话说,我们要拿出一个能解决以下问题的方案:

  • Reactions面板在屏幕上方时会被截断;

  • 除了大面积的触控区域,用户经常把手指划到标签上;

  • 文字标签读着费力,并且增加了国际化的难度;

  • 线条状的图形在大尺寸下看起来不错,但缩小后却难以分辨——用户如何在信息流中阅读Reactions就要考虑这点;

  • 一些用户能触发滑动操作,但会抬起手指去点击某个Reaction,这样导致了错误的输入;

  • Reactions数量过多时会显得冗余。

继续迭代。第一个原型通过手指在标签上滑动显示不同的Reaction,这样促使用户在决定使用哪个Reaction之前把所有的Reaction都预览一遍,费时费力。

最终我们选择了dock模型,放弃了线条状图形的概念。这个方案中,用户能快速看到全部的Reaction。用人脸表情替换了文字,使整个系统更友好更方便国际化。此外还解决了早期概念遇到的其他问题。比如,界面进行了自适应,就不会超出屏幕范围。移动了标签的位置,这样不会被手指遮盖。最后,一旦dock被触发,滑动或点击操作都可以进行选择。

展示Reactions

只有点赞的世界很简单,直接告诉用户“17次赞”就足够了。这行文字展示在点赞、评论与分享按钮之上的一行空间内。在脸书内部我们称之为“Bling String”。如何展示“Reaction”需要重新思考,因为标示为“10次Reactions”并不能表达任何情绪,朋友对这条信息到底是觉得好笑、悲伤还是惊讶呢?我们要找到一个既能单独记录每种“Reaction”数量又能像点赞一样展示反馈总数的方案。

最初尝试了一个明显的方案,并排展示了每种“Reaction”的数量。这个方案在Reaction种类较少的时候效果不错,不过一旦种类增加尤其是公众内容立即变得分崩离析。而且不知道反馈的总数。过去的“Bling String”只传递特别简单的信息,所以易于扫描与理解,在用户翻动内容时也不影响。

最初的方案:具有多类型Reaction的内容让人变得抓狂

其他一些放弃的探索方案

最终采用的设计方案

最终的设计方案展示了Top 3的Reaction,以及Reaction的总数。如此,用户能理解大多数人对这条消息是怎么样的反应,并且知道总数。此外,还展示了你的哪位密友对此做出了反应,这也是Reaction带来的副产品。点击这条文字就可以看到这条状态所有Reactions的详细信息。

最终的产品

接近一年的工作以及几个月的测试后,我们终于迎来了发布Reactions的激动时刻,也知道了不同国家与地区的人们是怎样使用的。是时候把Reactions推向全世界了,希望每个人都喜欢。

任何的软件设计没有真正的完美,Reactions也不例外。我们将不断的迭代与改进,也希望这是脸书迈向更善解人意的一步。