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

在初創(chuàng)公司中創(chuàng)建功能強(qiáng)大且相互連接的圖標(biāo)系統(tǒng)的過(guò)程

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年，我當(dāng)時(shí)在Hike Messenger擔(dān)任產(chǎn)品設(shè)計(jì)師。 由于該應(yīng)用中的社交網(wǎng)絡(luò)薄弱，Hike經(jīng)歷了艱難的時(shí)期，并且在用戶流失的整個(gè)過(guò)程中幸免于難。 但是對(duì)整個(gè)團(tuán)隊(duì)來(lái)說(shuō)，好消息是，該團(tuán)隊(duì)有了一個(gè)新的目標(biāo)，那就是Hike超級(jí)應(yīng)用。

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使用了一種小型捆綁機(jī)制，使團(tuán)隊(duì)可以將1-5 MB的微型應(yīng)用捆綁到本機(jī)iOS和Android應(yīng)用中。 在大型產(chǎn)品公司努力保持較小的應(yīng)用程序尺寸同時(shí)仍發(fā)布創(chuàng)新功能的時(shí)代，這被證明是改變游戲規(guī)則的。 借助微型應(yīng)用程序，我們能夠向用戶發(fā)布整個(gè)應(yīng)用程序級(jí)別的概念，運(yùn)行調(diào)查并使用不同的套件設(shè)計(jì)進(jìn)行快速的A / B測(cè)試。 一陣子感覺很棒，然后集成的事物數(shù)量激增。 面臨的重大問題之一是在眾多微型應(yīng)用程序中跟上設(shè)計(jì)語(yǔ)言的步伐。

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.

我們開始構(gòu)建一個(gè)新的設(shè)計(jì)系統(tǒng)，該系統(tǒng)需要重新設(shè)計(jì)整個(gè)圖標(biāo)設(shè)計(jì)系統(tǒng)。 當(dāng)我開始執(zhí)行此操作時(shí)，只有一組簡(jiǎn)單的50多個(gè)圖標(biāo)，但是經(jīng)過(guò)重新設(shè)計(jì)，我希望圖標(biāo)網(wǎng)格能夠支持300多種可以以各種形狀和大小出現(xiàn)的圖標(biāo)。

開始 (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.

我沒有創(chuàng)建網(wǎng)格結(jié)構(gòu)并從理想的角度考慮所有用例，而是從一開始就設(shè)計(jì)了一些高度開發(fā)的圖標(biāo)。 然后，我向團(tuán)隊(duì)中的多個(gè)設(shè)計(jì)師展示了這些圖標(biāo)，并開始以不同的尺寸繪制相同的圖標(biāo)，以使其適合現(xiàn)有的布局和用例。

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

我在所有圖標(biāo)網(wǎng)格中追求的成功指標(biāo)如下：

• Icons should be legible and clickable even on the most shitty of the devices like Samsung Duos.
  即使在三星Duos等最糟糕的設(shè)備上，圖標(biāo)也應(yīng)清晰易讀。
• Icons should be at 90 degrees angle with no 3D perspective unless it’s an existing 3rd party logo.
  圖標(biāo)應(yīng)成90度角且沒有3D透視，除非它是現(xiàn)有的第三方徽標(biāo)。
• Icons should convey meaning, and hence sticking to widely used general rendition is something that is a must.
  圖標(biāo)應(yīng)傳達(dá)含義，因此必須堅(jiān)持廣泛使用的通用格式。
• Icons should be responsive. The original design of an icon should be made keeping this in mind.
  圖標(biāo)應(yīng)具有響應(yīng)能力。 請(qǐng)記住圖標(biāo)的原始設(shè)計(jì)。
• 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分辨率設(shè)計(jì)圖標(biāo)，然后將SVG縮放到其他分辨率。 這樣，圖標(biāo)集上的線條粗細(xì)就不會(huì)不均勻。

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

通過(guò)這些測(cè)試以及與設(shè)計(jì)師和隨機(jī)人員一起在辦公室中進(jìn)行的內(nèi)部測(cè)試，我想到了以下限制。

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!!

我認(rèn)為上述規(guī)格的基本問題是厚度以十進(jìn)制表示。 這意味著最終設(shè)計(jì)中將有一半像素，并且所有圖標(biāo)都將以小數(shù)點(diǎn)(浮點(diǎn)值)？ 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.

好吧，歸因于廣泛的測(cè)試并試圖在我放入系統(tǒng)的每個(gè)圖標(biāo)中查找易讀性，正常使用1.2px厚度，中型使用1.8px粗體。 反饋中經(jīng)常看到1px的厚度太薄，而2px的厚度太厚。 這是因?yàn)?.2px-normal圖標(biāo)將在整個(gè)系統(tǒng)中使用。 2px-medium圖標(biāo)將在漸變和僅向后的圖片上顯示，而粗體圖標(biāo)則顯示較小的尺寸。 我不斷增加+0.1的厚度，最后，大多數(shù)測(cè)試開始給出積極的反饋。

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

一旦我對(duì)這些標(biāo)準(zhǔn)點(diǎn)了點(diǎn)頭，我就會(huì)繼續(xù)制定相同的準(zhǔn)則。

圖標(biāo)準(zhǔn)則 (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.

圖標(biāo)是任何界面的組成部分。 這些提供了快速的號(hào)召性用語(yǔ)，并且如果巧妙地進(jìn)行雕刻，它們可以幫助將復(fù)雜的屏幕轉(zhuǎn)換為簡(jiǎn)單的屏幕。 圖標(biāo)必須始終是常見的視覺表示-除非功能/動(dòng)作是新功能，而且從未被應(yīng)用程序界所認(rèn)識(shí)，否則我們不應(yīng)嘗試為用戶重新創(chuàng)建學(xué)習(xí)曲線。

格 (Grid)

內(nèi)容區(qū)域=直播區(qū)域+修剪區(qū)域 (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.

圖標(biāo)的內(nèi)容應(yīng)保留在活動(dòng)區(qū)域??內(nèi)。 如果需要額外的視覺重量，內(nèi)容應(yīng)僅延伸到修剪區(qū)域。 請(qǐng)勿將圖標(biāo)的任何部分放置在修剪區(qū)域之外。 所有圖標(biāo)都必須在此網(wǎng)格結(jié)構(gòu)內(nèi)制作。

圖標(biāo)構(gòu)造 (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.

圖標(biāo)由四個(gè)基本形狀的整體，一半和四分之一組成：圓形，正方形，圓角矩形和三角形。 遠(yuǎn)足圖標(biāo)是統(tǒng)一的，并使用這些具有獨(dú)特和簡(jiǎn)單形狀的小調(diào)色板放置在圖標(biāo)網(wǎng)格上。

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.

傾斜這些形狀時(shí)，建議使用45度角。 不規(guī)則形狀是品牌外的； 所需的每種形狀都應(yīng)混合使用上面列出的形狀。

尺碼 (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.

根據(jù)MDPI分辨率的可讀性因子(所有其他相應(yīng)分辨率的1倍)，圖標(biāo)表分為三大類-常規(guī)，中等和粗體/實(shí)心。

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.

這三個(gè)權(quán)重都使用相同的網(wǎng)格系統(tǒng)，但是存在于系統(tǒng)的不同部分中，以確保思想的清晰性不會(huì)受到損害。

重物 (Weights)

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

使用一致的拐角半徑，筆劃終點(diǎn)和筆劃厚度統(tǒng)一了整個(gè)系統(tǒng)圖標(biāo)系列。

—

-

STROKE TERMINAL

行程終端

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

圖標(biāo)的輪廓形式使用1.2pt外部和內(nèi)部筆觸端子。

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像素。 使用清晰的路徑制作拐角，并使用最少的錨點(diǎn)數(shù)以獲得平滑的曲線。

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.

權(quán)重取決于放置圖標(biāo)的位置(大布局還是小布局)。 筆觸粗細(xì)決定了20–24–48兩個(gè)圖標(biāo)網(wǎng)格中每個(gè)圖標(biāo)的圖標(biāo)粗細(xì)。

1. Regular2. Medium3. Bold

1.常規(guī)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.

常規(guī)圖標(biāo)的筆畫粗細(xì)為1.2pt，而中等圖標(biāo)的筆畫粗細(xì)為1.8pt。 對(duì)于視覺重量平衡，常規(guī)重量的圖標(biāo)可以提高到1.5pt，中型圖標(biāo)可以提高到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.

剪切圖標(biāo)或在圖標(biāo)的兩個(gè)路徑之間創(chuàng)建間隙時(shí)，請(qǐng)使用2.4 + 2.4 = 4.8或2.4 + 1.2 = 3.6像素的差。 3.6px是應(yīng)該使用的最小值，以便在支持的最小分辨率下該間隙足夠清晰，在較大分辨率下也看起來(lái)不錯(cuò)。 另一方面，在一些特殊情況下使用4.8像素，這樣的間隙需要清晰可見(不太接近其他相鄰路徑)，或者有助于定義/保持圖標(biāo)的形式。

An example of the mic off icon is shown here.

此處顯示了麥克風(fēng)關(guān)閉圖標(biāo)的示例。

例外情況 (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.

有時(shí)為了保持視覺平衡，我們必須嘗試調(diào)整圖標(biāo)的厚度。 這是必須根據(jù)屏幕和周圍放置的圖標(biāo)的類型進(jìn)行/調(diào)整的操作。 下面介紹了一些示例。

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.

對(duì)于像back和add-new這樣的圖標(biāo)，常規(guī)圖標(biāo)@ 1.2px的厚度似乎太薄了，因此采用1.5px的厚度會(huì)使這些圖標(biāo)在外觀上與其他圖標(biāo)保持平衡。

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.

中等重量也是如此； 某些圖標(biāo)(例如“前進(jìn)”)必須切換為2px的厚度。 這有助于他們?cè)谝曈X上與其他@ 1.8px厚度的圖標(biāo)對(duì)齊。

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.

除此之外，還有諸如“暫停”之類的圖標(biāo)，看起來(lái)很細(xì)，偶數(shù)@ 2px厚度。 對(duì)于這樣的圖標(biāo)，筆劃粗細(xì)必須在@ 3px粗細(xì)之間切換。

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.

對(duì)于像朋友或群組這樣的圖標(biāo)，將其保留為@ 1.8px時(shí)，它們看起來(lái)過(guò)于密集且難以辨認(rèn)； 因此我們必須將厚度減小到1.2px。 即使某些準(zhǔn)則被破壞，它也有助于確保消息溝通保持完整。

用法 (Usage)

Naming Convention

命名約定

<父類型> _ <子類型> _ <體重> _ <圖標(biāo)名稱> (<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:

這可以通過(guò)以下方式廣泛應(yīng)用于資源文件夾(android)中當(dāng)前存在的所有圖像類型：

• 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_ <圖標(biāo)名稱>

ACTUAL SYNTAX (in use)

實(shí)際語(yǔ)法(使用中)

• ic_palette_reg_<icon_name>
  ic_palette_reg_ <圖標(biāo)名稱>
• ic_palette_med_<icon_name>
  ic_palette_med_ <圖標(biāo)名稱>
• ic_palette_bold_<icon_name>
  ic_palette_bold_ <icon_name>
• ic_nudge_reg_<icon_name>
  ic_nudge_reg_ <圖標(biāo)名稱>
• 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_ <圖標(biāo)名稱>

啟動(dòng)器圖標(biāo) (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.

啟動(dòng)器圖標(biāo)的幾何形狀與我們?cè)赨I圖標(biāo)中使用的幾何形狀相同。 實(shí)際上，在圖標(biāo)表中始終會(huì)存在相同啟動(dòng)器圖標(biāo)的粗體版本。 這有助于我們使用圖標(biāo)，確實(shí)像是響應(yīng)式圖標(biāo)。

啟動(dòng)器漸變 (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度角傳播。 從暗到亮以這種方式形成平滑的凹曲線，而不會(huì)造成梯度的突然變化。

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.

漸變通常設(shè)置為令人愉悅的明亮飽和色調(diào)。 為了減輕圖標(biāo)的視覺重量，應(yīng)使?jié)u變保持單調(diào)感。

細(xì)節(jié) (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.

由于啟動(dòng)器圖標(biāo)的結(jié)構(gòu)可靠，我們可以簡(jiǎn)單地調(diào)整圖標(biāo)的大小以將其用于各種UI目的，而無(wú)需為每種尺寸添加新資產(chǎn)。

SCALING CHART

標(biāo)尺表

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

最終結(jié)果 (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.

結(jié)果是出現(xiàn)了一個(gè)跨越不同權(quán)重和類型的龐大圖標(biāo)集。 這些圖標(biāo)以SVG和PDF格式滾動(dòng)到Android和iOS平臺(tái)。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。