图案学的完整指南
Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly technical.
图标是任何设计系统或产品体验的一个重要组成部分。图标帮助我们快速导航。它们是独立于语言的。最重要的是：它们是真正的小东西，所以它们不会占用很大的空间。图标是一个好的设计系统的基本组成部分，对营销材料非常有帮助。它们是图解内容的基础构件，但它们也是高度技术性的。
There aren't many people who love to design icons, and even fewer who are great at it. I wrote this guide to help you become one of those people.
喜欢设计图标的人不多，而擅长设计的人更少。我写这个指南是为了帮助你成为这些人中的一员。
Whether you are a design systems expert, an illustrator, or a product designer, this guide will help you learn how to build icons, how to align them with your brand, and how to implement them into your design system. Let's start with the basics.
无论你是设计系统专家、插画师还是产品设计师，本指南将帮助你学习如何建立图标，如何使它们与你的品牌相一致，以及如何将它们实施到你的设计系统中。让我们从基础知识开始。
Basic elements of an icon
图标的基本要素
Size
尺寸
Consistency is key with icons, and all your icons should be the same size when you build them. First, you'll need to make sure that you know how your grid is built (multiple of 8 or 10?). From there, your base icon size should relate directly to that. So, if you have a grid based on 8s, you'd want to build at 16, 24, or 32.
一致性是图标的关键，你的所有图标在构建时都应该是相同的尺寸。首先，你需要确保你知道你的网格是如何建立的（8或10的倍数？）从那里，你的基本图标尺寸应该与此直接相关。所以，如果你有一个基于8的网格，你会想用16、24或32来构建。
Choose a common size to build all your icons to, and then allow your engineers to scale to other sizes that might be needed by other designers. You don't want to build the same icon over and over at a multitude of sizes.
选择一个通用的尺寸来构建你的所有图标，然后允许你的工程师扩展到其他设计师可能需要的其他尺寸。你不希望在多种尺寸下重复建造同一个图标。
When you need glyph complexity, that's when you want to start adding sizes. You might have your base product icon at 24px, but marketing icons at 80px because of the vast difference in use. You'll want to add detail for...