Iteratively polished for 23 years, this is Apple’s “biggest product”

iPhone 12 Pro Max is really hard to buy.

When the iPhone 12 Pro Max was released some time ago, a friend of mine complained to me that in order to get the machine as soon as possible, he wanted to pick up the goods through offline stores, so refreshing Apple's official website from time to time to check the inventory status has become routine.

There are many brushes on the official website, and he found many interesting phenomena. The product details page of Apple's official website often has obvious interactive effects when sliding. For example, the iPhone, text, and graphics in the webpage will all be generated with the sliding interaction. Variety.

▲ Pay attention to the scroll bar on the side of the page

The mobile phone, text, and even graphics on the webpage seem to have come alive, which is very interesting.

I didn't get my mobile phone, and it was a great fun to browse the web (fishing).

The slippery, the more interesting

The web page interaction method just mentioned is actually called "parallax scrolling" in the design field. It involves a set of quite complex web technology, but it is indeed the easiest place for people to perceive. As the mouse or finger slides up and down, the web page The content in will change accordingly.

Take the iPhone 12 Pro product introduction page on Apple’s official website as an example. The background color of the entire web page is black. As the mouse or finger slides down, the iPhone and text will slowly appear in sequence, and the animation is extremely smooth.

When introducing the material of the middle frame of the iPhone 12 Pro, the web animation is like artificial lighting, changing from top to bottom in turn, and the text also appears. The stainless steel material is expressed in a visual form, and it also allows People can more intuitively observe the color and middle frame of the mobile phone.

And in the focus of this iPhone 12 Pro-the imaging system, the changes in black and white and color are displayed to the extreme by visual scrolling. In portrait night shots, with the sliding operation, the copy will also slide upwards, and the high-definition night shot images The black background slowly appeared, as if it was a real night shot.

Of course, this high-quality night portrait image also adds a lot of points to the visual performance.

In the AirPods Pro product introduction page, interactive animation has been brought to a new level. In fact, there is a special interaction in its product introduction. In order to emphasize the fit of AirPods Pro, Apple specially added an animation of a person wearing AirPods Pro shaking his head.

With such a large swing, AirPods Pro still won't fall off, which is a very intuitive embodiment of the stability of AirPods Pro wearing.

By the way, the animation will directly complete the interactive action when you slide down, and if you stop and slide up on the way, the animation can return to the previous state, it seems that there are some "ghost animals", and it becomes interesting to browse the web. Up.

▲ Swipe up and down quickly, the scene becomes "ghost"

There are many similar animations on the AirPods Pro introduction page.

Compared with the traditional web page display content, with the support of parallax scrolling, interactive animation, and corresponding pictures and copywriting, the beauty and hierarchy of images have been enhanced, and the viewing experience has been greatly improved.

In the iPhone 12 Pro product introduction, as the user slides, the corresponding content will appear in sequence. The difference in black back and the difference in text color highlight the level of information and make users unconsciously look more obvious Content in order to achieve the purpose of controlling user attention.

▲Text in different colors and font sizes

And swiping up can also return to the previous animation state, allowing people to carefully observe the details of the product. For example, how big the AirPods Pro is, the actual size of a person wearing it, and what is on its different sides can all be reflected by parallax scrolling.

At the same time, the sense of participation of sliding feedback can also promote user immersion and increase the completion rate, which has obvious advantages compared with small changes in graphics and text.

Of course, during this period, there are also reasons why it is more and more difficult to continue reading in the era of fragmentation, especially for users to understand abstract and complex product functions and technologies.

This is also another advantage of parallax parallax scrolling and related interactive animation technology. Just like the interactive animation case of people wearing AirPods Pro shaking their heads, people can easily understand the extremely abstract function of wearing stability.

With the support of Apple's many technologies, animations, high-definition large pictures, and copywriting, users can feel more interesting as they browse.

To make you look better, Apple works hard

Parallax scrolling is only a small part of the technology used by Apple's official website. Since Jobs returned to Apple in 1997, as a leader who paid great attention to design, he would naturally also show exports to the company's brand at the time-the official website was very concerned about

From 1997 to the present, Apple's official website has undergone earth-shaking changes, from which we can also see the changes and inheritance of Apple's design, and how it makes people look better.

Comparing the three years of Apple's official website in 1997, 1998, and 2001, we can find many design changes, first of all, the layout. The Apple official website in 1997 is still relatively densely arranged like most web pages.

By 1998, the second year of Jobs’ return, the page began to pay attention to the denseness of the layout. The product-based design style with copywriting supplemented has been revealed, and the arrangement of the two sides is mostly symmetrical. , Orderly, which is also in line with people’s reading habits.

People are all visual animals, and pictures are always more attractive than words. Especially when displaying consumer electronic products, people generally focus on pictures first, then words. The beauty of the headline copy and the high-definition picture of the symmetrical product makes it more comfortable to read.

By 2001, the cooperation between copywriting and products has become more and more mature. Headline text and products are not only corresponding to the page layout, but the imagination of copywriting is also getting bigger and more suitable for products. Positioning.

That's right, the well-known iPod product copywriting "Put a thousand songs in your pocket" also appeared at this time.

To this day, Apple is still continuing this design rule. On the iPad Pro product page, the bevel angle of the iPad Pro’s display is actually commensurate with the inclination of the stacking arrangement of the copywriting, and the phrase "your next computer, why should it be "Computer" is even more praised by the majority of users, and there are even many "stalks" extended.

▲ Copywriting and iPad Pro are relatively symmetrical

2013 was a year of change. With the release of iOS 7, Apple switched from quasi-materialized design to flat design. Relying on the advantages of iPhone and other products, it brought a wave of flat design. Apple's official website is also here. Change in a wave of change.

On the homepage of Apple’s official website in 2013, we can see that many buttons have become flat. The play button is just an abstract representation of a circle with a triangle in the middle. Now many web pages are still using scrolling playback. Apple 2013 Used it in years.

You may be familiar with the subsequent changes. The addition of scrolling parallax and various interactive animations has brought the viewing experience of the web page to a new angle. During this period, you can also see the inheritance of Apple's design, and the interactive animation has also been used by Apple. On WeChat.

To check its past tweets, most of them use the corresponding SVG animation technology to guide users step by step and display the content. The strong creativity and visual beauty can attract readers to better read and understand the content.

In addition, multi-device size adaptation is also a focus of Apple's design and technological changes. If you pay attention, you will find that many of the M1 chip version MacBook Pro product introduction pages are surrounded by a rounded rectangular frame. Framed.

In addition to the rounded rectangle that belongs to Apple’s consistent style, it can also play a role in adapting to products with different screen sizes. Open this page on a Mac and open it on an iPhone. Although the main content is basically the same, their arrangement It has changed.

▲ The left is the computer desktop web page, the right is the mobile phone web page

From 1997 to 2020, Apple's exploration of web design and technology has been among the leading group in the world, pushing the actual viewing and interactive experience to new heights.

Why does Apple value websites so much

Compared with most companies nowadays, even Microsoft, which is also a top listed company, has not spent so much energy on its official website like Apple, and there is almost no such technology as parallax scrolling on the Microsoft Chinese official website, let alone Talk about some ordinary companies.

So, why does Apple spend so much effort on setting up a website?

The first is the difference between the Chinese and foreign Internet environments. Now you may find that many app interactions and page designs are extremely exquisite, but PC websites are very rudimentary. The reason is the prosperity of the domestic mobile Internet.

Compared with companies like Apple that have been in business for a long time and even witnessed the rise of the Internet, many domestic companies have emerged in the mobile Internet wave, such as Meituan and Didi. Most of their users are from the mobile Internet. It is the smartphone user.

Therefore, mobile applications such as apps and small programs are often more valued, and companies spend more human and material resources on them.

The second is the brand. The official website is an online portal for many users to contact and connect with the company. The first impression is very important. If the official website is very simple, users may not have a good impression of the company or even its products.

Let alone place an order to buy a product.

The website can also be said to be the facade of a technology company. Whether it’s the layout of Apple’s official website, the alternation of black and white pages, and even the animation effects, it’s all about creating a “high quality” that convinces users. This is what the web does. Exquisite, the product should not be much worse.

As a technology company, Apple's products, technologies, and functions are relatively advanced. It is not easy to interpret the abstract and complex ones to the public, especially in this era of fragmentation and emphasis on instant gratification.

If the content is aesthetically pleasing and exciting, the user will close the page.

This is why the denseness and orderly, good copywriting, parallax scrolling, interactive animation, etc. mentioned above are all for you to quickly understand. The noise reduction function demonstration of AirPods Pro is the best case, noise reduction It was originally an extremely abstract function, but it was explained very well through an animation of reduced sound waves.

Finally, the website is of significance to Apple’s sales. Whether at home or abroad, Apple’s official website is one of its most important online sales channels, and its user traffic is also not small. It ranked in the Alexa global most popular website in 2019. In China, Apple ranked 54th.

By extremely smooth, aesthetically pleasing visual animation, Apple not only allow users to understand the product, but also constructed a very fine line of field experience, people enjoy the beautiful at the same time sad to give up, and we had it in the " on Apple's iPhone line 12 The accessory matching page makes the "Affordable, Can't Put Down" effect mentioned in the Double Eleven "Routine Festival" face sweeping .

Even online, there is a very good product viewing experience, and people place an order without knowing it.

From 1997 to the present, Apple has never stopped exploring web design in the 23 years. Only now has the exquisite and smooth visual content available, which has attracted generations of people. This may be Apple’s most important product.

#Welcome to follow Aifaner's official WeChat account: Aifaner (WeChat ID: ifanr), more exciting content will be provided to you as soon as possible.

Ai Faner | Original link · View comments · Sina Weibo