Instagram 改变 logo 背后的故事!

如果是一位喜欢在网络上分享照片的用户,那你一定是 Instagram 的用户。而今天,当你打开你的 Instagram 时,你一定先揉了揉自己的眼睛,然后又确认了一下自己没有看错,是的,那就是因为 Instagram 在今天更换了其一系列产品的 logo。

与之前棕色系的相机 logo 不同,新 logo 以渐变的桃红色为基调,背景还是一个相机的模样,不过这个色调的转变着实有些大。同时,他们旗下的 Layout、Hyperlapse 以及 Boomerang 都同步更换了新色系的 logo,看上去非常和谐。

1463030899-1644-Br6PwRqHGpal8gibCzqnyIdibxgw

同时,打开这款应用之后,你也会发现它的 UI 设计也进行了大规模的更新,最明显的就是从之前的蓝白色界面变成了现在的黑白界面;同时,在设计上也更加扁平化、简洁化。

不过,再多的分析也抵不过 Instagram 自己的内心剖析,下面是 Instagram 设计总监 Ian Spalter 在 Medium 上发表的文章,其中完整解析了 Instagram 这次更换图标和 UI 设计背后的想法。文章链接在此:https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.lernptfii )


今天,我们很高兴宣布 Instagram 在内部和外部都获得了一个全新的设计。我们为 Instagram 和其一系列的 Layout、Hyperlapse 以及 Boomerang 设计了一套统一的图标。我们也让 Instagram 的 UI 设计变得更简洁、更一致,这样可以帮助用户的照片和视频更加亮眼。

改变的源泉

当 Instagram 成立的时候,它是一个可以轻松编辑和分享照片的地方。五年之后,事物在向前发展,Instagram 也变成一个比起以往更加多样化的社区,人们也开始使用像 Layout 和 Boomerang 这样的新工具,并且通过 Explore 用新的方式连接世界。

去年,我们团队的一部分成员开始思考如何才能在保持 Instagram 的传承和精神的同时更好地支持这种演化。我们想要去创造一个全新的形象,它要能代表这个社群的全部的表达需求——过去、现在和未来。

1463030906-8918-7GddGlvQ192j3UrVibv0RiaTbs9w

挑战:保留原有的经典还要能体现出变化

通过 #myinstagramlogo 和 Instagram cake 的活动,我们觉得能拥有一个大家都喜欢的 logo 是很幸运的一件事。在充满怀旧气息纹理的圆形图案里,泰迪熊的棕色、迷人的镜头、左上角的彩虹,这些都是满满的爱。

品牌、logo 和产品让用户与我们之间产生了很深的联系,因此人们不想只是因为新奇的缘故就去改变它。但是,Instagram 的图标和设计已经开始变得…无法反映这个社群,而且我们觉得我们可以让它变得更好。

开始改变

旧图标的拟物化设计风格确实让它看上去非常具体,而我们最初的探索也是想让它的风格变得现代化。于是我们从基础开始,去掉了那些装饰,并且让图标变得扁平化。于是我们得到了一个更明亮、更扁平的选择。但它是更好的那一个吗?我们会觉得有必要在一年内再这样做一次吗?

因为这些早期「扁平化」的探索缺乏根本的视觉重量,于是我们决定要搞清楚人们究竟喜欢旧图标的什么以及我们如何才能把这些优点带到新图标上。有趣的是,我们知道人们喜欢彩虹,相机镜头的设计也是一个关键因素;同时,作为这个过程的一部分,我们让公司里的人们凭着他们的记忆在 5 秒中内画出 Instagram 的图标。几乎所有的人都画出了彩虹、镜头和取景器。

有了这个经验,我们决定去将这些元素转变为一个更现代的 App 图标设计,让它能在认可度和通用性之间达到一个平衡。

彩虹与相机镜头是连接的桥梁

1463030907-8750-wxjet1x18g6SzuAO7qL8nI1iafWA

颜色

如果镜头是进入一个更大胆、更简洁设计的桥梁,那彩虹就是带你进入彩色渐变设计的联结者。色彩一直就是 Instagram 最重要的一个组成部分,你能在经典的 App 图标、过滤器和整个社群中的照片与视频中见到各种不同的颜色。

当我们开始重新想象彩虹,我们更多地关注那些简约的设计,但最终我们还是需要更多的温度和能量来填充我们的图形设计。

图形设计

我们意识到我们需要移走之前的相机设计,以此来获得一个更灵活、更可扩展的图形设计,但之前的图形设计被证明对于一个图标的基础来说有些不太够。想要保持以前图标的重量,我们需要去弄清楚如何给新的标志更多的个性,同时还要去掉不必要的东西。

所以问题就变成了:我们要走多远?如果你抽象化了太多,那图形的设计就会和 Instagram 的历史与灵魂相差太远;如果你过于保守,那又很难证明我们的变化所在。

在经过了很多细化处理之后,我们还是采用了一个相机的图形设计方案,同时还为未来几年打下了设计的基础。

视觉一体化

我们的一系列 App——Layout、Boomerang 与 Hyperlapse ——都采用了统一化的外观设计。我们让每一个图标都采用了渐变式的方案,在同一网格内的设计也让它们看上去更加一致。同时,Layout 与 Boomerang 的图标也能更好地反映它们的功能:一个能帮你收集照片,另一个则是迷你的视频循环应用。

1463030913-1364-HgyvZJgfX2o4ibgWs1ich7vT6a4w

新的 UI

围绕着重新思考新图标的同时,我们也开始对 UI 设计进行迭代更新,努力的方向是为人们创造一个简洁干净的环境,这样用户分享的内容就能成为整个 App 中的焦点所在。

1463030917-1299-4p0KzOMQy2ZicZOicU0jD7VvgD7w

虽然图标是一个色彩斑斓的进入 Instagram 的大门,但当你进入了 App 之后,我们相信它的颜色应该要能让你直接发现其中的照片和视频。因此,我们将彩色和干扰因素从界面中剔除了,因为用户的内容应该占据舞台的焦点;同时我们在其他的一些界面中增强了彩色的比重,比如登录流程。

随着我们去掉了这些彩色和干扰,我们在 iOS 或 Android 设备上的交互方式不再那么「原生态」,通过新的交互方式和使用新的 iOS 与 Android 元素、字体和模型,用户将被引导去熟悉这个新界面。

向未来展望

我们这个社群的演进令人激动,我们也希望我们捕捉到了一些生活的片段和创造力,并且将乐观的人们带到了 Instagram 的平台。我们希望人们能够将新的图标视为一个新的创造力的火花,一个能给你带来乐趣、也能代表这些乐趣的东西。我们对于这个新图标所引领的未来满怀激情。

点评:使用新版 Instagram 有种从 iOS6 换成 iOS7 的感觉……

【版权声明】

版权属于原作者

凡未标注版权,其内容归原作者所有,如有侵权请您及时联系我们

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/14565/

(0)
iouedioued
上一篇 2016-05-11 09:16
下一篇 2016-05-12 13:44

相关推荐

  • UED研究如何应用到产品设计中

      腾讯有互联网产品经理的黄埔军校之称。前段时间看腾讯CDC出版的《在你身边,为你设计》,颇有启发。特别摘录书中的《商业价值与用户价值的平衡》中讲UED的部分,看看腾讯是如何让产品责任人和企业高层接受UE…

    2015-07-23
  • 【产品体验报告】探探+豆瓣=披着“大数据+心理测试“的“如故”

    “白首如新,倾盖如故”,出自《史记》,大意是有些人相交虽久却是一辈子的陌生人,有些人刚认识却一见如故。没错,这款APP就取“如故”二字,清新高雅,真的给人一见如故的感觉! 体验环境 体验机型:OPPOR9 系统版本:…

    2017-04-25
  • 两会发声:呼吁全民关注用户体验为,用户体验打Call!-厉害了, 我的国!

    聚焦两会 ,关注用户体验行业发展首先感谢在两会上为用户体验发声的全国政协委员:叶友达。图片来自网络叶友达在两会期间的《人民政协报》记者问答中特别强调了科技创新成果中的用户体验。“说白了,就是我们在产品的设计阶段就要考虑用户"能不能用"、"好不好用"的问题,不要做"不靠谱的创新","好用"的成果才容易转化。”叶友达说。叶友达用具有人工智能交互系统的电视举了例子。“这种电视运用了语音识别、图像识别等技术,用户可以直接通过语音对电视下达指令所...

    2018-03-18
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • 摩拜·用户体验调查

    今天主要分享虚拟背景下,关于摩拜用户体验升级的用户调研流程的介绍。那么,就正式开始啦~01 背景说明老板说,要提升用户体验!(简单粗暴)02 用户数据分析这一阶段主要需要结合背景,综合分析用户相关数据,以此为依据确定调研主题并筛选调研对象。人口统计学信息男女比例相当,分别占比51%、49%年龄集中在25~35岁,约占60%地域主要分布在一二线城市消费能力在中等及以上的超过80%使用场景通勤接驳,主要结合地铁/公交商业圈内代步直接骑车上下...

    2018-04-25
  • 用户体验设计中最容易犯的六种错

    【文章摘要】用户体验设计需要你作出艰难的决定,成为优秀的设计师并不容易,你需要从错误中不断汲取经验教训,成就自己。人们总是犯着类似的错误,新的思路听起来很不错,但是并不足以成为用户体验设计的标准,但…

    2015-11-05
  • 移动应用程序的跨平台连续性设计

    设计一个适应多种平台的移动应用程序可能是一个挑战。 比如怎么知道何时使用操作系统的本机控件,创建新的模式,或使用混合方法? 为iOS和Android手机重新设计时, 在StumbleUpon的用户体验团队采取的是混合方法,既适应…

    2015-06-23
  • 泛滥的移动产品设计模式

    如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界…

    2016-10-18
  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 【UE&用户体验面试题】阿里巴巴 2015 用户体验专员实习生笔试题

    阿里巴巴 2015 用户体验专员实习生笔试题 1.某购物网站是大陆市场的领导者,为了扩展台湾市场,专门推出了该网站的台湾版并已上线。为了在台湾竞争激烈的电商 环境中脱引而出,吸引更多从未使用过该网站的台湾用户…

    2015-07-30