Good designers must know what good UI design principles are

Tiah, based on the excellent UI design principles summed up by Joshua Porter, has been collated and added to the illustrations for cool friends to understand.

Clear interface is the most important

Clear interface is the first step in UI design, in order to let users like the UI you design, first of all must let the user recognize it, know how to use it. Let users anticipate what happens when they use it, and easily interact with it.

▲ the correct demonstration | The interface does not have any operation hint, the user understands by sliding the screen to see more cards, also know that the card is a fan-shaped trajectory.

Fully maintain the user's attention

In reading, there are always things that distract us. Therefore, in the design of the interface, it is crucial to attract the attention of the user, do not make the interface around the design of a mess.

▲ Correct demonstration | Clean and concise interface can make users more immersed in the world of reading.

Let the interface in the user's control

Humans tend to be comfortable with the ability to control themselves and the environment around them, and the design that does not take into account the user's feelings can often leave this feeling of comfort disappearing. To ensure that the interface in the user's control, so that users feel the initiative.

▲ Error Demonstration | Users don't know how to view a lot of cards, except to view the details of the first card, other cards are out of the control of the user.

It feels best to operate directly.

When you can manipulate objects directly, the user feels the best. In the design of the interface, our added icons are often not required, such as our excessive use of buttons, options and other cumbersome things just to fill the interface, these are the superfluous.

▲ Correct Demonstration | The function of the icon is to give the user a quick guide with the graphical visual image, if just decorate, it is better not to.

Each screen provides only one action topic

Each of the images we design should have a single theme, which not only allows users to use its real value, but also makes it easy to use and more easily used. If a screen supports two or more than two themes, it immediately makes the entire interface look cluttered.

▲ Error Model | This interface is to allow users to enter the login, but the registration is placed in the same important position as the login, interference with user operations, will lead to operational errors. It is a good practice to place the registration below the right or under the login button.

Interface Transition Nature

Interface interactions are related, so take a serious look at what the next interaction is, and implement it by design. When users have completed the steps, do not let them be overwhelmed, give them a natural way to go on, to achieve the goal.

▲ Correct Demonstration | Interface interaction is very clear, click Down to expand, again click up to close.

Unfading

If it looks like a button, it should have the function of a button. Designers should not be smart about basic interaction issues and be creative in higher-level issues.

▲ Error Demonstration | The interface is very beautiful, but the login is weakened, and the expression form is similar to the input hint text, the user is not easy to detect.

Treat consistency differently

If screen elements are functionally different, they should look different. Conversely, if the function is the same or similar, then they should look the same.

▲ Correct model | The elements are neat and unified with clear functions.

A strong sense of visual hierarchy

A strong sense of visual hierarchy is achieved through a clear order of navigation provided by visual elements on the interface, that is, users can browse the same elements in the same order each time. The weakening of the visual hierarchy does not give users a clue as to how to navigate, and users will feel confused and confused. When everything is in bold, there is no primary or secondary point.

▲ Correct Model | Interface to the user's reading habits to pull the hierarchy, from left to right, from top to bottom, the elements of non-interference.

Proper organization UI to reduce cognitive difficulty

As John Maeda in his book, the proper organization of screen elements can make a page appear concise, which helps users understand your interface more easily and faster.

▲ the correct demonstration | The fragmented elements are grouped together and displayed in the common items of life, and users are more likely to understand them.

Color is not the determining factor

The color of the object changes with the light, the color is a change of nature, should not play a decisive role in the interface. It can be used for reminders, but should not be the only distinguishing element.

▲ Correct demonstration | Through bright colors to remind users of the content, but Tiah do not agree with the color can not be the only point of view, there are many weather, chronicle, clock type app minimalist design, often using color to distinguish also very praise.

Progressive Show

Display only the necessary content on each screen, if the user is making a choice, show them enough information, and then display the details on their respective pages to avoid excessive display of all the details in an interface.

▲ Correct Demonstration | Users simply want to play music, so the list page needs only the current playback status, the singer, the album name, and the song name, without much information.

0 interface of the state

The first access interface is the most important, but often overlooked by designers. In order to help the user adapt, should provide the direction and boot of the boot.

▲ Correct demonstration | 0 The state result itself is extremely bad to the user experience, needs the emotion or the guidance design to reduce the user anxious mood.

Excellent design is invisible.

Excellent design is no trace, if the design is successful, then users can only focus on their own purposes, rather than interface, not dependent on the interface.

▲ Correct demonstration | To do this is very difficult, Tiah think Yo did.

The interface is used by people

Only when the user uses the interface you have designed, is it successful. If a dress is beautiful, but not comfortable to wear, then the design is a failure.

▲ Error Demonstration | The visual effect is very good, but the user experience is very bad, the current state and the main interface is too weak, arc track read too tired.