知乎今日最热:如何评价 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

相关推荐

  • 如何为弱势群体做包容性设计之视力篇

    作为设计师,我们总说:我要让我的设计更漂亮和高大上,要完成老板的业务目标,要让多数用户的体验顺畅。我们总是优先考虑大多数人和强者的利益,然而世界是多样和公平的,除了这些我们眼中的“目标用户”和“大多数人…

    2016-12-02
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 统一图标大小的方法分享

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

    2016-09-05
  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • UI界面中搜索入口的设计

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

    2016-11-07
  • 2017年的Logo,这样设计才会火!

    设计是变换无穷的,而且不断地演变,与新的潮流和品味融合。此种特性不论是在时尚界、平面设计或是其他业界中都相当普遍可见。 Logaster特地做了2016年Logo总评比,预测有哪些热门趋势将主导2017年的Logo设计风格。…

    2017-03-03
  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • App Store2016年最新审核规则

    编号 中文内容 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA)、人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同。以下规则和示例旨在帮助开发者的程序能获得 2.1 崩溃的程序…

    UI设计 2016-01-21
  • 如何快速、高效地进行图标设计

    最近做了一组图标练习,通过这次设计小练习,总结和分享下对现在比较流行的线性图标和插画风图标的一些思路和方法,源文件已经上传。 我们在设计或者绘制图标之前,首先要搞清楚图标的定义,图标到底是什么,为什么…

    2016-06-03