Icons

Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.

Material 图标使用几何图形来表现核心思想、功能、题目。

Product icons are the visual expression of a brand’s products, services, and tools.

产品图标 ：是品牌用来表达服务和功能的视觉表现。

System icons represent a command, file, device, directory, or common actions.

系统图标 ：表示命令、文件、设备、目录或者某些常规的动作

Sizing / 大小

Product icons are 48dp, with 1dp edges

产品图标边长位48dp，单位是1dp

System icons are 24dp

系统图标边长为24dp

Product icons / 产品图表

Product icons are the visual expression of a brand’s products, services, and tools. Simple, bold, and friendly, they communicate the core idea and intent of a product. While each product icon is visually distinct, all product icons for a given brand should be unified through concept and execution.

产品图标是品牌的产品、服务、工具的视觉表现。简单、明了、友好的产品图标能够向用户传递出产品的核心理念。虽然每个产品的图标在视觉上是有着不同的表现，但所有的产品图标应该以一种相同的理念和形式进行表现。

Use these guidelines as a starting point to ensure that your product icon colors and key elements reflect your brand identity.

在刚刚开始的就是用这些准则来保证你产品图标的颜色和关键元素能够反映出你的品牌特色。

Material icons

Design approach / 设计原则

Product icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of the material is sturdy, with clean folds and crisp edges. The matte-like finish interacts with light through subtle highlights and consistent shadows.

产品图标的设计灵感源自于材料的触觉和材料的物理质量。每个图标都可以使用简单的图形元素进行展现，甚至于可以在纸张的基础上使用剪切，折叠，采光等手法进行图标的复原。材料应该是有着简洁的折痕，和清晰的边缘，并且材料本身的质量应该有足够的结实（不可穿透）。磨砂状的表面是通过微妙的高光和连贯的阴影相互作用形成的。

Physical prototype / 物理原型

Lighting study / 照明研究

Material prototype / Material 原型

Color study / 色彩研究

Product icon grid / 产品图标栅格

The product icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This standardization results in a flexible but coherent system.

使用产品图标栅格是为了方便的建立一套清晰的规则来确定图形元素的位置，以保证图标的统一性。如果你建立了这种标准，那么你就可以根据自己的需求创建一个灵活又统一的图标系统。

Grid / 栅格

Keylines / 关键线

Keyline shapes / 关键线 形状

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion across related product icons.

关键线形状是基于栅格创建的。通过使用核心参考，你可以保证你的产品图标有着统一的视觉比例。

Square / 正方形

• Height: 152dp
• Width: 152dp

Circle / 圆形

Diameter: 176dp

Vertical rectangle / 垂直的长方形

• Height: 176dp
• Width: 128dp

Horizontal rectangle / 水平的长方形

• Height:128dp
• Width:176dp

DP unit grid / 以DP为单位的栅格

Android expects product icons to be provided at 48dp, with edges at 1dp. When you create the icon, maintain the 48-unit measure, but scale it to 400% at 192 x 192 dp (the edge becomes 4dp).

安卓希望产品提供变长为48dp的图标，一个边长的基本单位为1dp。当你创建一个图标，他的一条边长保持在48dp，如果放大四倍，变长则变为192dp（基本单位变为4dp）。

Any scaling done to the original will scale the image up or down proportionally. By maintaining the unit ratio, you preserve sharp edges and correct alignment when the scale is reduced.

对原石尺寸进行等比的放大或缩小时，只要保持基本单元的比例不变，你就能在不同尺寸的情况下，减少因为放大或缩小改变图片而缺失的图标细节，并且保持图标尽可能的清晰正确。

1:1 Unit grid / 1:1 单元栅格

4:1 Unit grid / 4:1 单元栅格

Geometry / 几何

Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been developed to unify product icons and systemize their placement on the grid.

使用关键线围城的几个基本形状作为预设的标准：圆形、正方形、长方形、正交、对角。通过哪些简单的图形元素和调色板已经可以在栅格上开发统一的产品图标或系统图标了。

Product icon anatomy / 产品图标剖析

Product icon anatomy describes the graphic elements that make up a product icon. The consistency of these elements across icons for a given brand is critical in maintaining a shared visual language. Familiarity with these elements makes it easier to understand characteristics of each logo and subtle differences between them. It will also help educate your eye to recognize the underlying structure of logo designs.

产品图标剖析是解释说明组成产品图标的图形元素。那些图标中一致的元素是维持品牌统一视觉语言的关键。熟悉这些元素可以更容易的理解每个标示和它们之间细微差别的特性。同时也能帮助你的眼睛更好的认识标示设计的底层结构。

1. Finish / 完成
2. Material background / 材料背景
3. Material foreground / 材料前景
4. Color / 颜色
5. Shadow / 阴影

Components / 组件

Each component is positioned on top of the previous one, always viewed from straight above.

每一个组件都位于上一个组件的上方，因为视觉总是从上方并且垂直于平面的。

Construction perspective / 建设透视视角

An exploded perspective example illustrating the context of each component of the logo construction.

一个标示根据每个组件自上而下的组件建设的透视视角的例子

Material background 材料背景

The back-most material element.

背景是材料元素

Material foreground 材料前景

A material element raised above, and casting a shadow upon, the material background.

材料元素在材料背景的正上方，并且会在背景材料上会生成阴影。

Spot color / 点的颜色

Color applied to a small portion of an element.

将颜色涂在一个元素的一部分。

Flooding / 环绕

Color applied to an entire element, edge-to-edge.

将颜色围绕边缘涂在一个元素的四周。

Tinted edge / 边缘着色

The top edge of a material element. A tint is the mixture of a color with white, which lightens the original color.

材料元素的顶部边缘。色调是偏亮的主色颜色就像主色中混合点白色。

Shaded edge / 边缘阴影

The bottom edge of a material element. Shade is the mixture of a color with a darker hue, which darkens the original color.

材料底部的边缘。色调是偏暗的主色就像颜色中带有一点暗色。

Contact shadow 接触阴影

A soft shadow around all edges of a raised material element.

围绕更高材料元素的所有边缘有一圈柔和阴影。

Finish 磨光

A soft tint above all elements to provide surface lighting, fading from upper-left to lower-right.

在材料的左上角到右下角的表面提供一层逐减弱并且很柔和的采光。

Product icon metrics 产品图标指标

Lighting 采光

Within the material environment, virtual lights illuminate the scene and allow objects to cast shadows. A top light cast on material elements creates a contact shadow while highlighting the top and bottom edges. An angled light reinforces the sense of surface across the elements.

在材料环境中，虚拟的灯光照亮场景并使物体投射阴影。有关材料元素的俯视投光创建一个有联系的阴影同时突出了顶部和底部边缘。倾斜的光线增强了元素表面的效果。

Top / 顶部

45º angle / 45度角

Shadows 阴影

For a product icon, the top light from above casts a soft shadow surrounding an element lightly on the top and left. The shadow is slightly heavier below and to the right. This shadow is always contained within the icon’s silhouette.

对于一个产品图标，通过顶部照射下来的光线所产生的阴影是围绕着元素周围，并且左侧和顶部是比较淡，而右侧和底部的阴影则略深。这个阴影始终在这个图标的轮廓内显示，不能超出轮廓。

Drop shadow metrics / 阴影指标

• Mode: Normal / 模式：正常
• Opacity: 20% / 透明度：20%
• X Offset: 0dp / x轴偏移：0dp
• Y Offset: 4dp / y轴偏移：4dp
• Blur: 4dp / 模糊：4dp
• Color: Refer to Tint, shade and shadow values / 颜色：请参考深浅、阴影色值部分

Edge tint and shade 边缘的深浅

The top and bottom edges of material elements provide a sense of depth and surface. Material elements have a standard 1dp thickness. All edge distances are measured from an element's interior edge.

材料元素的顶部和底部的边缘为元素本身提供深度和表面的层次感。所有的材料元素都只有统一的1dp的厚度。所有的边缘距离都是从材料的外边框向内测量的。

Tint highlights the top edge of all elements. The left, right, and bottom edges do not have a tint applied.

在所有元素顶部使用浅色强调。左右下边缘都没有使用这种浅色强调。

Shade darkens the bottom edge of all elements. The left, right, and top edges do not have a shade applied.

在所有元素底部的使用深色阴影强调。左右上边缘不能使用这种色深阴影强调。

Tinted edge / 浅色边缘

• Height: 1dp / 高度：1dp
• Opacity: 20% / 透明度：20%
• Color: White (#FFFFFF) / 颜色：白色（#FFFFFF)

Shaded edge / 深色边缘

• Height: 1dp / 高度：1dp
• Opacity: 20% / 透明度：20%
• Color: Refer to Tint, shade and shadow values / 颜色：参考色调，阴影和阴影数值

Finish / 磨光

The finish layer is a result of the virtual 45º light source. It extends from the top-left corner to the exterior edge of the icon’s silhouette. The finish is always contained within these boundaries.

我们使用四十五度角的光源来进行磨光处理。它是从左上角一直延伸到图标的外部边缘。磨光处理的效果一般也都在图标的外边框内部。

Gradient metrics 梯度指标

• Type: Radial / 类型：辐射状

• Angle: 45º ／ 角度：45度

• Color: White (#FFFFFF) / 颜色：白色（#FFFFFF）

• midpoint Location: 33% / 中点位置：33%

• Slider 1 / 滑块 1

• Opacity: 10% / 透明度：10%

• Location: 0% / 位置 0%

• Slider 2 / 滑块 2

• Opacity: 0% / 透明度：0%

• Location: 100% / 位置：100%

Tint, shade, and shadow values / 色调，阴影和阴影数值

Each color reacts differently when tints and shades are added. The color of every edge tint, edge shade, and shadow needs to be adjusted for each color that lies behind it. To ensure color harmony, follow the appropriate value for each.

每种颜色添加阴影的时候反应都是不同的。因为不同的颜色，每条浅色边缘和深色边缘所显示的效果也不太一样。为了确保每种颜色都能和谐，轻根据每种颜色挑选一个合适的色值。

Product icon patterns 产品图标样式

Influenced by the behavior of physical material, simple conventions provide a sense of surface and tactility. The interactions of material and color allow for numerous unique compositions.

通过材质的物理特性和简单惯例提供表面和触感的感觉。材质和颜色的相互影响后会产生多种不同的影响。

Color 色彩

Color elements are flush to the paper’s surface.

色彩元素是直接附着于材料表面的。

Don’t embellish color elements with any edges or shadows.
不要在任何色彩元素上使用边缘和阴影效果。

Do / 正确

Don't. / 错误

Layer 层级

Layered paper elements create depth, having edges and shadows.

通过带有边缘和阴影的分层元素来创造深度。

Be cautious with the quantity of overlapping surfaces. Having too many complicates the icon and lacks focus.

要注意的就是分曾元素数量，如果有太多的分层元素，会使图标缺乏重点。

Do. / 正确

Don't. / 错误

Elevate 提高

Elevating a key material element atop a simple background silhouette focuses attention to the center.

在一个简单的背景轮廓上，将一个关键材料元素的焦点放在中心。

Don’t crop elevated material elements within another shape.

不要将提高的重点材料的元素进行分割。

Do. / 正确

Don't. / 错误

Score 划线

Scored material elements have the illusion of depth without losing their geometric form. Scores should be centered on symmetrical shapes.

分割材料元素的分割线要产生深度的视觉效果，但不能破坏材料本身的几何构成。分割线应该位于几何图形的对称中心。

Don’t use multiple scores, or position a score off-center.

不要使用多个分割线，或者偏离中心。

Do. / 正确

Don't. / 错误

Fold 折叠

Folded material elements are skewed, having greater dimension. Spot colors should be avoided, so as to avoid altering or misrepresenting key elements.

折叠材料元素的效果应该是具有较大角度的倾斜，防止因为折叠效果将主要元素所表达的内容扭曲，所以主要元素应该避免这种效果。

Do. / 正确

Don't. / 错误

Overlap 重叠

Overlapped material elements create unique silhouettes. All elements, edges, and shadows are confined to the interior of the silhouette.

重叠的材料元素创造出独特的剪影。所有的元素，边缘，阴影效果都应该只在轮廓内部显示

Don’t exceed more than two overlaps. Having too many complicates the icon and lacks focus.

不要将两个以上的元素进行重叠，过多的折叠元素会使图标变得复杂，缺乏重点。

Do. / 正确

Don't. / 错误

Accordion 手风琴

Accordion folded material elements are adjoined by a connecting fold, used to add dimension to a single material element.

手风琴式的折叠是通过将单个材料元素折叠，以增加空间维度行程的效果。

Don’t exceed more than two accordion folds. Having too many complicates the icon and lacks focus.

不要进行过多的材料折叠，过多的折叠元素会使图标变得复杂，缺乏重点。

Do. / 正确

Don't. / 错误

Distort 扭曲

Product icons should never be distorted or transformed. Elements should remain in their geometric form, and not be skewed, rotated, bowed, warped, or bent.

产品图标不应该被扭曲或变形。元素应该保持他们稳定的几何结构，不要倾斜，旋转，弯曲，变形。

Don't. / 错误

Don't. / 错误

Human iconography 人物肖像

The below guidelines and examples illustrate best practices for incorporating human iconography into your UI.

下面的准则和实例说明了如何将人物肖像与你的UI进行很好的结合。

Form 结构

Construction 建设

Keyline alignment 关键线校准

Keyline shapes 关键线的形状

Square 正方形

Circle 圆形

Vertical rectangle 垂直方向的长方形

Horizontal rectangle 水平方向的长方形

Paper vs color 纸实现，色彩实现

Paper 纸实现（通过现实中的纸进行图标的实现）

Color 色彩实现（只使用颜色进行图标的实现）

Gestures 手示

Construction 建设

Composition 构成

Human icon rules 人形图标规则

Do : Do use simple shapes for background silhouettes.

正确：使用简单的外形背景轮廓。

Don't : Don’t use complicated shapes for background silhouettes.

错误：不要使用复杂的外形轮廓做背景。

Do : Do use the correct and consistent human form at all times.

正确：请保持一致的人形结构。

Don't : Don’t use an incorrect human form or add complex details.

错误：不要使用错误的人形结构或增加复杂的细节。

Do : Do use curved and straight edges for visual balance.

正确：请使用弯曲和笔直的边缘来维持视觉平衡。

Don't : Don’t use circular arm terminals nor cropped arms.

错误：不要使用圆润的胳膊和单独凸显的臂膀。

System icons 系统图标

A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.

系统图标和UI图标，标志着命令，文件，设备或者目录。系统图标也经常用于像垃圾箱，打印，保存等通用的操作。

The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.

系统的设计应该是简单，现代，友好，有时也会有点古怪。每个图标都将最大化的减少形式，并直接表现自己的最核心的命令操作。确保这些设计即使在小尺寸的时候也应该保持很好的可读性和清晰的结构。

Design principles 设计原则

Shapes are bold and geometric.

形状是大胆和充满几何元素

Symmetry and consistency of shapes give the icons a unique quality, while keeping them simple and bold.

对称性和一致的图标形状，会使它们在保持着简单和大胆的特性下，仍然具有独特的品质。

Simple 简单

Intuitive 直观

Actionable 可操作

Consistent 一致性

Grid, proportion, and size 栅格，比例和尺寸

DP unit grid 以为DP单位的栅格

System icons are displayed at 24dp. When creating icons, it’s important to design at 100% scale for pixel-accuracy.

系统图标的通常是使用24dp进行显示的。所以设计图表时，就按照100％的显示比例设计是非常重要的。

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts. For dense layouts on desktop, icons can be scaled down to 20dp.

当鼠标和键盘作为主要的输入方法时（使用场景可以想象用电脑的时候），那么意味着布局将会是以更紧密的排版来设计，对于桌面的排版布局，图标的尺寸可以减少到20dp。

100% scale 100%比例

800% scale 800% 比例

Dense grid at 20dp, 100% scale 20dp宽度的栅格，100％ 比例

Dense grid at 20dp, 800% scale 20dp宽度的栅格，800% 比例

Icon grid 图标栅格

The icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This standardization results in a flexible but coherent system.

图标栅格建立是为了在开发图标的时候方便的确保一致性和创建一套明确的图形元素定位的规则。使用这种方法可以让设计的图标灵活并且有统一的效果。

Grid / 栅格

Keylines / 关键线

Content area 内容区域

The content of an icon should remain inside of the live area. Content should only extend into the trim area if additional visual weight is needed. Do not place any part of the icon outside of the trim area.

图标的主要内容应该保持在有效区域内。图标的主要内容如果需要额外视觉修饰，也要保持在修剪区域内。不要将图标内容的任何部分放到修剪区之外。

Dense layouts 密集布局

For dense layouts on desktop, icons may be scaled down to 20dp with a trim area of 2dp surrounding the icon.

对于桌面设备的布局就要进行紧密布局，图标的边长就要缩减到20dp，在活动区域外有2dp的修剪区域。

Live area 活动区域

Icon content is limited to the 20dp x 20dp live area, with 4dp of trim around the perimeter.

图标的内容限定在 20dp ＊ 20dp 的活动区域，加上在周围的4dp的修剪区域。

Trim area 修剪区域

4px of empty space makes up the trim area surrounding the 20dp x 20dp live area.

在20dp ＊ 20dp 的活动区域的四周，有4pd空白区域用作修剪区域。

Dense live area 密集布局的活动区域

Icon content is limited to the 16dp x 16dp live area, with 2dp of trim around the perimeter.

图标的内容限制在16dp ＊ 16dp 的活动区域，在这周围加上2dp的修剪区域。

Dense trim area 密集布局的修剪区域

The 2dp of empty space makes up the trim area surrounding the live area.

在图标活动区域周围有2dp空白区域作修剪区域。

Keyline shapes 关键线的形状

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion throughout the system icons.

关键线的围城的形状是栅格的基础。使用这些核心的关键线围城的图形，你可以保持整个系统图标一致的视觉比例。

Square / 正方形

• Height: 18dp / 高度：18dp
• Width: 18dp / 宽度：18dp

Circle / 圆形

• Diameter: 20dp / 直径：20dp

Vertical rectangle 垂直方向的长方形

• Height: 20dp / 高度：20dp
• Width: 16dp / 宽度：16dp

Horizontal rectangle 水平方向的长方形

• Height: 16dp / 高度：16dp
• Width: 20dp / 宽度：20dp

Geometry 几何

Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been developed to unify Google system icons and systemize their placement on the icon grid.

预设的标准已经选定了几个特殊的关键线：圆形，正方形，长方形，正交线，对角线。一些比较常用的系统图标 Google 已经统一系统的做了设计开发，也把图标的栅格进行了规范。

Construction 建设

Composition 组成

System icon anatomy 系统图标分解

1. Stroke terminal / 行程终端
2. Corner / 拐角
3. Counter area / 计数器区
4. Stroke / 行程
5. Counter stroke / ？
6. Bounding area / 边界区域

Corners 拐角

Consistent corner radiuses are key to unifying the overall system icon family. A 2dp corner radius is used on the silhouette form of the icon. Do not round the corners of strokes (shapes 2dp wide or less).

统一的拐角半径是统一整体系统图标的关键要素。拐角一半用在从轮廓向内以2dp作为图标拐角的半径。不要围绕着拐角画圆。（2dp或者更小的形状）

Interior corners should be square. Do not round the corners of interior shapes.

内角的形状应该是正方形，不要在内部使用圆形的拐角。

Exterior corners 外角

Interior corners 内角

Strokes 笔锋

Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and both interior and exterior strokes.

统一的笔锋权重夜市统一系统图标的关键要素。在曲线，角度，内外的笔画都应该保持2dp的宽度。

Consistency 保持一致

Curves and angles 曲线和角度

Stroke terminal 笔画结束末端

Counter stroke 内部的笔画

Optical corrections 光学矫正

Extreme scenarios that call for subtle tweaks add to the legibility of an icon. Instances where complex details are unavoidable require adjusting metrics.

在某些极端的情况下可以将图标进行微调，这样会提高图标的易读性。例子中复杂的细节必须要细微的调整。

If optical corrections are necessary, only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.

如果必须要用到光学矫正，那么使用图标的位置必须要统一格式，不要弯曲或倾斜架构。

Complex / 复杂

The paperclip icon in this example is only using 1.5dp of the possible 2dp stroke area to fit multiple curves within the 24 x 24dp icon space.

下图中曲别针图标在24 ＊ 24的图标空间中，使用了1.5dp宽度的笔画代替了2dp宽度的笔画。

Small scale / 小规模

The microphone icon in this example is using a 1.5dp stroke to indicate microphone sound waves within the 24 x 24dp icon space.

例子中24dp ＊24dp 图标空间中，麦克风图标的声波的宽度使用了1.5dp宽度的笔画。

Clearance 间隙

Adequate space around the icon is needed to allow for legibility and touch.

图标的四周需要留有足够的空间，保证其具有高辨识度与易操作性。

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

当鼠标雨键盘作为主要输入方法时，尺寸将会进行缩小，以便适应紧凑的布局。

Clearance area 间隙区域

Placement 放置

Clearance area for dense icons 密集布局的间隙区域

Best practices 推荐实例

Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications.

一致性能够帮助用户更好的理解图标。在允许的情况下，尽量在不同的应用中使用已经存在的系统图标

Do : Do use consistent stroke weights and squared stroke terminals.

正确：使用统一的笔画宽度，以及正方形的笔画结尾。

Don't : Don’t use inconsistent stroke weights or rounded stroke terminals.

错误：不要使用不一致的笔画宽度和圆形的笔画结尾。

Do : Do make icons appear front-facing and sturdy.

正确：让图标的线条简单明了，并且正对着你。

Don't : Don’t tilt, rotate, or make icons appear dimensional.

错误：不要使用倾斜，旋转，让图标产生立体感。

Do : Do simplify icons for greater clarity and legibility.

正确：请简化图标使它更简单明了。

Don't : Don’t be overly literal. Avoid complex icons.

错误：不要过多的描述细节，将图标复杂化。

Do : Do make icons graphic and bold.

正确：让图标更醒目和几何。

Don't : Don’t use delicate, thin stroke weights.

错误：不要使用不同粗细的笔画。

Do : Do use geometric, consistent shapes.

正确：请使用几何一致的形状。

Don't : Don’t use gestural or loose organic shapes.

错误：不要使用手示或松散的有机形状。

Do : Do position icons “on pixel” – meaning the X and Y coordinates are integers and do not contain decimals.

正确：使图标与坐标严丝合缝。意味着x轴和y轴的坐标都是整数，没有小数。

Don't : Don’t place the icon on coordinate that is not “on pixel”. Don’t distort the icon by having unequal width and height values.

错误：不要将图标随意的放在坐标中。不要随意更改图标的宽度和高度。

Human iconography 人物肖像

Human icon anatomy 人物图标解析

1. Head / 头部
2. Neck / 颈部
3. Upper body / 上半身
4. Arm / 胳膊
5. Leg / 腿

Full body 全身

Upper body 上半身

Form 架构

Full body example 全身示例

Upper body example 上半身示例

Cropped example 修正示例

Detailed parts example 细节部位示例

Full body 全身

Full body examples 全身示例

Visual Alignment 视觉校准

Upper body 上半身

Upper body examples 上半身示例

Visual Alignment 视觉校准

Contained 包含

Cropped examples 修正示例

Detailed parts 细节部分

Detailed part examples 细节部分示例

Human icon rules 人类图标规则

Do : Do use consistent stroke weights and squared arm/leg terminals.

正确：使用统一的笔锋宽度作为胳膊／腿部的结尾。

Don't : Don’t use inconsistent stroke weights nor rounded arms/legs.

错误：不要使用不同的笔锋宽度作为胳膊／腿部的结尾。

Do : Do align elements to simplify silhouette for clarity.

正确：对齐各个元素，肩膀保持清晰简洁。

Don't : Don’t crop portions of arms/legs.

错误：不要对于手臂和腿部进行过多的修饰。

Do : Do fully embed elements within a shape when contained.

正确：如果有包含元素则将人物图标完整的包含进去。

Don't : Don’t break the container’s boundary with elements.

错误：不要使用图标元素的部分打破容器的轮廓。

Do : Do add human elements when they help amplify the meaning of an icon.

正确：可以在图标中加入人类元素帮助人们更好的识别图标的意义。

Don't : Don’t add human elements when they increase the complexity of an icon.

错误：请不要添加人类元素，当他们只能增加了图标的复杂度的时候。

Do : Do use the most simple shapes to represent human characteristics.

正确：请用最简单的形状来表现人类的特征。

Don't : Don’t apply human characteristics to inanimate objects.

错误：请不要增加非人类的特征元素到图标中。

Color 颜色

The standard opacity for an active icon on a light background is 54% (#000000). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 26% (#000000).

在白色背景下，活动图标的透明度为54%。非活动图标保持在透明度为26%。

The standard opacity for an active icon on a dark background is 100% (#FFFFFF). An inactive icon, which is lower in the visual hierarchy, should have an opacity of 30% (#FFFFFF).

在深色背景下，活动图标的透明度为100%，非活动图标透明度保持在30%。