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

相关推荐

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

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

    2015-08-04
  • UI设计中字体的历程及注意事项

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

    UI设计 2016-11-14
  • 你的产品鸡肋了吗?

    如何保证自己的产品不成为鸡肋,除了成功的商业模式外,只有高频次的使用才能保证用户忠诚度,延长产品生命周期。所以,好的用户体验也就成为了其中非常重要的致胜王牌。

    2016-10-20
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 不得不看的进度条「再设计」的 7 个典型案例

    如果追溯 Progress bar「进度条」的原型,通常被认为起源于 Henry Gantt 所提出的「甘特图」。用图形方式来表示某种项目的活动顺序和持续时间是甘特图的核心思想。 后来甘特图的概念被广泛用于计算领域,随着计算机…

    2015-08-04
  • 微信网页设计样式库发布

    微信网页设计样式库发布 为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dial…

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

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

    2016-09-18
  • 大牛推荐!UI设计师工作必备的七个设计神器

    编者按:今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值…

    2015-12-03
  • 2016年天猫双11首波品牌海报出街,49张张张惊艳!

    日前,2016年天猫#双11狂欢夜#晚会将于11月10日晚上8点在深圳大运中心体育馆举办的消息已经宣布了,超级碗、奥斯卡、美国偶像的总导演David Hill将会担任此次晚会总导演,感觉会是一场掀起惊涛骇浪的视听盛宴。 狂…

    2016-10-18
  • IOS 10人机界面设计指南[中文版]

    随着iPhone7的发布,iOS10普及起来已经不远,所以iOS10的人机交互规范大家也需要学习起来了,分享的是迄今为止翻译得最全面的,iOS10人机界面设计指南[中文版],希望能帮到大家,enjoy!

    2016-10-24