編輯導(dǎo)語：在產(chǎn)品頁面中，圖標(biāo)只是一個(gè)相對(duì)較小的設(shè)計(jì)元素，但是其重要性不可忽略，好的圖標(biāo)設(shè)計(jì)有助于在使用流程中從體驗(yàn)、美感等方面提升用戶的好感度。本篇文章里，作者總結(jié)了如何設(shè)計(jì)出好圖標(biāo)的設(shè)計(jì)原則，一起來看一下。

有些圖標(biāo)是用戶不喜歡的。他們說圖標(biāo)不清晰，丑陋或無法解釋他們不喜歡的東西。原因很簡(jiǎn)單，在此類圖標(biāo)中，違反了其構(gòu)造的一項(xiàng)或多項(xiàng)基本原則。

本文中的信息可以幫助您避免錯(cuò)誤并創(chuàng)建用戶肯定喜歡的圖標(biāo)。這些原則與網(wǎng)站和應(yīng)用程序圖標(biāo)都相關(guān)，并且可以應(yīng)用于所有類型的圖標(biāo)。

讓我們從一些基礎(chǔ)知識(shí)開始。

網(wǎng)頁設(shè)計(jì)中的圖標(biāo)只是很小的元素，而不是重要性或意義。需要它們來指示信息。這些是視覺錨點(diǎn)，有助于吸引用戶的注意力并指導(dǎo)他們執(zhí)行目標(biāo)操作。

圖標(biāo)有助于：

• 吸引眼球;
• 了解含義；
• 瀏覽界面；
• 節(jié)省視覺空間；
• 與用戶建立聯(lián)系。

圖標(biāo)的使用并不像乍看起來那樣容易，它需要設(shè)計(jì)能力和周到的方法（如果有單獨(dú)的專家來處理圖標(biāo)，那就很好了）。

一些設(shè)計(jì)師最大的擔(dān)心是他們的圖標(biāo)看起來是否整潔，是否正確居中以及像素是否完美匹配。他們根據(jù)公式對(duì)齊元素，但忘記了最重要的事情。

創(chuàng)建每個(gè)人都喜歡的圖標(biāo)的最重要原則是什么？

一、簡(jiǎn)單性

用戶不喜歡復(fù)雜的東西。

好的圖標(biāo)應(yīng)該簡(jiǎn)單易讀。它不需要文字說明。您可以通過向遠(yuǎn)離設(shè)計(jì)的人展示圖標(biāo)來測(cè)試該圖標(biāo)。如果他們沒有猜到它的大致含義，則此圖標(biāo)可能有問題。

簡(jiǎn)單性的主要敵人：

1）多余的元素

2）不必要的細(xì)節(jié)

它們會(huì)阻礙感知，分散用戶注意力并使用戶困惑。通常，圖標(biāo)包含的元素越少越好。具有3種或更多種顏色的圖標(biāo)不再是象形文字，而是插圖。

大量的元素和顏色強(qiáng)調(diào)使圖標(biāo)在視覺上沒有差別和不清楚：

過多的細(xì)節(jié)并不能使圖標(biāo)更清晰，但相反，它使您難以感知：

許多強(qiáng)調(diào)和小的元素也引出了簡(jiǎn)單性：

3）考慮細(xì)節(jié)

圖標(biāo)的細(xì)節(jié)應(yīng)該合理。

不要以為細(xì)節(jié)是一種邪惡，而“設(shè)計(jì)師中的魔鬼”這一說法是由網(wǎng)頁設(shè)計(jì)師發(fā)明的。是的，任何細(xì)節(jié)都會(huì)使圖標(biāo)變得復(fù)雜。但是，如果它符合設(shè)計(jì)概念并且是專業(yè)制造的，則是合理的。

例如，您的目標(biāo)是使用戶狹窄地查看圖標(biāo)，以便他們?cè)陧撁嫔贤Ａ粢欢螘r(shí)間。那么細(xì)節(jié)就有意義了。在大多數(shù)情況下，用戶不會(huì)傾向于睜大眼睛，也無法即時(shí)“閱讀”復(fù)雜的圖標(biāo)。

頁面上應(yīng)該沒有很多詳細(xì)的圖標(biāo)。不要將它們彼此靠近。它們的背景必須是單色的，并且調(diào)色板要有限。

對(duì)于初學(xué)者，我們不建議從詳細(xì)的圖標(biāo)開始。他們的創(chuàng)作需要扎實(shí)的經(jīng)驗(yàn)，藝術(shù)品味和精通能力。

圖標(biāo)集| Mike | 創(chuàng)意薄荷糖

二、敏銳和翔實(shí)

用戶不喜歡他們不了解的事物。

不清楚的圖標(biāo)需要“解密”，用戶不喜歡它。如果沒有任何意義，這也是一個(gè)很大的缺點(diǎn)。圖標(biāo)的主要目的是即時(shí)傳達(dá)信息。因此，我們的任務(wù)是刪除所有阻止其執(zhí)行此操作的不必要的事情。

這些圖標(biāo)對(duì)用戶不清晰

1. 簡(jiǎn)化的好壞

用戶不喜歡界面元素，甚至不喜歡它們。因此，圖標(biāo)易于“閱讀”非常重要。圖標(biāo)的識(shí)別取決于它們的簡(jiǎn)單性，可理解性和隱喻性。

但是，有不同類型的簡(jiǎn)單性。簡(jiǎn)單不能保證清晰。您可以簡(jiǎn)化圖標(biāo)以至于無法識(shí)別。

元素過于簡(jiǎn)單的例子

過度簡(jiǎn)化或相反，表格過于復(fù)雜會(huì)使用戶不清楚圖標(biāo)。不要認(rèn)真對(duì)待“固體圖標(biāo)更易于閱讀”的建議。任何設(shè)計(jì)良好的圖標(biāo)都易于閱讀。

2. 尺寸

元素的大小也會(huì)影響圖標(biāo)的識(shí)別。圖標(biāo)中的小元素越多，則越難理解其象征。

制作不佳的圖標(biāo)的示例：

第一個(gè)圖標(biāo)的形狀未喚起必要的關(guān)聯(lián)，并且小的元素妨礙了其識(shí)別。這些元素的大小與其他兩個(gè)圖標(biāo)的大小不對(duì)應(yīng)，線寬和顏色也不同。這違反了風(fēng)格上的統(tǒng)一，沒有合適的隱喻，沒有過多的小元素。所有這些都是圖標(biāo)“難以辨認(rèn)”的原因。

3. 隱喻的清晰度

好的圖標(biāo)對(duì)于不同文化，年齡和背景的人來說都是普遍的。但是，您應(yīng)該研究目標(biāo)受眾，并選擇最適合該人群并可以理解的顏色和隱喻。

適當(dāng)?shù)碾[喻可確保圖標(biāo)清晰且內(nèi)容豐富。

這些隱喻甚至對(duì)于孩子來說也很清楚：

這是一個(gè)令人困惑的圖標(biāo)示例：

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

在充滿創(chuàng)意的爆發(fā)中，設(shè)計(jì)師喜歡創(chuàng)造美麗卻毫無意義的元素。這種方法剝奪了圖標(biāo)的主要功能：即刻傳達(dá)信息。

但是，有時(shí)圖標(biāo)必須形象化一個(gè)復(fù)雜的或抽象的想法，很難找到一個(gè)隱喻。在這種情況下，允許使圖標(biāo)抽象并使用文本傳達(dá)含義。

我們的例子：

outcrowd.io/memo

在這種情況下，圖標(biāo)是吸引眼球的錨點(diǎn)，而必要的信息則通過大字體的文本傳達(dá)。

outcrowd.io/memo

如果僅需要將圖標(biāo)用作平衡設(shè)計(jì)的視覺重點(diǎn)，并且文本提供了信息性，則可以使用不包含隱喻的圖標(biāo)。但是，即使在這種情況下，也希望找到合適的視覺關(guān)聯(lián)。

三、風(fēng)格統(tǒng)一

用戶不喜歡不和諧的事物。

當(dāng)人們無法解釋他們對(duì)圖標(biāo)的不滿意時(shí)就是這種情況。我們都在直覺上感到不和諧。和諧之路在于風(fēng)格的統(tǒng)一。

風(fēng)格的統(tǒng)一表明圖標(biāo)設(shè)計(jì)與品牌風(fēng)格和設(shè)計(jì)理念相匹配。

備忘錄品牌準(zhǔn)則

1. 品牌要求

圖標(biāo)應(yīng)體現(xiàn)品牌的本質(zhì)和價(jià)值，不僅在視覺上，而且在心理上都應(yīng)是其有機(jī)組成部分?？梢詫⑵放频娘L(fēng)格視為強(qiáng)硬或柔和，豪華或經(jīng)濟(jì)，正式或私密，精英或民主等。圖標(biāo)設(shè)計(jì)必須首先滿足品牌指示的要求。

2. 設(shè)計(jì)要求

樣式的統(tǒng)一假設(shè)一組圖標(biāo)的公共參數(shù)，例如：

• 一致的調(diào)色板；
• 圖形和典型單位（柵格或矢量，2D或3D，實(shí)體或輪廓）；
• 大小相等；
• 線寬相等；
• 相等的視覺重量；
• 元素的均等平衡；
• 相同級(jí)別的細(xì)節(jié)；
• 強(qiáng)調(diào)統(tǒng)一原則；
• 節(jié)奏一致，動(dòng)靜的特征；
• 相同的陰影（如果有）；
• 符合徽標(biāo)風(fēng)格和整體設(shè)計(jì)理念；
• 字體的視覺對(duì)應(yīng)。

設(shè)計(jì)師通常必須使用Web上現(xiàn)成的收藏夾中的圖標(biāo)或?qū)⑵渥鳛榛A(chǔ)。但是，該集合可能沒有必要的圖標(biāo)，因此必須自己創(chuàng)建它們。一個(gè)常見的錯(cuò)誤是您的“自己的”圖標(biāo)與集合略有不同。原因是違反了上述一個(gè)或多個(gè)統(tǒng)一參數(shù)。

以相同樣式制作的圖標(biāo)：

風(fēng)格的統(tǒng)一不僅是對(duì)品牌風(fēng)格的美學(xué)和支持的致敬。樣式的一致性使圖標(biāo)的感知更加容易，簡(jiǎn)化了導(dǎo)航，并為用戶帶來了良好的體驗(yàn)。

有關(guān)此主題的更多信息：Web設(shè)計(jì)中的樣式統(tǒng)一

四、獨(dú)特性

有兩種類型的唯一性-圖標(biāo)集的唯一性和每個(gè)單獨(dú)圖標(biāo)的唯一性。

移動(dòng)應(yīng)用程序— 3D入門

1. 集合的獨(dú)特性

第一類唯一性幾乎不需要任何解釋。這種設(shè)計(jì)允許將一組圖標(biāo)與許多相似的圖標(biāo)區(qū)分開，以使其特別，有趣且令人難忘。圖標(biāo)的獨(dú)特性有助于品牌的獨(dú)特性。

唯一性并不意味著您需要?jiǎng)?chuàng)建世界尚未看到的圖標(biāo)。您無法想象有一種更好的方法來嚇the人們。互聯(lián)網(wǎng)用戶已經(jīng)習(xí)慣了某些標(biāo)準(zhǔn)和刻板印象，打破它們是一個(gè)壞主意。這些陳規(guī)定型觀念限制了創(chuàng)造力，但使UI元素可預(yù)測(cè)和可理解。人們不應(yīng)該費(fèi)力地去理解自己所看到的東西，而浪費(fèi)時(shí)間解決重路。

使用每個(gè)人都熟悉的隱喻，但使它們的視覺實(shí)現(xiàn)獨(dú)特。用戶不想破譯謎語。

具有獨(dú)特實(shí)現(xiàn)的簡(jiǎn)單圖標(biāo)（貼紙）：

2. 圖標(biāo)的唯一性

圖標(biāo)的唯一性應(yīng)理解為與集合中的圖標(biāo)不同。為了追求統(tǒng)一，設(shè)計(jì)師有時(shí)會(huì)犧牲最重要的東西——圖標(biāo)的含義。不應(yīng)忘記統(tǒng)一和單調(diào)遠(yuǎn)非同一件事。每個(gè)圖標(biāo)都有其自己的用途（現(xiàn)代圖標(biāo)設(shè)計(jì)師的口號(hào)是EIM-每個(gè)圖標(biāo)都很重要）。

用戶無法欣賞或理解帶有視覺上無法區(qū)分的圖像的精美套裝。人們感到尷尬，無法將一個(gè)圖標(biāo)與另一個(gè)圖標(biāo)區(qū)分開。

“統(tǒng)一”并不意味著“相同”！

具有視覺上相同的元素（保持樣式統(tǒng)一）的設(shè)計(jì)示例：

手形圖標(biāo)— Dindra Desmipian探索

五、視覺平衡

這一點(diǎn)是第3點(diǎn)“風(fēng)格統(tǒng)一”的特例，但值得特別提及。

視覺上不平衡的圖標(biāo)是用戶乍一看不喜歡的圖標(biāo)。人們幾乎不看圖像就能直觀，立即感覺到失衡。元素對(duì)齊中的錯(cuò)誤也指平衡干擾。但是，盡管元素對(duì)齊的重要性很重要，但對(duì)齊的微小不規(guī)則并不是圖標(biāo)在視覺上令人不愉快的主要原因。在許多情況下，對(duì)準(zhǔn)和對(duì)中誤差不是造成不平衡的原因。

由于形狀和顏色強(qiáng)調(diào)的不一致性，破壞了平衡。

這是吸引用戶眼球的第一件事，而不是一個(gè)或兩個(gè)像素移動(dòng)一個(gè)元素。

不平衡圖標(biāo)示例

概要

設(shè)計(jì)師非常了解圖標(biāo)有多少要求。因此，他們準(zhǔn)備無休止地改進(jìn)它們，拋光每個(gè)細(xì)節(jié)并計(jì)算每個(gè)像素。我們絕不呼吁不要做所有這一切。我們只想說，如果違反了創(chuàng)建圖標(biāo)的基本原則，那么這些努力將毫無意義。即以下內(nèi)容：

• 簡(jiǎn)潔明了；
• 隱喻性（以及信息性）；
• 風(fēng)格統(tǒng)一（因此視覺和諧）；
• 設(shè)計(jì)的獨(dú)特性和每個(gè)圖標(biāo)的個(gè)性；
• 視覺平衡。

遵循這些原則可以保證您的圖標(biāo)清晰，美觀和實(shí)用。這意味著每個(gè)人都一定會(huì)喜歡他們！

免責(zé)聲明：本作品的內(nèi)容僅供學(xué)習(xí)、交流使用，本作品的版權(quán)歸原創(chuàng)作者所有，如有問題請(qǐng)及時(shí)聯(lián)系我們以做處理。本聲明未涉及的問題請(qǐng)參見國家有關(guān)法律法規(guī)，當(dāng)聲明與國家的法律法規(guī)沖突時(shí)，以國家的法律法規(guī)為準(zhǔn)。

作者：Outcrowd，譯者: 南設(shè)；譯者公眾號(hào)：南設(shè)（ID：shemenglianmeng）

來源：https://medium.com/outcrowd/icons-in-web-design-824f57cb2db0

本文由 @南設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議