「譯」???♂? Adobe 品牌系統更新總結

在幾周前的 Adobe MAX 大會上，我們公布了若干項 Adobe 品牌系統的更新。有兩點比較重要：重新設計的文件類型圖標系統和全新的產品 logo 系統。雖然全新的文件類型圖標在產品中顯得沒那麼搶眼，但用戶們一定會注意到新的產品 logo。這篇文章將會闡述設計新 logo 樣式系統的基本原理，以及我們的設計過程，還有 Adobe 品牌設計團隊將來的計劃。

??閱讀信息：

• 閱讀時間：約10分鐘
• 作者信息：Sonja Hernandez
• 原文地址：Medium
• 其他譯文：Swarm | Do & Don』t | YouTube | Uber | iPhone X HIG | Oscar 2.0 | Atlassian | Adobe

首先介紹一下項目背景：

Adobe 有一個龐大的產品群，擁有超過一百個獨立的產品和服務，主要分割成三條業務線：Creative Cloud（創意和設計工具），Document Cloud（Acrobat 和 PDF 產品）, 以及 Experience Cloud（市場和分析工具）。出於本文主旨，我將專註於講述品牌系統中的 Creative Cloud 部分。

在2012年發布 Creative Cloud 之前，Adobe 的產品 logo 在每次發布新版本時都會更新。我們的軟體燒錄在碟片上，每18個月到兩年更新一次，常有用戶在自己的機器上安裝了多個版本的軟體。由於用戶需要區分軟體的不同版本，所以我們必須每個周期更新 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 代表什麼。為了讓事情簡單化，我們決定這個樣式只用在桌面端。

當我們在品牌樣式的視覺元素上意見一致後，我們開始考慮顏色。在這之前，我們仔細看了色盤，嘗試讓我們的顏色具備相同的明度和飽和度，並鋪滿整個色環。

隨著 Adobe 的產品數不斷增長，這個並不是最高效和易擴展的系統。為了補救這個問題，我每五度取一個顏色，創建了顏色優化矩陣。每個顏色包含以下值：

1. 一個明亮飽和的顏色，用於兩個字母的標記和描邊，或圖形圖標；
2. 一個暗色，用作方磚的背景色；
3. 一個亮色，用於圖形圖標里的線條。

現在，當一個新產品上線，我們簡單看看什麼顏色搭配是可用的，放在哪更合適。

我們開始定義 Creative Cloud 的發布會樣式，但2014年正式發布整套 Adobe 產品線時就有發布會樣式了。這些年除了一些小調整，發布會樣式已經成了習慣。

直到這周的 Adobe MAX 大會。

設計挑戰

作為一個對內部服務的設計團隊，意味著我們的客戶都在公司里。我們從概念到最終交付，一直在和品牌策略團隊，產品團隊，以及一堆其他職能的團隊打交道。某些方面來說，我們的合作關係很典型，他們帶著問題來找我們，我們完成需求。這種方式又不像典型的設計服務機構，因為我們的項目永不完結，需要在合適的時候調整設計。

一年前客戶帶著新需求找到我們：為下一代的創意產品創建新的品牌。這些產品已經大大不同，在所有設備上具備一樣的特性和功能組，依靠雲端擁有比以往更為強大的功能。

這些產品中的一些專註於新的領域，比如 XD 和 Dimension，還有一些是現存產品的升級，比如 Lightroom CC。當開發這些工具時，我們知道與其在專業版為小白用戶減少功能，不如新做一個專註的產品。

產品策略上的改變導致品牌上滋生出很多的問題。我們原來的品牌識別系統是為了獨立桌面產品設計的，最多還有一個移動端伴侶。現在，我們不得不考慮（在一個產品名下）可能存在一個跨桌面端，移動端和 web 端的產品。

我們如何在視覺上將他們區分，並且遵守設計系統？我們知道，當前不同端產品 logo 上的相同名字已經給用戶造成很多困惑了。

我們在過去數次發布會改變了品牌樣式，但是這次不一樣。我們不會像以前一樣一次性顛覆整個品牌系統。

設計過程

從2014年發布品牌樣式系統以後，我們只對整個系統縫縫補補。普通用戶甚至不會察覺到這麼小的改變（比如減輕了陰影，調整了兩個 logo 字母的間距等等）。三年以來我們首次考慮做稍大的調整，由於之前設計系統的一些限制，我們開始時遇到一些障礙。

對於如何用新的品牌樣式去大膽的展現未來，我們深感壓力。如果我們要維護和現有系統的一致性，該如何實施？我們不想在 logo 上放個寫著「全新」的角標。原樣式縮放性能不佳，所以新樣式的 logo 需要在亮界面和暗界面都能用，要在 12px 的尺寸下也能用。

我們做了很多比較大膽的嘗試，比如改變顏色，改變形狀，改變兩個字母，改變背景色，改變背景細節等等。我們遇到最大的困難，是要讓新的圖標樣式和之前的品牌系統吻合。需要足夠不一樣來識別不同版本產品的圖標。我們相信新的圖標樣式需要的是進化，而不是革命。

我們的方案

最後，我們決定繼承當前移動端樣式的設計語言，因為這些產品跨多端並且相互耦合。

我們把圖標做成圓角，調高了字母的明度。我們感受到如果所有桌面端和移動端產品使用相同的圖標，那麼他們看上去會是相同的產品。高明度的兩個字母，比之前的暗色字母在深色背景下對比更強，更容易識別。

我們的設計過程用了將近一年——從開始到在 MAX 上發布。很多決策都不是拍腦袋的，需要公司各個團隊的協作和支援。持續不斷的溝通，會議，迭代，設計評審。產品的最終版本和原始的總會不一樣。

在 MAX 大會上我們發布了這四個產品的新樣式：Lightroom CC，Dimension CC，XD CC 和 Spark。

新的圖標樣式代表了 Adobe 的新一代產品。隨著新的需求，會有更多的產品開發出來，那麼更多這種樣式的產品 logo 將會出現。

未來規劃

Adobe 的產品覆蓋業務非常廣泛，它的產品線和品牌總在進化。雖然在品牌上做視覺修改可能起步會有困難，但這是伴隨產品線擴張產生的正常情況。在品牌組工作了幾年後，我們知道設計的進化始終在進行，我們必須隨著時間做出調整。就像養一株盆栽，我們需要不斷修修剪剪，讓它長成預期的樣子。

??擴展閱讀：

• Sketch 插件：CRAFT | Sketch Material | WeSketch | Runner
• Sketch 教程：Library | 換色文字 symbol | Symbol 嵌套 | 字體樣式庫
• Graffle 教程：繪製流程圖 | 搭建文檔 | 繪製表格
• 設計工具：InVison Studio

??感謝閱讀：

我是 Teambition 的交互設計師徐小馬（微信：heiheilaugh），歡迎交流。

推薦閱讀：