Design average law: Let the Web page in all kinds of terminals "playing a wonderful movement"!

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Technology is progressing and web design skills are progressing. New technology poses new challenges, so we need new solutions. Sometimes, we have no experience with new uncharted territory, and we can only build solutions based on our intuition. And sometimes the problems we face in new areas have a shadow of the past, and we can find the answers from history and other people's experiences.

Compared with the long and glorious history of other designs, the history of Web page design is limited, so the experience given is relatively limited, and we have to draw on this limited history to solve almost infinite problems. Although graphic design and visual communication art experience we can also learn. But the network is completely different, we should not be bound, because the essence of the network is free. If we can analyze the cause and effect of problems, analysis of the composition of the problem, then the question is much better solved, everything in the world has a certain law, rule-based, we can learn from all, to get inspiration, so as to solve the problem. Even in the unrelated fields of music and psychology, we can find the answer to the problem. Even the movement of Bach, which has a hidden plan to meet the challenge.

This article we will carry on a history of passing, let that time great artist Bach to solve the problem in Web design-web design, how to adapt to the compatibility of different devices.

Bach and his 12 average law

In the 1722, Bach collected and organized his own keyboard album, which he intended to teach for young musicians. This album contains 48 tunes-12 tones from C to B, 12 tones, each of which includes major and minor. The mode sum is 24, and each of the tunes is written with Prelude and Fugue, totaling 48 pieces. Now it has become the main norm of Western music, which is one of the most important works in the history of Western music. Bach named it the law of averages.

You know, the piano in the Bach era is an ancient piano, unlike a modern piano, and the keyboard now looks unconventional. The ancient piano pronunciation principle is: through the feather tube dials the string to toggle the metal chord pronunciation, and after hitting the string immediately from the string's installment, therefore cannot play continuously, can only play one key at a time. In such a backward era, it is very difficult to tune the 12 major. Because in the era of Bach, the use of the adjustment of the law is a pure law, which is not conducive to the transfer.

It is difficult to change the laws of physics, but the angle of observation of humans is very easy to change. Problem: Can't play harmoniously. Reason: 1. Piano physics factor. 2. The play cannot be adjusted. Since it is difficult to remake the piano in physics, Bach changed his perspective, and he redefined the problem, focusing on the solution of the problem. Bach divided the 8-degree interval by an average of 12 chromatic. In this way, the problem can be solved. This eclectic, systemic solution is called the melody.

The beginning of the first prelude of Bach's 12 average law (image from: Wikipedia)

This musical system, known as Bach, which can be used to solve problems, is called the 12 average law, and there are some differences between the "divide-and-rule" of Western music today, but their goal is the same: make each key slightly different (or slightly flawed). , which makes it possible to use the whole keyboard properly. This is the pragmatism of music.

So what does this have to do with the interface design?

What are the most exciting developments in web design in recent years? is the support of web design for multiple devices browsing. is no longer the kind of trick that supports multiple browser browsing, but it supports different device browsing: Different screen sizes, different compatibility, different usage scenarios, different interfaces.

Although responsive design sites and device-specific sites can reshape the design to meet the needs of users on different devices. But this is not a panacea, and sometimes the problem still looms, and we still have to take the most appropriate decision-then we can use the mean law as a metaphor to help us solve the design problem.

It is also very simple to apply this concept to the interface design: In order to provide a high quality user experience to as many devices as possible, you have to make sacrifices, and individual interfaces may be "slightly flawed." A small compromise can make the design more versatile and adaptable.

Touch First Design

This eclectic design thinking can be embodied in the touch interface, now it is rooted in the desktop web design.

In the touch interface, the finger as a fixed-point device, it is much larger than the mouse pointer, which requires a larger touch object. Interaction elements also need to be larger to ensure availability. For aesthetic reasons, the corresponding need to increase the internal and outer margins. Because larger interaction elements require larger margins to maintain a sense of visual balance.

Gmail in the new design using a lot of white space, increased the button's inner margin, very suitable for finger operation, although this is the desktop version of the design.

According to previous thinking, the touch interface and desktop interface are distinct, but the advent of the ipad and the popularity of the two lines blurred, the ipad for the two "matchmaking." ipad touch design affects desktop interface design. Take a look at some of the most recent desktop interface design works, such as Gmail,twitter, and some CSS galleries, and you can see that the design on the page is starting to look a little different than before. It seems that the element looks more ... Plump. More white space, more inner margin of the button, in general, is the element is bigger. Of course, the growing desktop screen size is also one of the reasons for this phenomenon.

This design, for mouse operation, may be the element arrangement is not very close, but gives the thumb a sufficient operating space to prevent the touch of misoperation. Allow a bit of imperfection to provide a more pervasive user experience. Wait, that sounds so familiar? Yes, that's the average rule in interface design!

We should note that if the interface is designed to fit the touch of the finger, the design is generally better suited to mouse operations on the desktop. Easy to touch buttons are often easier to tap. The balance comes from chaos, and perfection comes from a few flaws that, by this design, enhance the experience of the desktop scene while satisfying the touch-interactive experience.

Microsoft's Metro design language is based on touch and achieves good interactivity.

Universal design based on response design

Although much of the discussion about response design is focused on the technical level and the response concept, the "responsiveness" indicator should not be our goal, but a condition that we need to meet the needs of our users: just the tools that are needed to deliver different content; It's just a technique we use to compress the size of an image; it's just a way for us to reasonably layout and better present the information to fit the small screen.

The core goal of responsive design is to provide a universal experience for different devices.

Mastering the process of response design is a universal design training, mastering the response, we have a deeper understanding of the "average law" design. Boston Globe's website is an excellent example of this theory.

The Boston Globe is an excellent case for responsive design and is highly adaptable.

The responsive design strategy simplifies the design, one designed to meet the reading needs of the multiple devices, the Boston Globe website is great, and users can get a comfortable reading experience on any device (even the Newton Antique computer of apple). This is not just a front-end technique. Responsive design with media queries and JavaScript clever use, so that the design of flexible flexibility, improve the design adaptability.

This is an adjustable, balanced design. Although minimalist design is extremely style, but I once thought that it can only be achieved on the desktop, and the mobile end of the interface design, mostly too much emphasis on decoration, look flashy. Porting the design style on the desktop to multiple platforms to pursue a consistent experience was a daunting project, but the response design turned out to be a challenge. Designers do a little bit of trade-off, design adjustments, a design can adapt to a variety of applications-you see, designers will play 12 average law.

Mobile Priority Design

Most of the previous cases were related to graphic design, but the idea of an average law could be used by designers for product design, user experience design, and information architecture--covering almost every area of the design. Let's look at the embodiment of product design and the design concept of mobile supremacy.

If you believe in "move first" and use it as your own design concept, congratulations, your idea coincides with the idea of an average law. As long as your design flows around the mobile side and designed to meet the harsh conditions of the mobile application scenario, your design will have a simple, practical aesthetic, because it is very concise and contains only the most basic elements of the product.

As Luke Wroblewski wrote:

When a design team is designed to move first, the design results will be very much in line with the user's mission requirements and expectations. This design does not go astray, but goes straight to the topic; This design does not have the same decorative elements as the interface design on the desktop. This is a good thing, both from a user experience perspective and from a business perspective.

When this design spreads from the mobile end to each platform, it completes the multi platform and multi device coverage of the excellent experience. This is the 12-average law of design. Twitter's redesign recently gave a good description of the design strategy.

New Twitter minimalist design, multi-device consistency experience.

One of the goals of Twitter's redesign is to build a consistent experience of computers, mobile phones, and multiple platforms. This is a challenge for interface design. So is there a short cut? There is a strategy for mobile priority design that can help us achieve our goals quickly.

One of the interesting things I've found on Twitter's redesign is that the mobile-side experience design covers (or impacts) on various platforms. For example, in addition to the tweet button, all of the user's actions are expanded by four tabs: Home, Connect, Discover, Me. Why? Because the design is ideal for small screens like mobile phones. The four elements of the tab bar enable most of the action.

The desktop page, on this basis, added a richer feature, but still have the mobile version of the kind of simplified style traces. Although the desktop version of the interface is very large, the elements are very many, but for the mobile end of the user experience, the design is very convergent, designers know how to balance to ensure the universality of the experience between the devices.

Carefully designed "wolf tone"

Although the average law is good, the wolf tone appears in some modes, but to be sure, the wolf tone is not caused by the average law. What is a wolf tone? The Wolf sound is a kind of shrill wheeze caused by the natural resonance of the musical instrument, which is the inevitable result of the musical instrument design. Thus, the musician gave the sound a very vivid name: they called it "the Wolf tone".

In the interface design, when we migrate some interaction elements or visual elements to other platforms, some problems seem unavoidable. For example, the desktop version of the Web page design must contain links, cursor operation is not very laborious, then transplanted to the phone, you will find that the link is very small, very inconvenient touch. or the desktop version of the font size properties of the transplanted to the mobile end, the user is very difficult to read. Or, hover effect for touch device. These are the wolf tones in the design of the interface.

The link to this article is only for mouse action. The usability of this page is reduced when a user browses using a mobile touch device.

The New York Magazine's Pull-down navigation is practical and well designed-but only for mouse operations.

Conclusion and practical suggestions

Once again, the response design and move-first strategy are wise choices that can help us solve these problems. If we can Yong Yi, and why bother a platform for the design of a platform? Don't forget, the type of equipment will be more and more, design also pay attention to method.

Although we now have the responsive design of this "tailored" approach, but still need to learn to think, especially when the design needs to cross different sets, different platforms, we need to learn from the ancients average law of thought, in the conceptual thinking of universal, accessible design how to achieve.

In addition, we should note that although the response design can achieve the consistency of the multi-platform experience. Users do not necessarily have consistent expectations, that is, it is possible that users will not use a desktop version of the experience as a mobile version of the expectations. Sometimes the connections between platforms can be very blurry. As to how to design, continue to use the response design, or according to the characteristics of the device to create a very different experience?

A few tips to keep in mind:

• Response-Type thinking

Even if your design style does not fully follow the response design, but the design of the concept of "responsive" awareness, because the availability of good, universal high design to make our common pursuit.

• To have the idea of touch first

If the size of a button is suitable for finger operation, then this button is also suitable for cursor operation. And vice versa? The button size for the cursor operation is often not suitable for finger operation. The touch-first design idea ensures that your Web pages or applications adapt to different scenarios.

• To have a universal mind

Old saying good, "early test, often test." "Test" here can be replaced by "thinking", if there is demand, so early to plan, think about the problem, your design in the end how to achieve the basic consistent function on different devices.

• Have the idea of moving first

Mobile-first design strategies can help you think: What is the most basic for users? What is the most important? As long as the focus of the design on the most basic features, then it will be easy to create a consistency experience.

• Be cautious

The interaction characteristics of different interfaces are different. Hover state is an example. You can not use the mouse to achieve touch gesture operation. Be careful with these restrictions and constraints.

End

Bach had always believed that every key on the piano could be played randomly or used to compose music. He proved it through his own wonderful music, and used the method to subdue the rules.

Bach's average law allows composers and musicians to beat their fingers on the piano as they wish.

Each of our designers wants to build a great user experience on Web pages and apps, so that the design goes beyond the media and shows the same stunning on different devices and different scenarios. Each of our designs is designed to make our design more usable and accessible. This is our responsibility to the user.

How would you design it?

Author: Rob Flaherty

Excellent network translation: @MartinRGB