關於圖標設計你需要知道的一切

圖標雖小但功能強大，這就是為什麼仔細考慮圖標設計很重要。 世界各地的設計師都將見證創造一個好的圖標所付出的創造力和努力。 這是因為它必須具有表現力，但同時又要簡單。

圖標的背景

圖標設計實際上只是一個代表對像或程序的小圖像。 它們是非常簡單的圖像，傳達了強大的信息。 圖標通常很容易記住，也恰好是幾乎所有圖形界面的主要特徵。

有趣的事實：圖標一詞的起源來自希臘作品“eikona”，意思是圖像。 當 Macintosh 和 Microsoft 等第一個 GUI 操作系統問世時，數字圖標開始出現。

有哪些不同類型的圖標？

您應該了解三種主要類型的圖標。 以下是關於它們中的每一個的一些見解，以及它們給用戶體驗帶來的影響。

通用圖標

這些是普遍認可的圖標。 例如，搜索、打印、主頁或購物車的圖標就是這樣的圖標。 但是只有一個小問題。 通用圖標相當罕見。 當我們的意思是稀有時，我們的意思是除了這裡給出的示例之外，大多數圖標恰好是模棱兩可的，並且根據界面的不同含義可能有所不同。

不同含義的圖標

顧名思義，這些圖標具有多種含義，可能使它們相互矛盾或矛盾。 例如，心形和星形的圖標是相互衝突的。 這兩個圖標的功能會從一個應用程序更改為另一個應用程序，有時它們還可以相互競爭。 正因為如此，這些圖標變得相當難以精確解釋。 即使在應用程序中，這些符號也會變得令人困惑，當用戶點擊它們希望得到一個特定的結果時，反而會得到其他的東西。

獨特的圖標

您如何使用圖標來描述獨特的對像或動作？ 使用獨特的圖標設計。 但重要的是要注意有很多失敗的例子。 例如，當蘋果決定通過一堆彩色圓圈來代表他們的遊戲中心時，意義就消失了。 這些圓圈甚至意味著什麼，它們與遊戲中心有什麼關係？

您可以使用哪些圖標格式？

當您要求進行圖標設計時，您應該了解幾種類型的圖標格式。

• SVG – 這些是可縮放矢量圖形並提供完美的基本格式。 因為它是可擴展的，它本質上意味著你可以改變圖標的大小而不會失去質量。
• PNG – 如果您想要完全兼容，則可以選擇便攜式網絡圖形格式。 這是一種光柵格式，這意味著它基於像素，您無法在不影響質量的情況下進行升級。 PNG 可用於 Word、PowerPoint 和電子郵件。 它們可以添加到任何彩色背景之上，無需編輯。
• ICO – 如果您想將您的圖標用於任何 Windows 應用程序，甚至用作您自己網站的圖標，那麼 Microsoft Windows 圖標格式非常棒。
• ICNS – 這種格式用於非常特定的目的。 這是一種 Apple 特定格式，可用於 Mac OS X 文檔和應用程序。

Kimp 提示：讓您的圖標設計盡可能簡單。 嘗試在您的設計中使用清楚地代表您預期含義的真實項目。 例如，您可以使用條形圖來表示財務。 您可以使用工作包來表示業務。 為了幫助您的設計師設計出正確的圖標，請盡可能多地為它們提供背景信息。 讓他們確切地知道您的圖標將如何使用。

是什麼讓圖標有效或無效？

既然您現在對圖標的格式和圖標類型有了一個概念，那麼讓我們也看看是什麼使圖標有效或無效。 這樣，當您與設計師合作時，您可以留意這些屬性。

明晰

圖標設計應在您看到它時立即傳達信息。 如果你在圖標中使用的隱喻是未知的或晦澀的，人們就會對它的含義感到困惑。 例如，用於 Home 的圖標是每個人都知道的——那就是清晰。 現在想像一下，如果 Home 的圖標被描繪成一個中間有一個點的圓圈會發生什麼？ 那會讓人感到困惑，對吧？ 令人困惑的圖標是無效的。

可讀性

對清晰度因素進行排序後，您現在必須確保圖標易於閱讀。 如果你看下面的例子，第一個圖標很難理解，因為細節太精細，使它變得模糊。 正確完成小圖標的一個很好的例子是谷歌地圖上具有出色可讀性的圖標。 使用較細的筆觸、沒有留下足夠的空間以及在小圖標上添加過多的細節會使它們變得無效，因為它們失去了可讀性。

圖標的對齊方式

圖標設計應該具有平衡感，這可以通過光學對齊所有元素來實現。 這意味著設計需要根據觀眾對元素的感知方式進行調整。

圖標的簡潔性

圖標的簡潔性將根據您添加的詳細信息量來確定。 保持圖標盡可能簡單，避免添加不必要的線條和細節，使其難以閱讀和模糊。

一致性

如果您正在為應用程序或特定界面完成圖標設計，請確保所有圖標保持相同的一致性。 如果某些圖標看起來比其他圖標更詳細或更清晰，您就會失去一致性。 這將使界面在用戶體驗方面受到影響。

設計個性

同樣，對於您正在設計的界面或應用程序，您必須確保每個圖標都體現了品牌的個性。 您可以根據自己的品牌風格和聲音從專業走向有趣和學院風。 這是簡報中非常重要的一部分，你應該在設計圖標時向你的設計師提供。

您的圖標應該易於使用

即使在對“t”進行了繪製之後，圖標也遠未完成。 您的設計師所做的圖標需要測試和準備才能讓客戶使用它。 這種測試和準備將確保圖標易於使用。 易於使用的圖標的標誌是：

• 組織良好 - 在這裡，您需要確保您的設計師以組織良好的方式放置設計的主文件，以便您以後可以在需要時參考它們。 您可以要求它們按字母順序或其他順序排列，以便在需要時可以輕鬆找到它們。
• 有據可查——請您的設計師傳達圖標系列的關鍵原則，並佈置技術規則。 您還可以在完成此文檔後將其公開，以便人們可以根據需要進行參考。
• 已測試——確保您與設計師一起完成了這項工作。 讓他們將所有設計好的圖標並排放置，這將幫助您了解它們的一致性和相關性。
• 由圖標管理器等自定義工具提供支持。 如果您可以提供任何有助於使用圖標的自定義工具，您應該使它們易於訪問。

你的圖標設計簡介應該包括什麼？

考慮所有用例

知道你的圖標將在哪裡使用，以及它們需要代表什麼。 您還需要區分哪些圖標需要隱喻，哪些圖標將基於現實生活中的對象完成。 一旦你清楚了這些因素，你就可以通過簡報將這一點傳達給你的設計師。

頭腦風暴概念和隱喻

首先，盡可能列出所有可用於描述圖標的描述。 單詞集和字典等資源有助於查找關鍵字、相似詞和您希望通過圖標傳達的概念的定義等內容。 然後，您可以開始簡化這些想法，以便圖標（需要抽象和簡單）能夠清晰有效地傳達信息。 嘗試自己完成盡可能多的研究和頭腦風暴，然後在其餘部分尋求設計師的支持。

查找有用的參考資料

始終投資於研究以找到高質量的參考。 很有可能在某個地方，有人已經完成了您想要設計的圖標的精彩版本。 如果你能找到這些，你也能找到你的靈感。 當您向您的設計師提供這些參考資料時，他/她會發現更容易理解您的觀點。

選擇圖標的樣式

一些流行的樣式是字形、平面、輪廓、材料和手繪。 當您最終確定樣式時，您需要考慮兩個重要因素。 一種是顯示這些內容的 UI 界面及其樣式。 第二個是對該接口的要求，比如它是 Material 還是 iOS。

與您的設計師詳細討論

確保您的設計師在您設計的所有圖標之間保持一致性。 為了讓事情更清楚，讓他們對所有要完成的圖標做一個完整的草圖。

在批准圖標的概念草圖後，您應該請求矢量化版本。 最後，獲取一些圖標的模型，以便查看它們是否適合您的各種用例。

現在，我們已經完成了您應該在簡報中包含的內容，以使您的圖標看起來清晰。 因此，接下來讓我們來看看您設計的圖標中需要體現的主要內容，以便您的最終結果恰到好處。 請務必與您的設計師討論這些問題。

創建新圖標的清單

您的設計師將採取以下步驟來創建您的圖標設計。

避免模​​糊的圖標

為了使圖標看起來清晰、整潔和跨度，它們需要定位在像素上。 這將消除任何模糊的打嗝。

檢查尺寸和重量

我們建議您使用斜視測試來確保您的所有圖標具有相同的重量和尺寸。 基本上只是瞇著眼睛，看看你的圖標是如何相互關聯的。 如果需要任何調整，請確保獲得設計師的幫助。 這裡的一個提示是使用完美的圓形和方形來確保您的一組圖標的重量相同。

使用幾何形狀

讓您的設計師使用簡單而牢固的幾何形狀來繪製您的圖標。 這將使圖標清晰且美觀。

避免過於詳細

當您與設計師一起瀏覽它們時，刪除任何使您的圖標看起來忙碌而沉重的細節。 相反，只保留基本和簡單的細節，這將使圖標看起來乾淨清晰。 圖標很小，它們可能會變成一個包含太多細節的斑點。

保留空間

圖標中的所有細節都需要喘息的空間。 如果它們都粘得太緊，它們會使整個設計變得混亂。 當您查看圖標時，請查看它們是否都有足夠的空間以使細節清晰，以及它們的含義是否立即讓您清楚。

圖標對比

確保圖標中有足夠的顏色對比。 黑白平衡應該剛剛好。 如果沒有足夠的對比度，圖標會顯得不清晰。

看視覺統一

您應該研究的另一個因素稱為圖標的視覺統一性。 這基本上意味著線條的粗細、角落的大小、使用的調色板、包含的細節水平和設計元素通過完整的圖標集保持一致。 一定要和你的設計師談談這個，因為有很多事情要跟踪！

圖標設計很有趣，但很難做對

我們為您提供了大量信息，以便您開始進行圖標設計。 有很多東西需要吸收和熟悉，所以一定要與優秀的設計師合作，讓你的圖標恰到好處。 並向他們提供他們需要了解如何使用您的圖標以及誰將查看它們所需的所有詳細信息。 很快您就會擁有一組強大、清晰且易於使用的圖標。