1. XenForo 1.5.14 中文版——支持中文搜索!现已发布!查看详情
  2. Xenforo 爱好者讨论群:215909318 XenForo专区

如何评价 Instagram 新的品牌形象和界面设计?

本帖由 漂亮的石头2016-05-13 发布。版面名称:知乎日报

  1. 漂亮的石头

    漂亮的石头 版主 管理成员

    注册:
    2012-02-10
    帖子:
    486,369
    赞:
    46
    日报标题:一觉醒来 Instagram 变了样,第一眼有点接受不了

    相关链接:Instagram 换了新 LOGO,很多人第一时间说它丑

    [​IMG] RiceMan,用户体验设计师 @ Google

    [​IMG]

    Instagram 设计组的头 Ian 在 Medium 上发了文章简单解释了一下更新背后的理由:Designing a New Look for Instagram, Inspired by the Community

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

    [​IMG]

    可以看到,设计师一开始走在了一个常规的不太会犯错的路上。但正如视频里暗示的,这套设计方案在发给领导层过目之后,受到了一些质疑。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)

    [​IMG]

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

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

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

    [​IMG]


    然后说说 UI,总体上来说,我个人喜欢这套全新的 UI 胜于新的 App Icon。

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

    总结一下这几屏里的 UI 改动:

    • 首页最明显的两个改动是 Top Bar 和 Bottom Tab Bar。顶部蓝色没有了,底部 Tab Bar 也不再使用深色背景,照相机也不被突出了
    • Tab Bar 的 Icon 换成了统一的 Outlined Icon,选中态为 Filled Icon——遵循了 iOS HIG(https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html
    • 用户名称从蓝色变成深灰色,使用加粗字体取代颜色来提供 Tap 的 Affordance
    • 把其他蓝色链接(See All Suggestions)变得更深、饱和度更低了(相对的也就更不明显)
    • Activity 页面中去掉了 Header,只保留顶部 Tab
    • 大量 UI Text 从全大写改为了首字母大写,增强文字可读性(额,除了 FOLLOW 之外,不太清楚背后的理由)

    揣测一下这些改动背后的主要动机——一切都是为了让内容更突出。更确切的说,是为了突出 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.​
    阅读原文
     
正在加载...