導(dǎo)語：豌豆莢是 Android 手機(jī)用戶喜歡的桌面管理客戶端。在今年年初，它公布了 2.0 版。然而從 1.0 到 2.0，版本號上小小的變化的背后，是凝結(jié)整個(gè)豌豆莢實(shí)驗(yàn)室 10 個(gè)月的努力。豌豆莢創(chuàng)始人王俊煜撰文一篇，講述為什么豌豆莢 2.0 的開發(fā)要花 10 個(gè)月的時(shí)間，這中間整個(gè)團(tuán)隊(duì)經(jīng)歷了怎樣的過程，他們是如何對待產(chǎn)品重構(gòu)這件事的。
一
今年 2 月份的時(shí)候，我們發(fā)布了豌豆莢 Windows 版 2.0。這個(gè)項(xiàng)目的設(shè)計(jì)和開發(fā)時(shí)間有 10 個(gè)月之久，這對很多公司來說可能并不算長。但考慮到這 10 個(gè)月占據(jù)豌豆實(shí)驗(yàn)室當(dāng)時(shí)兩年歷史的接近一半，豌豆莢 2.0 對于我們來說就顯得很重要了。
2009 年年底，我們開始豌豆實(shí)驗(yàn)室的時(shí)候，就希望做不一樣的公司、開發(fā)不一樣的產(chǎn)品。用我們的產(chǎn)品和技術(shù)，來幫用戶解決問題。而不是像很多同行一樣，用其它的更捷徑的方式。兩年的時(shí)間里我們做了很多嘗試。有些嘗試失敗了，也有些嘗試成功了。
「成功」有一個(gè)簡單的標(biāo)準(zhǔn)，即被「借鑒」。2010 年，我們剛剛推出第一代產(chǎn)品的時(shí)候，用了和過去的類似軟件很不一樣的產(chǎn)品設(shè)計(jì)，特別是功能大為減少。有些朋友憂心我們的產(chǎn)品過于簡潔，也有人警告我們說，這種「陽春白雪」的產(chǎn)品在中國是走不通的。但時(shí)至今日，我們已經(jīng)擁有了超過 5000 萬的安裝量，而今天市面上所有有點(diǎn)影響力的桌面手機(jī)管理軟件，基本上也并沒有脫離開豌豆莢定義下來的框架?？梢哉f，我們在過去兩年的時(shí)間里重新定義了桌面手機(jī)管理軟件。
我們不介意別人對我們的跟隨，因?yàn)楫?dāng)別人還在跟隨我們的時(shí)候，我們其實(shí)已經(jīng)給明天做好了準(zhǔn)備。
這就是豌豆莢 2.0 的設(shè)計(jì)背景。
二
為什么要?jiǎng)邮肿鐾愣骨v 2.0?要回答這個(gè)問題，就得知道豌豆莢 1.0 是在什么樣的環(huán)境下出爐的。
豌豆莢 1.0 開始開發(fā)于 2009 年 12 月，當(dāng)時(shí)市面上最為流行的 Android 手機(jī)是 HTC Hero，Motorola Milestone 剛剛推出，Nexus One 還不見蹤影，Android 手機(jī)在國內(nèi)的數(shù)量，應(yīng)該僅在百萬級別。這種情況下我們將豌豆莢專注在 Android 上，其實(shí)上是一種冒險(xiǎn)。實(shí)話實(shí)說，我們自己也并不清楚用戶需求到底是什么樣的。
因此，對于豌豆實(shí)驗(yàn)室來說，最重要的任務(wù)就是盡快推出最小可用的原型產(chǎn)品(Minimum viable product, MVP)，驗(yàn)證用戶需求。
說到這里稍微繞遠(yuǎn)一點(diǎn)——為什么這些年來很少創(chuàng)業(yè)公司會選擇 Windows 客戶端這個(gè)領(lǐng)域?原因很簡單：開發(fā)成本太高。要做一個(gè)非常好的 Windows 客戶端實(shí)在太難了，要比做 Web 服務(wù)、iOS、Android 應(yīng)用都要難得多。這也是為什么我們現(xiàn)在想把我們創(chuàng)造的這種 Web 客戶端的框架開放出來的原因，因?yàn)閷?shí)在太難了。
因此，可以理解為什么豌豆莢最早選擇了用 .NET framework 來開發(fā)——在開發(fā)效率還是用戶體驗(yàn)這個(gè)問題上，我們選擇了開發(fā)效率。盡管這個(gè)決定后來被屢屢詬病，但即使再來一次，我們也一定會做同樣的選擇——因?yàn)檫@可以確保我們能用最快的速度將產(chǎn)品推向市場，迅速摸清用戶需求?？焖俚?。
所以你可以想像，那時(shí)候我們的心態(tài)是：盡快用積木搭個(gè)能走的小車，別的再說。即使很小車不牢靠，但至少能走。而能走了以后，我們應(yīng)該有時(shí)間重新做個(gè)好點(diǎn)的車。
一晃一年過去了。2011 年 2 月份，我們迎來了第 100 萬個(gè)用戶。如我們所料，用戶需求變化很快，一年的時(shí)間里面產(chǎn)品進(jìn)行了多次大幅改動(dòng)，但基礎(chǔ)仍然是那個(gè)用積木搭成的小車。
積木小車已經(jīng)不堪重負(fù)了，已經(jīng)有太多的新功能、太多的缺陷，不推倒重來無法解決。
三
我們最終下定決定要推倒重來，重新設(shè)計(jì)和開發(fā)豌豆莢。這是在 2011 年的 2 月份。扔掉 .NET framework 的架構(gòu)，重新用 C++ 開發(fā)——我們知道這是一件很難的事情。但，實(shí)際情況比我們想象的還難。
無知者無畏。
我們最初的計(jì)劃是 在2011 年 6 月發(fā)布豌豆莢 2.0。不過，到 5 月份的時(shí)候，我們估計(jì)新產(chǎn)品在 7 月份發(fā)布的話，可以比較安全。到 6 月份的時(shí)候，我們再次估計(jì)在 9 月應(yīng)該能發(fā)布，這樣我們能過個(gè)美好的國慶長假?？墒堑搅?9 月份的時(shí)候，估計(jì)的時(shí)間點(diǎn)變成了新年前后。董事會上馮鋒承諾，如果新年前還無法發(fā)布，就要服毒自盡(幸好后來沒有人提起過這件事情)。最后，我們是在 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 萬變成了 2500 萬。這真是一件讓人吃驚的事情。
不管怎么樣，總算是發(fā)布了。
四
2011 年 3 月，我們開始進(jìn)行豌豆莢 2.0 的設(shè)計(jì)工作。豌豆莢 2.0 要解決什么問題?
傳統(tǒng)的理解需求的過程，有許多不同的方式。例如，直接進(jìn)行用戶訪談，發(fā)放調(diào)查問卷，購買市場研究報(bào)告，或者聽聽意見領(lǐng)袖們怎么說。
我們的方式，就是依賴直覺和經(jīng)驗(yàn)。
這有兩個(gè)前提條件，一是豌豆莢已經(jīng)運(yùn)營了一年，我們自信對用戶需求的理解已經(jīng)有了一定的積累;二是實(shí)際上在當(dāng)時(shí)來看，已經(jīng)不是不清楚用戶需求的問題，而是用戶的大量需求我們原有的產(chǎn)品和技術(shù)架構(gòu)無法滿足的問題。因此我們做的第一件事情，就是把我們腦海里面堆積如山的想做的事情整理出來。
第二件事情，豌豆莢的愿景在一年多的時(shí)間里也慢慢變得清晰。將這個(gè)愿景整理成思維導(dǎo)圖，我們就擁有了一個(gè)幾年內(nèi)的路線圖。豌豆莢 2.0 如何和這一愿景相匹配，也就是一件自然而然的事情了。
和各種各樣的頭腦風(fēng)暴的過程一樣，需求的收集是一個(gè)開放的過程。這里面會有各種各樣的聲音，但需要產(chǎn)品設(shè)計(jì)師來歸納和整理。
與此同時(shí)，工程師們也在做早期技術(shù)方案的探索。早期的探索過程就像上圖所示意的一樣。你需要不斷地發(fā)散，又需要不斷地拒絕掉不那么靠譜的想法，留下那些靠譜的，并且進(jìn)行下一個(gè)階段的發(fā)散。如此反復(fù)，你就在這發(fā)散與收斂的過程中取得了進(jìn)展。
五
豌豆實(shí)驗(yàn)室使用 Google Docs 辦公。在初步的想法確定下來以后，我們就開始使用 Google Docs 協(xié)作，不斷把我們對產(chǎn)品的想法積累下來。在紙面上推演的時(shí)間花了一兩個(gè)月的時(shí)間，我們維護(hù)了一個(gè)文檔，一直在更新。這種時(shí)候，是不需要關(guān)心能不能做出來，也不需要趕時(shí)間的。
不是所有的溝通工作都適合用開會這種形式來解決。尤其是對產(chǎn)品的想法，很多時(shí)候可能就是躺在床上睡著之前的靈光一現(xiàn)，如何更有效地捕捉到這種靈光，比何高效地溝通更重要。
所以那段時(shí)間我們在 Google Docs 上維護(hù)了兩個(gè)文檔，一個(gè)是基礎(chǔ)框架的需求，只要想到什么東西，我們就會添加進(jìn)去?？赡芷渌耐瑢W(xué)過了幾天甚至是幾周的時(shí)間突然在這個(gè)基礎(chǔ)上想到了什么新的想法，才會上去回復(fù)進(jìn)去。Google Docs 的評論功能非常適合于進(jìn)行這種異步的討論。
另外一個(gè)是所有功能的列表。這個(gè)文檔叫 One-Pager，本意是在一頁內(nèi)將所有的功能寫進(jìn)去，結(jié)果最后發(fā)現(xiàn)打印出來有 10 頁長。
靈感一發(fā)不可收拾，我們寫了很多文檔，放在同一個(gè)目錄里面。和一部分設(shè)計(jì)項(xiàng)目的過程不同，到這里為止，我們還沒有動(dòng)手畫任何東西。不是不想畫，而是強(qiáng)忍住了畫出來的沖動(dòng)。我們覺得，應(yīng)該先從比較抽象和邏輯的層次，把產(chǎn)品的思路整理清楚。
這張圖是我用來做規(guī)劃的工作，在這里面列出了豌豆莢所有的頁面和功能，確保不會出現(xiàn)大的遺漏。這同時(shí)也做為工作規(guī)模和進(jìn)度的估計(jì)，看這張圖，我們就能知道有多少工作已經(jīng)完成，有多少工作還沒有做。
設(shè)計(jì)工作往往是發(fā)散的，但經(jīng)過之前的鋪墊，我們已經(jīng)整理出“再設(shè)計(jì)工作”的幾條主線。其中之一，就是對信息架構(gòu)的改善。類似這樣的主題，我們在 Basecamp 中創(chuàng)建了不同的 To-Do 列表，方便頭腦風(fēng)暴要解決的問題，同時(shí)也一個(gè)個(gè)劃掉，確保項(xiàng)目始終圍繞著重設(shè)計(jì)要解決的問題來進(jìn)行，不過分發(fā)散。
我們有時(shí)候引入大量的討論，但又注意不和所有的人討論。在豌豆實(shí)驗(yàn)室這種開放透明的工作環(huán)境中，如何「管理」好其他人的腦力是一個(gè)挑戰(zhàn)。你希望其他人的觀點(diǎn)、知識、經(jīng)驗(yàn)是能對你的項(xiàng)目帶來幫助，又不希望會對你的決策帶來干擾，避免「集體決策」的結(jié)果。
六
Jesse James Garrett 在《用戶體驗(yàn)的要素》這張著名的圖表中，將用戶體驗(yàn)劃分為幾個(gè)不同的層次。隨著設(shè)計(jì)的過程從抽象到具象，產(chǎn)品也一步步走向完整。
接下來的設(shè)計(jì)過程就是一個(gè)從抽象到具象的過程。
我們開始有手繪的線框圖。
為了探索更好的信息架構(gòu)，嘗試了各種各樣的方案。基本上是按照排列組合的方式，把各種可能的情況都試了一遍。
就和之前那張示意圖一樣，設(shè)計(jì)的過程就是不斷發(fā)散嘗試，同時(shí)也不斷拋棄自己的嘗試，挑選勝出者，再進(jìn)行下一輪的發(fā)散和拋棄。
這種不斷發(fā)散地嘗試在什么時(shí)候可以停止呢?一直到出現(xiàn)一些自己滿意的方案為止。什么叫一些?什么叫做自己滿意呢?就是覺得沒有什么可以改了。高質(zhì)量的設(shè)計(jì)一定是有滿墻的迭代草稿做為基礎(chǔ)。第一稿就非常完美，有可能性，但非常罕見。
同時(shí)我們也開始了視覺設(shè)計(jì)的工作。這是不符合一般設(shè)計(jì)項(xiàng)目的流程的，但我們的時(shí)間不允許做完所有的交互設(shè)計(jì)，再進(jìn)入視覺設(shè)計(jì)這一流程。
七
前文再續(xù)，說到我們一邊畫線框圖，一邊就請我們遠(yuǎn)在紐約的視覺設(shè)計(jì)師開始開展了視覺設(shè)計(jì)的工作。一方面是因?yàn)檫@樣比較節(jié)省時(shí)間，另外一方面也和項(xiàng)目參與者的技能比較有關(guān)。我和劉亞平(豌豆莢的產(chǎn)品設(shè)計(jì)師)都不擅長視覺設(shè)計(jì)，但自認(rèn)還是有能力將一個(gè)比較完善的視覺設(shè)計(jì)語言應(yīng)用到已有的產(chǎn)品上的。
因此，在視覺設(shè)計(jì)的基本樣式出現(xiàn)后，我們整個(gè)設(shè)計(jì)的過程基本上就是直接輸出高保真的設(shè)計(jì)稿的過程。從沒有草圖到線框圖到視覺設(shè)計(jì)稿的過程后，效率提高了很多，依賴已經(jīng)確定的視覺風(fēng)格，也可以保證不出現(xiàn)沖突，還有高度的一致性。
借助這個(gè)風(fēng)格的工作模式，我們往往在一張圖上會同時(shí)標(biāo)注產(chǎn)品邏輯和呈現(xiàn)大量細(xì)節(jié)的視覺實(shí)現(xiàn)指南。通過這種方式，我們可以一步到位地和開發(fā)人員講清楚我們需要的是什么。這是非常重要的，很多復(fù)雜的交互中，有一點(diǎn)點(diǎn)不清楚，要返工的成本可能就會非常高。這張圖展示的是對通用搜索功能的設(shè)計(jì)，設(shè)計(jì)師需要考慮到拼音首字母、標(biāo)點(diǎn)符號全角還是半角等等的細(xì)節(jié)。然而，即使做到這個(gè)程度，仍然出現(xiàn)了很多因溝通不清而出現(xiàn)返工的情況。
這是豌豆莢 2.0 左側(cè)導(dǎo)航的部分設(shè)計(jì)稿，我們遍歷了所有的狀態(tài)，力圖在產(chǎn)品定義中將所有情況都考慮到。
我們的經(jīng)驗(yàn)是，不要拘泥于教科書上的流程——當(dāng)然，你需要了解。在這個(gè)階段，也要和所有人討論，讓他們告訴你各種各樣的邊緣情況。
八
整個(gè)設(shè)計(jì)過程我們進(jìn)行了數(shù)百次嘗試。實(shí)際數(shù)字應(yīng)該要比這個(gè)多，因?yàn)槲覀兌紱]有每做一次，就保存一次版本的習(xí)慣。
在確定了歡迎頁面的主要任務(wù)是加強(qiáng)用戶和自己手機(jī)之間的情感聯(lián)系后，我們首先是收集了一些圖片，來溝通我們希望這個(gè)頁面?zhèn)鬟_(dá)什么情感。
然后在這個(gè)基礎(chǔ)上進(jìn)行了各種概念的探索。
比如，是不是在歡迎頁面上顯示通知、手機(jī)里面的圖片、推薦應(yīng)用等等：
只顯示圖片：
顯示應(yīng)用：
將手機(jī)的墻紙取出來，和歡迎頁面結(jié)合到一起去?我們收集了一些常見的壁紙，進(jìn)行了效果模擬：
在確定了幾個(gè)比較明確的方向后——使用我們向用戶推薦的應(yīng)用，要結(jié)合用戶在手機(jī)上設(shè)置的墻紙——我們進(jìn)行了更多的探索：
這是最后的樣子：
這期間，為了探索交互的效果，我們還開發(fā)了幾個(gè)可交互的動(dòng)畫原型，供設(shè)計(jì)師們實(shí)際評估。豌豆莢 2.0 的 Web 框架也會這些效果的實(shí)現(xiàn)帶來了便利。
前面說到，如果沒有數(shù)量眾多的迭代，不大可能有一個(gè)好的設(shè)計(jì)。豌豆莢 2.0 就是其中一個(gè)案例。
九
然后就是漫長的設(shè)計(jì)、開發(fā)、返工、再設(shè)計(jì)、再開發(fā)的過程。我們一直看著那張大圖。
2011 年 8 月，我們發(fā)了第一個(gè)公測的版本，發(fā)電郵邀請了幾萬位熱心用戶參與測試。從這時(shí)候開始，我們用盡了各種定量和定性的辦法來不斷邀請用戶參與，不斷評估效果。從傳統(tǒng)的可用性測試、到性能數(shù)據(jù)評估、到定量的問卷調(diào)查等等。到 2012 年 2 月我們的各項(xiàng)指標(biāo)終于都滿足條件，準(zhǔn)備正式發(fā)布時(shí)，豌豆莢 2.0 已經(jīng)積累了超過 100 萬的測試用戶。
回頭來看，豌豆莢的愿景仍然有大部分沒有實(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)在豌豆莢總安裝量超過 6000 萬，豌豆莢 2.0 的安裝量超過 5000 萬，但遠(yuǎn)遠(yuǎn)不是我們理想的全部。
如果你覺得我們的工作方式還合你的胃口，不妨考慮一下加入我們。有興趣，可直接聯(lián)系 junyu@wandoujia.com 或 yaping@wandoujia.com。
題圖由豌豆莢實(shí)驗(yàn)室獨(dú)家提供
