实战改版经验!我们是怎样设计Foursquare Swarm 5.0的? - 优设网 - UISDC

实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?

2017/08/24 评论区

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

作者信息:

  • 姓名:Greg Dougherty
  • 介绍:product designer at @foursquare. a florida man.
  • 联系方式:Twitter | Facebook

产品信息:

Swarm 是一个移动端应用,让用户可以在社交网络上分享自己的地理位置。它是 Foursquare 的衍生产品和伴侣,Swarm 允许用户签到来分享地理位置,借此和朋友安排一些计划或者看看谁在附近。

在过去的八个月中,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 BrownJack Osborne,他们在设计工作上帮了大忙。

所以!你还在等什么? 现在下载 Swarm 5.0。 我们希望你喜欢这个产品。

本文来自知乎专栏「非科班设计」,作者徐小马

「通过改版,大幅提升商业价值的实战经验」

  1. 《腾讯ISUX丨通过优化,我们将QQ会员付费用户数提高了5倍!》
  2. 《我用目标导向设计法,完成了爱奇艺PC站风云榜的改版设计》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/foursquare-swarm-5-0-redesign

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 优设大课堂 设计师干货 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里