「譯」???♂?Atlassian 品牌改版背後的故事

九月份著名協作平台 Atlassian 進行了一次品牌形象升級。他們設計團隊的設計師 Leah Lin Pincsak 對這次工作進行了一個回溯。下面我們跟隨她的文筆，來看看她和她的團隊在進行升級工作時遇到了哪些事。

??閱讀信息：

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

項目簡介，以及潛在的挑戰

重新設計品牌並不是畫一些小貓小狗的圖形。這事其實很複雜，你會面臨不同的觀點，產生不同的情緒，需要無縫的協作來實施落地。 這就是為何我們必須確定這是值得去做的事情，而且時機恰當。

這是項目中比較輕鬆的環節。

我們都承認，雖然目前的形象系統已伴隨我們很久，但並未跟上公司發展的步伐。我們的產品和業務已經發生了很大變化，比如我們最近重新修改了產品的 UI 設計，配色方案和插畫風格（您可以在 Atlassian Design Guidelines | Atlassian Design 上了解更多信息）。此外，公司的產品線一直在擴張，Trello，Statuspage 和 Stride 在過去一年中加入了我們。

然而，我們的品牌形象系統並沒有隨著業務的發展而進化。不同產品的 logo 風格各異。 我們有三個產品的 logo 長得一樣。 logo 所用的字體 - 一個定製版本的 Klavika 字體 - 縮小使用就會遇到易讀性問題，因此並不能展現我們所想表現的信息層級。這一堆品牌元素隨著時間的推移，越來越不像「一家人」。 另外，我們許多 logo 的內涵並不匹配。例如，原來的 Atlassian logo（被用戶親切地稱為「Charlie」）暗喻 Atlas 獨自撐起天空的姿勢，這是因為我們原來專註於服務和支持。

最後，這個項目不僅是做幾個 logo。而是要為14個風格各異，放在一起很不和諧的 logo 創造一個靈活，持久的形象系統。並且也要提升主品牌價值，讓它可以比以前發揮更大的作用。

項目成員：我自己，logo 設計師 Angy，品牌設計師 Sara，策劃 Megha 和字體設計師 James 。我們是一個小而精悍的團隊。

探索階段的一些深坑

我們從觀察每個產品的本質和特色下手。在繪製草圖前，腦爆可以極大的幫助我們更加全面地思考產品。也就是說，我們思考過下面這些事：

• 操作：用戶在產品內可以實現的操作
• 價值：成功使用這個產品後可能成功帶來的價值
• 隱喻：產品中所有的符號，都代表了什麼
• 內容：所有在產品中處理的內容類型

為了幫助我們進一步縮小每個標誌的含義範圍，我們使用了抽象譜。Jira 軟體可以用一些具象事物（比如一個產品核心元素 - 票）或如箭頭般（比如表示向上，前進，進度等含義）抽象的事物來表示。

專註於簡單而具象的描述（如 Jira 產品的「ticket」或 Confluence 的「page」），導致我們遇到了第一個死胡同。這些簡單的描述太具象了，局限很大，尤其對於那些含義豐富的產品。

我們還發現，當我們試圖在產品上執行這種「具象」規則時，我們仍然需要使用無形的，隱喻的概念來解釋產品的細微差別。我們的產品名稱範圍從抽象（例如 Jira）到具象（例如 Statuspage，Bitbucket），這妨礙了我們對每個 logo 使用純粹的「具象」規則。

過分關注如何（通過統一概念）使 logo 看起來像一家人，導致我們進入第二個死胡同。我們發現，對統一概念的痴迷使我們意識不到每個標誌應該代表什麼。示例如下：

所以我們從頭再來，重新聚焦於每個產品單一的「概念」。這意味著要回到草稿階段，雖然聽著很沮喪，但這是我們在整個項目中做出的最重要的決定。我們分開來觀察每個 logo，把他們作為14個不同的品牌，並且我們在確定基調前不去考慮選擇樣式。Jira 軟體的流程示例如下。（註：ADG = Atlassian Design Guidelines，它定義了產品和業務上執行時的原則）

結果是當我們試著將比喻混合時，發現設計系統（ADG）其實無比強大，併產生了一個有趣的，通用的思路，以把這些品牌串起來。你可以看見初期的形象系統。

前期測試，良藥苦口

我們知道針對形象系統以及之前所做種種假設進行壓力測試，是很有幫助的，即使結果和我們的預估相差甚遠。使用 Optiomal Workshop 的服務，我們開展了一些前期測試，收集來自用戶對新 logo 的一手反饋。在過程中，我們能看到是否存在消極的反饋，或者說 logo 的含義是否傳達到位。

Atlassian logo

一直以來，Atlassian logo 本身就是一個大 IP，常常被用戶用在 T 恤上，指示牌和 Confluence 文檔中。我們重新設計的替代 logo，需要在合適的場景下有足夠靈活。

同時，我們需要這個 Atlassian 的符號好用好記，能表徵巨大的產品庫。既然我們意圖不採用具象的 Atlas 含義，那麼就要足夠抽象，一個單詞縮寫，非首發選項。）

最後，我們希望 logo 不僅是一個形狀，而是充滿表現力，並容易讓人理解，可以讓我們在其中感受到內涵、生命以及空間。

在品牌形象系統中添加字體部分

我們知道用好字體，可以讓整個品牌形象系統的信息層級分明而流暢。我們在過去的那些年將 Klavika 和 Circular Pro 搭配使用，以此在程序、物料、標記等其他特殊場景保持品牌的一致性。

Circular Pro 有著友好而中立的印象，被我們使用了很多年。但當我們看向未來時，會擔心非襯線藝術字體可能會過時，即使近期還看不到徵兆。

產品設計團隊最近選定了新的產品用字體，我們需要在此基礎上，立足市場的角度，將印刷用粗體字等需求納入考量。

按照這個項目的傳統，我們首先做了大量的研究，決定使用一種獨一無二的自定義字體。我們選擇 Charlie Sans 作為新字體，它可以反映品牌個性中的友善，樂觀和古怪。同時我們以 logo 中「A」中的微妙弧線向以前的 logo 「Charlie」致敬。我們的品牌形象系統至此已浮出水面。

破繭而出

在這個項目開始時，我們花了比平常更長的時間來解決問題。但這些工作得到了回報，在最終的評審中，我們得以在一堆候選中選擇新的Atlassian logo。

雖然所有入圍者看起來略有不同，但他們都很簡潔，放在一起有著邏輯和美學的統一性，分開來看也有各自的優點。

我們靠著膽量一路走來，競爭對手在背後虎視眈眈。這意味著我們需要立足現在，考慮將來，為公司選擇一條適合的道路。神奇的事發生了，其他的項目關聯角色（包括我們的兩位聯合 CEO）都一致定下了同一個候選者作為 Atlassian 的 logo。有人說看見了兩個人舉手擊掌，有人說看到了一條通往山頂的道路，還有人說看到兩艘競賽的帆船。

我們相信新的 Atlassian logo 平衡了專業性和易懂性。它很強壯，同時也很靈活。最重要的是，它延續了我們品牌的優點，同時開啟了 Atlassian 的新篇章。

Atlassian logo，各個產品 logo 和新的字體一起組成了一個統一的品牌，他們步調一致，作為一個更好的平台來支持我們的團隊工作。

我為我們的作品感到自豪。是時候把它公之於世了！

??文章總結：

作為一名交互設計師，翻譯品牌設計方面的文章果然遇到了不少障礙，很多設計方法和術語並不是很熟悉，所以反反覆復校對了很久。不過一篇文章翻譯下來，還是了解到了很多有趣的東西，關於 Atlassian，也關於品牌設計。如果大家有什麼意見或者發現什麼翻譯問題，歡迎私我。

??擴展閱讀：

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

??感謝閱讀：

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