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

在2009年，F(xiàn)acebook發(fā)明了一個(gè)按鈕，這個(gè)按鈕可以讓人們給他們的朋友狀態(tài)反饋。我們叫它“Like（贊）”，人們非常地喜歡它。因?yàn)樗群?jiǎn)單又方便，你只需要在你下滑消息動(dòng)態(tài)的時(shí)候，點(diǎn)一下那個(gè)小小的拇指，就能告訴你朋友你喜歡他的這個(gè)狀態(tài)。有時(shí)候?qū)σ粋€(gè)狀態(tài)進(jìn)行反饋，去想說(shuō)些什么是有點(diǎn)困難的，又或者你并不是真的有很多想說(shuō)的，你只是想讓他們知道你看到了他們的狀態(tài)。這是Like這個(gè)按鈕一直這么受歡迎的原因，它是既簡(jiǎn)單又直接。

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

是時(shí)候跳出來(lái)看到Like之外的世界

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

我們知道在這個(gè)項(xiàng)目一開(kāi)始就會(huì)很具挑戰(zhàn)性。第一個(gè)明顯的挑戰(zhàn)就是這個(gè)解決方案要解決在各種平臺(tái)和跨多設(shè)備的兼容性，無(wú)論是舊的或是新的。基于此，將會(huì)有更多具有挑戰(zhàn)性的方面有待發(fā)掘。比如，我們花了大量的時(shí)間去打磨Like、Comment、Share按鈕，讓它們更好用且好理解。這是一個(gè)互動(dòng)很多的界面，因此任何改變都會(huì)從可理解性和易用性上影響到數(shù)以百萬(wàn)計(jì)用戶的操作體驗(yàn)。我們需要仔細(xì)權(quán)衡任何的改動(dòng)，讓它給人感覺(jué)是一個(gè)自然的演變過(guò)程，而不會(huì)讓我們平臺(tái)上的用戶覺(jué)得被打斷或是干擾。

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

像所有好的設(shè)計(jì)一樣，通往簡(jiǎn)單的路上總是復(fù)雜的。

在這個(gè)項(xiàng)目中擁有同理心變得異常重要，這也是為什么我們花那么多時(shí)間，迭代那么多次的原因。擴(kuò)展Reaction的重點(diǎn)在于找到舉世共識(shí)的表達(dá)語(yǔ)言，無(wú)論誰(shuí)都能更好以及更充分地表達(dá)自己。

我們把問(wèn)題一分為二，同時(shí)并行地解決它們：

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

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

這些指導(dǎo)原則、實(shí)證研究和數(shù)據(jù)的分析、Facebook里有才的行業(yè)精英的直覺(jué)和學(xué)識(shí)是我們解決這個(gè)問(wèn)題的途徑。就其本身而言，我們建立的團(tuán)隊(duì)包括研究人員、內(nèi)容策劃、工程師和我的主設(shè)計(jì)團(tuán)隊(duì)：Andy Chung, Brandon Walkin and Brian Frick.

反應(yīng)

這是指導(dǎo)我們決定一系列可延伸的reaction的原則：

1. Reaction應(yīng)該有舉世的共識(shí)性。Reaction應(yīng)該在世界范圍內(nèi)無(wú)差識(shí)別，因此可以把更多的人們連接起來(lái)而進(jìn)行溝通。
2. Reaction應(yīng)該被廣泛使用且擁有足夠的表現(xiàn)力。Reaction應(yīng)該可以讓人們用更具表達(dá)性的方式去產(chǎn)生反饋，而這個(gè)方式又與我們現(xiàn)實(shí)生活中的反應(yīng)相呼應(yīng)。

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

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

超過(guò)一年以來(lái)，我們一直在進(jìn)行國(guó)際研究，去探索哪種類型的反饋是人們覺(jué)得最吸引人的。這些是我們調(diào)查的發(fā)現(xiàn)：

表情排行榜

我們通過(guò)排行最高的貼紙和emoji來(lái)得到些提示：人們已經(jīng)在Facebook上用了什么類型的“反應(yīng)”。

最常用的表情搜索詞

雖然不常見(jiàn)，我們同樣在研究當(dāng)人們?cè)谟帽砬榈臅r(shí)候，什么詞匯是他們最常搜索的：

短評(píng)排行榜

我們同時(shí)觀察匿名的全球樣本最常用的短評(píng)。這讓我們了解了一些人們用來(lái)表達(dá)他們自己的特別的語(yǔ)言，也幫助我們更好地理解人們?cè)谟眠@些短評(píng)時(shí)整個(gè)文本的意思。以下是我們從美國(guó)的調(diào)研中得出的一些短評(píng)的樣例。

除了分析這些樣例，我們還做了國(guó)際的調(diào)研，跟人們談話，并與我們的國(guó)際化團(tuán)隊(duì)合作。由此，我們縮小了我們列表的范圍：

你可能注意到了，列表里的兩個(gè)反饋動(dòng)作并沒(méi)有在我們本周發(fā)布的版本里：“疑惑”和“歡呼”。在測(cè)試中，“疑惑”使用得很少，所以包含它會(huì)讓使用時(shí)增加認(rèn)知負(fù)擔(dān)。每個(gè)反饋動(dòng)作都需要服務(wù)于大多數(shù)用戶的一個(gè)特定目標(biāo)，“疑惑”并沒(méi)有能做到?！皻g呼”同樣很難做到。它不太好理解或是推國(guó)際化，而且它又常常與“哈哈”或“Like”重復(fù)。目前看來(lái)，沒(méi)有這兩個(gè)反饋會(huì)讓整個(gè)系統(tǒng)更整體。

插圖

另一個(gè)重要組成部分是Reaction看起來(lái)應(yīng)該是怎么樣的。我們希望創(chuàng)造的插圖是Facebook獨(dú)有的，但是同時(shí)希望它們與整個(gè)互聯(lián)網(wǎng)生態(tài)系統(tǒng)又是優(yōu)雅共存的，在世界范圍內(nèi)可以被輕易認(rèn)知和理解。以下是我們最初的方向：

我們最初的插圖在一個(gè)相對(duì)小的尺寸下并沒(méi)有在它出現(xiàn)的交流場(chǎng)合中表達(dá)出它應(yīng)該表達(dá)出的意思。在我們?cè)O(shè)計(jì)整個(gè)系統(tǒng)過(guò)程中，它們僅僅作為了一個(gè)占位符，但是這也正好是我們開(kāi)始迭代它們的開(kāi)始。

這里要面臨的挑戰(zhàn)包括找出什么樣的風(fēng)格既能在讓整套插圖風(fēng)格統(tǒng)一，又能讓單個(gè)插圖個(gè)體充分而清晰地表達(dá)出自己的意指reaction。我們傳達(dá)Reaction意思的表現(xiàn)常常發(fā)生重合，也是我們遇到的另一個(gè)問(wèn)題。對(duì)一個(gè)Reaction極小的設(shè)計(jì)調(diào)整會(huì)讓它看起來(lái)跟另一個(gè)相似，或是調(diào)整完后根本沒(méi)用表現(xiàn)出相應(yīng)的reaction意思。“Wow”會(huì)跟“Yay”撞車(chē)，而如果只是改變微笑的弧度或一個(gè)眼睛的斜視，“Yay”又會(huì)看起來(lái)像“Haha”。

我們同時(shí)也探索了另一個(gè)有和沒(méi)有標(biāo)簽的系統(tǒng)。給Reaction相應(yīng)的標(biāo)簽會(huì)讓人更清楚Reaction到底是什么，但反過(guò)來(lái)，沒(méi)有標(biāo)簽又更易于幫我們進(jìn)行國(guó)際化。這些Reaction需要被普遍地理解，所以如果一個(gè)日本的朋友對(duì)你的狀態(tài)進(jìn)行反饋，你們對(duì)Reaction代表的意識(shí)是有共識(shí)的。去更多地了解這些，我們和國(guó)際化團(tuán)隊(duì)、非語(yǔ)言交際領(lǐng)域的專家密切合作。我們進(jìn)行了各種各樣的調(diào)研，并在不同的國(guó)家進(jìn)行了早期版本的測(cè)試。

早期版本是靜態(tài)的，但是我們知道動(dòng)畫(huà)將會(huì)是讓Reaction更有表現(xiàn)力的關(guān)鍵。我們跟動(dòng)畫(huà)師合作，讓靜態(tài)的表情變得生動(dòng)起來(lái)，而設(shè)計(jì)師和工程師一起把這些動(dòng)畫(huà)高性能地展示出來(lái)。設(shè)計(jì)師用偽代碼編譯每個(gè)Reaction動(dòng)畫(huà)。然后他們的工作會(huì)由工程師接棒，工程師高保真地復(fù)制那些意指的動(dòng)畫(huà)在最終構(gòu)建版里，這才使得最后出來(lái)的效果絲般順滑。

當(dāng)我們開(kāi)始合并動(dòng)畫(huà)時(shí)，我們覺(jué)得同時(shí)都出現(xiàn)動(dòng)畫(huà)會(huì)讓眼睛失去焦點(diǎn)。因此最開(kāi)始，我們一次僅僅讓一個(gè)Reaction（你手指滑到的那個(gè)）動(dòng)畫(huà)出現(xiàn)，而剩下的那些都會(huì)保持靜態(tài)的。然而我們后來(lái)沒(méi)打算這樣做，因?yàn)槲覀兿氲皆赯uck復(fù)審時(shí)（就是你會(huì)見(jiàn)到Mark，去展示一些大項(xiàng)目——比如Reaction——的進(jìn)度的地方），如果你快速地在那塊區(qū)域滑動(dòng)你的手指，那所有的動(dòng)畫(huà)都會(huì)立刻同時(shí)出現(xiàn)。Mark他建議我們，當(dāng)面板出現(xiàn)時(shí)，同時(shí)讓它們都有動(dòng)畫(huà)。后來(lái)我們發(fā)現(xiàn)我們也更喜歡這個(gè)方式。謝啦，Zuck。

系統(tǒng)

在我們一致認(rèn)可執(zhí)行的方案中，因?yàn)闆](méi)有一些原則里預(yù)定的內(nèi)容的指引，我們很快發(fā)現(xiàn)，我們建立了一套非常復(fù)雜的系統(tǒng)，這個(gè)系統(tǒng)沒(méi)有能按照我們的需要而很好地進(jìn)行拓展。以下是一些引領(lǐng)我們的原則：

1. Reaction應(yīng)該是“贊”按鈕的延伸。喜歡、評(píng)論和分享在Facebook里是普遍存在的，而增加第四種選擇會(huì)帶來(lái)更多的復(fù)雜性。
2. Reaction不應(yīng)該讓現(xiàn)有的操作更困難。以一個(gè)負(fù)責(zé)的方式引進(jìn)這個(gè)特性是非常重要的，這個(gè)方式不應(yīng)該中斷上十億人已經(jīng)形成的產(chǎn)品操作習(xí)慣。換言之，我們想要保持“贊”的簡(jiǎn)易性和輕松性——當(dāng)你按下“贊”的按鈕，你就是在“贊”這個(gè)狀態(tài)。

留下一個(gè)反應(yīng)

當(dāng)我們開(kāi)始探索輸入機(jī)制時(shí)，我們并不知道應(yīng)該有“什么”或者“多少”Reaction。一些早期的調(diào)研告訴我們，這里也許有5到10種Reaction。作為一個(gè)壓力測(cè)試，我們開(kāi)始設(shè)計(jì)一個(gè)可以承載到15種不同Reaction的入口，因?yàn)閺亩嗟缴贂?huì)遠(yuǎn)比從少到多簡(jiǎn)單一些。

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

當(dāng)我們感到，上面的一些方法讓我們可以很快地得到大量的反饋，它向我們揭示了一些問(wèn)題。換句話說(shuō)，它在“教”我們尋求到解決之道應(yīng)該圍繞什么進(jìn)行：

• UI可能會(huì)在屏幕頂部被截?cái)啵?/li>
• 盡管有大面積的觸屏空間，人們?nèi)匀粫?huì)經(jīng)常在標(biāo)簽上面滑動(dòng)他們的手指；
• 覺(jué)得理解文本標(biāo)簽很困難，且會(huì)使國(guó)際化變得困難；
• 插圖的線條樣式在較大的比例下展示很好，但是在小屏幕下就很難理解——當(dāng)思考人們?cè)趺丛谛畔⒘骼锵@些意思時(shí)，我們就需要解決這個(gè)問(wèn)題；
• 一些人會(huì)喚起刷子，然后抬起他們的手指，這樣他們可以按在某一個(gè)Reaction上，但這一操作會(huì)讓輸入界面消失；
• 更多的Reaction會(huì)在整套系統(tǒng)里變得冗余。

我們繼續(xù)迭代。第一版原型包括一個(gè)單獨(dú)插畫(huà)，它會(huì)根據(jù)你手指在不同解說(shuō)文字的位置而改變的。這樣會(huì)喚起你做選擇時(shí)去提前預(yù)覽每個(gè)Reaction意思的欲望，而不是僅僅通過(guò)一次性看完所有的選項(xiàng)。因?yàn)槟菢犹恐?，而且也太耗費(fèi)時(shí)間了。

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

消化反應(yīng)

在一個(gè)我們只需要理解“Like（贊）”的世界，你如何消化Reaction變得非常明確。我們只要告訴你有多少人對(duì)它說(shuō)“17個(gè)贊”。有一小行文字在Like、Comment和Share 按鈕上面。那行小字在內(nèi)部被稱為“閃耀的字符串”。這可能需要完全地重新思考一下，因?yàn)楸硎鰹椤?0個(gè)反應(yīng)”并沒(méi)有傳達(dá)出任何一種豐富的個(gè)人情緒，而那正恰恰是這個(gè)特性被設(shè)計(jì)出來(lái)的意義——一般來(lái)說(shuō)，人們會(huì)覺(jué)得這個(gè)狀態(tài)有趣、悲傷或驚訝嗎？這個(gè)解決方案需要實(shí)現(xiàn)：特定的反應(yīng)被單獨(dú)紀(jì)錄。我們同時(shí)希望繼續(xù)傳達(dá)總反饋數(shù)，就像我們之前統(tǒng)計(jì)所有的Like數(shù)一樣。

我們第一個(gè)方式很直接明白。我們?cè)O(shè)計(jì)了“閃耀的字符串”來(lái)解釋每個(gè)使用的reaction，同時(shí)記錄每個(gè)raction被使用的次數(shù)。這在那些只有幾個(gè)reaction的狀態(tài)下很奏效，但是對(duì)于那些有大量互動(dòng)的狀態(tài)下就行不通了——尤其是公眾內(nèi)容。老的“閃耀的字符串”很簡(jiǎn)單，因?yàn)樗粋鬟_(dá)一個(gè)信息。因此，它很容易瀏覽和理解，也容易忽視和滑走。

我們最初的方案，當(dāng)有很多不同的reaction時(shí)，整個(gè)就被淹沒(méi)掉了。

另外一些不可行的探索

最終的設(shè)計(jì)方案

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

“最終”的產(chǎn)品

將近一年多的測(cè)試之后，我們很興奮地迎來(lái)了Reaction的發(fā)布，同時(shí)也學(xué)到了更多它是如何在世界范圍內(nèi)被使用的。由于我們?cè)诟鼜V的范圍里發(fā)布Reaction，我們非常希望所有人都能喜歡它。

如同所有的軟件設(shè)計(jì)，沒(méi)有什么東西是一蹴而就的——Reaction也不例外。我們會(huì)繼續(xù)學(xué)習(xí)、迭代并提高，但是我們希望我們所做的，是離“更沉浸的Facebook體驗(yàn)”更近一步。

最后的Reaction版本

作者：Geoff Teehan

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

譯者：賴C- 微信視覺(jué)設(shè)計(jì)師，微信公眾號(hào)：We-Design