從Kidpix到設計系統 (From Kidpix to design systems)

Did you ever create stamps in KidPix? Kidpix is bitmap drawing software that’s been around since the nineties, and I remember many happy — more like maddening — hours creating tiny pixelated images to reuse in my pictures. I was continually amazed to see how different the stamp looked at rendered size than in the zoomed-in view I was working on. Will these stark grey blocks really look like shadows? Magic.

您是否曾經在KidPix中創建圖章？ Kidpix是一種位圖繪圖軟件，自90年代以來一直存在，我記得許多小時(更像是發瘋)花費了幾個小時來創建微小的像素化圖像以在我的圖片中重復使用。 我一直驚奇地發現，圖章在渲染尺寸上與我正在處理的放大視圖有何不同。 這些明顯的灰色塊真的看起來像陰影嗎？ 魔法。

For the past four years, I’ve been a caretaker of system icons. I’m currently helping to cultivate Garden, the design system for Zendesk. That includes agonizing over lots of pixels, so, I guess I’ve achieved all of my childhood dreams. I enjoy the challenging tension between small details and big user experience questions.

在過去的四年中，我一直是系統圖標的管理員。 我目前正在幫助培育Zendesk的設計系統Garden 。 這包括困擾很多像素，所以，我想我已經實現了我所有的童年夢想。 我喜歡小細節和大用戶體驗問題之間的挑戰性張力。

為什么我在這里 (Why I’m here)

I’m passionate about providing quality icons to users. I know when I use a product frequently, I build a connection with the icons that influences my experience for better or worse.

我熱衷于為用戶提供優質的圖標。 我知道當我經常使用產品時，我會與圖標建立聯系，無論好壞，都會影響我的體驗。

I want to focus on the craft of icons. Tools will come and go. Technology will change. Already, icons are viewed at increasingly high resolutions.

我想專注于圖標的Craft.io。 工具會來來去去。 技術將發生變化。 已經可以以越來越高的分辨率查看圖標。

Designing icons may seem like a purely visual exercise, but much more is involved. I think of icon design as a microcosm of the overall UX design process, challenging me in terms of visual design, communicating concepts, and defining problems. Icons follow the principle of things being interconnected. When I try to consider any icon in isolation, I find it hitched to everything else in the universe. I start by looking at an icon, and I end up helping a team consider a whole user flow.

設計圖標可能看起來像是純粹的視覺練習，但涉及的內容更多。 我認為圖標設計是整個UX設計過程的縮影，在視覺設計，溝通概念和確定問題方面給我帶來挑戰。 圖標遵循事物相互連接的原理。 當我嘗試孤立地考慮任何圖標時，我發現它與宇宙中的其他所有事物都息息相關 。 我首先查看一個圖標，然后最終幫助團隊考慮整個用戶流程。

制作實用的圖標 (Crafting practical icons)

So what kind of icons am I talking about here? Icon design is a broad topic. Icons can be many things:

那么我在這里談論什么樣的圖標呢？ 圖標設計是一個廣泛的主題。 圖標可以是很多東西：

• Mini illustrations for brands (check out Nick Levesque’s post Shaping an icon for more on this)

  品牌的迷你插圖(有關更多信息，請查看Nick Levesque的文章“ 塑造圖標 ”)

• Pictograms for navigating the world
  導航世界的象形圖
• Anything on the broad spectrum in between
  介于兩者之間的任何范圍

The icons I’m talking about are design system icons. These are on the practical pictogram side of things, in the digital world. In Garden, I’ve defined icons as visual symbols of simple concepts. They aim to:

我正在談論的圖標是設計系統圖標。 在數字世界中，這些都屬于實際的象形圖方面。 在花園中，我已將圖標定義為簡單概念的視覺符號。 他們的目標是：

1. Visually support a text string
   視覺上支持文本字符串
2. Make content more scannable by differentiating items at a glance
   一目了然地區分項目，使內容更易于掃描
3. Simplify repeating or persistent actions
   簡化重復動作或持續動作

Garden icons are treated like any user interface component in our system.

花園圖標被視為與我們系統中的任何用戶界面組件一樣。

一致且標準化 (Consistent and standardized)

Meeting strict style and quality guidelines

符合嚴格的樣式和質量準則

功利主義者 (Utilitarian)

Helping the user understand and take action

幫助用戶理解并采取行動

模塊化的 (Modular)

Ready to plug into any Zendesk interface

準備插入任何Zendesk界面

可重用 (Reusable)

Useful for multiple situations, though usually precipitated by a product’s specific need

在多種情況下很有用，盡管通常是由產品的特定需求引起的

靈活而強大 (Flexible and robust)

Sized at 12px and 16px, allowing scaling to many multiples of 4 to fit our base grid. Styled in two ways: stroke style is the default; fill is used for greater visual weight. Each icon comes in 4 versions.

大小分別為12px和16px，可以縮放到4的許多倍以適合我們的基本網格。 有兩種樣式：筆畫樣式是默認樣式； 填充用于更大的視覺重量。 每個圖標都有4個版本。

國際化 (International)

Using universal metaphors and avoiding words, which won’t be translated. Can be flipped for use with languages that are read right-to-left.

使用通用隱喻并避免使用不會翻譯的單詞。 可以翻轉以用于從右到左閱讀的語言。

愛像素 (Love the pixels)

像素很重要 (Pixels matter)

The first UI icon I ever designed was a cursor. I drew it as a vector, thought, “great,” and gave it to the design director. She asked me if I knew what a pixel was. I had placed the vector without consideration of pixels, so the aliasing was completely arbitrary.

我設計的第一個UI圖標是光標。 我將其繪制為矢量，認為“很棒”，并將其交給了設計總監。 她問我是否知道像素是什么。 我放置矢量時不考慮像素，因此混疊完全是任意的。

That fateful day, I learned that vector graphics are translated into rasterized images on a display. I went back to my KidPix roots and began the practice of aligning icons to the pixel grid so that they will be sharp when they’re rasterized. As usual, knowing was 7% of the battle. Pixel-wrangling is a unique challenge for each icon. What a thrill. 😏

命運的那一天，我了解到矢量圖形被轉換為顯示器上的光柵圖像。 我回到了KidPix的根源，開始了將圖標與像素網格對齊的練習，以便在對其進行柵格化時變得清晰。 像往常一樣，知道是戰斗的7％。 像素爭奪是每個圖標的獨特挑戰。 太刺激了。 😏

繪制圖標的實用技巧 (Practical tips for drawing icons)

Because icons’ limited number of pixels have such an impact on what I can draw, I move to digital quickly. I may sketch on paper as I think through metaphors, but once I know what I’m drawing, I work out the visual design in pixels. Only in the final medium do I know what will be possible.

由于圖標的像素數量有限，因此對我可以繪制的圖像產生如此大的影響，因此我很快轉向了數字技術。 我可能會通過隱喻思考在紙上畫草圖，但是一旦知道要繪制的內容，便會以像素為單位進行視覺設計。 只有在最終的媒介中，我才知道可能會發生什么。

When I draw an icon, I set anchor points to snap to half pixels. That’s because I’m drawing 1px borders, so the shape of them will fill a whole pixel.

繪制圖標時，我將錨點設置為捕捉到半像素。 那是因為我要繪制1px的邊框，所以它們的形狀將填充整個像素。

I preview the pixels constantly, and shift anchor points to see how the elements are going to alias.

我不斷預覽像素，并移動錨點以查看元素的別名。

I also zoom out to 100% constantly. Sometimes I am agonizing over how a curve is going to alias but find it doesn’t matter at actual size.

我也不斷縮小到100％。 有時我會為曲線如何混淆而感到煩惱，但發現實際大小并不重要。

Sometimes, pixel perfection means offsetting a whole icon. For example, Garden has a set of icons with a symbol sitting inside a circle. If the circle size is an even number, the 1px symbol inside will land on a half pixel and be blurry. Because of this, my colleague Nicolette designed the whole set of icons to be smaller and offset within their 16px viewboxes, so the shapes inside are sharp and they align to one another. This principle has been a helpful precedent to reference when I’ve come across similar situations.

有時，像素完美意味著偏移整個圖標。 例如，Garden有一組帶有圓圈內符號的圖標。 如果圓圈大小是偶數，則內部的1px符號將落在半個像素上并且模糊。 因此，我的同事Nicolette將整個圖標設計得更小，并且在其16px視圖框中偏移了，因此內部的形狀很清晰，并且彼此對齊。 當我遇到類似情況時，該原則已成為參考的有用先例。

Pixel-perfect icons look great on any display. Plus, they have a subtle underlying logic holding them together. Relationships between shapes will be rational, based on the grid of the pixels. Even in a high-resolution world, paying attention to pixels helps make good icons into great icons.

像素完美的圖標在任何顯示器上看起來都很棒。 另外，它們具有將它們組合在一起的微妙的底層邏輯。 基于像素的網格，形狀之間的關系將是合理的。 即使在高分辨率世界中，關注像素也有助于將好的圖標變成出色的圖標。

在極端尺寸限制下工作 (Working with extreme size constraints)

Twelve pixels, squared. I appreciate this icon size, since it allows clean scaling to 24px, 36px, and so on. It fills those crannies the 16px icons can’t. But, 12 × 12 is a challenging space to work in. I respond to this challenge in a couple of ways.

十二個像素，平方。 我非常喜歡此圖標的大小，因為它允許將像素縮放到24px，36px等。 它填補了16px圖標無法顯示的縫隙。 但是，12×12是一個充滿挑戰的工作空間。我以多種方式應對這一挑戰。

First, I keep the icon as simple as possible.

首先，我使圖標盡可能簡單。

Second, I use the pixels as a grid to structure the space and manage it effectively. If I align to the grid, clear constraints emerge that I can use to make decisions. Which pixels should each element occupy? Every pixel, whether it is filled or left empty, impacts the clarity of the icon.

其次，我使用像素作為網格來構造空間并有效地對其進行管理。 如果我與網格對齊，則會出現明確的約束條件，可以用來制定決策。 每個元素應占據哪些像素？ 每個像素(無論是填充還是留空)都會影響圖標的清晰度。

Every icon is like a puzzle, and the details matter. I feel really jazzed when I find a combination of pixels that gets the idea across.

每個圖標都像一個難題，而細節很重要。 當我發現將想法傳達給我的像素組合時，我感到非常激動。

As I zoom out and compare the iterations, there are usually only a few options that will make sense.

當我縮小并比較迭代時，通常只有幾個選項才有意義。

使其令人難忘，而不是字面意思 (Make it memorable, not literal)

How can I communicate “API” in a 12px ? 12px icon? I don’t; it is a trap. Size may feel like the problem, but even if there were space to include many complex elements, the icon would be too confusing to parse at a glance within a product interface. Not being able to fit everything into an icon is a red flag that something else may be wrong and clarity is needed through another method. I could try to depict everything about the concept, but I would end up with an illustration instead of a practical interface icon — valid, just not my goal.

如何在12px?12px圖標中傳達“ API”？ 我不; 這是一個陷阱。 尺寸可能感覺像是一個問題，但是即使有足夠的空間包含許多復雜的元素，該圖標也太混亂了，無法在產品界面中一目了然地進行解析。 不能將所有內容都放入圖標中是一個危險信號，表明可能有其他問題，需要通過另一種方法進行澄清。 我可以嘗試描述有關該概念的所有內容，但最終會得到一個插圖，而不是一個實用的界面圖標-有效，但這并不是我的目標。

Instead of illustrating a concept, the most successful icons have become universally recognized by associating a tangible object with words, over and over, until the users learn what it means. For example, a gear icon is generally recognized as “settings.” However, this is a learned association, not an intuitive one. As users, we have seen a gear with the word “settings” so many times that now the gear triggers that concept in our minds.

通過將有形物體與單詞相關聯，一遍又一遍，直到用戶了解到它的含義為止，最成功的圖標已被普遍認可，而不是說明概念。 例如，齒輪圖標通常被認為是“設置”。 但是，這是一種博學的關聯，而不是直觀的關聯。 作為用戶，我們已經多次看到帶有“設置”一詞的齒輪，以至于現在齒輪在我們的腦海中觸發了這一概念。

Nothing is truly intuitive in UX design, and icon design is the same — everything is learned. My goal is to help the user learn, quickly and easily.

在UX設計中，沒有什么是真正直觀的，并且圖標設計是相同的-一切都學到了。 我的目標是幫助用戶快速輕松地學習。

For example, for “API,” I drew a plug because it’s tangible and recognizable. If it were just another slightly different combination of arrows, it would be harder to remember.

例如，對于“ API”，我畫了一個插頭，因為它是有形且可識別的。 如果只是箭頭的另一個稍有不同的組合，將很難記住。

首先定義問題 (Define the problem first)

看大圖 (Look at the big picture)

Icon design may seem self-contained, but it takes some big-picture thinking to get it right. And because it is so detailed, the stakes are pretty high to make sure I am drawing the right thing before I start focusing on whether this anchor point should be one or two pixels from the edge.

圖標設計似乎是獨立的，但是需要一些大的思考才能正確。 而且因為它是如此詳細，所以在開始關注此錨點距邊緣一或兩個像素之前，要確保畫正確的東西的風險很大。

Too many times, I have jumped into the detailed work of drawing an icon only to find I am making the wrong thing. I have ended up in an inefficient trial-and-error cycle where I don’t really know the use case well enough, so I take a best guess at what the icon should be. Then, the team tells me it doesn’t really fit, and I have to rework the metaphor.

太多次，我跳入了繪制圖標的詳細工作，卻發現自己做錯了事。 我最終陷入了一個效率低下的反復試驗中，在那個階段我真的不太了解用例，因此我最好猜測一下圖標應該是什么。 然后，團隊告訴我這真的不合適，我必須重新設計這個比喻。

驗證概念 (Validate the concept)

The designer working on the feature knows better than I do what metaphor is needed. They know where the icon will appear, and what the user and business needs are. So before I get into the nitty-gritty of drawing the icon precisely, I lean on them to figure out what is needed. With so many free icon libraries out there, the icon concept can easily be shown along with the rest of the feature, at design critique and in user testing.

從事此功能的設計師比我更了解需要什么隱喻。 他們知道圖標將出現在哪里，以及用戶和業務需求是什么。 因此，在我進入精確繪制圖標的實質之前，我先依靠它們來確定需要什么。 有了如此多的免費圖標庫，可以在設計評論和用戶測試中輕松顯示圖標概念以及其余功能。

Now that I know this, it seems so obvious! But I used to try to figure out the metaphor myself.

現在我知道了，這看起來是如此明顯！ 但是我曾經試圖自己弄清楚這個比喻。

找到單詞 (Find the words)

It’s important to work with the UX Content Strategy team right away to figure out the words that go along with an icon. What is it communicating? What is the associated description?

立即與UX內容策略團隊合作，弄清楚帶有圖標的單詞很重要。 它在傳達什么？ 相關描述是什么？

This informs the icon’s metaphor. We might think we need a trash can icon to represent “delete,” then find that “remove link” is the real issue at play and so we need a different icon.

這通知了圖標的隱喻。 我們可能認為我們需要一個垃圾桶圖標來表示“刪除”，然后發現“刪除鏈接”才是真正的問題，因此我們需要一個不同的圖標。

請享用 (Enjoy)

Now that I understand the goals and constraints for icons, I can talk and think about them objectively. I hope you can too.

現在，我了解了圖標的目標和限制，可以客觀地討論它們。 我希望你也能。

This has freed me up to enjoy the delightful part about icons. Tangible icons can be adorable. Heck, the other day the Garden team and I were using wine tasting notes. “This shopping cart flaunts Target flavors, with subtle notes of Whole Foods.” “It has an assertive Walmart finish.”

這使我騰出時間來享受有關圖標的令人愉快的部分。 有形圖標可能很可愛。 哎呀，前幾天我和花園團隊正在品嘗葡萄酒。 “此購物車標榜目標口味，并帶有“全食”的微妙風味。” “它具有自信的沃爾瑪飾面。”

Anyone can enjoy wine. Anyone can enjoy icons. But the more you know, the more you can appreciate.

任何人都可以品嘗美酒。 任何人都可以享受圖標。 但是您了解得越多，您就會越欣賞。

Let icons do what they do best and don’t put too much pressure on them. Love the icons and they will love you. ??

讓圖標做他們最擅長的事情，不要對它們施加太大的壓力。 愛圖標，他們會愛你。 ??

Check out design.zendesk.com for more thought leadership, design process, and other creative musings.

請訪問design.zendesk.com，以獲取更多的思想領導力，設計過程和其他創意靈感。