新的Messenger,什么都没变,什么都变了。

概要

Messenger刚刚焕然一新,从设计师这里了解一些背后的故事吧。

也许,你已经注意到了,最近的Messenger应用的界面和操作有些不一样。那个应用上logo的紫色?是新的。那个Instagram上的聊天界面?也是新的。那是因为在2020年末,我们重构了应用的品牌,并且添加了一些令人激动的新功能。也许你浏览体验时,会喜欢这种改观。但作为设计师,看到的是这个项目的复杂。

这项工作的独特之处在于,我们要解决两个看似无关的挑战:一个是我们如何使用视觉设计改变人们对Messenger品牌的看法?另一个则是,我们如果通过视觉设计来帮助产品推出的的重大更新?这里,我们解释了为什么要改造 Messenger,以及创造新的视觉,包括logo、新的插画系统的探索,还有其他等等。

背景

Messenger的历史清楚的显示了品牌重塑的过程。Messenger诞生于2011年,作为Facebook.com’s聊天功能的一个扩展,在那时候,我们推出了Messenger第一个移动版本,同时进行了品牌的初始迭代。从那时候起,我们进行了两次的重大更新,一次是在2013年,再次是2018年,这两次为我们后来新的功能和体验的推出还有迭代,奠定了基础。

新的Messenger,什么都没变,什么都变了。

2011 Messenger的界面和logo

到2018年, Messenger变得丰富起来了,有许多的扩展和聊天功能,因为最初的信息架构并不是为了支持这样强大的功能而设计的,所以用户体验变得拥挤和不堪重负,为了解决这个问题,我们重新设计打磨了Messenger,使用更简单的信息结构,清爽的设计语言,也更新了颜色系统 logo。

直到2020年,我们沿用2018年的系统创建新的聊天功能,尤其是超越了聊天本身的功能。我们推出了Messenger rooms,Watch together, 一个不断拓展的增强现实(augmented reality 简称AR)过滤器库,视频聊天360度背景。展望2020年,公司准备在Messenger和Instagram之间推出跨应用的通信功能,我们意识到 Messenger已经不仅仅是一个信息产品了,它需要一个新的公众身份,于是,品牌重设计的项目由此诞生了。

目标

现在我们可以看到Messenger和类似产品的历史演变,了解新品牌需要传达什么。用户把Messenger当做Facebook的聊天服务,但这种认知并不是我们想传达的,从这里我们得到了重塑品牌的两个主要目标。

我们的第1个目标是将Messenger品牌,从一个和朋友简单的聊天工具,变成在你喜欢的设备上和你喜欢的人聊天玩乐的地方,包括Instagram。我们计划在Messenger和Instagram跨应用通信功能上线的同时推出改版。所以帮助Instagram的用户升级到Messenger,对我们来说是非常重要的。

我们的第2个目标是传达Messenger独特的通信功能。我们需要和市场上其他严格的消息应用做一个区分,传达我们的增加价值——Messenger 提供 Watch Together, AR effects, Messenger room等等的功能。 我们甚至考虑移除logo上的气泡,因为通过竞品分析发现,许多消息应用都使用了语音气泡在他们的logo上,下面你会看到,我们为什么还是选择了保留气泡。

 Logo颜色

我们开始着手Messenger的工作,从logo上做了最大尝试的改变,首先从颜色开始。如果在logo上加一个戏剧性的渐变呢,或者就是一个纯色,也做了不同方向的渲染。我们也会问,如果logo是3d的呢?或者看起来像学校笔记本背面的线稿?或者根本就没有颜色呢?我们的团队假设了每个方案将会传达什么,以及这些传达是否和我们的目标一致。

新的Messenger,什么都没变,什么都变了。

从左到右,2020年重设计前Messenger logo的4种颜色的尝试

一旦我们有了这4种新方案,我们便和Facebook的内部创意机构合作,考虑这4种logo与当前的logo在真实的市场环境中是怎样的。我们一起想象了每种方案在真实世界的可能——它们放在打印广告上看起来如何?放在线上的banners呢,户外广告等等,在空白的纸上探寻颜色就如同在真空里探索那般,它会引起有限的评估;在现实世界中探索可以帮助我们了解这些方案在真实环境中是如何传达交流的,这是很复杂的。

尽管在这4种新方案中,我们每个人都有自己的个人喜欢,但是我们知道作为设计师,我们的工作之一就是站在别人的角度,以及想象别人会怎么理解我们所设计的内容。但是我们的新Messager logo,(就像Facebook所有的产品一样)将影响数10亿规模的人,包括来自世界各国生活环境截然不同的人们,我们需要依靠用户体验研究。

我们请定性和定量的用户体验研究团队,假设了每种logo颜色将会对我们公司以外的人传达出什么,同时牢记我们的目标是建立一个独立的Messenger品牌,与Facebook的关联很少,更多关联的是Instagram。经过很多轮的测试,经过研究确认,我们称之为“紫外线”(也就是左起第二个)对我们试图传达的目标有着正向的反馈。

Logo组合

我们已经完成了颜色的探索,并且很开心已经有了一个方向,然而,我们离新品牌公众发布还有几个月的时间。既然还有这么多时间,于是我们开始想,是不是可以在logo上做更大的动作,展示Messenger“不仅仅只是传递消息”。

我们通过竞品分析发现大多数的消息类应用logo,都包含了语音气泡,所以我们在想如果移除掉我们logo上的语音气泡,会不会和我们想传达的方向更接近呢?我们与内部创意机构合作,选定了4个新logo的组合样式,颜色全部采用“紫外线”渐变,来测试人们将会如何使用产品。我们的用研团队力图了解这4个logo中的任何一个,将会传达“不仅仅只是传递消息”。

新的Messenger,什么都没变,什么都变了。

我们和将会使用这个产品的人一起测试了Messenger的logo方案。从左至右:当前的语音气泡,在气泡内的形状闪电,没有气泡的闪电形状,粗一点的闪电形状,新形状闪电。

我们的测试结果?很大程度上,人们更喜欢我们当前的语音气泡,这个现象很有趣,作为设计师和创意人员,我们经常很喜欢去做改变,觉得改变会更好。然而这次的研究结果,验证了我们的直觉。结果显示,你研究尝试的内容不一定就是创建logo全部需要的,这次的测试可以帮助我们保持诚实和看齐目标。

插画系统

我们已经完成了logo部分,现在需要扩建一个新的插画系统来支持和补充,我们在2018年精心设计的插画系统服务当时的目标,由于它和Facebook的插画系统太像了,所以我们想要一个全新的插画系统和其他科技产品看起来大有不同,并且更符合Messnger本身的发展及我们此次的目标。

新的Messenger,什么都没变,什么都变了。我们探索了4个方向,从左到右:颜色较少的/有人的元素符号/简单俏皮的/简单的


我们希望插画系统与Messenger的设计语言更紧密的联系在一起。除此之外,插画还有一项特别的工作:除了传达语气和感觉,还需要在应用的导航中起到承接上下文和引导的作用。为了简单和清晰,我们决定使用现有的图像进行新插画系统的设计,而不是进行全新的设计。

感觉最合适的探索就是最简单并且有趣的动效了,以少量的颜色和“紫外线”渐变直接与新设计的logo联系起来。但是我们觉得,在设计目标上不够清晰,也不够完美。

我们一直在努力追求精准,使用少量的颜色,在应用上界面上模拟真实的物理,感觉元素已经嵌入界面里。探索到这里的时候,我们变得清晰起来,有些一些与众不同的东西,并且与新logo和设计系统本身更加的贴合。

新的Messenger,什么都没变,什么都变了。

Messenger 插图系统的进一步尝试演变

我们的用研团队反复测试了这个插画系统,发现它确实可以帮助人们对Messenger有一个新的认知–提供强大而动态的方式与人们连接。

完成品

为了达成目标,我们必须打散品牌的各个环节,检查他们,重构他们,然后再将它们重组在一起。现在,我们已经完成了这些环节,新的Messenger logo和插画系统在应用中变成了一个有凝聚力的品牌。我们很自豪这项工作,并且感谢公司的许多团队齐心协力实现这一目标。

新的Messenger,什么都没变,什么都变了。

从左至右:应用页,启动页,聊天界面,引导页

小结

回顾品牌重塑工作,我们发现了一些点,希望对设计师有用。

在规模上,即使是很小的改变,影响也是非常大的。

尽管所做的改变很小,而且是渐进不易察觉的。但是请记住,不同人群和不同地区的用户,在使用程序时会充分显露出来这些区别。在我们的案例中。一个触达超过数10亿用户的程序,logo无处不在,人人可见,我们所做的任何改变,都必然将产生巨大的影响。

探索带来信心

有时候两点之间最短的距离,并不一定总是直线。尽管这次logo的改版与最开始的logo并没有什么明显的不同,正因为我们做了这样的探索,我们相信所做的改变是对的。有时候,错误的解决方案可以帮助我们找到对的方向。

沟通协作在设计中也同样重要

这篇文章谈到的内容,只是品牌重塑成功发布中所需的很小一部分,如果许多没有跨职能合作伙伴(Messnge和Facebook系列应用)的关怀,敬业精神,和支持。这次的品牌重塑的上线,并不会这么的有效果。尽管看起来是一个随处可见的logo,但其实在设计中,是一个难以想象的复杂的任务,需要大量的合作与协调。

希望屏幕前的你,通过了解我们的过程对你有所帮助,我们迫不及待想给你展示接下来的内容。

英文单词

revamped 改造

led to 导致


output

n. 产量,作品;产生,生产过程;输出功率;(计算机的)输出信息;输出端

v. 输出

reach

vi. 达到;延伸;伸出手;传开

vt. 达到;影响;抵达;伸出

n. 范围;延伸;河段;横风行驶

circumstances

n. 环境,状况;(尤指经济上的)境况;原委(circumstance 的复数)

engaged

adj. 已订婚的;从事……的,忙于……的;电话占线的;(公用卫生间)被占用的;(圆柱)附墙的,部分砌在墙内的

v. 雇用,聘请;参加,从事;吸引,引起(engage 的过去式和过去分词形式)

qualitative

adj. 质量的,定性的,性质的

quantitative

adj. 数量的,量化的,定量的;(诗)由长短步组成的

hypotheses

n. 假定;臆测(hypothesis的复数)

associated with

与…有关系;与…相联系

ultraviolet

adj. 紫外的;紫外线的

n. 紫外线辐射,紫外光

against

prep. 反对;(行为)违背……;(法律或法规)禁止;与……竞争;对……造成伤害(威胁,不利);碰;倚着;逆向;以……为背景;与……相比;防备,抵御;讨厌某人,不赞同某人;作为(某物的)应付款项;(赌博用语)预计……的失败

avenue

n. 大街;林荫大道;(达到某物的)途径,手段,方法,渠道

settled on

选定;授与;停在

sought to

追求;争取;力图

bolt

n. 螺栓,螺钉;闪电,雷电;门闩;弩箭;(布的)一匹,一卷

vt. 筛选;囫囵吞下;(把门、窗等)闩上;突然说出,脱口说出

vi. (门窗等)闩上,拴住;冲出,跳出;(马等的)脱缰;囫囵吞下

instincts

n. [生物] 本能(instinct的复数);[心理] 直觉

by a large margin

以较大幅度,一很大的优势,年夜幅度

outlined

vt. 概述(outline的过去式及过去分词);轮廓

build out

增建;扩建

tie to

依赖;依

restricted

adj. 受限制的;保密的

v. 限制(restrict的过去式和过去分词)

focal

adj. 焦点的,在焦点上的;灶的,病灶的

polish.

v. 抛光,擦亮;修改,润色;(使)完美,改进

n. 磨光,擦亮;擦亮剂;打磨光滑的面;完美,娴熟;优雅,精良

n. (Polish)波兰人;波兰语

embedding

n. 记者随军

v. 把(物体)嵌入;派遣(战地记者等);使(观点)深深植入;嵌进(短语);插入(代码)(embed 的现在分词)

differentiated

adj. 分化型;已分化的;可区分的

v. 使有差别(differentiate的过去分词)

break down

分解;发生故障;失败;毁掉;制服

cohesive

adj. 凝聚的;有结合力的;紧密结合的;有粘着力的

incremental

adj. (定额)增长的;逐渐的,逐步的;递增的

ubiquitous

adj. 普遍存在的;无所不在的

End ^▽^‐ ——

如果觉得这篇文章对你有用,就请点个赞吧!

做人要厚道,转载请注明文章来源: http://www.boxui.com/say-anythings/58852.html