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

作者信息：

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

產品信息：

Swarm 是一個移動端應用，讓用戶可以在社交網絡上分享自己的地理位置。它是 Foursquare 的衍生產品和伴侶，Swarm 允許用戶簽到來分享地理位置，借此和朋友安排一些計劃或者看看誰在附近。

• 宣傳語：Remember everywhere.
• 官網：https://www.swarmapp.com
• 下載地址：App Store | Google Play

在過去的八個月中，Swarm 團隊花了大功夫進行研究，制作原型和構建 Swarm 5.0。 終于，我們在星期二上線了新版本的 app。 這是一個涉及了很多人的大項目。Foursquare 聯合創始人 Dennis Crowley 已經分享了為何我們做了這些改變，這意味著，我可以細說一下我們究竟都做了些什么改變。

作為 Swarm 的產品設計師，我在5.0更新中負責的部分包括簡化信息架構，更新內部樣式規范以及重新設計主頁和用戶檔案。

任務開始：

我們的首要任務是簡化信息架構。 Swarm 有很多好用的功能，但他們的組織方式不夠直觀。我計劃進行一些設計優化，然后在真實的時間段讓真實的用戶進行使用，并基于這些用戶的反饋進行學習和優化信息結構。

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

我們產生了許多不同的設計想法，并以草圖，線框和低保真原型的形式呈現出來。 我們對產生的想法不斷評估，無論是打印出來掛在墻上，還是快速制作一些靜態的原型。

經過無數次的迭代，我們再次與 Foursquare 辦公室外的人進行分享。 我們進行了新一輪的用戶研究，參與者對我們降低應用復雜性的做法非常贊同。

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

更新我們的內部樣式規范：

Swarm 一直擁有一個超棒的的視覺設計基礎，我們不想在設計5.0或之后的版本中丟失這個基礎。

因此，我們決定建立一個更為健壯的樣式規范，幫助我們更好的闡釋信息架構。 在整個迭代過程中，讓設計團隊使用同一樣式規范非常重要，所以我創建了一個持續維護更新的樣式規范，其中包括了共享的樣式和可復用的組件。

萬事開頭難，主要是因為我們不知道 Swarm5.0 的整個視覺風格將會怎樣，但我知道我們想簡化設計語言。 我們也知道，隨著時間的推移，這份樣式規范會持續迭代。

一旦幾個主要的部分設計到位，接下來的事就順手多了。

接下來，重新設計主界面：

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

我們不斷回溯到一個想法上，那就是用一根線連接單個用戶的所有簽到，也就是你現在在應用中看到的內容。從概念上解釋，我們喜歡垂線，因為它在視覺上很容易表示你去過的地方。 它符合 Swarm 5.0 的改版重心，那就是記錄用戶的生活以及所到之處。

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

更新 Swarm 的兩處反饋樣式：

我們已然決定要簡化 Swarm 的視覺語言，于是把更新動態消息反饋作為下一個工作重心。由于我們將簽到記錄放到應用程序的主頁（而不是作為用戶檔案的子頁面），因此簽到反饋信息單元需要與用戶朋友的簽到信息單元看上去一致。 這意味著主頁（“時間線”分欄）應該與“朋友”分欄非常相似，因為二者都將簽到強調處理。有下面幾個難處。

我們想在主屏幕上連接類別圖標以創建垂直視覺引導線，將用戶訪問過的地方連接起來。這很難，因為我們需要一個對于其他眾多類型的信息單元都行的通的方案。最終，我們的做法是在簽到的左側進行留白，借此讓垂直視覺引導線沿著屏幕一路向下。

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

此外，您不想在“時間軸”分欄中重復看到自己的頭像，因此我們需要解決如何讓“時間軸”分欄和“社交”分欄看起來類似。我們在“時間軸”分欄中使用圓形的類別圖標，這有助于保持分欄之間的一致性。

重新設計用戶檔案：

我們常說一句話，用戶檔案應該是對其詳細生活記錄的恰當摘要。

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

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

兩個重要設計 tip：

誰家產品的重大改版沒遇過幾個大坑。 下面是我踩過的兩個坑：

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

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

最后：

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

所以！你還在等什么？ 現在下載 Swarm 5.0。 我們希望你喜歡這個產品。

本文來自知乎專欄「非科班設計」，作者徐小馬。

「通過改版，大幅提升商業價值的實戰經驗」

1. 《騰訊ISUX丨通過優化，我們將QQ會員付費用戶數提高了5倍！》
2. 《我用目標導向設計法，完成了愛奇藝PC站風云榜的改版設計》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com