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粗體。 反饋中經?？吹?px的厚度太薄，而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.

除此之外，還有諸如“暫?！敝惖膱D標，看起來很細，偶數@ 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

總結

以上是生活随笔為你收集整理的超级应用程序的图标设计系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。