UI design: Touch-first design, responsive design, mobile priority design

Article Description: the UI should follow the three major web design principles.

Touch-first design, responsive design, and mobile priority design are the three principles that the UI designer should follow in order to make the site adapt to a wide range of equipment. In the foreign language "Designing the Well-Tempered Web" elaborated these three principles in detail. CSDN has compiled the text as follows:

With the evolution of technology, the art and techniques of web design are evolving. New technologies create new challenges, and new challenges require new solutions. We usually work in uncharted areas and need to give a new solution.

Given the limited web design history, we have to go beyond the current realm to answer more challenging questions. To this end, we can learn from other unrelated areas of development history, such as music, from which we can help solve the problem of the solution. A short story about Bach in the early 18th century is listed below.

Bach and the "The Well-Tempered Clavier"

In 1972, Bach completed a book "The Well-Tempered Clavier" ("The 12 Average law piano set"), divided into two volumes, each volume has 24 Prelude and Fugue. It has now been hailed as one of the most important works in the history of Western music.

At the time, it was completely impossible to compose the 12 main keys separately. Bach, on the whole, composes all 12 tones. It was his set of "12 average piano pieces" that ultimately proved to people that the "12-average law" could be used to compose music, and that it was a wonderful effect that people had never seen before.

In this process, the solution is to redefine the concept of "blending". By modifying a certain interval, each of the keys deviates slightly from the perfect tone, creating a tuning system that allows people to play the tune music on all the keys. Sacrificing a small amount of individual quality to achieve a more perfect overall effect is called the "average law".

This case is not related to the design of the website, but the purpose is the same: make each key is slightly defective, so that the keyboard overall performance perfect.

What do UI designers need to do?

In recent years, designing for multiple devices has become the most exciting development effort in the field of web design. Previously focused on whether a Web site can function on two different browsers, it now shifts to whether it can function properly on a variety of devices with completely different characteristics, with different screen sizes, different performance, different use environments, and different interfaces.

While responsive design and customized sites for devices can help us create designs for different experiences, there are still many times when we have to make a unified decision. At this point, the concept of "average law" may help.

This concept is used in UI design for a simple process: to design a good experience for a range of different devices, we must allow some interfaces to appear occasionally imperfect. We have to make a small compromise to ensure that our design is well adapted to other environments.

Touch First Design

Web sites with the "Average law" feature have the touch-screen interface in place in the most recent desktop web design.

In the occupied area, the finger is larger than the mouse pointer, so the finger needs a larger touch area. To ensure availability, the interaction elements need to be larger. When the area of the interaction element increases, the other elements need to be increased accordingly to maintain balance. This needs to be set through the margin and padding two properties.

The new Gmail design has a large number of blank areas, the button set an additional padding. Although it is designed for the desktop only, it can also be well compatible with touch devices.

The ipad builds bridges between the touch screen and the different sizes of desktop screens. The ipad's popularity has accelerated the impact of touch screens on desktop interface design. If you look at some of the most recently redesigned products, such as Gmail,twitter, you'll find that web design has become markedly different. They look more "plump". There are more blank areas, the buttons have more padding, and the elements on the top seem to increase a lot. Of course, other factors are also playing a role, such as the steady growth of desktop screen size.

When the mouse provides "too much" space, and for the fingers, space just good, our design even if finished. We allow a slight deviation from the standard of an experience to gain better support for all possible experiences.

It is worth noting that the touch-friendly UI is easier to use for users of the desktop mouse. Easy touch control button, easier to be clicked on.

Microsoft Metro Style design has been influenced by the idea of touch-first

Responsive design to achieve the goal of unified design

While much of the discussion about response design is about responsive design techniques, responsiveness is not the ultimate goal. It is a means of achieving an end. The design is responsive and is designed to achieve some other goals. It is possible to support different content, to serve images transmitted in low bandwidth, and to better display layouts in smaller screens. It is also possible to provide a unified experience on a wide range of different devices.

A train with responsive design can reach the destination of a unified user experience design. Boston Globe website has done a great job in this area.

Boston Globe has brilliantly applied responsive design to large web sites

The responsive design strategy enables a simple design to accommodate any device that the user reads Boston Globe (that is, Apple Newton). This is not just the credit of the front-end engineers. This can also be achieved with the use of media queries and JavaScript two technologies.

Mobile Priority Design

Previous cases focused on picture design, but the concept of "average law" should be applied to product design, user experience, information architecture-almost any other area of design. Let's look at product design and mobile priority design ideas.

Start the design process from a mobile device perspective and build products that meet the limitations of your mobile environment, and you need to focus on the most important elements of your product. As Luke Wroblewski stated:

"When a team moves a priority design, it is ultimately about creating an experience that focuses on the most important tasks that the user wants to accomplish without any mealy or fragmentation of the interface." This is beneficial for both the user experience and the business. "

[1] [2] Next page