我們是怎么重新設(shè)計(jì)豌豆莢的

2 評(píng)論 3666 瀏覽 5 收藏 23 分鐘

二月份做完這個(gè)項(xiàng)目后,在公司里面寫(xiě)了一篇總結(jié),這里再自轉(zhuǎn)一下。

豌豆莢還有很多不足,也還遠(yuǎn)沒(méi)有到「State of the art」的理想境地,但看著往這個(gè)方向一點(diǎn)點(diǎn)前進(jìn),還是一件值得開(kāi)心的事情。記錄下設(shè)計(jì)過(guò)程,也是供同行們參考。

附有視頻一則。

今年 2 月份的時(shí)候,我們發(fā)布了豌豆莢 Windows 版 2.0。這個(gè)項(xiàng)目的設(shè)計(jì)和開(kāi)發(fā)時(shí)間有 10 個(gè)月之久,這對(duì)很多公司來(lái)說(shuō)可能并不算長(zhǎng)。但考慮到這 10 個(gè)月占據(jù)豌豆實(shí)驗(yàn)室當(dāng)時(shí)兩年歷史的接近一半,豌豆莢 2.0 對(duì)于我們來(lái)說(shuō)就顯得很重要了。

2009 年年底,我們開(kāi)始豌豆實(shí)驗(yàn)室的時(shí)候,就希望做不一樣的公司、開(kāi)發(fā)不一樣的產(chǎn)品。用我們的產(chǎn)品和技術(shù),來(lái)幫用戶解決問(wèn)題。而不是像很多同行一樣,用其它的更捷徑的方式。兩年的時(shí)間里我們做了很多嘗試。有些嘗試失敗了,也有些嘗試成功了。

203HW606-1
 

「成功」有一個(gè)簡(jiǎn)單的標(biāo)準(zhǔn),即被「借鑒」。2010 年,我們剛剛推出第一代產(chǎn)品的時(shí)候,用了和過(guò)去的類似軟件很不一樣的產(chǎn)品設(shè)計(jì),特別是功能大為減少。有些朋友憂心我們的產(chǎn)品過(guò)于簡(jiǎn)潔,也有人警告我們說(shuō),這種「陽(yáng)春白雪」的產(chǎn)品在中國(guó)是走不通的。但時(shí)至今日,我們已經(jīng)擁有了超過(guò) 5000 萬(wàn)的安裝量,而今天市面上所有有點(diǎn)影響力的桌面手機(jī)管理軟件,基本上也并沒(méi)有脫離開(kāi)豌豆莢定義下來(lái)的框架??梢哉f(shuō),我們?cè)谶^(guò)去兩年的時(shí)間里重新定義了桌面手機(jī)管理軟件。

我們不介意別人對(duì)我們的跟隨,因?yàn)楫?dāng)別人還在跟隨我們的時(shí)候,我們其實(shí)已經(jīng)給明天做好了準(zhǔn)備。

這就是豌豆莢 2.0 的設(shè)計(jì)背景。

為什么要?jiǎng)邮肿鐾愣骨v 2.0?要回答這個(gè)問(wèn)題,就得知道豌豆莢 1.0 是在什么樣的環(huán)境下出爐的。

豌豆莢 1.0 開(kāi)始開(kāi)發(fā)于 2009 年 12 月,當(dāng)時(shí)市面上最為流行的 Android 手機(jī)是 HTC Hero,Motorola Milestone 剛剛推出,Nexus One 還不見(jiàn)蹤影,Android 手機(jī)在國(guó)內(nèi)的數(shù)量,應(yīng)該僅在百萬(wàn)級(jí)別。這種情況下我們將豌豆莢專注在 Android 上,其實(shí)上是一種冒險(xiǎn)。實(shí)話實(shí)說(shuō),我們自己也并不清楚用戶需求到底是什么樣的。

因此,對(duì)于豌豆實(shí)驗(yàn)室來(lái)說(shuō),最重要的任務(wù)就是盡快推出最小可用的原型產(chǎn)品(Minimum viable product, MVP),驗(yàn)證用戶需求。

說(shuō)到這里稍微繞遠(yuǎn)一點(diǎn)——為什么這些年來(lái)很少創(chuàng)業(yè)公司會(huì)選擇 Windows 客戶端這個(gè)領(lǐng)域?原因很簡(jiǎn)單:開(kāi)發(fā)成本太高。要做一個(gè)非常好的 Windows 客戶端實(shí)在太難了,要比做 Web 服務(wù)、iOS、Android 應(yīng)用都要難得多。這也是為什么我們現(xiàn)在想把我們創(chuàng)造的這種 Web 客戶端的框架開(kāi)放出來(lái)的原因,因?yàn)閷?shí)在太難了。

因此,可以理解為什么豌豆莢最早選擇了用 .NET framework 來(lái)開(kāi)發(fā)——在開(kāi)發(fā)效率還是用戶體驗(yàn)這個(gè)問(wèn)題上,我們選擇了開(kāi)發(fā)效率。盡管這個(gè)決定后來(lái)被屢屢詬病,但即使再來(lái)一次,我們也一定會(huì)做同樣的選擇——因?yàn)檫@可以確保我們能用最快的速度將產(chǎn)品推向市場(chǎng),迅速摸清用戶需求。快速迭代。

所以你可以想像,那時(shí)候我們的心態(tài)是:盡快用積木搭個(gè)能走的小車,別的再說(shuō)。即使很小車不牢靠,但至少能走。而能走了以后,我們應(yīng)該有時(shí)間重新做個(gè)好點(diǎn)的車。

一晃一年過(guò)去了。2011 年 2 月份,我們迎來(lái)了第 100 萬(wàn)個(gè)用戶。如我們所料,用戶需求變化很快,一年的時(shí)間里面產(chǎn)品進(jìn)行了多次大幅改動(dòng),但基礎(chǔ)仍然是那個(gè)用積木搭成的小車。

積木小車已經(jīng)不堪重負(fù)了,已經(jīng)有太多的新功能、太多的缺陷,不推倒重來(lái)無(wú)法解決。

我們最終下定決定要推倒重來(lái),重新設(shè)計(jì)和開(kāi)發(fā)豌豆莢。這是在 2011 年的 2 月份。扔掉 .NET framework 的架構(gòu),重新用 C++ 開(kāi)發(fā)——我們知道這是一件很難的事情。但,實(shí)際情況比我們想象的還難。

無(wú)知者無(wú)畏。

203HU046-2
 

我們最初的計(jì)劃是 在2011 年 6 月發(fā)布豌豆莢 2.0。不過(guò),到 5 月份的時(shí)候,我們估計(jì)新產(chǎn)品在 7 月份發(fā)布的話,可以比較安全。到 6 月份的時(shí)候,我們?cè)俅喂烙?jì)在 9 月應(yīng)該能發(fā)布,這樣我們能過(guò)個(gè)美好的國(guó)慶長(zhǎng)假。可是到了 9 月份的時(shí)候,估計(jì)的時(shí)間點(diǎn)變成了新年前后。董事會(huì)上馮鋒承諾,如果新年前還無(wú)法發(fā)布,就要服毒自盡(幸好后來(lái)沒(méi)有人提起過(guò)這件事情)。最后,我們是在 2012 年 2 月 22 日發(fā)布的。

這個(gè)日子其實(shí)也不是刻意挑的,而是因?yàn)橥愣骨v 2.0 各項(xiàng)指標(biāo)終于在一周前都基本達(dá)標(biāo)了。

回頭一看,我們當(dāng)時(shí)隨意用積木搭成的小車,居然在這整整 10 個(gè)月的時(shí)間里一路高歌猛進(jìn),安裝量從 100 萬(wàn)變成了 2500 萬(wàn)。這真是一件讓人吃驚的事情。

不管怎么樣,總算是發(fā)布了。

2011 年 3 月,我們開(kāi)始進(jìn)行豌豆莢 2.0 的設(shè)計(jì)工作。豌豆莢 2.0 要解決什么問(wèn)題?

傳統(tǒng)的理解需求的過(guò)程,有許多不同的方式。例如,直接進(jìn)行用戶訪談,發(fā)放調(diào)查問(wèn)卷,購(gòu)買市場(chǎng)研究報(bào)告,或者聽(tīng)聽(tīng)意見(jiàn)領(lǐng)袖們?cè)趺凑f(shuō)。

我們的方式,就是依賴直覺(jué)和經(jīng)驗(yàn)。

這有兩個(gè)前提條件,一是豌豆莢已經(jīng)運(yùn)營(yíng)了一年,我們自信對(duì)用戶需求的理解已經(jīng)有了一定的積累;二是實(shí)際上在當(dāng)時(shí)來(lái)看,已經(jīng)不是不清楚用戶需求的問(wèn)題,而是用戶的大量需求我們?cè)械漠a(chǎn)品和技術(shù)架構(gòu)無(wú)法滿足的問(wèn)題。因此我們做的第一件事情,就是把我們腦海里面堆積如山的想做的事情整理出來(lái)。

203HUX6-3
 

第二件事情,豌豆莢的愿景在一年多的時(shí)間里也慢慢變得清晰。將這個(gè)愿景整理成思維導(dǎo)圖,我們就擁有了一個(gè)幾年內(nèi)的路線圖。豌豆莢 2.0 如何和這一愿景相匹配,也就是一件自然而然的事情了。

和各種各樣的頭腦風(fēng)暴的過(guò)程一樣,需求的收集是一個(gè)開(kāi)放的過(guò)程。這里面會(huì)有各種各樣的聲音,但需要產(chǎn)品設(shè)計(jì)師來(lái)歸納和整理。

203HU3F-4
 

與此同時(shí),工程師們也在做早期技術(shù)方案的探索。早期的探索過(guò)程就像上圖所示意的一樣。你需要不斷地發(fā)散,又需要不斷地拒絕掉不那么靠譜的想法,留下那些靠譜的,并且進(jìn)行下一個(gè)階段的發(fā)散。如此反復(fù),你就在這發(fā)散與收斂的過(guò)程中取得了進(jìn)展。

豌豆實(shí)驗(yàn)室使用 Google Docs 辦公。在初步的想法確定下來(lái)以后,我們就開(kāi)始使用 Google Docs 協(xié)作,不斷把我們對(duì)產(chǎn)品的想法積累下來(lái)。在紙面上推演的時(shí)間花了一兩個(gè)月的時(shí)間,我們維護(hù)了一個(gè)文檔,一直在更新。這種時(shí)候,是不需要關(guān)心能不能做出來(lái),也不需要趕時(shí)間的。

不是所有的溝通工作都適合用開(kāi)會(huì)這種形式來(lái)解決。尤其是對(duì)產(chǎn)品的想法,很多時(shí)候可能就是躺在床上睡著之前的靈光一現(xiàn),如何更有效地捕捉到這種靈光,比何高效地溝通更重要。

203HWE6-5
 

所以那段時(shí)間我們?cè)?Google Docs 上維護(hù)了兩個(gè)文檔,一個(gè)是基礎(chǔ)框架的需求,只要想到什么東西,我們就會(huì)添加進(jìn)去??赡芷渌耐瑢W(xué)過(guò)了幾天甚至是幾周的時(shí)間突然在這個(gè)基礎(chǔ)上想到了什么新的想法,才會(huì)上去回復(fù)進(jìn)去。Google Docs 的評(píng)論功能非常適合于進(jìn)行這種異步的討論。

203HWc7-6
 

另外一個(gè)是所有功能的列表。這個(gè)文檔叫 One-Pager,本意是在一頁(yè)內(nèi)將所有的功能寫(xiě)進(jìn)去,結(jié)果最后發(fā)現(xiàn)打印出來(lái)有 10 頁(yè)長(zhǎng)。

203HWW6-7
 

靈感一發(fā)不可收拾,我們寫(xiě)了很多文檔,放在同一個(gè)目錄里面。和一部分設(shè)計(jì)項(xiàng)目的過(guò)程不同,到這里為止,我們還沒(méi)有動(dòng)手畫(huà)任何東西。不是不想畫(huà),而是強(qiáng)忍住了畫(huà)出來(lái)的沖動(dòng)。我們覺(jué)得,應(yīng)該先從比較抽象和邏輯的層次,把產(chǎn)品的思路整理清楚。

203HSL8-8
 

這張圖是我用來(lái)做規(guī)劃的工作,在這里面列出了豌豆莢所有的頁(yè)面和功能,確保不會(huì)出現(xiàn)大的遺漏。這同時(shí)也做為工作規(guī)模和進(jìn)度的估計(jì),看這張圖,我們就能知道有多少工作已經(jīng)完成,有多少工作還沒(méi)有做。

203HS1E-9
 

設(shè)計(jì)工作往往是發(fā)散的,但經(jīng)過(guò)之前的鋪墊,我們已經(jīng)整理出“再設(shè)計(jì)工作”的幾條主線。其中之一,就是對(duì)信息架構(gòu)的改善。類似這樣的主題,我們?cè)?Basecamp 中創(chuàng)建了不同的 To-Do 列表,方便頭腦風(fēng)暴要解決的問(wèn)題,同時(shí)也一個(gè)個(gè)劃掉,確保項(xiàng)目始終圍繞著重設(shè)計(jì)要解決的問(wèn)題來(lái)進(jìn)行,不過(guò)分發(fā)散。

我們有時(shí)候引入大量的討論,但又注意不和所有的人討論。在豌豆實(shí)驗(yàn)室這種開(kāi)放透明的工作環(huán)境中,如何「管理」好其他人的腦力是一個(gè)挑戰(zhàn)。你希望其他人的觀點(diǎn)、知識(shí)、經(jīng)驗(yàn)是能對(duì)你的項(xiàng)目帶來(lái)幫助,又不希望會(huì)對(duì)你的決策帶來(lái)干擾,避免「集體決策」的結(jié)果。

Jesse James Garrett 在《用戶體驗(yàn)的要素》 [PDF] 這張著名的圖表中,將用戶體驗(yàn)劃分為幾個(gè)不同的層次。隨著設(shè)計(jì)的過(guò)程從抽象到具象,產(chǎn)品也一步步走向完整。

接下來(lái)的設(shè)計(jì)過(guò)程就是一個(gè)從抽象到具象的過(guò)程。

203HTI1-10
 

我們開(kāi)始有手繪的線框圖。

203HVH3-11
 

為了探索更好的信息架構(gòu),嘗試了各種各樣的方案?;旧鲜前凑张帕薪M合的方式,把各種可能的情況都試了一遍。

203HU963-12
 

就和之前那張示意圖一樣,設(shè)計(jì)的過(guò)程就是不斷發(fā)散嘗試,同時(shí)也不斷拋棄自己的嘗試,挑選勝出者,再進(jìn)行下一輪的發(fā)散和拋棄。

203HV2H-13
 

203HUa9-14
 

這種不斷發(fā)散地嘗試在什么時(shí)候可以停止呢?一直到出現(xiàn)一些自己滿意的方案為止。什么叫一些?什么叫做自己滿意呢?就是覺(jué)得沒(méi)有什么可以改了。高質(zhì)量的設(shè)計(jì)一定是有滿墻的迭代草稿做為基礎(chǔ)。第一稿就非常完美,有可能性,但非常罕見(jiàn)。

203HUV0-15
 

同時(shí)我們也開(kāi)始了視覺(jué)設(shè)計(jì)的工作。這是不符合一般設(shè)計(jì)項(xiàng)目的流程的,但我們的時(shí)間不允許做完所有的交互設(shè)計(jì),再進(jìn)入視覺(jué)設(shè)計(jì)這一流程。

前文再續(xù),說(shuō)到我們一邊畫(huà)線框圖,一邊就請(qǐng)我們遠(yuǎn)在紐約的視覺(jué)設(shè)計(jì)師開(kāi)始開(kāi)展了視覺(jué)設(shè)計(jì)的工作。一方面是因?yàn)檫@樣比較節(jié)省時(shí)間,另外一方面也和項(xiàng)目參與者的技能比較有關(guān)。我和劉亞平(豌豆莢的產(chǎn)品設(shè)計(jì)師)都不擅長(zhǎng)視覺(jué)設(shè)計(jì),但自認(rèn)還是有能力將一個(gè)比較完善的視覺(jué)設(shè)計(jì)語(yǔ)言應(yīng)用到已有的產(chǎn)品上的。

203HTM1-16
 

因此,在視覺(jué)設(shè)計(jì)的基本樣式出現(xiàn)后,我們整個(gè)設(shè)計(jì)的過(guò)程基本上就是直接輸出高保真的設(shè)計(jì)稿的過(guò)程。從沒(méi)有草圖到線框圖到視覺(jué)設(shè)計(jì)稿的過(guò)程后,效率提高了很多,依賴已經(jīng)確定的視覺(jué)風(fēng)格,也可以保證不出現(xiàn)沖突,還有高度的一致性。

203HWN2-17
 

203HT1P-18
 

借助這個(gè)風(fēng)格的工作模式,我們往往在一張圖上會(huì)同時(shí)標(biāo)注產(chǎn)品邏輯和呈現(xiàn)大量細(xì)節(jié)的視覺(jué)實(shí)現(xiàn)指南。通過(guò)這種方式,我們可以一步到位地和開(kāi)發(fā)人員講清楚我們需要的是什么。這是非常重要的,很多復(fù)雜的交互中,有一點(diǎn)點(diǎn)不清楚,要返工的成本可能就會(huì)非常高。這張圖展示的是對(duì)通用搜索功能的設(shè)計(jì),設(shè)計(jì)師需要考慮到拼音首字母、標(biāo)點(diǎn)符號(hào)全角還是半角等等的細(xì)節(jié)。然而,即使做到這個(gè)程度,仍然出現(xiàn)了很多因溝通不清而出現(xiàn)返工的情況。

203HU641-19
 

這是豌豆莢 2.0 左側(cè)導(dǎo)航的部分設(shè)計(jì)稿,我們遍歷了所有的狀態(tài),力圖在產(chǎn)品定義中將所有情況都考慮到。

我們的經(jīng)驗(yàn)是,不要拘泥于教科書(shū)上的流程——當(dāng)然,你需要了解。在這個(gè)階段,也要和所有人討論,讓他們告訴你各種各樣的邊緣情況。

整個(gè)設(shè)計(jì)過(guò)程我們進(jìn)行了數(shù)百次嘗試。實(shí)際數(shù)字應(yīng)該要比這個(gè)多,因?yàn)槲覀兌紱](méi)有每做一次,就保存一次版本的習(xí)慣。

203HUM8-20
 

在確定了歡迎頁(yè)面的主要任務(wù)是加強(qiáng)用戶和自己手機(jī)之間的情感聯(lián)系后,我們首先是收集了一些圖片,來(lái)溝通我們希望這個(gè)頁(yè)面?zhèn)鬟_(dá)什么情感。

然后在這個(gè)基礎(chǔ)上進(jìn)行了各種概念的探索。

比如,是不是在歡迎頁(yè)面上顯示通知、手機(jī)里面的圖片、推薦應(yīng)用等等:

203HT3S-21
 

只顯示圖片:

203HQc0-22
 

顯示應(yīng)用:

203HS518-23
 

將手機(jī)的墻紙取出來(lái),和歡迎頁(yè)面結(jié)合到一起去?我們收集了一些常見(jiàn)的壁紙,進(jìn)行了效果模擬:

203HWM9-24
 

203HWS1-25
 

在確定了幾個(gè)比較明確的方向后——使用我們向用戶推薦的應(yīng)用,要結(jié)合用戶在手機(jī)上設(shè)置的墻紙——我們進(jìn)行了更多的探索:

203HSH5-26
 

這是最后的樣子:

203HVR3-27
 

203HTX8-28
 

203HT261-29
 

這期間,為了探索交互的效果,我們還開(kāi)發(fā)了幾個(gè)可交互的動(dòng)畫(huà)原型,供設(shè)計(jì)師們實(shí)際評(píng)估。豌豆莢 2.0 的 Web 框架也會(huì)這些效果的實(shí)現(xiàn)帶來(lái)了便利。

前面說(shuō)到,如果沒(méi)有數(shù)量眾多的迭代,不大可能有一個(gè)好的設(shè)計(jì)。豌豆莢 2.0 就是其中一個(gè)案例。

  九

然后就是漫長(zhǎng)的設(shè)計(jì)、開(kāi)發(fā)、返工、再設(shè)計(jì)、再開(kāi)發(fā)的過(guò)程。我們一直看著那張大圖。

2011 年 8 月,我們發(fā)了第一個(gè)公測(cè)的版本,發(fā)電郵邀請(qǐng)了幾萬(wàn)位熱心用戶參與測(cè)試。從這時(shí)候開(kāi)始,我們用盡了各種定量和定性的辦法來(lái)不斷邀請(qǐng)用戶參與,不斷評(píng)估效果。從傳統(tǒng)的可用性測(cè)試、到性能數(shù)據(jù)評(píng)估、到定量的問(wèn)卷調(diào)查等等。到 2012 年 2 月我們的各項(xiàng)指標(biāo)終于都滿足條件,準(zhǔn)備正式發(fā)布時(shí),豌豆莢 2.0 已經(jīng)積累了超過(guò) 100 萬(wàn)的測(cè)試用戶。

回頭來(lái)看,豌豆莢的愿景仍然有大部分沒(méi)有實(shí)現(xiàn)。上面的這些設(shè)計(jì),在發(fā)布后的半年多時(shí)間里也在不斷進(jìn)行調(diào)整,有不少設(shè)計(jì)已經(jīng)又被我們認(rèn)為更好的設(shè)計(jì)取代了。而且,我們的路線圖里面還有更多我們認(rèn)為可以再次改變整個(gè)產(chǎn)品體驗(yàn)的想法。我們現(xiàn)在有一個(gè)五位產(chǎn)品設(shè)計(jì)師組成的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì),但我們要做的事情還有很多?,F(xiàn)在豌豆莢總安裝量超過(guò) 6000 萬(wàn),豌豆莢 2.0 的安裝量超過(guò) 5000 萬(wàn),但遠(yuǎn)遠(yuǎn)不是我們理想的全部。

來(lái)源:王俊煜

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 一個(gè)牛逼的產(chǎn)品做出來(lái)的多難啊

    來(lái)自北京 回復(fù)
  2. 天哪,一個(gè)完整的產(chǎn)品流程。寶貴啊。

    來(lái)自廣東 回復(fù)