Visual Design Analysis of Apple iPad

I have recently prepared an iPad web app to read this article.

Most users do not conduct in-depth research on experience and design, but measure a product from the perspective of "looking comfortable and easy to use, according to my observations on some web design and digital design, I found that the two are similar. They almost share the development trend of user research and design, such as Apple's famous coverflow, and the focus chart of the website design homepage. Therefore, we often mention that crossover thinking can be used. the visual design and interactive experience of the Internet and traditional digital can be used as inspiration for each other.

Preface

Why is the design of the Blue Magic "shanzhai", while Apple's design is sought after as "art" by countless people "?

Why are many Chinese brands still not attractive when imitating international brands?

I believe that a big reason is that they all lack their own design philosophy. A good design should have its own philosophy. For example, the design concept of the QQ concept edition is "life space sense of time". All the designs should be centered on the concept, all the imitation should be based on the concept, which is the soul of the design. Apple's philosophy is a simple texture; Google is a technical school that looks simple but has a deep understanding of user behavior; Sony Ericsson's mobile UI pursues exquisite fashion; most Korean brands adopt a gentle and loveable style. Good Brands have their own unique styles and deep understanding. No matter how good brands are, the essence remains.

Key words: rounded corner shadow highlights

Rounded corners, shadows, and highlights are widely used in Apple product design and Internet design. Adding these three elements can increase the icon's "texture ".

Take a closer look at the iPad icon. Does it clearly reflect these three design elements? Round Corner processing, crescent-type highlights from top to bottom light, font light gray shadow (to prevent white font on the white background clearly, Apple is very careful ). Not only products, but Apple's logo design is not separated from these three elements.

Let's take a look at Google's Chrome browser. The effects of rounded corners, shadows, and highlights are still there (processing of rounded corners of icons, and the highlighted effects of the icon edge shadows to highlight the three-dimensional effect, move the mouse to a certain icon ).

Keywords: Space sense

A sense of space is not an empty concept, but is embodied everywhere in the design. A typical expression is to break the plane sense and display it in a three-dimensional or three-dimensional way. The design of a sense of space can be cool and gorgeous, and can be used to highlight important content.

Typical use of space sense: Cover presentation of Apple Cover Flow

The space sense is applied to website design. When the official oppo website is revised, the focal point chart is similar to the cover flow effect.

With a sense of space, we can find many breakthroughs in conventional design! That is, imagine every interface as a real object, let's flip it! For example, to break the regular picture display, we can flip the picture and write remarks on the back. We can use multi-point touch to fold the picture together. We can use the three-dimensional form of notepaper to display the memorandum, anywhere on the desktop.

Key words: Translucent

The translucent design element is a personal preference, especially when used for menu and border design, translucent can increase the flexibility, depth and transparency, and have a charm! In addition, translucent menus can be used to design a translucent menu that is both beautiful and does not interfere with the vision when some menus are popped up but do not want to block the background.

Take a closer look at the design of the iPad. In many cases, translucent elements are used, including the "Move the slider to unlock" interface border and the main interface border after the entry.

Translucent elements are also widely used in website design, such as the famous Twitter.

Another website that uses translucent elements.

Keywords: quasi-materialized vitality

The first thing that comes to mind when it comes to quasi-materialization is the way ibooks are presented on the iPad. They are as vivid as real books and have won the praise of many users. If it is ready for use, it can increase intimacy and reduce the cold feeling of digital products, because users are most familiar with things in life. At the same time, the use of anthropomorphic objects can often impress users at first glance, which is commonly known as "amazing ".

Microsoft courier's quasi-materialization has made digital feel different from the cold feeling of machines.

In addition to ibooks, the small plug-ins in Samsung P3, flying butterflies, flowers scattered with petals, cookies, and electric lights adjust the brightness. In fact, they also try to use things in their lives, to increase user favor.

In website design, it is not difficult to find some vitality elements, such as Twitter birds, cute and vivid.

Key words: Dynamic Effect

It is hard to imagine what the design will become if there is no dynamic effect. Dynamic effects will make the design more elegant, fun, and vivid.

Taking a closer look at Apple, I am deeply attracted by the dynamic effect of ITS INTERFACE TRANSITION, Which is gorgeous and natural. For example, when a photo is deleted, the effect of returning the photo to the recycle bin is displayed, and the effect of the book turning page is displayed.

Many gray people are playing plants and botnets. Each type of next plant will swing gently. Isn't it cute? This is also a dynamic effect.

I admit that the reason why I like Sony Ericsson is that its UI meets my appetite. In addition to the exquisite icon design, there are dynamic small elements around the icon, just like the dancing genie.

Many websites also use dynamic effects. For example, the menu feedback when you move the mouse up is not only dynamic, but also gives you operation confidence.

Keywords: quasi-thing sound effect

Here, we need to mention the Plants vs. botnets. By watching this game carefully, we will find that it is also shining with wisdom, there are many things worth learning from the vivid motion of visual design, the design of each plant and zombie role, the interlocking of the plot layout, and even the combination of sound effects.

Plants and botnets use a large number of sound effects of anthropomorphic things. When plants are planted, the sound of friction with the grass, the noise of bullets hitting the botnets, the temporary terror sound effects of the botnets, and the grief of the brain when they are eaten. The sound effects of anthropomorphic Objects make the game more vivid and shall not be pale or dull.

I am very excited to observe the friction of the paper when I read the iPad, the friction of the paper when I read the book, and the friction of the paper when I read the newspaper. I think this brand is dedicated to making products.

The use of sound effects gives users a more immersive experience, especially simulating real sound effects.

These are not all observations over the past few days. There are still many things worth learning about iPad design, such as clever use of tips and hints, and considerate Design of leather covers. I believe that iPad, as a supplement to computers, is a very successful product (it is impossible for tablets to completely replace computers ). At least, Apple has opened up new ideas that conform to human habits in the bottleneck of the development of traditional digital products. It is worth learning from many Chinese brands.