【UXRen译#32】设计案例分享——Swarm产品的品牌及视觉设计流程

一、背景信息

2009年以来，Foursquare有两个核心用例（功能）：通过签到与朋友分享你的位置，以及搜索附近最好的场所。

与它所有的产品特点一样，Foursquare对问题的处理通常需要冗长的反应周期。

一般来说，对个性化搜索功能感兴趣的人不愿意使用Foursquare签到或者分享他们的位置。

 

我们曾和很多的Foursquare用户聊天，发现他们要么打开应用来搜索，要么单独签到，很少这两种情况同时发生。这就是我们决定大胆改善这两个用例（功能）的原因。

筛选一系列的解决方案后，我们最终决定把两个用例（功能）分解成独立的应用程序（APP），这是用户最自然的使用方式。一个致力于分享你所在的位置，而另一个用于个性化的本地搜索。这意味着我们把签到功能从Foursquare中移出，做成一款二级应用程序（APP）——Swarm，而Foursquare会100%聚焦本地搜索和发现。

（图片说明：最终的文字商标和确定的LOGO）

 

二、初遇Swarm

Swarm是一款最快捷、便利不落后朋友、约朋友的应用。作为原生Foursquare签到体验的进化版，Swarm提供了一个你所有伙伴的大致概览以及他们在做什么，这样使得在线上的联系和线下的见面更加简单。

（图片说明：考特尼•克里斯托弗和妮可•福米卡的UI设计）

 

三、品牌的诞生

在Red Antler（美国品牌设计机构）为Swarm 和 Foursquare设计整个品牌的过程，我和朋友们密切合作，很高兴在一个多月共同工作时间把这儿亲切称作“家”。

期间我有幸在应用程序（APP）的视觉设计上与Swarm团队近距离合作，同时我也参与了应用程序（APP）的品牌设计。

（图片说明：从左到右：扎克•达文波特、大卫•卡特举、迈克）

 

（图片说明：左边：关于应用名称的早期想法；右边：品牌设计初期，我的检查清单）

 

3.1 第一部分：灵感描绘

我们想让Swarm感觉轻快、顽皮、并唤起惊喜，所以我们需要一个标识来匹配这种个性。在开始的时候，我们用Pinterest收集参考资料和意象素材，然后打印、裁剪，并把它们排列在情绪板上。

（图片说明：我们在私人Pinterest画板上收集的视觉灵感）

（图片说明：从左到右：扎克•达文波特、斯坦•贝克、布朗、考特尼•克里斯托弗、肖恩 @Red Antler总部）

 

（图片说明：Swarm情绪板终稿）

 

3.2 第二部分：形成概念、迭代

一旦我们挑选了一个视觉上能体现我们想要表现个性的情绪板，我们开始勾画LOGO的构想。

我们之前Foursquare版本没有官方logo.（尽管有过许多非官方的），这将是我们合并全新的Foursquare 和 Swarm品牌非常感兴趣的部分。

3.2.1 LOGO标识设计流程

（图片说明：160只蜜蜂，Red Antler的迈克和我合作的成果）

 

(图片说明：一些被挑选的蜜蜂Logo（由Red Antler的迈克和Foursquare扎克设计））

 

3.2.2 文字商标设计过程

（图片说明：一些被挑选的文字商标（迈克、大卫和扎克设计））

 

（图片说明：在Foursquare给丹尼斯•克劳利和团队的呈现）

3.3 第三部分：定稿

（图片说明：最终的文字商标和logo标识定稿）

 

（图片说明：网络广告和横条幅的飞行路径集合方案）

 

（图片说明：最终的应用程序（APP）图标）

 

四、Swarm的视觉设计

当我与Red Antler团队一起进行品牌设计时，考特尼•克里斯托弗主持应用程序的UI设计的工作。最终，我们合并在Swarm设计过程中最开始执行的最多的视觉元素。我曾有过一个针对Swarm桌面贴纸、头像图标和其他视觉的整体风格的无限制的自由（飞机稿）设计。

（图片说明：早期Swarm版本签到按钮。我们想让它代表行动的迅速）

 

（图片说明：最终的图标集合）

 

（图片说明：最终Swarm APP的头像图标及它们在应用界面的呈现。由考特尼克里斯托弗和妮可设计UI）

 

4.1 贴纸

回到2009年我们创立Foursquare的时候，游戏机制的增加帮助用户学习Foursquare，同时使现实世界的体验变得更有趣。用户探索新地点会被授予徽章和点值，对他们最喜欢场所保持忠诚度并获得“市长（Mayorships）”职位。

用户基数的增长导致游戏元素开始分崩离析。当Foursquare还很小的时候，“市长头衔”是很多的。随着社区的增长,获得“市长皇冠”变得几乎不可能。收集徽章是有趣的经验，但我们的许多长期用户很久以前已经停止解锁徽章，如此便不能再增加签到的动机。

所以，在Swarm中，我们决定将游戏化元素做一次必要的更新。现在,人们可以快速将特定标签赋予“签到”操作中，用于表达他们的感受和他们要做什么。相较于打败世界而言，通过在特定的场所类别中击败你的朋友，你将在Swarm中获得市长的席位。如果你比你的朋友们进健身房的次数多，你将获得黄金二头肌贴纸用来在你需要的时候展示力量。

（图片说明：所有图标）

 

作为Swarm品牌和视觉设计团队的一份子是一个令人难以置信的机会和学习经验。我不仅见证了从头开始做一个应用程序需要难以置信的大量的工作，同时获得了在幕后看Red Antler设计品牌过程的机会。

对Swarm来说，所有的新视觉标识才刚刚开始。随着我们对游戏机制和其它功能的不断迭代改进，不落后朋友、约朋友将越来越容易。

 

下载Swarm应用>

 

译者：绿宝；审校：baozhu；发布日期：Sep 15, 2014

原文作者：Zack Davenport

原文链接：https://medium.com/@mrdavenport/swarm-branding-and-visual-design-afb11c949526

版权所有：UXRen翻译组 （转载请注明出处！）