More in the iconography series:? 7 Principles of Icon Design? 5 Ways to Create a Settings Icon? Icon Grids & Keylines Demystified? Pixel-Snapping in Icon Design? 3 Classic Icon Families

An icon is a compact symbol that represents a discrete object, action, or idea. Icons are meant to be read at a glance and are typically created on a square (1:1) canvas.

圖標是一個緊湊的符號，代表離散的對象，動作或想法。 圖標是供一眼閱讀的，通常在正方形(1：1)畫布上創建。

隱喻意義 (Meaning Through Metaphor)

Icons employ visual metaphors to speed comprehension, by transferring properties from something we already understand.

圖標通過傳遞我們已經了解的屬性來使用視覺隱喻來加快理解速度。

In some cases, the metaphor is literal. Material’s alarm icon represents a classic mechanical alarm clock with bells, carrying over functionality we’d expect — it rings to wake us up in time.

在某些情況下，隱喻是字面的。 Material的警報圖標代表帶有鈴鐺的經典機械鬧鐘，繼承了我們期望的功能-響鈴會及時喚醒我們。

Sometimes the metaphor is a little outdated, but understandable through repeated use. In the early days of personal computing the floppy disk saved our files to a thin, square disk?—?a whole 1.44 megabytes worth! Though we don’t use this object anymore, we still use a floppy disk icon to indicate a save action.

有時，隱喻有點過時了，但是通過反復使用可以理解。 在個人計算的早期，軟盤將我們的文件保存到一個薄的方形磁盤上-總計1.44兆字節！ 盡管我們不再使用該對象，但仍使用軟盤圖標表示保存操作。

Other times the metaphor is a little more abstract. The shuffle icon and refresh icon communicate their meaning through the movement of the arrows. Switch up the order, do the action again.

其他時候，隱喻則更抽象一些。 隨機圖標和刷新圖標通過箭頭的移動傳達其含義。 切換順序，再次執行操作。

Yet other times the original referent has been lost. The command icon helps us access shortcuts from a Mac keyboard. The metaphor isn’t readily apparent; does it reference anything?

還有其他時候，原始指稱已經丟失。 命令圖標可幫助我們從Mac鍵盤訪問快捷方式。 這個隱喻并不容易顯現。 它引用什么嗎？

This symbol is known by many other names (pretzel, Saint John’s Arms, Bowen knot, true lovers knot) and is used in Nordic countries to mark a place of interest. A possible origin may be the turrets of a castle. 🤯

該符號還有許多其他名稱(椒鹽脆餅，圣約翰紋章，鮑恩結，真情人結)而聞名，并在北歐國家中用于標記名勝古跡。 可能的起源可能是城堡的炮塔。 🤯

強大的工具 (A Powerful Tool)

Icons are found everywhere — in public transit, dashboards, household appliances, and digital applications. They:

圖標無處不在-公共交通，儀表板，家用電器和數字應用程序中。 他們：

• Help us navigate
  幫助我們導航
• Warn us
  警告我們
• Trigger actions, and
  觸發動作，以及
• Show status
  顯示狀態

They are universal in that they don’t rely on a specific language.

它們是通用的，因為它們不依賴于特定的語言。

尋路 (Wayfinding)

Icons help us find our way around physical and digital spaces.

圖標可幫助我們找到圍繞物理和數字空間的方式。

They guide us to the departure gate or restroom; they help us quickly scan items in a menu. They emphasize and clarify the content, and help us recall elements when we come back to an interface.

他們將我們引向登機口或洗手間。 它們幫助我們快速掃描菜單中的項目。 它們強調并闡明了內容，并在我們回到界面時幫助我們回憶元素。

The Windows 95 Start menu without any icons would require a lot more reading.

沒有任何圖標的Windows 95“開始”菜單將需要大量閱讀。

警示標志 (Warning Signs)

On the road, icons inform and warn us of dangers ahead—pedestrians, deer, construction, switchbacks.

在旅途中，圖標會告知并警告我們前方的危險-行人，鹿，建筑，折彎。

觸發動作 (Triggering Action)

When used as a button, icons perform actions. Common icon buttons in software include a magnifying glass for search or a microphone for record.

當用作按鈕時，圖標執行操作。 軟件中的常用圖標按鈕包括用于搜索的放大鏡或 錄音的麥克風。

顯示狀態 (Showing Status)

By using variants, icons are effective in showing binary status (like on/off) or ranged status (like volume level or battery charge). This pair of icons shows visibility on and visibility off. We see them often in password fields and layer lists.

通過使用變體，圖標可有效顯示二進制狀態(如開/關)或范圍狀態(如音量或電池電量)。 這對圖標顯示可見性為開和可見性為關。 我們經常在密碼字段和圖層列表中看到它們。

Icons may even communicate compound status—these battery icon states show whether the device is charging or not and how much the battery is charged:

圖標甚至可以傳達復合狀態-這些電池圖標狀態顯示設備是否正在充電以及電池已充電了多少：

Operating systems often dedicate a status bar to house system-level status indicators.

操作系統通常專用于狀態欄來容納系統級狀態指示器。

表達聲音 (Expressing Tone of Voice)

In addition to their more functional purposes, icons also serve an emotional one, communicating tone and expressing brand. Firefox’s icons from their recent 2019 rebrand are bold, vibrant, and optimistic.

除了具有更多的功能目的，圖標還具有情感上的意義，傳達口氣并表達品牌。 Firefox在其最近的2019年更名中的圖標大膽，充滿活力且樂觀。

Google Material’s simple, no-frills style channel the brand’s utilitarian character:

Google Material簡潔，簡潔的風格傳達了品牌的功利性：

上下文是關鍵 (Context is Key)

Icons gain clarity and meaning through context. How and where icons are placed impact how?effective?they?are.

圖標通過上下文獲得清晰度和含義。 圖標的放置方式和位置會影響其效果。

布局影響清晰度 (Layout Impacts Clarity)

Within an interface, the arrangement of an icon can make it more clear or more confusing. What are the other elements in view? Do the icon(s) appropriately draw the eye to important content or do they compete with other visuals?

在界面內，圖標的排列可以使其更清晰或更混亂。 還有哪些其他要素？ 這些圖標是否恰當地將視線吸引到了重要內容上，或者它們是否與其他視覺效果競爭？

Too many icons can overwhelm the viewer. A couple years ago I encountered this washing machine interface and had a very hard time understanding the functions, both because I was unfamiliar with the metaphors and because there were so many of them. Text labels would have helped tremendously, even if I had to run them through a translator.

太多的圖標會使查看器不知所措。 幾年前，我遇到了這個洗衣機界面，并且很難理解這些功能，這是因為我不熟悉這些隱喻，而且隱喻太多了。 文本標簽將極大地幫助您，即使我必須通過翻譯來運行它們。

Something as simple as alignment can impact how icons work. In Airbnb’s Profile tab, the icons are aligned to the right while the text labels they represent are aligned to the left. This disjointed placement creates more work for the viewer to scan back and forth to link the two elements.

諸如對齊之類的簡單操作會影響圖標的工作方式。 在Airbnb的“個人資料”標簽中，圖標向右對齊，而它們代表的文本標簽則向左對齊。 這個不連續的位置為查看者來回掃描以鏈接這兩個元素創建了更多工作。

文化影響意義 (Culture Impacts Meaning)

Cultural context changes what an icon means. The pretzel on a Nordic road sign means place of interest; the same icon on an Apple keyboard means command key.

文化背景改變了圖標的含義。 北歐道路標志上的椒鹽脆餅就是有趣的地方 ; Apple鍵盤上的相同圖標表示命令鍵 。

An eye icon carries a range of meanings and connotations. In the context of a password field it says “toggle visibility on and off.” Nested inside a palm it creates a hamsa, a protective amulet popular in the Middle East and North Africa. The list goes on: the eye enclosed in a circle makes the CBS mark, IBM uses the eye playfully in their rebus, the Eye of Horus is another protective symbol… Though not all of these classify as icons, they show the depth of the symbolism. On a visceral level, an eye can simply feel creepy or give the sense that someone is watching.

眼睛圖標具有多種含義和含義 。 在密碼字段的上下文中，它顯示“打開和關閉可見性”。 嵌套在棕櫚樹內的它創造了一種叫做hamsa的保護性護身符，在中東和北非很受歡迎。 清單還在繼續：用圓圈圈起來的眼睛成為CBS標記，IBM在他們的筆勢中嬉戲地使用眼睛，荷魯斯之眼是另一個保護符號……盡管并非所有這些都歸類為圖標，但它們顯示了符號的深度。 在內臟層面上，眼睛可能只是感到毛骨悚然或感覺有人在看。

總結思想 (Closing Thoughts)

Though fluid in meaning and fluid in aesthetic, icons remain a time-tested tool. It’s hard to imagine a world without them. At their best, icons:

盡管圖標在含義上是不穩定的 ， 在美學上也很不穩定 ，但是圖標仍然是經過時間考驗的工具。 很難想象沒有他們的世界。 最好的圖標是：

• Read fast
  快速閱讀
• Save space
  節省空間
• Draw attention to important content
  提請注意重要內容
• Are language-agnostic
  與語言無關

If your line of work involves icons, design them and use them with intention.

如果您的工作涉及圖標，請設計它們并有意使用它們。

🎶 Written to the sounds of: Gillian Welch, Fiona Apple, and The Strokes

to 寫給以下人的聲音： Gillian Welch ， Fiona Apple 和 The Strokes

🙏 Thanks to: Toby Fried, Monica Chang, Christine Lee, and Tate Chow

to 感謝：Toby Fried，Monica Chang，Christine Lee和Tate Chow