UI设计

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

0
登录或者登记去做吧。

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 改版中,我觉得这个说法也是体现地淋漓尽致。

此时无声胜有声。

共勉。

Omnigraffle Pro 6 序列号
ios8设计规范 中文版 完整版