編輯導語：在產品頁面中，圖示只是一個相對較小的設計元素，但是其重要性不可忽略，好的圖示設計有助於在使用流程中從體驗、美感等方面提升使用者的好感度。本篇文章裡，作者總結了如何設計出好圖示的設計原則，一起來看一下。

有些圖示是使用者不喜歡的。他們說圖示不清晰，醜陋或無法解釋他們不喜歡的東西。原因很簡單，在此類圖示中，違反了其構造的一項或多項基本原則。

本文中的資訊可以幫助您避免錯誤並建立使用者肯定喜歡的圖示。這些原則與網站和應用程式圖示都相關，並且可以應用於所有型別的圖示。

讓我們從一些基礎知識開始。

網頁設計中的圖示只是很小的元素，而不是重要性或意義。需要它們來指示資訊。這些是視覺錨點，有助於吸引使用者的注意力並指導他們執行目標操作。

圖示有助於：

吸引眼球；

瞭解含義；

瀏覽介面；

節省視覺空間；

與使用者建立聯絡。

圖示的使用並不像乍看起來那樣容易，它需要設計能力和周到的方法（如果有單獨的專家來處理圖示，那就很好了）。

一些設計師最大的擔心是他們的圖示看起來是否整潔，是否正確居中以及畫素是否完美匹配。他們根據公式對齊元素，但忘記了最重要的事情。

建立每個人都喜歡的圖示的最重要原則是什麼？

一、簡單性

使用者不喜歡複雜的東西。

好的圖示應該簡單易讀。它不需要文字說明。您可以透過向遠離設計的人展示圖示來測試該圖示。如果他們沒有猜到它的大致含義，則此圖示可能有問題。

簡單性的主要敵人：

1）多餘的元素

2）不必要的細節

它們會阻礙感知，分散使用者注意力並使使用者困惑。通常，圖示包含的元素越少越好。具有3種或更多種顏色的圖示不再是象形文字，而是插圖。

大量的元素和顏色強調使圖示在視覺上沒有差別和不清楚：

過多的細節並不能使圖示更清晰，但相反，它使您難以感知：

許多強調和小的元素也引出了簡單性：

3）考慮細節

圖示的細節應該合理。

不要以為細節是一種邪惡，而“設計師中的魔鬼”這一說法是由網頁設計師發明的。是的，任何細節都會使圖示變得複雜。但是，如果它符合設計概念並且是專業製造的，則是合理的。

例如，您的目標是使使用者狹窄地檢視圖示，以便他們在頁面上停留一段時間。那麼細節就有意義了。在大多數情況下，使用者不會傾向於睜大眼睛，也無法即時“閱讀”複雜的圖示。

頁面上應該沒有很多詳細的圖示。不要將它們彼此靠近。它們的背景必須是單色的，並且調色盤要有限。

對於初學者，我們不建議從詳細的圖示開始。他們的創作需要紮實的經驗，藝術品味和精通能力。

圖示集| Mike|創意薄荷糖

二、敏銳和翔實

使用者不喜歡他們不瞭解的事物。

不清楚的圖示需要“解密”，使用者不喜歡它。如果沒有任何意義，這也是一個很大的缺點。圖示的主要目的是即時傳達資訊。因此，我們的任務是刪除所有阻止其執行此操作的不必要的事情。

這些圖示對使用者不清晰

1。簡化的好壞

使用者不喜歡介面元素，甚至不喜歡它們。因此，圖示易於“閱讀”非常重要。圖示的識別取決於它們的簡單性，可理解性和隱喻性。

但是，有不同型別的簡單性。簡單不能保證清晰。您可以簡化圖示以至於無法識別。

元素過於簡單的例子

過度簡化或相反，表格過於複雜會使使用者不清楚圖示。不要認真對待“固體圖示更易於閱讀”的建議。任何設計良好的圖示都易於閱讀。

2。尺寸

元素的大小也會影響圖示的識別。圖示中的小元素越多，則越難理解其象徵。

製作不佳的圖示的示例：

第一個圖示的形狀未喚起必要的關聯，並且小的元素妨礙了其識別。這些元素的大小與其他兩個圖示的大小不對應，線寬和顏色也不同。這違反了風格上的統一，沒有合適的隱喻，沒有過多的小元素。所有這些都是圖示“難以辨認”的原因。

3。隱喻的清晰度

好的圖示對於不同文化，年齡和背景的人來說都是普遍的。但是，您應該研究目標受眾，並選擇最適合該人群並可以理解的顏色和隱喻。

適當的隱喻可確保圖示清晰且內容豐富。

這些隱喻甚至對於孩子來說也很清楚：

這是一個令人困惑的圖示示例：

使用者不喜歡毫無意義的事情。

在充滿創意的爆發中，設計師喜歡創造美麗卻毫無意義的元素。這種方法剝奪了圖示的主要功能：即刻傳達資訊。

但是，有時圖示必須形象化一個複雜的或抽象的想法，很難找到一個隱喻。在這種情況下，允許使圖示抽象並使用文字傳達含義。

我們的例子：

outcrowd。io/memo

在這種情況下，圖示是吸引眼球的錨點，而必要的資訊則透過大字型的文字傳達。

outcrowd。io/memo

如果僅需要將圖示用作平衡設計的視覺重點，並且文字提供了資訊性，則可以使用不包含隱喻的圖示。但是，即使在這種情況下，也希望找到合適的視覺關聯。

三、風格統一

使用者不喜歡不和諧的事物。

當人們無法解釋他們對圖示的不滿意時就是這種情況。我們都在直覺上感到不和諧。和諧之路在於風格的統一。

風格的統一表明圖示設計與品牌風格和設計理念相匹配。

備忘錄品牌準則

1。品牌要求

圖示應體現品牌的本質和價值，不僅在視覺上，而且在心理上都應是其有機組成部分。可以將品牌的風格視為強硬或柔和，豪華或經濟，正式或私密，精英或民主等。圖示設計必須首先滿足品牌指示的要求。

2。設計要求

樣式的統一假設一組圖示的公共引數，例如：

一致的調色盤；

圖形和典型單位（柵格或向量，2D或3D，實體或輪廓）；

大小相等；

線寬相等；

相等的視覺重量；

元素的均等平衡；

相同級別的細節；

強調統一原則；

節奏一致，動靜的特徵；

相同的陰影（如果有）；

符合徽標風格和整體設計理念；

字型的視覺對應。

設計師通常必須使用Web上現成的收藏夾中的圖示或將其作為基礎。但是，該集合可能沒有必要的圖示，因此必須自己建立它們。一個常見的錯誤是您的“自己的”圖示與集合略有不同。原因是違反了上述一個或多個統一引數。

以相同樣式製作的圖示：

風格的統一不僅是對品牌風格的美學和支援的致敬。樣式的一致性使圖示的感知更加容易，簡化了導航，併為使用者帶來了良好的體驗。

有關此主題的更多資訊：Web設計中的樣式統一

四、獨特性

有兩種型別的唯一性-圖示集的唯一性和每個單獨圖示的唯一性。

移動應用程式—3D入門

1。集合的獨特性

第一類唯一性幾乎不需要任何解釋。這種設計允許將一組圖示與許多相似的圖示區分開，以使其特別，有趣且令人難忘。圖示的獨特性有助於品牌的獨特性。

唯一性並不意味著您需要建立世界尚未看到的圖示。您無法想象有一種更好的方法來嚇the人們。網際網路使用者已經習慣了某些標準和刻板印象，打破它們是一個壞主意。這些陳規定型觀念限制了創造力，但使UI元素可預測和可理解。人們不應該費力地去理解自己所看到的東西，而浪費時間解決重路。

使用每個人都熟悉的隱喻，但使它們的視覺實現獨特。使用者不想破譯謎語。

具有獨特實現的簡單圖示（貼紙）：

2。圖示的唯一性

圖示的唯一性應理解為與集合中的圖示不同。為了追求統一，設計師有時會犧牲最重要的東西——圖示的含義。不應忘記統一和單調遠非同一件事。每個圖示都有其自己的用途（現代圖示設計師的口號是EIM-每個圖示都很重要）。

使用者無法欣賞或理解帶有視覺上無法區分的影象的精美套裝。人們感到尷尬，無法將一個圖示與另一個圖示區分開。

“統一”並不意味著“相同”！

具有視覺上相同的元素（保持樣式統一）的設計示例：

手形圖示— Dindra Desmipian探索

五、視覺平衡

這一點是第3點“風格統一”的特例，但值得特別提及。

視覺上不平衡的圖示是使用者乍一看不喜歡的圖示。人們幾乎不看影象就能直觀，立即感覺到失衡。元素對齊中的錯誤也指平衡干擾。但是，儘管元素對齊的重要性很重要，但對齊的微小不規則並不是圖示在視覺上令人不愉快的主要原因。在許多情況下，對準和對中誤差不是造成不平衡的原因。

由於形狀和顏色強調的不一致性，破壞了平衡。

這是吸引使用者眼球的第一件事，而不是一個或兩個畫素移動一個元素。

不平衡圖示示例

概要

設計師非常瞭解圖示有多少要求。因此，他們準備無休止地改進它們，拋光每個細節並計算每個畫素。我們絕不呼籲不要做所有這一切。我們只想說，如果違反了建立圖示的基本原則，那麼這些努力將毫無意義。即以下內容：

簡潔明瞭；

隱喻性（以及資訊性）；

風格統一（因此視覺和諧）；

設計的獨特性和每個圖示的個性；

視覺平衡。

遵循這些原則可以保證您的圖示清晰，美觀和實用。這意味著每個人都一定會喜歡他們！

作者：Outcrowd，譯者：南設；譯者公眾號：南設（ID：shemenglianmeng）

TAG: 圖示使用者元素視覺隱喻