BACK >
实战改版经验!我们是怎样网页设计foursquareswarm5.0的?
作者:吾诺瀚卓    浏览次数:77    日期:2017-09-13

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人致力于这个工程。