超级应用程序的图标设计系统

The journey of creating a robust and connected icon system in a startup

在初创公司中创建功能强大且相互连接的图标系统的过程

It was 2016, and I was working at Hike Messenger as a Product Designer. Hike had gone through tough times and survived a whole journey of user churns due to weak social network in the app. But the good news for the entire team was that the team had a new target which was Hike super app.

那是2016年，我当时在Hike Messenger担任产品设计师。 由于该应用中的社交网络薄弱，Hike经历了艰难的时期，并且在用户流失的整个过程中幸免于难。 但是对整个团队来说，好消息是，该团队有了一个新的目标，那就是Hike超级应用。

Hike used a small bundling mechanism that allowed the team to bundle a 1–5MB micro-app inside the native iOS and Android app. This proved to be a game-changer in times where big product companies were struggling to keep up the app size smaller while still releasing innovative features. With micro apps, we were able to release a whole app-level concept to the user, run surveys and do quick A/B testing with different bundle designs. It felt excellent for a while and then the number of things that were getting integrated swelled. One of the significant problems faced was keeping up with the design language across a host of micro-apps.

Hike使用了一种小型捆绑机制，使团队可以将1-5 MB的微型应用捆绑到本机iOS和Android应用中。 在大型产品公司努力保持较小的应用程序尺寸同时仍发布创新功能的时代，这被证明是改变游戏规则的。 借助微型应用程序，我们能够向用户发布整个应用程序级别的概念，运行调查并使用不同的套件设计进行快速的A / B测试。 一阵子感觉很棒，然后集成的事物数量激增。 面临的重大问题之一是在众多微型应用程序中跟上设计语言的步伐。

We started building a new design system that required to redesign the entire icon design system. There was a simple set of 50+ icons when I started doing this, but with the redesign, I was expecting the icon grid to support 300+ icons that would come in all shapes and sizes.

我们开始构建一个新的设计系统，该系统需要重新设计整个图标设计系统。 当我开始执行此操作时，只有一组简单的50多个图标，但是经过重新设计，我希望图标网格能够支持300多种可以以各种形状和大小出现的图标。

开始 (The Start)

Rather than creating a grid structure and thinking of all the used cases from an ideal perspective, I started designing a few highly tapped icons in the beginning. I then showed the icons to multiple designers in the team and began to draw the same icon in different dimensions to fit them into existing layouts and used cases.

我没有创建网格结构并从理想的角度考虑所有用例，而是从一开始就设计了一些高度开发的图标。 然后，我向团队中的多个设计师展示了这些图标，并开始以不同的尺寸绘制相同的图标，以使其适合现有的布局和用例。

The success metric that I was chasing with all the icon grids were as follows:

我在所有图标网格中追求的成功指标如下：

• Icons should be legible and clickable even on the most shitty of the devices like Samsung Duos.
  即使在三星Duos等最糟糕的设备上，图标也应清晰易读。
• Icons should be at 90 degrees angle with no 3D perspective unless it’s an existing 3rd party logo.
  图标应成90度角且没有3D透视，除非它是现有的第三方徽标。
• Icons should convey meaning, and hence sticking to widely used general rendition is something that is a must.
  图标应传达含义，因此必须坚持广泛使用的通用格式。
• Icons should be responsive. The original design of an icon should be made keeping this in mind.
  图标应具有响应能力。 请记住图标的原始设计。
• Icons have to be designed for MDPI resolution, and then SVG scaled to other resolutions. This way line thickness across the icon set won’t be uneven.
  必须为MDPI分辨率设计图标，然后将SVG缩放到其他分辨率。 这样，图标集上的线条粗细就不会不均匀。

With these and internal testing with fellow designers and random folks walking around the office, I came up with the following constraints.

通过这些测试以及与设计师和随机人员一起在办公室中进行的内部测试，我想到了以下限制。

I think the fundamental problem with the specs mentioned above is the thickness being in decimal. This means that there will be half pixels in the final design, and all icons will be in decimals (float value)?? Ewwww!!

我认为上述规格的基本问题是厚度以十进制表示。 这意味着最终设计中将有一半像素，并且所有图标都将以小数点(浮点值)？ www！

Well, it came down to using 1.2px thickness for normal, 1.8px for medium and solid shapes for bold ones because of extensive testing and trying to find legibility in every icon that I put into the system. 1px thickness was often seen that too thin and 2px as too thick in the feedback. That is because the 1.2px-normal icons will be used across the system. 2px-medium icons will be seen on gradients and picture back only and solid-bold icons for smaller sizes. I kept increasing the thickness with +0.1, and finally, a majority of tests started giving positive feedback.

好吧，归因于广泛的测试并试图在我放入系统的每个图标中查找易读性，正常使用1.2px厚度，中型使用1.8px粗体。 反馈中经常看到1px的厚度太薄，而2px的厚度太厚。 这是因为1.2px-normal图标将在整个系统中使用。 2px-medium图标将在渐变和仅向后的图片上显示，而粗体图标则显示较小的尺寸。 我不断增加+0.1的厚度，最后，大多数测试开始给出积极的反馈。

Once I got a nod on these criteria, I went ahead and put together a guideline for the same.

一旦我对这些标准点了点头，我就会继续制定相同的准则。

图标准则 (Icon Guidelines)

介绍 (Intro)

Icons are an integral part of any interface. These provide a swift call-to-action, and if carved cleverly, they can help in converting complicated screens into simple ones. An icon must always be a common visual representation — we shouldn’t try to recreate the learning curve for the user unless the feature/action is new and never before seen by the world of apps.

图标是任何界面的组成部分。 这些提供了快速的号召性用语，并且如果巧妙地进行雕刻，它们可以帮助将复杂的屏幕转换为简单的屏幕。 图标必须始终是常见的视觉表示-除非功能/动作是新功能，而且从未被应用程序界所认识，否则我们不应尝试为用户重新创建学习曲线。

格 (Grid)

内容区域=直播区域+修剪区域 (Content Area = Live Area + Trim Area)

The content of an icon should remain inside 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. All icons need to be made inside of this grid structure.

图标的内容应保留在活动区域​​内。 如果需要额外的视觉重量，内容应仅延伸到修剪区域。 请勿将图标的任何部分放置在修剪区域之外。 所有图标都必须在此网格结构内制作。

图标构造 (Icon Construction)

Icons are made with wholes, halves and quarters of four basic shapes: circle, square, rounded rectangle and triangle. Hike icons are unified and placed on the icon grid using these small palettes of unique and simple shapes.

图标由四个基本形状的整体，一半和四分之一组成：圆形，正方形，圆角矩形和三角形。 远足图标是统一的，并使用这些具有独特和简单形状的小调色板放置在图标网格上。

When tilting these shapes, a 45-degree angle is suggested. Irregular shapes are off-brand; every shape needed should be made with a mixture of the ones listed above.

倾斜这些形状时，建议使用45度角。 不规则形状是品牌外的； 所需的每种形状都应混合使用上面列出的形状。

尺码 (Sizes)

Based on the legibility factor on MDPI resolution, which is 1x of all the other corresponding resolutions, icon sheet is divided into three major categories — Regular, Medium and Bold/Solid.

根据MDPI分辨率的可读性因子(所有其他相应分辨率的1倍)，图标表分为三大类-常规，中等和粗体/实心。

All three weights use the same grid system but exist in different parts of the system to make sure clarity of idea is not compromised.

这三个权重都使用相同的网格系统，但是存在于系统的不同部分中，以确保思想的清晰性不会受到损害。

重物 (Weights)

The overall family of system icons is unified using consistent corner radiuses, stroke terminal and stroke thickness.

使用一致的拐角半径，笔划终点和笔划厚度统一了整个系统图标系列。

—

-

STROKE TERMINAL

行程终端

A 1.2pt outer and inner stroke terminal is used on the silhouette form of the icon.

图标的轮廓形式使用1.2pt外部和内部笔触端子。

CORNERS

角

Big Outer corners are 3.8px and smaller ones are either 1.2px or half of 3.8px that is 1.9px . The corners are made using clear paths with the minimum number of anchor points for a smooth curve.

大外角为3.8像素，小外角为1.2像素或3.8像素的一半，即1.9像素。 使用清晰的路径制作拐角，并使用最少的锚点数以获得平滑的曲线。

STROKE WEIGHT

行程重量

Weights are decided based upon where the icon is getting placed — a great layout or a small layout. Stroke thickness determines the icon weight of every icon in both 20–24–48 icon grid.

权重取决于放置图标的位置(大布局还是小布局)。 笔触粗细决定了20–24–48两个图标网格中每个图标的图标粗细。

1. Regular2. Medium3. Bold

1.常规2。 中3。 胆大

Regular icons have 1.2pt as stroke weight while medium icons have a 1.8pt stroke weight. For visual weight balancing icons of regular weight can be bumped up to 1.5pt and 2.0pt for medium icons.

常规图标的笔画粗细为1.2pt，而中等图标的笔画粗细为1.8pt。 对于视觉重量平衡，常规重量的图标可以提高到1.5pt，中型图标可以提高到2.0pt。

When cutting an icon or creating a gap between two paths in an icon, use a difference of 2.4+2.4=4.8 _or_ 2.4+1.2=3.6 pixels. 3.6px is the minimum that should be used so that the gap is legible enough in the smallest supported resolution plus looks good in bigger resolutions as well. On the other hand, 4.8px is used in exceptional cases where this much gap is required to either be legible (not too close to different neighbouring paths), or it is helping in defining/keeping the form of an icon.

剪切图标或在图标的两个路径之间创建间隙时，请使用2.4 + 2.4 = 4.8或2.4 + 1.2 = 3.6像素的差。 3.6px是应该使用的最小值，以便在支持的最小分辨率下该间隙足够清晰，在较大分辨率下也看起来不错。 另一方面，在一些特殊情况下使用4.8像素，这样的间隙需要清晰可见(不太接近其他相邻路径)，或者有助于定义/保持图标的形式。

An example of the mic off icon is shown here.

此处显示了麦克风关闭图标的示例。

例外情况 (Exceptions)

At times for visual balance, we have to play around with the icon thickness. This is something that has to be done/tweaked based on the screen and the kind of icons placed around. Some examples are covered below.

有时为了保持视觉平衡，我们必须尝试调整图标的厚度。 这是必须根据屏幕和周围放置的图标的类型进行/调整的操作。 下面介绍了一些示例。

REGULAR

定期

For icons like back and add-new, regular icons @1.2px thickness seems too thin, so going with 1.5px thickness makes these icons look visually balanced with other icons.

对于像back和add-new这样的图标，常规图标@ 1.2px的厚度似乎太薄了，因此采用1.5px的厚度会使这些图标在外观上与其他图标保持平衡。

MEDIUM

中

The same goes for medium weight; some icons like ‘forward’ had to be switched to 2px thickness. This helps them get visually aligned with other icons that are @1.8px thickness.

中等重量也是如此； 某些图标(例如“前进”)必须切换为2px的厚度。 这有助于他们在视觉上与其他@ 1.8px厚度的图标对齐。

Beyond this, there are also icons like ‘pause’ that look thin and odd-even @2px thickness. For an icon like this, the stroke thickness had to be switched @3px thickness.

除此之外，还有诸如“暂停”之类的图标，看起来很细，偶数@ 2px厚度。 对于这样的图标，笔划粗细必须在@ 3px粗细之间切换。

BOLD

胆大

For icons like friends or group, when kept @1.8px, then they look too dense and less legible; hence we have to reduce the thickness to 1.2px. It helped in making sure the message communicate stays intact even if some guidelines get broken.

对于像朋友或群组这样的图标，将其保留为@ 1.8px时，它们看起来过于密集且难以辨认； 因此我们必须将厚度减小到1.2px。 即使某些准则被破坏，它也有助于确保消息沟通保持完整。

用法 (Usage)

Naming Convention

命名约定

<父类型> _ <子类型> _ <体重> _ <图标名称> (<parent_type>_<child_type>_<weight>_<icon_name>)

This can be broadly applied to all the image types that we currently have in the resources folder (android) in the following way:

这可以通过以下方式广泛应用于资源文件夹(android)中当前存在的所有图像类型：

• ic_palette/nudge_reg/med/solid_<icon_name>
  ic_palette / nudge_reg / med / solid_ <icon_name>
• img_mood/stickers/texture/bg/empty/tut_<icon_name>
  img_mood / stickers / texture / bg / empty / tut_ <icon_name>
• anim_spinner/interact_<icon_name>
  anim_spinner / interact_ <icon_name>
• emo_<icon_name>
  emo_ <图标名称>

ACTUAL SYNTAX (in use)

实际语法(使用中)

• ic_palette_reg_<icon_name>
  ic_palette_reg_ <图标名称>
• ic_palette_med_<icon_name>
  ic_palette_med_ <图标名称>
• ic_palette_bold_<icon_name>
  ic_palette_bold_ <icon_name>
• ic_nudge_reg_<icon_name>
  ic_nudge_reg_ <图标名称>
• ic_nudge_med_<icon_name>
  ic_nudge_med_ <icon_name>
• ic_nudge_bold_<icon_name>
  ic_nudge_bold_ <icon_name>
• img_mood_<icon_name>
  img_mood_ <icon_name>
• img_mood/stickers/texture/bg/empty/tut_<icon_name>
  img_mood / stickers / texture / bg / empty / tut_ <icon_name>
• img_mood/stickers/texture/bg/empty/tut_<icon_name>
  img_mood / stickers / texture / bg / empty / tut_ <icon_name>
• img_mood/stickers/texture/bg/empty/tut_<icon_name>
  img_mood / stickers / texture / bg / empty / tut_ <icon_name>
• img_mood/stickers/texture/bg/empty/tut_<icon_name>
  img_mood / stickers / texture / bg / empty / tut_ <icon_name>
• anim_spinner_<icon_name>
  anim_spinner_ <icon_name>
• anim_interact_<icon_name>
  anim_interact_ <icon_name>
• emo_<icon_name>
  emo_ <图标名称>

启动器图标 (Launcher Icons)

The geometry for the launcher icon remains the same as we are using in our UI icon. In fact, there will always be a bold version of the same launcher icon available in the icon sheet. This helps us in using the icon, indeed like a responsive one.

启动器图标的几何形状与我们在UI图标中使用的几何形状相同。 实际上，在图标表中始终会存在相同启动器图标的粗体版本。 这有助于我们使用图标，确实像是响应式图标。

启动器渐变 (Launcher Gradient)

The gradient travels at -135 degree angle from the bottom right corner to top left corner. Dark to Bright in such a way that it forms a smooth concave curve without creating an abrupt change in gradient.

梯度从右下角到左上角以-135度角传播。 从暗到亮以这种方式形成平滑的凹曲线，而不会造成梯度的突然变化。

Gradients are usually set with a delightful-bright saturated tone. To reduce the visual weight of the icon, gradients are kept with a monotone feel to them.

渐变通常设置为令人愉悦的明亮饱和色调。 为了减轻图标的视觉重量，应使渐变保持单调感。

细节 (Details)

缩放比例 (Scaling)

Since the launcher icons are of reliable construction, we can simply resize the icons to use them for various UI purposes without the need for adding new assets for every size.

由于启动器图标的结构可靠，我们可以简单地调整图标的大小以将其用于各种UI目的，而无需为每种尺寸添加新资产。

SCALING CHART

标尺表

• 1x = MDPI
  1x = MDPI
• 1.5x = HDPI
  1.5倍= HDPI
• 2x = XHDPI
  2倍= XHDPI
• 3x = XXHDPI
  3倍= XXHDPI

最终结果 (End Result)

The result was a sprawling icon-set across different weights and types. These icons were rolled to the Android and iOS platform in SVG and PDF formats.

结果是出现了一个跨越不同权重和类型的庞大图标集。 这些图标以SVG和PDF格式滚动到Android和iOS平台。

翻译自: https://medium.com/swlh/icon-design-system-for-a-super-app-dd30b921f9