Did you learn UI design?

Did you learn UI design?

How do UI designers lead the way?
About the product

As a UI designer, are we still waiting for the requirements and prototypes provided by the product manager or even interactively to start working? Such passive work can never improve yourself, and of course you can only get a salary of a few thousand yuan forever.

We should participate in the planning of products in the early stage of UI design:

1. Understand what requirements are planned for the next version, and what requirements are left in the previous version?

2. What are the goals and objectives of the requirements in the next version?

3. How to dig out the original needs of users?

4. What data do you hope to get in the future, and what kind of analysis do you plan to do on these data, and what kind of results do you get? What is the resulting business value? Can this requirement bring significant business or user experience improvements to our products?

About interaction/usage research

Next , we must not let interaction designers go. When they get the demand for the product, we must not go over with a face, whether it is to ask for advice or slap in the face, Ask him more about his ideas for making requirements, how he analyzes requirements, analyzes business strategies, how to sort out processes, how to design frameworks, and how he analyzes information architecture and layout. At this time, if you are an interaction designer, but when the product puts the demand to you, is it about to be forced? Don't worry, everything is difficult at the beginning. We must look at the essence through the phenomenon, and dig out the original needs of the user is the key. For example: the user sends a signal that he wants to eat. At this time, the product will say that the user is hungry and send it quickly. Go for the bun rice! ! Is the user really hungry, or does the user want to smoke a cigarette and eat some snacks after playing the game? So we need to see what the user really needs?

So how can we do a demand survey to see if users have reported this serious problem? Here are 3 steps:

1. Verify whether this usage scenario exists?

2. Find out again if the user already has other solutions?

3. Finally determine whether our solution is better than existing solutions in the eyes of users?

These three steps are indispensable, and it is not necessary to do if there is one less requirement.

After finding the actual needs (the user actually wants to smoke), we have to prioritize these needs (buying cigarettes, lighting cigarettes, dispersing flavors), here is a model for research and development - the kano model, which is listed separately in this model. There are three attributes: necessary attributes, expected attributes, and attractive attributes; in addition, there are several attributes that are not commonly used: reverse attributes and indifference attributes, which will not be discussed in detail here.

The essential attribute is that this function must be available in this product (buy cigarettes, how can I smoke if you don’t buy cigarettes for me).

The expected attribute is that users want to have this function, if not, user satisfaction will decrease (cigarettes must be lit in order to serve users well).

The attractive attribute is that if this function is done, then the user will be very happy and pleasantly surprised. If not, it will not have much impact (scattering flavor, if you can absorb second-hand smoke in front of the user at this time, it will be a service).

When we count many requirements with the kano model, we will find that our requirements are classified into these three types, then the order in which we make requirements is necessary requirements > expected requirements > attractive requirements. (For details, you can add me QQ or follow the official account below.)

Of course, the above content is not only used by research students, but also by interactive students, because I think the future trend will be UX>UI, saying A more accurate point is that the two merge with each other, or even more characters.

About visual

color :

In order to maintain the overall brand tone of the product, we will use one main color and two or three auxiliary colors, but generally choose two auxiliary colors, choose the same color or adjacent colors, such as the main color The color is blue, then we can choose light blue and dark blue of adjacent colors as secondary colors. Plus 1-2 finishing colors to highlight and remind the user, such as red, orange, yellow and other contrasting colors.

Font:

After research and multiple confirmations, under a double design, the font size that is most conducive to reading and the most comfortable font size for most people is 16px. Then, in the same product, we will use 3 font sizes except for the top navigation, which are 16px for body text, 14px for secondary text, and 12px for prompt text. For 10px text, the editor recommends using it as little as possible. The font color is also usually enough to use 3 colors for this product, dark, dark gray, and light fonts.

Lines:

One is to divide the content, and the second is to guide the flow. For the same content, using horizontal or vertical lines, the user's browsing path will change, so the use of dividing lines in the entire app is also It goes without saying that we can also define 1-2 levels of colors for the dividing line, which can be recognized by the naked eye on the mobile terminal, but be careful not to be too deep or too shallow.

Icons:

Icons can make the whole app more vivid, but sometimes it is a flaw to exist alone. When some abstract field icons cannot be drawn better, we need to combine pictures and texts to describe them. Icons are used in different locations, in different sizes, and even in different styles. For example, the icons in the tab bar at the bottom of WeChat are different in thickness and style from the icons in the top navigation bar. But there are not many styles of icons in one app, as long as they are unified. Generally, icons can be divided into linear and color blocks. Linear icons are lighter. The disadvantage is that the lines will become thicker after being enlarged, and linear icons do not have the clear meaning of color block icons. The color block icon is more intuitive, and it does not affect zooming in and out. It can be used in iconfont, and the icon will become a font, which optimizes the memory of the app to a greater extent. The disadvantage is that it is more complicated when there is a lot of information.

typesetting:

Typography is the most important thing for a page. In the interactive draft, the interaction has roughly distinguished the layout of the information. At this time, we need to "represent" the vision (perhaps the early interaction is done by yourself) . We first integrate the content with a high degree of information correlation, and then arrange it according to the importance of the content, according to the user's visual flow. Of course, this is just a normal design process. There are no absolutes. Another tip is to keep the distance between information elements as equal as possible, unless in order to distinguish two pieces of information, the same distance will make the entire page more beautiful. Of course, when we consider making a page, it is not a good design to display all the information, we emphasize It is the user experience, so the user does not want to see information at a glance. At this time, we need to do some blank design or hierarchical display of information.

Problems encountered in the project:

1. The currently used annotation method uses the sketch plug-in marketch to export annotations with one click. Although it is not very accurate, it has greatly improved work efficiency. The question is, does the development look at the labels? Very interesting question. In fact, as long as the project is tight, they usually don't read the annotations. After the logic is written, they will change the UI. Then in order to avoid major layout adjustments after the page is written, as a visual design, you should define the layout framework and interaction with the front-end in the early stage of development, and use custom or system controls, otherwise, wait for the development to finish writing you and the development. Saying that the effect I want is not like this, but the development said that it can't be changed, and it will take a lot of energy to rewrite it (of course, it may be that the development wants to be lazy), I must say here, in fact, for you and me, UI design You must learn front-end code, otherwise you will give up your position if the development fools you. This is completely against yourself and not responsible for the product.

2. Complete the status of the page as much as possible, because there may be no interaction, or the interactive document prototype may not be so detailed. For example, after you finish a page and find that all fields are filled, the whole page is quite full. At this time, the students who tested said that this field may not be returned in the background, it is empty, and it is empty there. Such a page is less in the east and less in the west. Does one look good?

3. The problem of adaptation. The operation needs to do the activity picture, which is obtained through the background return and is not added by the previous section. At this time, we need to define a scale, and the different models can be scaled proportionally.

4. What should I do if I receive more than 3 requests at the same time? How to arrange?

Do the important parts with less content first, and then do the important parts with more content. The most important thing is that the boss attaches great importance to it, it must be done first!

5. The content that can be iterated by this version must not be put down in the next version, it will be gone if you leave it alone.

6. The new combination of sketch plugin craft+dropbox is used to make app kit, which can be used and edited directly by dragging and dropping