知乎今日最热:如何评价 Instagram 新的品牌形象和界面设计?

1463065473-1957-e38504d3a4daf181340968add2-b

Instagram设计组的头Ian在Medium上发了文章简单解释了一下更新背后的理由:https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.jo1dqsemb

简单概括来说,他们想让Instagram看上去更现代(Modernize)。他们一开始用了大概所有人都能想到的办法,就是把之前拟物化的质感Icon拍平(Flatten)。他们发布的视频中爆出了设计师的一些早期尝试,我简单截取了几张(因为是快速飞过效果,所以有些截图比较模糊,见谅)

1463065469-1990-373a8de2737c983a5570666bb3-b
可以看到,设计师一开始走在了一个常规的不太会犯错的路上。但正如视频里暗示的,这套设计方案在发给领导层过目之后,受到了一些质疑。Ian的设计团队也在自问:

Was it better? Would we feel the need to do this again in a year?

于是第二轮迭代开始了,设计师在公司内部做了研究,让人们用5秒时间画下对Instagram图标的印象,他们发现几乎所有人都画了以下三个元素:彩虹,镜头,取景器。我们可以发现,之后设计师的探索基本就是把这三个元素有机融合。

自此,他们决定把设计的目标定为:

Translate these elements into a more modern app icon that strikes a balance between recognition and versatility.

特地加粗了Recognition和Versatility两个词,后面还会提到。

自此,Ian的团队开始进入更加细节的设计考量:主要是颜色和形状。颜色——按照Ian的文章所说,他们希望表达「温暖」和「有能量」这两个意象。形状——他们试图做的是在抽象和具象之间寻找一个平衡点,而其中很重要的一个目标是让这个形状在未来几年依然可以使用。

贴几张视频里放出的设计稿,我猜测这些设计稿是在这个阶段产生的,大部分都基本符合设计团队制定的目标(那个黑色的是怎么乱入的o(╯□╰)o)
1463065474-1169-5a62e754a01c520421147494f9-b

我不是Icon设计师,只能粗浅地说说自己的看法吧。我很赞赏Instagram设计团队没有仅仅停留于把图标拍平这样一个显而易见的方案,最后放出的这一版相较之前那个已经深入人心的图标是天翻地覆的变化,这样的改变需要设计团队巨大的勇气和自信。

回过头去审视他们当初制定的目标—— recognition and versatility。我认为他们基本达成了当初的目标。使用简单的图形,去掉了拟物化的材质,新的图标在Scalability和Versatility上有了很大的进步。但另一方面,强烈的渐变背景色加上白色图形与之前的图标相去甚远,对Recognition而言是一个巨大挑战,它需要时间去重新获得用户(尤其是重度忠实用户)的接受和认可。

哦对了, 我非常喜欢http://Instagram.com上对于新图标的使用,充分证明了新图标的versatility!
1463065474-9425-418494e4e8eeb73427fbe08e63-b

------

然后说说UI,总体上来说,我个人喜欢这套全新的UI胜于新的App Icon。
1463065478-7591-f6c0769b12ff524eaa2236845c-b
1463065483-4995-b61f7c681bd5591fe2744874b8-b
1463065483-6573-d547f4fd3942339ff380c5766f-b
1463065485-8298-517ac616e167e38de889926de3-b
总结一下这几屏iOS UI的变化:

  • 首页最明显的两个改动是Top Bar和Bottom Tab Bar。顶部蓝色没有了,底部Tab Bar也不再使用深色背景,照相机也不被突出了。
  • Tab Bar统一使用Outlined Icon,在选中状态下使用Filled Icon——遵循了iOS Human Interface Guideline(https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html
  • 用户名称从蓝色变成深灰色,使用加粗字体来提供可点击的Affordance(没了蓝色,在Activity信息流中,图片和视频相对更明显了)
  • 把其他蓝色链接(比如首页的 See All Suggestions)变得更深了、饱和度更低了,相对的也就更不明显了。
  • Activity页面去掉了Header,只保留了顶部的两个Tab,内容空间更大了。
  • 大量的UI Text从全部大写变成了首字母大写,增加Readability,减少Prominence。

除了遵循平台设计规范,大部分改变都是为了让内容更突出。更确切的说,是为了突出Instagram这个产品最最核心的东西——照片。这次UI改版有明确的设计目标,执行也很具水准。我唯一不确定的是除去蓝色,转而使用加粗黑色字来表示「可点链接」这一步——有待数据支持吧。

去年Google更新品牌标示的时候,Tobias van Schneider曾经写了一段话给Google的设计师们,贴过来作为结尾。

Dear Google Designers,

NO ONE has ever designed a digital identity at such a big scale. No one knows better than you. Keep on rocking!

No one even remotely knows the implications and challenges of implementing a digital identity, not only across an internal team of ~60.000 employees but also across so many public touch points worldwide.

Designing a logo that goes onto a beer bottle is one thing, designing a digital identity for billions is a completely different story.

Please keep sharing your learnings with us, because I know it’s a process that will never end.

作者:耿达维
链接:https://www.zhihu.com/question/46202544/answer/100539015
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。设计首先是功能问题,其次才是审美问题。而在大部分情况下,功能优先,美学第二。
设计图标有点像设计旗帜:尽量通过简单的色块和标识表达一个清晰的意思。考虑一个图标是否是个好图标的时候,我通常有几点考量:
1. 图标在各种尺寸下是否都容易辨认2. 图标是否能对不同文化背景下的用户表达清晰、一致的意象

3. 同系列的应用图标是否有一致性(omniGroup 的图标们这一点做得很好,实际上这些图标们符合了基本所有好图标的要求)

4. 图标在和其他图标出现在一起的时候是否和谐

5. 图标是否方便用户复制、传播(试想如果让你画一个老的 ins 图标有多困难)
通常,一个偷懒的办法是选应用的主色调为背景,然后加上应用的字母。Facebook、Google 以及很多其他公司就是这么做的。这就好比旗帜设计里,选三个没有人用过的颜色组合设计出一个旗帜一样。懒惰但是有用。
另一个偷懒的办法是,当一个拟物图标需要重设计的时候,设计师会将这个图标直接“去材质化”,也就是俗称的“拍扁”。懒惰但是有时候有用。
Instagram 选择了比较不懒惰的做法:根据品牌在人群心中的印象,重新设计了图标(以及旗下应用群的图标们)。
1463065486-5274-0825daadd4c6a47efff6ac81b8-b

看一下上面这张图,发现了什么?新图标以及 ins 旗下应用群的图标们,传达了一个非常明确且一致的品牌标识和从属关系,这是之前的图标们所不具备的。原来图标中的“彩虹”意象被进一步加重和放大,用户一眼就能在手机中发现并定位到 Instagram 系列的应用。
从以上的几点来看,新图标系列比旧图标系列不知道高到哪里去了。
下面再说界面:

1463065492-5021-6e73c46c55d84d338045630431-bInstagram 是一个图片社区,所谓“减少干扰让用户更关注内容”的说法,我想也是老生常谈了。新的界面让我想起家里挂上照片的白墙,或者是画廊的白墙(这算不算一种“现代”的“拟物”呢科科):
1463065493-1984-9c349ffc3806c9d0b7d6a03645-b
很明显,Instagram 想要进一步着重社区内容,弱化 UI 的干扰。我支持这样的做法。举六只手支持。
BTW:Instagram 的网页版本也同步更新了,貌似没有什么人关注呢...
1463065493-9237-966047dbdec2f6c73c3a6033b9-b
注:以上部分图是从谷歌偷来的

大家说了很多,我在这就谈一点:
新 Icon 和 UI 看上去不和谐的问题(其实并不是)。

一、新 Icon
关于新 Icon,我丢几个关键词出来就行了:「丰富的色彩(彩虹)」、「镜头」、「现代」、「产品线统一」。
1463065495-5957-75e1565b08201219c5b27eb318-b

二、新界面
再来看下 app 界面。
我们发现新 icon 虽然色彩丰富,但是界面却是「冷淡」的黑白色,这是品牌不统一吗?
1463065503-9918-fba3b189197c80c75c87d151ac-b
Ian 在文中给出了答案:https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.ijdfzqmhv

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community’s photos and videos. We stripped the color and noise from surfaces where people’s content should take center stage, and boosted color on other surfaces like sign up flows and home screens.

简单概括就是虽然图标色彩丰富,但是进入 app 后,设计师们更希望这个「丰富的色彩」由社区内容来体现。因此将 UI 「去色」,让人们的注意力更聚焦在照片、视频这些内容上。

挺不错的答案,不是吗?

三、一些思考
我完全能够理解设计团队如此考量的初衷,因为我自己也是个「不把界面本身当做设计重心」的家伙。UI 设计应该以人为起点,为产品和内容服务。

他们这次改动说实话挺让我震惊的,乍一看,仿佛我们所说的品牌一致性都丢失了。但实际上,却从另一方面体现了那份潜在的「品牌」。让人震惊又佩服罢。

「异能电台」有一期 James 说过一个点:「品牌就像水一样」。这句话令我非常有感触,很多时候品牌看似无形,但却无处不在。
而在这次 Instagram 改版中,我觉得这个说法也是体现地淋漓尽致。

此时无声胜有声。

共勉。

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

(0)
iouedioued
上一篇 2016-05-12 22:14
下一篇 2016-05-17

相关推荐

  • 玩转中性灰 轻松调颜色

    数码图像是由红绿蓝(RGB)3种基本颜色构成的;当其中某个颜色数值偏高就会造成偏色现象,这是每个摄影师都会遇到的坏运气。大多数人只凭肉眼来判断、调整图像的偏色问题,其实这是不准确的。对此,小编本期为你着…

    2016-06-21
  • 是否后悔买了iPhone 6/plus?来看iPhone7的设计创意

             最近,有一些争论关于苹果2015年iPhone阵容。 虽然很多表明苹果将遵循传统,同样期待iPhone发布与更新内部今年晚些时候,其他人认为苹果制造商将打破其模式和直接跳转到iPhone的7系列。 无论原来是如此,下一…

    2015-05-11
  • UI界面中搜索入口的设计

    写在前面: 我以前是学空间设计的,所以对引导性的感知比其他学设计的要更早。其实,设计总就还是一个“万法归宗”的东西。“吸引”——“引导”——“持续”——“欲罢不能”用用户的这种思维去检验自己的作品(交互/UI)是比较客…

    2016-11-07
  • 统一图标大小的方法分享

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下…

    2016-09-05
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 设计师色彩理论终极指南

    如果一幅图所表达的内容就可以胜过数千文字的叙述,那么一张界面又有多少内容可以让我们探讨呢?事实证明,这里有许多不同的主题值得我们去讨论,其中一个主题就是色彩理论,它包含挑选一个匹配颜色色系的基本技巧…

    2016-06-27
  • 创业还没听过在线Logo生成器? 那你就落伍了!

    创业还没听过在线Logo生成器? 那你就落伍了!创业的第一步 - Logo不论是创业或创建新的网站,踏出成功的关键第一步是设计出一个易于一般社会大众识别的logo,以传达企业或服务宗旨,打造企业的视觉形象。品牌Logo可…

    2016-10-17
  • UI设计中字体的历程及注意事项

    字体作为界面设计的一个元素,对用户的阅读体验起着至关重要的作用。本文是 UI 设计师 Viljami Salminen 分享的用户界面字体设计的基本规则和技巧。 早在 2004 年,我才刚开始工作的时候,sIFR 非常火。sIFR 是由 S…

    UI设计 2016-11-14
  • 移动端界面中的版式设计原理

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

    2016-01-08
  • 其实,设计LOGO并不难!用对工具,你也可以成为设计师!

    Logo是一个企业丶团体丶组织或独立个体的视觉识别形象代表。通常是人们一眼看见所产生的第一印象,因此如何创造出一个令人印象深刻的logo,来帮助您建立您心目中所期望塑造的品牌形象是一门大学问。一个好的logo对于一个品牌打入市场的成功与否,扮演着举足轻重的脚色。因此投入足够的时间来绞尽脑汁,设计出一个独一无二的logo是不可避免的过程。

    2016-09-18