我在Facebook跟我所關心的朋友們分享各種各樣的事情——從完成60天瑜伽練習的慶祝狀態到悼念失親之殤。從我的故事中也連接了一群相似的人，有相似的故事要分享。有時候我們只是想借助一個簡單的方式去告訴分享者我們真的很喜歡他們的故事，或是當看到他們的生活發生挫折，簡單地表達一下同情。

在2009年，Facebook發明了一個按鈕，這個按鈕可以讓人們給他們的朋友狀態反饋。我們叫它“Like（贊）”，人們非常地喜歡它。因為它既簡單又方便，你只需要在你下滑消息動態的時候，點一下那個小小的拇指，就能告訴你朋友你喜歡他的這個狀態。有時候對一個狀態進行反饋，去想說些什么是有點困難的，又或者你并不是真的有很多想說的，你只是想讓他們知道你看到了他們的狀態。這是Like這個按鈕一直這么受歡迎的原因，它是既簡單又直接。

然而，生活中并不是所有的事情都是那么“贊”的。

是時候跳出來看到Like之外的世界

人們告訴我，他們需要更多的方式去在Facebook上表達自己。大概一年以前，Mark組織了一個團隊，去開始認真思考怎樣能讓Like按鈕更具表達性。我們對此深感振奮——不是每天都有機會去參與到公司產品里這么重要的特性之中的。

我們知道在這個項目一開始就會很具挑戰性。第一個明顯的挑戰就是這個解決方案要解決在各種平臺和跨多設備的兼容性，無論是舊的或是新的?；诖?，將會有更多具有挑戰性的方面有待發掘。比如，我們花了大量的時間去打磨Like、Comment、Share按鈕，讓它們更好用且好理解。這是一個互動很多的界面，因此任何改變都會從可理解性和易用性上影響到數以百萬計用戶的操作體驗。我們需要仔細權衡任何的改動，讓它給人感覺是一個自然的演變過程，而不會讓我們平臺上的用戶覺得被打斷或是干擾。

其他一些需要解決的問題是：Reaction（譯者注：本次特性的名字）應該是怎么樣的？怎么能讓世界范圍內的用戶有一致的理解？怎么樣才能讓人們更好地使用Reaction？怎樣能讓用戶方便地留下一個Reaction？這些復雜的問題都需要解決。

像所有好的設計一樣，通往簡單的路上總是復雜的。

在這個項目中擁有同理心變得異常重要，這也是為什么我們花那么多時間，迭代那么多次的原因。擴展Reaction的重點在于找到舉世共識的表達語言，無論誰都能更好以及更充分地表達自己。

我們把問題一分為二，同時并行地解決它們：

1. 除了Like以外，我們還會使用什么樣的Reaction？
2. 人們會怎么輸入和消費Reaction？

對于這兩條路徑，我們提出了一些基本原則，它們可以作為由我們操作的設計劇本。這些原則作為我們團隊的指南，幫助我們理清這個項目的各種決策。它們不會明確地告訴我們最后的解決方案是什么，但是它們會提示我們最后的解決方案不是什么，并提供一個我們可以探索的方向。

這些指導原則、實證研究和數據的分析、Facebook里有才的行業精英的直覺和學識是我們解決這個問題的途徑。就其本身而言，我們建立的團隊包括研究人員、內容策劃、工程師和我的主設計團隊：Andy Chung, Brandon Walkin and Brian Frick.

反應

這是指導我們決定一系列可延伸的reaction的原則：

1. Reaction應該有舉世的共識性。Reaction應該在世界范圍內無差識別，因此可以把更多的人們連接起來而進行溝通。
2. Reaction應該被廣泛使用且擁有足夠的表現力。Reaction應該可以讓人們用更具表達性的方式去產生反饋，而這個方式又與我們現實生活中的反應相呼應。

我們首先需要考慮的是我們要包含多少種不同的Reaction。這也許看起來像是一個非常直白的任務：只要把向上的拇指倒過來放在“贊”旁邊就好了吧。但這完全沒那么簡單。在人們的交流過程中，他們需要我們提供一個更高雅和更豐富的選擇。二元的“贊”和“不贊”并不能很好地反應在我們真實生活中遇到的各種事情時的態度。

雖然這并不意味著要是二元的，但這會像emoji一樣給人們上百種選擇么？也許不。在別的原因之中，有上百種Reaction的選擇意味著每個狀態下會有幾十種不同的Reaction，這會讓人很難在動態消息里消化。此外，我們提供的Reaction越多，達到舉世共識的可能性就更小。

超過一年以來，我們一直在進行國際研究，去探索哪種類型的反饋是人們覺得最吸引人的。這些是我們調查的發現：

表情排行榜

我們通過排行最高的貼紙和emoji來得到些提示：人們已經在Facebook上用了什么類型的“反應”。

最常用的表情搜索詞

雖然不常見，我們同樣在研究當人們在用表情的時候，什么詞匯是他們最常搜索的：

短評排行榜

我們同時觀察匿名的全球樣本最常用的短評。這讓我們了解了一些人們用來表達他們自己的特別的語言，也幫助我們更好地理解人們在用這些短評時整個文本的意思。以下是我們從美國的調研中得出的一些短評的樣例。

除了分析這些樣例，我們還做了國際的調研，跟人們談話，并與我們的國際化團隊合作。由此，我們縮小了我們列表的范圍：

你可能注意到了，列表里的兩個反饋動作并沒有在我們本周發布的版本里：“疑惑”和“歡呼”。在測試中，“疑惑”使用得很少，所以包含它會讓使用時增加認知負擔。每個反饋動作都需要服務于大多數用戶的一個特定目標，“疑惑”并沒有能做到。“歡呼”同樣很難做到。它不太好理解或是推國際化，而且它又常常與“哈哈”或“Like”重復。目前看來，沒有這兩個反饋會讓整個系統更整體。

插圖

另一個重要組成部分是Reaction看起來應該是怎么樣的。我們希望創造的插圖是Facebook獨有的，但是同時希望它們與整個互聯網生態系統又是優雅共存的，在世界范圍內可以被輕易認知和理解。以下是我們最初的方向：

我們最初的插圖在一個相對小的尺寸下并沒有在它出現的交流場合中表達出它應該表達出的意思。在我們設計整個系統過程中，它們僅僅作為了一個占位符，但是這也正好是我們開始迭代它們的開始。

這里要面臨的挑戰包括找出什么樣的風格既能在讓整套插圖風格統一，又能讓單個插圖個體充分而清晰地表達出自己的意指reaction。我們傳達Reaction意思的表現常常發生重合，也是我們遇到的另一個問題。對一個Reaction極小的設計調整會讓它看起來跟另一個相似，或是調整完后根本沒用表現出相應的reaction意思?！癢ow”會跟“Yay”撞車，而如果只是改變微笑的弧度或一個眼睛的斜視，“Yay”又會看起來像“Haha”。

我們同時也探索了另一個有和沒有標簽的系統。給Reaction相應的標簽會讓人更清楚Reaction到底是什么，但反過來，沒有標簽又更易于幫我們進行國際化。這些Reaction需要被普遍地理解，所以如果一個日本的朋友對你的狀態進行反饋，你們對Reaction代表的意識是有共識的。去更多地了解這些，我們和國際化團隊、非語言交際領域的專家密切合作。我們進行了各種各樣的調研，并在不同的國家進行了早期版本的測試。

早期版本是靜態的，但是我們知道動畫將會是讓Reaction更有表現力的關鍵。我們跟動畫師合作，讓靜態的表情變得生動起來，而設計師和工程師一起把這些動畫高性能地展示出來。設計師用偽代碼編譯每個Reaction動畫。然后他們的工作會由工程師接棒，工程師高保真地復制那些意指的動畫在最終構建版里，這才使得最后出來的效果絲般順滑。

當我們開始合并動畫時，我們覺得同時都出現動畫會讓眼睛失去焦點。因此最開始，我們一次僅僅讓一個Reaction（你手指滑到的那個）動畫出現，而剩下的那些都會保持靜態的。然而我們后來沒打算這樣做，因為我們想到在Zuck復審時（就是你會見到Mark，去展示一些大項目——比如Reaction——的進度的地方），如果你快速地在那塊區域滑動你的手指，那所有的動畫都會立刻同時出現。Mark他建議我們，當面板出現時，同時讓它們都有動畫。后來我們發現我們也更喜歡這個方式。謝啦，Zuck。

系統

在我們一致認可執行的方案中，因為沒有一些原則里預定的內容的指引，我們很快發現，我們建立了一套非常復雜的系統，這個系統沒有能按照我們的需要而很好地進行拓展。以下是一些引領我們的原則：

1. Reaction應該是“贊”按鈕的延伸。喜歡、評論和分享在Facebook里是普遍存在的，而增加第四種選擇會帶來更多的復雜性。
2. Reaction不應該讓現有的操作更困難。以一個負責的方式引進這個特性是非常重要的，這個方式不應該中斷上十億人已經形成的產品操作習慣。換言之，我們想要保持“贊”的簡易性和輕松性——當你按下“贊”的按鈕，你就是在“贊”這個狀態。

留下一個反應

當我們開始探索輸入機制時，我們并不知道應該有“什么”或者“多少”Reaction。一些早期的調研告訴我們，這里也許有5到10種Reaction。作為一個壓力測試，我們開始設計一個可以承載到15種不同Reaction的入口，因為從多到少會遠比從少到多簡單一些。

像這樣的早期的概念和初始嘗試僅僅是作為先導教育之用——它們讓我們知道什么是有效的，但是更重要的是，哪些是無效的。它們展現了差異、未知和更多別的東西。

當我們感到，上面的一些方法讓我們可以很快地得到大量的反饋，它向我們揭示了一些問題。換句話說，它在“教”我們尋求到解決之道應該圍繞什么進行：

• UI可能會在屏幕頂部被截斷；
• 盡管有大面積的觸屏空間，人們仍然會經常在標簽上面滑動他們的手指；
• 覺得理解文本標簽很困難，且會使國際化變得困難；
• 插圖的線條樣式在較大的比例下展示很好，但是在小屏幕下就很難理解——當思考人們怎么在信息流里消化這些意思時，我們就需要解決這個問題；
• 一些人會喚起刷子，然后抬起他們的手指，這樣他們可以按在某一個Reaction上，但這一操作會讓輸入界面消失；
• 更多的Reaction會在整套系統里變得冗余。

我們繼續迭代。第一版原型包括一個單獨插畫，它會根據你手指在不同解說文字的位置而改變的。這樣會喚起你做選擇時去提前預覽每個Reaction意思的欲望，而不是僅僅通過一次性看完所有的選項。因為那樣太笨重，而且也太耗費時間了。

最后，我們駁回了單獨插圖的概念設計，而是支持dock模型。這個方式讓人們能一次性快速看到的所有的Reaction。解讀表情而不是文字，讓這個過程變得更友善，也使整個系統更加地易于國際認知。我們同時也解決了一些早期概念設計存在的其它問題。比如，這個新系統自動適應它在屏幕中的位置，因此不會再出現它定位到看不到的地方。我們移動Reaction的標簽，這樣你的手指就不會點到它們。最后，一旦Reaction dock被喚起，人們現在可以滑動選擇，也可以單獨點擊選擇其中一個Reaction。

消化反應

在一個我們只需要理解“Like（贊）”的世界，你如何消化Reaction變得非常明確。我們只要告訴你有多少人對它說“17個贊”。有一小行文字在Like、Comment和Share 按鈕上面。那行小字在內部被稱為“閃耀的字符串”。這可能需要完全地重新思考一下，因為表述為“10個反應”并沒有傳達出任何一種豐富的個人情緒，而那正恰恰是這個特性被設計出來的意義——一般來說，人們會覺得這個狀態有趣、悲傷或驚訝嗎？這個解決方案需要實現：特定的反應被單獨紀錄。我們同時希望繼續傳達總反饋數，就像我們之前統計所有的Like數一樣。

我們第一個方式很直接明白。我們設計了“閃耀的字符串”來解釋每個使用的reaction，同時記錄每個raction被使用的次數。這在那些只有幾個reaction的狀態下很奏效，但是對于那些有大量互動的狀態下就行不通了——尤其是公眾內容。老的“閃耀的字符串”很簡單，因為它只傳達一個信息。因此，它很容易瀏覽和理解，也容易忽視和滑走。

我們最初的方案，當有很多不同的reaction時，整個就被淹沒掉了。

另外一些不可行的探索

最終的設計方案

最終的解決方案是聚合最高的三種Reaction，跟總數一起展示。這樣， 你就可以了解到大部分的人是怎么對一個狀態的進行反應的，同時也能了解這個狀態總的一個反饋情況。另外，我們同時展示你最親近的朋友對這個狀態的反饋，這是在Reaction使用之前手機上缺失的一些東西。

“最終”的產品

將近一年多的測試之后，我們很興奮地迎來了Reaction的發布，同時也學到了更多它是如何在世界范圍內被使用的。由于我們在更廣的范圍里發布Reaction，我們非常希望所有人都能喜歡它。

如同所有的軟件設計，沒有什么東西是一蹴而就的——Reaction也不例外。我們會繼續學習、迭代并提高，但是我們希望我們所做的，是離“更沉浸的Facebook體驗”更近一步。

最后的Reaction版本

作者：Geoff Teehan

原文地址：https://medium.com/facebook-design/reactions-not-everything-in-life-is-likable-5c403de72a3f

譯者：賴C- 微信視覺設計師，微信公眾號：We-Design