Swarm 5.0 在這個(gè)月（八月）正式上線，新版本在功能、交互、視覺上都進(jìn)行了大幅的設(shè)計(jì)改動(dòng)。Swarm 設(shè)計(jì)團(tuán)隊(duì)中的產(chǎn)品設(shè)計(jì)師 Greg Dougherty 將整個(gè)設(shè)計(jì)過程做了一個(gè)分享。筆者連夜譯出這篇文章，希望能對(duì)大家有所幫助。

作者信息：

• 姓名：Greg Dougherty
• 介紹：product designer at @foursquare. a florida man.
• 聯(lián)系方式：Twitter | Facebook

產(chǎn)品信息：

Swarm 是一個(gè)移動(dòng)端應(yīng)用，讓用戶可以在社交網(wǎng)絡(luò)上分享自己的地理位置。它是 Foursquare 的衍生產(chǎn)品和伴侶，Swarm 允許用戶簽到來分享地理位置，借此和朋友安排一些計(jì)劃或者看看誰(shuí)在附近。

• 宣傳語(yǔ)：Remember everywhere.
• 官網(wǎng)：https://www.swarmapp.com
• 下載地址：App Store | Google Play

在過去的八個(gè)月中，Swarm 團(tuán)隊(duì)花了大功夫進(jìn)行研究，制作原型和構(gòu)建 Swarm 5.0。 終于，我們?cè)谛瞧诙暇€了新版本的 app。 這是一個(gè)涉及了很多人的大項(xiàng)目。Foursquare 聯(lián)合創(chuàng)始人 Dennis Crowley 已經(jīng)分享了為何我們做了這些改變，這意味著，我可以細(xì)說一下我們究竟都做了些什么改變。

作為 Swarm 的產(chǎn)品設(shè)計(jì)師，我在5.0更新中負(fù)責(zé)的部分包括簡(jiǎn)化信息架構(gòu)，更新內(nèi)部樣式規(guī)范以及重新設(shè)計(jì)主頁(yè)和用戶檔案。

任務(wù)開始：

我們的首要任務(wù)是簡(jiǎn)化信息架構(gòu)。 Swarm 有很多好用的功能，但他們的組織方式不夠直觀。我計(jì)劃進(jìn)行一些設(shè)計(jì)優(yōu)化，然后在真實(shí)的時(shí)間段讓真實(shí)的用戶進(jìn)行使用，并基于這些用戶的反饋進(jìn)行學(xué)習(xí)和優(yōu)化信息結(jié)構(gòu)。

用戶研究中最早發(fā)現(xiàn)的問題之一是，我們聽說 Swarm 的視覺語(yǔ)言比我們的核心用戶，那些25到45歲的城市探險(xiǎn)家要顯得稚嫩。 所以除了簡(jiǎn)化之外，我們必須專注于如何讓 Swarm 變得更具現(xiàn)代感。

我們產(chǎn)生了許多不同的設(shè)計(jì)想法，并以草圖，線框和低保真原型的形式呈現(xiàn)出來。 我們對(duì)產(chǎn)生的想法不斷評(píng)估，無(wú)論是打印出來掛在墻上，還是快速制作一些靜態(tài)的原型。

經(jīng)過無(wú)數(shù)次的迭代，我們?cè)俅闻c Foursquare 辦公室外的人進(jìn)行分享。 我們進(jìn)行了新一輪的用戶研究，參與者對(duì)我們降低應(yīng)用復(fù)雜性的做法非常贊同。

這些用戶也很喜歡重新設(shè)計(jì)的「記錄」功能（更多參見 Dennis 的故事），我們把這個(gè)功能前置并居中擺放。他們也喜歡通用的搜索功能，現(xiàn)在位于屏幕的頂部。 顯然，我們的設(shè)計(jì)越來越上路子。

更新我們的內(nèi)部樣式規(guī)范：

Swarm 一直擁有一個(gè)超棒的的視覺設(shè)計(jì)基礎(chǔ)，我們不想在設(shè)計(jì)5.0或之后的版本中丟失這個(gè)基礎(chǔ)。

因此，我們決定建立一個(gè)更為健壯的樣式規(guī)范，幫助我們更好的闡釋信息架構(gòu)。 在整個(gè)迭代過程中，讓設(shè)計(jì)團(tuán)隊(duì)使用同一樣式規(guī)范非常重要，所以我創(chuàng)建了一個(gè)持續(xù)維護(hù)更新的樣式規(guī)范，其中包括了共享的樣式和可復(fù)用的組件。

萬(wàn)事開頭難，主要是因?yàn)槲覀儾恢?Swarm5.0 的整個(gè)視覺風(fēng)格將會(huì)怎樣，但我知道我們想簡(jiǎn)化設(shè)計(jì)語(yǔ)言。 我們也知道，隨著時(shí)間的推移，這份樣式規(guī)范會(huì)持續(xù)迭代。

一旦幾個(gè)主要的部分設(shè)計(jì)到位，接下來的事就順手多了。

接下來，重新設(shè)計(jì)主界面：

正如我所提到的，我們希望以非常突出的方式來展現(xiàn)用戶的簽到，并借此創(chuàng)建一個(gè)非常個(gè)性「記錄」。我們嘗試了很多方案，從非常保守到十分激進(jìn)。 我們希望考慮到所有情況。

我們不斷回溯到一個(gè)想法上，那就是用一根線連接單個(gè)用戶的所有簽到，也就是你現(xiàn)在在應(yīng)用中看到的內(nèi)容。從概念上解釋，我們喜歡垂線，因?yàn)樗谝曈X上很容易表示你去過的地方。 它符合 Swarm 5.0 的改版重心，那就是記錄用戶的生活以及所到之處。

我們把地圖放在主頁(yè)上：地圖炫出了用戶每一次的簽到，非常顯眼并且可與之交互。

更新 Swarm 的兩處反饋樣式：

我們已然決定要簡(jiǎn)化 Swarm 的視覺語(yǔ)言，于是把更新動(dòng)態(tài)消息反饋?zhàn)鳛橄乱粋€(gè)工作重心。由于我們將簽到記錄放到應(yīng)用程序的主頁(yè)（而不是作為用戶檔案的子頁(yè)面），因此簽到反饋信息單元需要與用戶朋友的簽到信息單元看上去一致。 這意味著主頁(yè)（“時(shí)間線”分欄）應(yīng)該與“朋友”分欄非常相似，因?yàn)槎叨紝⒑灥綇?qiáng)調(diào)處理。有下面幾個(gè)難處。

我們想在主屏幕上連接類別圖標(biāo)以創(chuàng)建垂直視覺引導(dǎo)線，將用戶訪問過的地方連接起來。這很難，因?yàn)槲覀冃枰粋€(gè)對(duì)于其他眾多類型的信息單元都行的通的方案。最終，我們的做法是在簽到的左側(cè)進(jìn)行留白，借此讓垂直視覺引導(dǎo)線沿著屏幕一路向下。

這些信息單元還得清楚地表明你可以確認(rèn)或否認(rèn)去過一個(gè)地方。為此，我們創(chuàng)建了在時(shí)間軸上灰顯（未確認(rèn)）的訪問。這些選項(xiàng)被有目的的擺出來，所以你可以快速確認(rèn)是否去過那個(gè)地方，然后繼續(xù)瀏覽。

此外，您不想在“時(shí)間軸”分欄中重復(fù)看到自己的頭像，因此我們需要解決如何讓“時(shí)間軸”分欄和“社交”分欄看起來類似。我們?cè)凇皶r(shí)間軸”分欄中使用圓形的類別圖標(biāo)，這有助于保持分欄之間的一致性。

重新設(shè)計(jì)用戶檔案：

我們常說一句話，用戶檔案應(yīng)該是對(duì)其詳細(xì)生活記錄的恰當(dāng)摘要。

在5.0中，需要在用戶資料中突顯最重要的信息和元素。 地圖再一次成為這最重要的功能，我們需要給它提供充足的空間。這有一個(gè)人盡皆知的常識(shí)，那就是人們喜歡在 Facebook 和 Twitter 上分享他們的地理位置。我們決定，在用戶資料頂部放置一個(gè)放大的本地地圖，并在上面放置橙色圖釘，這是突顯用戶所到之處的最明顯的方式。我們按照卡片狀布局將我們認(rèn)為用戶最關(guān)心的一些信息進(jìn)行排版。

另一個(gè)來自用戶資料頁(yè)面的挑戰(zhàn)，是確定哪些是最突出的信息。最后，我們一致同意，基于 Swarm 的新老用戶反饋，簽到，地點(diǎn)，類別（保留信息架構(gòu)和設(shè)計(jì)元素），熱點(diǎn)和成就是最有吸引力的信息。

兩個(gè)重要設(shè)計(jì) tip：

誰(shuí)家產(chǎn)品的重大改版沒遇過幾個(gè)大坑。 下面是我踩過的兩個(gè)坑：

讓工程師從頭參與。我一直在努力去做的一件事，便是讓工程師盡早地參與到設(shè)計(jì)工作中。如果由具有技術(shù)背景的同事審閱早期的設(shè)計(jì)，告訴我我的想法是否太瘋狂，是否超出了項(xiàng)目的范圍，我相信自己可以借此快速?zèng)Q策并節(jié)省時(shí)間。為了整個(gè)設(shè)計(jì)團(tuán)隊(duì)的進(jìn)度，我努力了很多次。有時(shí)一個(gè)很小的設(shè)計(jì)更改可能要改很多行代碼。我有責(zé)任持續(xù)讓工程師參與其中并盡早發(fā)現(xiàn)這些問題。

盡早分享，經(jīng)常分享，亂中取序。我告訴自己，這要在我負(fù)責(zé)的每個(gè)項(xiàng)目或功能（雖然我并不總能做到位）中做到。有很多人和團(tuán)隊(duì)想要參與早期的設(shè)計(jì)決策，但并不總是可行。有時(shí)候很難靠抄近路來獲得一個(gè)清晰有意義的意見。記住這點(diǎn)，正如分享很重要，你作為設(shè)計(jì)師，需要接受所有反饋并基于它們做出明智的決定。

最后：

回顧所有的計(jì)劃，原型制作，研究，設(shè)計(jì)和搭建。上線 Swarm 5.0是一個(gè)巨大的壯舉。工程團(tuán)隊(duì)在 Swarm 中重寫了許多關(guān)鍵界面，幾乎每個(gè)頁(yè)面都在某種程度上被更改。 過去八個(gè)月，有超過20人致力于這個(gè)工程，其中尤其包括 Sam Brown 和 Jack Osborne，他們?cè)谠O(shè)計(jì)工作上幫了大忙。

所以！你還在等什么？ 現(xiàn)在下載 Swarm 5.0。 我們希望你喜歡這個(gè)產(chǎn)品。

本文來自知乎專欄「非科班設(shè)計(jì)」，作者徐小馬。

「通過改版，大幅提升商業(yè)價(jià)值的實(shí)戰(zhàn)經(jīng)驗(yàn)」

1. 《騰訊ISUX丨通過優(yōu)化，我們將QQ會(huì)員付費(fèi)用戶數(shù)提高了5倍！》
2. 《我用目標(biāo)導(dǎo)向設(shè)計(jì)法，完成了愛奇藝PC站風(fēng)云榜的改版設(shè)計(jì)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com