「案例」我们是怎样设计 Foursquare Swarm 5.0 的

鹿园

奥特曼真的存在

Swarm 5.0 在这个月（八月）正式上线，新版本在功能、交互、视觉上都进行了大幅的设计改动。Swarm 设计团队中的产品设计师 Greg Dougherty 将整个设计过程做了一个分享。笔者连夜译出这篇文章，希望能对大家有所帮助。

阅读信息：

文章出处：Medium
阅读时间：12 分钟
流量预估：1.7 MB

作者信息：

姓名：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：

谁家产品的重大改版没遇过几个大坑。下面是我踩过的两个坑：

让工程师从头参与。我一直在努力去做的一件事，便是让工程师尽早地参与到设计工作中。如果由具有技术背景的同事审阅早期的设计，告诉我我的想法是否太疯狂，是否超出了项目的范围，我相信自己可以借此快速决策并节省时间。为了整个设计团队的进度，我努力了很多次。有时一个很小的设计更改可能要改很多行代码。我有责任持续让工程师参与其中并尽早发现这些问题。
尽早分享，经常分享，乱中取序。我告诉自己，这要在我负责的每个项目或功能（虽然我并不总能做到位）中做到。有很多人和团队想要参与早期的设计决策，但并不总是可行。有时候很难靠抄近路来获得一个清晰有意义的意见。记住这点，正如分享很重要，你作为设计师，需要接受所有反馈并基于它们做出明智的决定。