实战改版经验！我们是怎样网页设计foursquareswarm5.0的？

Swarm 5.0 在这个月（八月）正式上线，新版本在功能、交互、视觉上都进行了大幅的网页设计​改动。Swarm 网页设计团队中的产品网页设计师 Greg Dougherty 将整个网页设计过程做了一个分享。笔者连夜译出这篇文章，希望能对大家有所帮助。
产品信息：
Swarm 是一个移动端应用，让用户可以在社交网络上分享自己的地理位置。它是 Foursquare 的衍生产品和伴侣，Swarm 允许用户签到来分享地理位置，借此和朋友安排一些计划或者看看谁在附近。
宣传语：Remember everywhere.
在过去的八个月中，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人致力于这个工程。