我們如何建立一個開源的設計系統來創造新的社區徽標

作為紅帽的用戶體驗（UX）設計和 Ansible 產品團隊的交互設計師，我們花了大約 6 個月的時間為 Ansible 社區設計了一系列徽標。這件事其實在更早的時候就開始了，當時一位項目經理要求我們為一個幻燈片提供一個 「快速而簡單」 的徽標。在收集了一些需求後，我們在幾天內就向相關人員展示了一個徽標，而且沒有經過太多調整。幾個月後，另一個相關人員說他們也需要類似的徽標，所以我們重複了這個過程。

於是，我們注意到一個模式：像這樣的徽標資源不僅僅代表個人的要求，而是整個 Ansible 項目的共同需要。在完成了幾個徽標要求後，我們有了一系列臨時的設計，但在沒有意識到品牌和設計慣例的情況下，這可能給整個 Ansible 的品牌視覺造成了不一致。隨著這個徽標系列的增加，我們認識到了這個迫在眉睫的問題，並需要解決它。

我們的解決方案是創建一個 Ansible 設計系統，這是一個針對品牌的資源，可以指導未來一致的徽標設計。

什麼是設計系統？

設計系統是一個可重複使用的資源和指導方法的集合，有助於告知任何數字產品套件的視覺語言。設計系統創造了一些模式，將獨立的產品整合在一起，並通過可擴展性和一致性提升品牌。

特別是在一個有多種產品的大公司里，如果沒有標準化，擴展起來就不容易，因為不同的團隊對每個產品都有貢獻。設計系統可以作為每個團隊建立新資產的基線。有了標準化的外觀和感覺，產品在整個組合中被統一為一個家族。

從頭構建一個設計系統

在收到相關人員提出的為 Ansible 開源社區（如 Ansible Builder、Ansible Runner 和Project Receptor）創建徽標的一系列要求後，我們決定為我們的工作流程設計一個結構，並創建一個單一的事實來源，為之努力。

首先，我們對現有的徽標進行了視覺審計，以確定我們要做的是什麼。Ansible 的原始徽標系列由四個主要圖像組成：代表 AWX 的 Angry Spud，代表 Ansible 核心/引擎的 Ansibull，以及代表 AWX 的帶翅膀的顯示器。大部分的徽標都是用一致的紅色陰影和公牛的形象聯繫在一起的，但是筆畫的寬度、筆畫的顏色、線條的質量和排版複雜而多樣。


Angry Spud 使用棕褐色的輪廓和手繪風格，而 Ansibull 則是一個對稱的幾何矢量圖。AWX 顯示器是一個異類，它有細線畫的翅膀，藍色的矢量矩形，以及古英語字體（這裡沒有包括在內，但與家族中其他使用現代無襯線的字體相比，它是一個例外）。

確立新的設計標準

考慮到調色板、排版和圖像，我們產生了一個一致的構圖，以 Ansibull 代表所有核心的 Ansible 產品，以及大膽的線條和充滿活力的顏色。


新的 Ansible 社區徽標設計風格指南詳細說明了 Ansible 產品徽標的調色、排版、尺寸、間距和徽標變化。

新的風格指南展示了一種全新的、現代的定製字體，該字體基於瑞士獨立字體廠商 Grilli Type 的 GT America 字體。我們為該字體創造了一個柔和的外觀，通過圓潤每個字母某些角落來配合圖像的圓潤度。

我們決定通過在光譜中加入更多的顏色並以原色為基礎，設計一個更生動、更飽和、更普遍的調色板。新的調色板以淺藍色、黃色和粉紅色為主色調，每種顏色都有較淺的高光和較深的陰影。這種更廣泛的顏色範圍使系統內有更多的靈活性，並引入了 3D 的外觀和感覺。


我們還引入了新的圖像，如 Receptor 和 AWX 徽標中的六邊形，以保持視覺上的連續性。最後，我們確保每個徽標在淺色和深色背景上都能使用，以獲得最大的靈活性。

拓展設計組合

一旦我們建立了核心徽標系列，我們就開始為 Ansible 服務創建徽章，如 Ansible Demo 和 Ansible Workshop。為了將服務與產品區分開來，我們決定將服務圖形包圍在一個圓圈中，圓圈中包含了相同的定製排版的服務名稱。新的服務徽章顯示了幼兒版的 Ansibull（來自 Ansible Builder 的徽標）正在完成與每個服務相關的任務，例如 Ansible Demo 指向白板，Ansible Workshop 則使用構建工具。


利用開放源碼進行設計決策

最初的 AWX 徽標受到了搖滾樂圖像的影響，如翅膀和重金屬字體（此處省略）。


(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

Ansible 社區的一些成員，包括紅帽多樣性和包容性小組，提請我們注意，這些元素類似於仇恨團體使用的圖像。

考慮到原徽標的社會影響，我們必須迅速與 Ansible 社區合作，設計一個替代徽標。我們沒有像最初的徽標那樣閉門造車，而是擴大了項目的範圍，仔細考慮了更多的相關人員，包括 Ansible 社區、紅帽多樣性和包容性小組，以及紅帽法律團隊。

我們開始了頭腦風暴，向 Ansible 開源社區徵求意見。Ansible 的一位工程師 Rebeccah Hunter 在草圖繪製階段做出了貢獻，後來成為我們設計團隊中的一員。讓一大群相關人員參與進來的挑戰之一是，我們對新的徽標概念有了各種各樣的想法，比如一條輔助電纜、一碗拉麵等等。

我們勾畫了五個社區貢獻的徽標創意，每個徽標都有不同的品牌視覺：一個芽、一個火箭、一個顯示器、一碗拉麵和一個輔助電纜。


在完成這些初步的概念草圖後，我們建立了一個虛擬的投票機制，並在整個迭代過程中使用。這個投票系統使我們能夠利用社區的反饋，從五個初始概念縮小到三個：火箭、一碗拉麵和顯示器。我們在這三個方向上進一步迭代，並通過專門的 Slack 頻道進行反饋，直到我們找到一個符合社區願景的方向，即 AWX 顯示器。


以社區的意見為指導，我們圍繞顯示器為 AWX 打造了徽標概念。我們保留了原徽標中的顯示器元素，同時使其外觀和感覺現代化，以配合我們更新的設計系統。我們使用了更鮮艷的色調，更簡潔的無襯線字體，以及來自 Project Receptor 徽標的元素，包括六角形圖案。

通過從一開始就與我們的社區接觸，我們能夠在公開場合進行設計和迭代，所有相關人員都有一種包容感。最後，我們認為這是取代一個有爭議的徽標的最好方法。最終的版本被移交給了紅帽法律團隊，在獲得批准後，我們用這個新的徽標替換了所有的現有資產。

主要收穫

為設計系統創建一套規則和資源，使你的數字產品全面保持一致，消除品牌混亂，並實現可擴展性。

當你探索在自己的社區建立一個設計系統時，你可能會從我們在這條路上學到的這些關鍵經驗中受益：

• 用設計系統來擴展新的徽標，比沒有設計系統要容易得多。
• 當你使用投票系統來驗證結果時，雜亂無章的設計方案就會變得不那麼令人生畏。
• 將大量受眾的注意力引向三套方案，可以消除決策疲勞，集中社區反饋。

我們希望這篇文章能夠提供用於開源社區的設計系統的啟示，並幫助你認識到在早期開發一個系統的好處。如果你正在創建一個新的設計系統，你有什麼問題？如果你已經創建了一個，你學到了什麼教訓？請在評論中分享你的想法。

（圖像來自：Fiona Lin and Taufique Rahman, CC BY-SA 4.0）

via: https://opensource.com/article/21/4/ansible-community-logos

作者：Fiona Lin 選題：lujun9972 譯者：MareDevi 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive