I am not great at creating logos or icons, mainly because of the lack of practice. So when I was tasked to create an unique icon set for our web app, I wasn’t confident that things will turn out right. After researching effective and relevant processes online and making the icons, here is my 6 step process to get the job done.

我不是很擅長創建徽標或圖標，這主要是因為缺乏實踐。 因此，當我受命為我們的Web應用程序創建唯一的圖標集時，我不相信事情會成功。 在在線研究了有效且相關的過程并制作了圖標之后，這是我完成工作的6個步驟。

步驟1.考慮應用程序上下文中圖標集的用途。 (Step 1. Think about the purposes of your icon set in the context of the application.)

What are the purposes of the icon set? In my case, these icons are: 1) to offer visual cues for file types, 2) to assist differentiating file types when scanning rapidly through files.

圖標集的目的是什么？ 就我而言，這些圖標是：1)為文件類型提供視覺提示，2)在快速掃描文件時幫助區分文件類型。

Where it will be used? In my case, they will appear on a data table that may consists of 50 rows at a time. The density is high.

將在哪里使用？ 就我而言，它們將出現在一次可能包含50行的數據表上。 密度高。

步驟2，草繪圖標提示。 (Step 2. Sketch icon ideas.)

Set a timer and brainstorm without holding back. Sketch all possibilities of shape and contrast the icons could take on.

設置計時器并進行頭腦風暴，不要退縮。 繪制所有形狀的可能性并對比圖標可能呈現的對比度。

第3步。根據有效圖標集設計的3個屬性評估草圖：形式，美觀統一性和可識別性[1]。 (Step 3. Evaluate your sketches based on 3 attributes of effective icon set design: form, aesthetic unity, and recognizability [1].)

• Form is the underlying structure of an icon, or how it is made. The primary geometric shapes — circle, square and triangle — create a visually stable foundation for icon design [1]. I made 5 shapes for the icon, and decided to use the 3rd one for the next steps.
  形式是圖標的基礎結構或其制造方式。 主要的幾何形狀(圓形，正方形和三角形)為圖標設計創建了視覺上穩定的基礎[1]。 我為圖標制作了5種形狀，并決定將第3種形狀用于下一步。

• The aesthetic unity of a set is the collection of design elements and/or choices you repeat throughout the set to visually tie it together as a cohesive whole. These elements are things like rounded or square corners, the specific size of corners (2 pixels, 4 pixels, etc.), limited and consistent line weights (2 pixels, 4 pixels, etc.), the style (flat, line, filled line or glyph), the color palette and more [1]. This tells me to keep icons consistent when drawing them in later steps.
  集合的美學統一性是設計元素和/或選擇的集合，您可以在整個集合中重復這些集合，以在視覺上將其緊密地結合在一起。 這些元素包括圓角或正方形角，角的特定大小(2像素，4像素等)，有限且一致的線寬(2像素，4像素等)，樣式(平面，線條，實心)線或字形)，調色板等等[1]。 這告訴我在以后的步驟中繪制圖標時要使其保持一致。
• Recognizability is a product of an icon’s essence or what makes an icon unique. Whether an icon works ultimately depends on how easily the viewer comprehends the object, idea or action it depicts [1]. Since I’m making icons for file types, I want users to understand the shapes quickly. So I prefer to use commonly used shapes instead of reinventing the wheel myself.
  可識別性是圖標本質或使圖標獨特的產物。 圖標的最終效果取決于觀看者理解其描繪的對象，想法或動作的難易程度[1]。 由于我正在為文件類型制作圖標，因此我希望用戶快速了解形狀。 因此，我更喜歡使用常用形狀，而不是自己重新發明輪子。

After I selected the shapes from my sketches, it’s time to draw.

從草圖中選擇形狀后，就該繪制了。

步驟4.使用網格，根據您的直覺進行調整。 (Step 4. Use a grid, make adjustments based on your intuition.)

• In Illustrator, first build a common grid in Illustrator like this one.

  在Illustrator中，首先像這樣在Illustrator中構建一個公共網格。

  In Illustrator, first build a common grid in Illustrator like this one.Link to tutorial

  在Illustrator中，首先像這樣在Illustrator中構建一個公共網格。 鏈接到教程

• Then draw the shapes with the help of the grid. Start from creating a rectangle, then adjust its corner radius. I created all my icons with rectangles with width of 16px and corner radius of 8px.
  然后在網格的幫助下繪制形狀。 從創建矩形開始，然后調整其角半徑。 我用矩形創建了所有圖標，這些矩形的寬度為16px，角半徑為8px。

• There’s no need to follow it rigidly. Adjust the height and width of your glyphs to maximize their recognizability and consistency based on the unique shape of each icon. Since in typography the letter “W” is wider than “X”, so you can widen “W” accordingly, no need to force them into the same widths.
  無需嚴格遵循它。 根據每個圖標的獨特形狀，調整字形的高度和寬度，以最大程度地提高其可識別性和一致性。 由于在排版中字母“ W”比“ X”寬，因此您可以相應地加寬“ W”，而無需將它們強制設置為相同的寬度。

• Place all icons together to inspect their consistency.
  將所有圖標放在一起以檢查其一致性。

步驟5.選擇與應用程序的一般設計準則一致的調色板。 (Step 5. Select color palettes that align with the general design guidelines of the app.)

Ask yourself how prominent you want the icons to be on the pages they will appear. If they are too “loud” and overshadow other UI elements with more importance, subdue the colors by reducing saturation, size, even abstract them.

問自己，您希望圖標在它們出現的頁面上有多顯眼。 如果它們太“大聲”，并且比其他UI元素更重要，請通過減小飽和度，縮小大小來柔化顏色，甚至對其進行抽象化。

步驟6.在應用程序的各個位置測試圖標。 (Step 6. Test the icons in various places in the app.)

In this step, I am looking for harmony between these icons and the rest of the UI elements, as well as their role on the pages.

在這一步中，我正在尋找這些圖標與其余UI元素之間的協調以及它們在頁面上的角色。

By looking at the test mockups, we found a problem: the colors of the icon set clashed with another icon set on the same table. To solve this, we re-adjusted the placement of the icons to create more spatial separation, and increased the saturation of the other icon set because that’s a more prominent element.

通過查看測試模型，我們發現了一個問題：該圖標集的顏色與同一張桌子上的另一個圖標集發生了沖突。 為了解決這個問題，我們重新調整了圖標的位置以創建更多的空間分隔，并增加了其他圖標集的飽和度，因為這是一個更加突出的元素。

Here we go, the icon set is now ready to be used. It is not perfect, but it is native to the app’s design guideline, plays well with other UI elements, and meets the original design goals.

到這里，圖標集現在可以使用了。 它不是完美的，但是它是應用程序設計指南的固有內容，可以與其他UI元素很好地配合，并且可以滿足最初的設計目標。

[1] 6 Easy Steps To Better Icon Design https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/

[1]簡化圖標設計的6個簡單步驟https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/