Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you the example analysis of icon application in UI design, I hope you have gained something after reading this article, let's discuss it together!

In UI design, icons do not exist in isolation. We learn icon design not to draw a set of pictures and upload them to the design platform to share or like, but to play a role in real projects. Without understanding the knowledge points that icons apply to projects, the true level of icon design is lost during project design.

A set of icon specifications in an app

Icons are an integral part of an application and can be seen everywhere in the application interface. Also because of the commonness of icons, we often need to apply multiple sets of icons in an application, which deviates from the impression of advocating simplicity.

Many novices think that we only need to design a large and comprehensive set of icons, which can be extracted from the project. But there are many scenarios where using just one icon type can be very bad. For example, let's look at the Taobao Settings page below, which contains more than 6 icons before and after. It's too complicated, yes, but what if we replace all the icons with the same set?

As you can see, the case on the right after replacement, the effect is very unsatisfactory. The interaction rules say: don't add entities if you don't have to, but for the use of icons, this is necessary.

Icons within apps vary in size and can be divided by two attributes: size and style.

1. size of icon

The size is the icon's size specification. Some interfaces have low element weights, so the icon's size is small. Some interfaces have high weight, and vice versa. For example, in Apple Music's playback interface, buttons such as play fast forward, as the most important button on the page, are very large in size, followed by other clickable icons, while the two buttons representing volume are the smallest.

Determining the icon size is one of the things we do with icon design in our projects. But the determination of size is not something we make out of thin air. We have to construct the actual "scene" for analysis first, that is, complete the high-fidelity prototype or interactive prototype of the interface first.

Below is a demo of a prototype that I did myself. After building a page like this, I'll check in the prototype how many icon size I used and in which scenarios they would apply, and then sort them out. If something appears that you don't think is necessary, you can adjust them and combine them into one size.

So, in this case, I've sorted out four icon size:

48pt: category, quick entry big icon

32pt: TabBar icon at bottom

24pt: General tool icons

16pt: small reminder icon

After setting these four specifications, we have a clear design direction in the subsequent design. Again, why do we need to size and then design instead of designing a large set of icons to shrink?

Because icons should meet the requirements of pixel alignment as much as possible, icons that are reduced often have problems such as dislocation, blurring, and loss of detail. And designing icons on large canvases and designing them on small canvases at the beginning, the visual feedback obtained in the process is completely different. When drawing on large canvases first and then reducing to 16pt and 12pt specifications, it often appears too complicated or the strokes are too thick.

2. Style of icons

After confirming the icon size, the following is to confirm the icon style. As with the size, what style icon we want to apply needs to be determined by comparison in the page that already has visual rudiments, and cannot be designed in advance.

In my design process, I usually put icons at the end of the project and then start designing, because the visual style of icons depends on the location and environment, and it is "interface style first, then icon style".

Under normal circumstances, if there are multiple sets of icons in an application, ordinary small and size icons can use a general linear or planar style. In the category, quick entry these decorative, large size types, should use some more radical design style. For example, the following figure is a 58-city client application icon case:

Usually, a style is applied to a category icon. The example above is ideal, with icons of one category corresponding to one size, but in more complex environments, icons of different categories are often included under the same size.

Different states of icons

Icons in a product, in addition to acting as decoration, often can also be used as buttons. Each app has a large number of icons that can be clicked and interacted with, such as the bottom navigation bar, the message icon at the head, the post icon, and so on.

When an icon can be manipulated, we notice that its state changes. From the navigation bar icon example, the general selection state is to change colors, but there are also more and more applications that adopt different design styles in the selected state to improve visibility through richer style representation. For example, Taobao, QQ bottom navigation bar.

Also, some icons contained within the control will change as the control state changes. For example, in the account input box, if the input box is checked, the color of the icon is also changed. If the input box is currently unavailable, the icon will be grayed out accordingly.

Qualified UI designers take into account the various states that icons transform, and detail and categorize them in the process of submission to development. As well, make full use of the component functions in software such as Sketch to improve the efficiency and output results of the project.

Labels and Cuts for Icons

After we finish designing the interface and icons, we submit our design to the developers. Which includes our labels and cut graphs. Apart from other design elements, let's talk about what specifications need to be followed for icon cutting, which and fonts are the most error-prone parts of the process.

The export of application icons was mentioned in the previous chapter, so the following is mainly about the description of tool icons.

1. Boundaries of icons

We'll go back to Chapter 2, Specifications for Tool Icons. When we determine the size of icons, we don't design graphics to fit exactly that size. Instead, we use a grid system to define their size.

Many newcomers will have doubts in this process, so in the process of labeling, what we label is the distance from the graphic to other elements, or the distance from the outline of the icon to other graphics.

In fact, the distance of the icon is calculated according to the outer contour. Although this outline is invisible to the naked eye, it contains internal laws that help us ignore unnecessary small problems.

So, for labels to work, don't be lazy about placing icons on canvas without transparent rectangles.

2. Canvas of icons

There are a lot of collaborative tools that help us label and cut graphs, such as Blue Lake, Zeplin, etc. As long as we upload the design draft, the programmer can get the corresponding cut diagram of the icon by himself.

It works well when cutting certain elements, but exporting icons online is a very unreliable method. We said that there may be multiple specifications of icons in an application, so reasonable icon cutting, to export and organize according to different specifications (as shown below), rather than let programmers download online tools, which is not only difficult to operate, but also difficult to obtain different states between icons.

Therefore, in the process of project design, create canvases of different specifications (Symbols) and arrange them in categories, which is not only conducive to our call for future icons, but also convenient for exporting cut drawings to corresponding folders in batches.

3. Icon naming

When it comes to the export of cut graphs, we also have to mention the specification of icon naming. I have written an article about naming related articles in detail about icon naming methods. You can expand your reading: "Ten thousand words dry goods!" Probably the most comprehensive UI designer file naming convention.

Let's briefly talk about icon naming rules. There are a lot of novice and new UI designers will not understand the emphasis icon must be named in English, and a variety of common English naming vocabulary, I first want to point out that this practice is wrong.

Because when it comes to the entire app icon system, there will be a lot of icons that mean "abstract." For example, in the case above me, there is a startup icon whose Chinese name is "Zhong Er." Even if you are not restricted by the level of English, but you write English does not mean that developers can understand, and a large number of abstract vocabulary accumulation causes naming can not become a valid index condition, because no one can understand, development needs to find an icon when still through thumbnails rather than naming.

Therefore, in the absence of specific internal naming specifications, or programmers do not have special requirements, I suggest using the Chinese naming system, because most programmers in China are accustomed to naming the acquired icons twice.

The naming format can be divided into 3 levels, and the format is roughly: "Module_Name_Status@1x", such as the following example:

Settings_Wallet_Highlight@1x.png

Dynamic_Comment_Default@1x.png

Login_Button_Click@2x.png

Of course, we can adjust freely according to the actual scene, but we should keep in mind that the icon is named for the convenience of our search and retrieval.

The naming of the icon Symbol should be consistent with the naming of the icon, so that it can achieve twice the result with half the effort.

4. Format of icons

In the previous chapter, the export format of startup icons will export different size according to different devices and scenes, and use PNG format. Don't worry, tool icons don't need to export so many specs, although they also face device-specific problems. Here are two types of icon export.

bitmap format

The most commonly used export format is bitmap PNG format, because the display magnification is different, so we want to export 1x, 2x, 3x three magnification specifications of the picture, that is, designed 16pt icon, we need to export 16pt, 32pt, 48pt three size. And in the exported file name suffix superscript@1x,@2x,@3x label.

This specification is common to both iOS and Android, although there are devices above 3x, but those devices only need to call 3x specifications.

Although it will be mentioned later that icons can be exported in vector format, for icons that use gradient, projection, or pseudo-object styles, bitmap format must be used, otherwise the details of the graphic elements cannot be fully recorded.

vector format

Exporting icons in three sizes is cumbersome, and bitmaps tend to take up a lot of space. Therefore, iOS and Android in order to optimize this problem, in the previous system update default support vector format cut image file:

iOS 1x cut using PDF

Android 1x cut using SVG

Of course, if you export in vector format, remember to keep iOS and Android separate when sorting folders, not mixed together.

After reading this article, I believe you have a certain understanding of "Example Analysis of Icon Application in UI Design". If you want to know more about it, please pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.