「案例」Adobe 品牌系统更新总结 🧚‍♂️

「案例」Adobe 品牌系统更新总结 🧚‍♂️

在几周前的 Adobe MAX 大会上,我们公布了若干项 Adobe 品牌系统的更新。有两点比较重要:重新设计的文件类型图标系统和全新的产品 logo 系统。虽然全新的文件类型图标在产品中显得没那么抢眼,但用户们一定会注意到新的产品 logo。这篇文章将会阐述设计新 logo 样式系统的基本原理,以及我们的设计过程,还有 Adobe 品牌设计团队将来的计划。

whose.design - 发现更多设计工具www.whose.design

读信息:




首先介绍一下项目背景:

Adobe 有一个庞大的产品群,拥有超过一百个独立的产品和服务,主要分割成三条业务线:Creative Cloud(创意和设计工具),Document Cloud(Acrobat 和 PDF 产品), 以及 Experience Cloud(市场和分析工具)。出于本文主旨,我将专注于讲述品牌系统中的 Creative Cloud 部分。

Adobe 旗下产品品牌结构图

在2012年发布 Creative Cloud 之前,Adobe 的产品 logo 在每次发布新版本时都会更新。我们的软件烧录在碟片上,每18个月到两年更新一次,常有用户在自己的机器上安装了多个版本的软件。由于用户需要区分软件的不同版本,所以我们必须每个周期更新 logo。

2012年及以前的产品 logo。

Creative Cloud 发布后,Adobe 开始通过云服务提供产品。这意味着用户往往只会在本地安装一个最新版本的产品,所以我们不需要继续不停的改变产品 logo。从一个品牌设计师的角度来看,这太棒了。Adobe 的产品太多了,每几年换一批 logo 太麻烦了,导致我们素材库里至少半数 logo 都是过时的。我们始终被市场物料或网页上用错的 logo 所烦扰。

在 Creative Cloud 发布后,我们有机会定义 Adobe 品牌样式并遵守、执行。

我们希望新的 Adobe 品牌样式漂亮,有个性,可扩展。漂亮很主观,个性又源于整个品牌内部的一致性,那么扩展性能是我们需要关注的最重要的一项,因为我们有一个庞大的产品线。

我们考虑过很多选择并最后决定减少产品 logo 上的元素:

  1. 桌面、移动和 web 端产品放在一个小方砖里,配有描边。我们的桌面端产品用正方形,而移动端产品会有圆角。
  2. 有两种样式的品牌 logo:两个字母组成的和图形的。
  3. 图形标志是由扁平的,实心的形状和线条组成。采用明亮的颜色以增加对比。

两个字母组成的产品 logo 是 Adobe 品牌中家喻户晓的设计。这个设计思路源于 Macromedia。Adobe 收购了以后,从 CS3 开始应用于所有创意类桌面产品。这些年已经成为 Adobe 产品 logo 的经典样式。

用两个字母样式的 logo 优点很大:具备 Adobe 的个性,是品牌中最常被拷贝或引用的部分。缺点是限制了缩放性能。两个拉丁字母组合的数量是有限的,会影响到产品的名称。

只考虑双字母样式 logo 时罗列的图标矩阵。

当被用到五十个产品以上时,这个设计系统很容易被稀释。我们知道大部分用户不会记得每个双字母样式的 logo 代表什么。为了让事情简单化,我们决定这个样式只用在桌面端。

当我们在品牌样式的视觉元素上意见一致后,我们开始考虑颜色。在这之前,我们仔细看了色盘,尝试让我们的颜色具备相同的明度和饱和度,并铺满整个色环。

CS5 和 CS6 的色盘。

随着 Adobe 的产品数不断增长,这个并不是最高效和易扩展的系统。为了补救这个问题,我每五度取一个颜色,创建了颜色优化矩阵。每个颜色包含以下值:

  1. 一个明亮饱和的颜色,用于两个字母的标记和描边,或图形图标;
  2. 一个暗色,用作方砖的背景色;
  3. 一个亮色,用于图形图标里的线条。

现在,当一个新产品上线,我们简单看看什么颜色搭配是可用的,放在哪更合适。

现在的颜色矩阵。

我们开始定义 Creative Cloud 的发布会样式,但2014年正式发布整套 Adobe 产品线时就有发布会样式了。这些年除了一些小调整,发布会样式已经成了习惯。

直到这周的 Adobe MAX 大会。

Adobe MAX 大会上 Creative Cloud 产品宣布的一刻。


设计挑战

作为一个对内部服务的设计团队,意味着我们的客户都在公司里。我们从概念到最终交付,一直在和品牌策略团队,产品团队,以及一堆其他职能的团队打交道。某些方面来说,我们的合作关系很典型,他们带着问题来找我们,我们完成需求。这种方式又不像典型的设计服务机构,因为我们的项目永不完结,需要在合适的时候调整设计。

一年前客户带着新需求找到我们:为下一代的创意产品创建新的品牌。这些产品已经大大不同,在所有设备上具备一样的特性和功能组,依靠云端拥有比以往更为强大的功能。

这些产品中的一些专注于新的领域,比如 XD 和 Dimension,还有一些是现存产品的升级,比如 Lightroom CC。当开发这些工具时,我们知道与其在专业版为小白用户减少功能,不如新做一个专注的产品。

产品策略上的改变导致品牌上滋生出很多的问题。我们原来的品牌识别系统是为了独立桌面产品设计的,最多还有一个移动端伴侣。现在,我们不得不考虑(在一个产品名下)可能存在一个跨桌面端,移动端和 web 端的产品。

我们如何在视觉上将他们区分,并且遵守设计系统?我们知道,当前不同端产品 logo 上的相同名字已经给用户造成很多困惑了。

我们在过去数次发布会改变了品牌样式,但是这次不一样。我们不会像以前一样一次性颠覆整个品牌系统。


设计过程

从2014年发布品牌样式系统以后,我们只对整个系统缝缝补补。普通用户甚至不会察觉到这么小的改变(比如减轻了阴影,调整了两个 logo 字母的间距等等)。三年以来我们首次考虑做稍大的调整,由于之前设计系统的一些限制,我们开始时遇到一些障碍。

对于如何用新的品牌样式去大胆的展现未来,我们深感压力。如果我们要维护和现有系统的一致性,该如何实施?我们不想在 logo 上放个写着“全新”的角标。原样式缩放性能不佳,所以新样式的 logo 需要在亮界面和暗界面都能用,要在 12px 的尺寸下也能用。

我们做了很多比较大胆的尝试,比如改变颜色,改变形状,改变两个字母,改变背景色,改变背景细节等等。我们遇到最大的困难,是要让新的图标样式和之前的品牌系统吻合。需要足够不一样来识别不同版本产品的图标。我们相信新的图标样式需要的是进化,而不是革命。

新图标样式设计探索快照。


我们的方案

最后,我们决定继承当前移动端样式的设计语言,因为这些产品跨多端并且相互耦合。

我们把图标做成圆角,调高了字母的明度。我们感受到如果所有桌面端和移动端产品使用相同的图标,那么他们看上去会是相同的产品。高明度的两个字母,比之前的暗色字母在深色背景下对比更强,更容易识别。

logo 样式进化。

我们的设计过程用了将近一年——从开始到在 MAX 上发布。很多决策都不是拍脑袋的,需要公司各个团队的协作和支援。持续不断的沟通,会议,迭代,设计评审。产品的最终版本和原始的总会不一样。

在 MAX 大会上我们发布了这四个产品的新样式:Lightroom CC,Dimension CC,XD CC 和 Spark。

Adobe 的新图标样式。

新的图标样式代表了 Adobe 的新一代产品。随着新的需求,会有更多的产品开发出来,那么更多这种样式的产品 logo 将会出现。

Mac OS 上的新产品图标。


未来规划

Adobe 的产品覆盖业务非常广泛,它的产品线和品牌总在进化。虽然在品牌上做视觉修改可能起步会有困难,但这是伴随产品线扩张产生的正常情况。在品牌组工作了几年后,我们知道设计的进化始终在进行,我们必须随着时间做出调整。就像养一株盆栽,我们需要不断修修剪剪,让它长成预期的样子。



whose.design - 发现更多设计工具www.whose.design

其他文章

感谢阅读

编辑于 2019-05-09

文章被以下专栏收录