最近我們發(fā)布了最新版的Foursquare，這是一個重要的里程碑。為了完成這一版的APP，我們仔細(xì)打磨，用心設(shè)計(jì)，加緊開發(fā)，現(xiàn)在你已經(jīng)可以下載了。這次開發(fā)的經(jīng)歷非常難得，為此我將這次重新設(shè)計(jì)開發(fā)的過程全部記錄下來，分享給大家。

　　今年早些時候，我們開始重新審視我們已經(jīng)取得的成就，在技術(shù)上的驚人積累。Foursquare 讓朋友們保持聯(lián)系方便碰頭，幫用戶找到目的地，為此我們想盡辦法來迎合這兩種用戶需求，讓功能相互補(bǔ)充。然而隨著時間的推移，用戶的需求有了變化，大家期待更好的個性化搜索體驗(yàn)，去哪兒都簽到已經(jīng)過時，在私密和個性化的大環(huán)境下越來越多的用戶沒有過去那么愿意共享位置。

　　深思熟慮之后，我們認(rèn)為是時候采取下一步行動了，將現(xiàn)有的產(chǎn)品一步步自然地分離，根據(jù)品牌特征、營銷、功能集和接口，將現(xiàn)在的Foursquare分解成能承擔(dān)不同需求的獨(dú)立應(yīng)用程序。

　　于是我們列出了所有問題和解決方案，并將項(xiàng)目命名為“蝙蝠俠和羅賓”，這兩個名字將成為未來兩個不同APP的內(nèi)部代號。未來的Foursquare的代號是“蝙蝠俠(Batman)”，而分離出來的新應(yīng)用Swarm的內(nèi)部代號是“羅賓(Robin)”。

　　新版Foursquare最初的白板草圖

　　分析、線框圖、原型以及報(bào)告

　　在我們的研發(fā)團(tuán)隊(duì)同外部的參與者一同進(jìn)行探討和研究的同時，設(shè)計(jì)團(tuán)隊(duì)也在觀察和分析，哪些地方做的好，哪些部分還不夠成熟可，可以做的更好，并且開始為新的Foursquare設(shè)定全新的風(fēng)格。在探索設(shè)計(jì)風(fēng)格的早期階段，我們將理想中APP應(yīng)有的特性都標(biāo)注在Moodboard上。在我們的設(shè)定中，新版Foursquare應(yīng)該智能而實(shí)用的，神奇而充滿樂趣，值得信賴的。所以，設(shè)計(jì)團(tuán)隊(duì)試圖在配色方案上做了一些更有趣的嘗試，并且為APP的導(dǎo)航模式和信息架構(gòu)的設(shè)計(jì)奠定了基礎(chǔ)。

　　在最開始的日子里，我們花費(fèi)了大量的時間進(jìn)行討論，繪制新版Foursquare的草圖，調(diào)整線框圖和原型。我們定期與利益相關(guān)的組織機(jī)構(gòu)碰頭，展示新版的設(shè)計(jì)進(jìn)度和調(diào)整的細(xì)節(jié)，細(xì)化想法，在碰撞中盡可能融入大家的想法和感受。在不停的取舍中，我們會精簡掉90%的想法，絕大多數(shù)創(chuàng)意并不會長久的留存。

　　有時候，這樣的事情很難接受。我們兢兢業(yè)業(yè)地設(shè)計(jì)，探索，很多創(chuàng)意都經(jīng)過反復(fù)的推敲，但是最終僅有那些最佳的創(chuàng)意能夠打破層層壁壘，保存下來。

　　我們做的第一個大項(xiàng)目，是快速構(gòu)建一個可用的Android版APP原型。我們都覺得這是一個非常不錯的方向，即使這個原型還相對粗糙，尚需打磨。讓用戶與這個可交互的早期原型進(jìn)行互動，我們從中所獲得的數(shù)據(jù)和經(jīng)驗(yàn)是非常寶貴的。在這個過程中，我們發(fā)現(xiàn)了新特性和用戶體驗(yàn)設(shè)計(jì)中所潛藏的問題，尋找答案，評估不同的解決方案的有效性，并完善這個早期原型。

　　我們將用研的結(jié)果與我們的初步設(shè)計(jì)和假設(shè)結(jié)合起來，通過多次的迭代之后，逐步完善。在這個過程中，設(shè)計(jì)團(tuán)隊(duì)還借助Sketch和Keynote，web版的原型等工具，將產(chǎn)品所有的特性都展示在所有員工、研究參與者面前，一同探究最佳方案。這樣的會議我們進(jìn)行很多次，直到我們將整個APP磨合到最佳狀態(tài)。在產(chǎn)品發(fā)布之后，我們依然會繼續(xù)這樣的會議，打磨產(chǎn)品。想到就去做，我們絕不會讓設(shè)想僅僅停留在大腦和討論中。

　　fsBatmanWatermelonColor, fsBatmanNavyColor

　　品牌重塑

　　剛開始的時候，我們原本打算為Foursquare更名，但是隨著產(chǎn)品的改進(jìn)和應(yīng)用程序的調(diào)整，并沒有這么做。不過在這個過程中，F(xiàn)oursquare有了新的Logo，舊的Logo使用了地點(diǎn)簽到標(biāo)記的符號，而單純的字符Logo又仿佛是上一個時代的遺物，所以，新的Logo將兩者特征結(jié)合起來，直觀而富有意味。新Logo設(shè)計(jì)出來之后，也讓我們自己振奮了起來。借助于辦公室墻壁上的MoodBoard來設(shè)計(jì)新Logo，這個過程非常有趣，令我們獲益匪淺。

　　早期的視覺設(shè)計(jì)和用戶反饋便利貼

　　永無止境的視覺設(shè)計(jì)探索

　　在這里，專精于信息架構(gòu)的專家，用戶體驗(yàn)設(shè)計(jì)師，平面設(shè)計(jì)師，品牌推廣專家，視覺設(shè)計(jì)師，交互設(shè)計(jì)師等不同領(lǐng)域的設(shè)計(jì)師和專家為了新的Foursquare傾力合作，這個團(tuán)隊(duì)是不同凡響的。在探索過程中，我們試圖探索更加廣闊和不羈的視覺設(shè)計(jì)，在足夠豐富的可能性之下，再逐步收縮，并且落腳到更容易被大眾接受和熱愛的視覺形象上。這需要大量的時間，并且在過程中會衍生出許多版本。

　　這是一個無比充實(shí)的視覺設(shè)計(jì)探索過程

　　一旦我們敲定了某個新特性，或者將某個復(fù)雜的區(qū)塊軟化，便開始著著手為它們設(shè)計(jì)視覺系統(tǒng)。這個設(shè)計(jì)過程會起始于之前的風(fēng)格指南，它涵蓋了幾乎所有的方面，包括色彩、形象、樣式、圖片的使用規(guī)范，以及按鈕和組件的使用方法。在這個堅(jiān)實(shí)的基礎(chǔ)上，視覺系統(tǒng)的設(shè)計(jì)不會失控，步調(diào)會保持一致，不同設(shè)計(jì)師在處理APP不同部分的時候，會更加協(xié)調(diào)而高效。

　　當(dāng)我們開始為整個APP的色彩進(jìn)行設(shè)計(jì)的時候，我們?yōu)橹貥?gòu)品牌而設(shè)計(jì)的配色方案就開始發(fā)光發(fā)熱了。簡單的碰撞之后，大家都愛上的西瓜粉這種色彩，同時，我們之前努力搜集起來的數(shù)據(jù)也派上了用場，它們可以幫設(shè)計(jì)師來規(guī)避潛藏的問題并且完善設(shè)計(jì)，新版Foursquare的風(fēng)格口味就是這么得來的。從此，用戶在設(shè)定口味和個性化的時候就有了足夠獨(dú)特的方案選擇，并且可以快速地完成搭配。用戶為何能夠快速尋找到他們想要的東西呢?因?yàn)榉桨副旧砭褪菫樗麄兞可矶ㄗ龅?

　　像這樣的大型項(xiàng)目到最后階段總會有陣痛，大家會感到興奮，焦慮，緊張，也會激動。這些情緒我們?nèi)冀?jīng)歷過了。為了讓Android和iOS版的客戶端能按時上線，我們花費(fèi)了大量的精力來關(guān)注產(chǎn)品的細(xì)節(jié)。我們傾注了所有的心血和靈魂到兩個版本的客戶端中，這幾乎是我們團(tuán)隊(duì)協(xié)作之下的巔峰之作。

　　過去的8個月里的經(jīng)歷，現(xiàn)在回首看來是非常難忘，極其好玩的。我們每個人傾注其中的心血，最終成就了產(chǎn)品，并且轉(zhuǎn)化成了實(shí)實(shí)在在的收益。不得不說，這是Foursquare的新的開始。

　　在去年的12月10號的公司例會上，我們展示了一個PPT。在PPT上，我們說了，如果新的產(chǎn)品不能讓我們抑制不住地興奮，它就不用發(fā)布，無需上線。今天我們終于可以暢快地使用它，我們整個團(tuán)隊(duì)都為此激動并且堅(jiān)信它會成功。