After 23 years of iterative polishing, this is Apple's "heaviest product"
2020-12-08 11:58:03 【Wang MENGNAN】
iPhone 12 Pro Max It's really hard to buy .
Some time ago iPhone 12 Pro Max One of my friends complained to me when it was on sale , In order to get the machine as soon as possible , He wants to pick up goods through offline stores , So refresh Apple's official website from time to time to check the inventory status has become a daily .
There are too many official websites , He also found many interesting phenomena , Apple official website product details page , When sliding, there will be obvious interaction effect , For example, the iPhone 、 written words 、 Graphics and so on will change with sliding interaction .
▲ Pay attention to the scroll bar on the side
Mobile phones in web pages 、 written words 、 Even the graphics are like 「 live 」 Here comes the same thing , Very interesting .
I didn't get my cell phone , To be Swipe page （ loaf on a job ） I had a lot of fun .
The more slippery , The more interesting
The web page interaction just mentioned , In fact, in the field of design, it's called 「 Parallax Scrolling 」, It involves a fairly complex set of web technologies , But it's also the place that people are most likely to perceive , Slide up and down with the mouse or finger , The content of the web page will change accordingly .
On Apple's official website iPhone 12 Pro Take the product introduction page as an example , The background color of the whole page is black , Slide down with the mouse or finger ,iPhone 、 Words will emerge in turn , The animation is extremely smooth .
Introducing iPhone 12 Pro When the middle frame is made of , Web animation is like lighting up artificially , From top to bottom, light and dark change in turn , Words also emerge , The stainless steel material is expressed in a visual form , At the same time, it also allows people to observe the color and middle frame of the mobile phone intuitively .
And this time iPhone 12 Pro Key points of —— In the imaging system , The changes of black and white and color are displayed to the extreme by visual scrolling , In the portrait night shot footage , With the slide operation , The copywriters slide up , HD night shot images slowly appear on a black background , It's like a real night shot .
Of course , This high-quality night portrait also adds a lot of points to the visual performance .
And in the AirPods Pro On the product introduction page of , Interactive animation has been brought to a new level . In fact, there is a special interaction in its product introduction . To emphasize AirPods Pro The fit of , Apple specially added a person to wear AirPods Pro Head flick animation .
Such a big swing ,AirPods Pro It still won't fall , It's very intuitive AirPods Pro Wear stability of .
By the way , When sliding down, the animation will directly complete the interactive action , And if you stop and slide on the way , This animation can return to its previous state , There seems to be some 「 Kichiku 」, Browsing the web has become interesting .
▲ Slide up and down quickly , The scene becomes 「 Kichiku 」 了
Similar animation in AirPods Pro There are a lot of .
Compared with the traditional web page display content , In parallax scrolling 、 Interactive animation and corresponding pictures 、 With the blessing of copywriting , The beauty of the image 、 The hierarchy has been strengthened , The viewing experience has been greatly improved .
stay iPhone 12 Pro In the product introduction of , As users slide , The corresponding content will appear in turn , Through the differences in black back and text color , It highlights the level of information , Will let the user unconsciously look at more obvious content , In order to control the user's attention .
▲ Different colors 、 The size of the words
And sliding up can return to the previous animation state , It allows people to observe the details of the product . Like AirPods Pro How big is the , The actual size of a person to wear , What are the different sides of it , Can be reflected by parallax scrolling .
At the same time, the sense of participation in sliding feedback , It can also help users immerse themselves in it , Improve the completion rate , Compared with the small changes in graphics and text, the advantages are obvious .
Of course , During this period, there are also reasons why it is more and more difficult to keep reading in the era of fragmentation , In particular, we should let users understand the abstract and complex product functions 、 technology .
This is another advantage of parallax scrolling and related interactive animation techniques , It's like just mentioned that people wear AirPods Pro An interactive animation case of head shaking , It's easy to understand the very abstract function of wearing stability .
There's a lot of technology at Apple 、 Animation 、 HD map 、 With the blessing of copywriting , The more you browse, the more interesting it will be .
To make you look better , Apple works hard
Parallax scrolling is just a small part of the technology used on Apple's official website , from 1997 Jobs returns to apple in , As a leader who attaches great importance to design , Naturally, it will also export to the company's brand at that time —— The official website is very concerned about
from 1997 Year to now , Great changes have taken place on Apple's official website , We can also see the transformation and inheritance of Apple's design , And how it makes people look better .
take 1997 year 、1998 year 、2001 Comparison of Apple's official website in the past three years , You can find a lot of design changes , The first is typesetting ,1997 Apple's official website is still the same as most of its websites , Arrange the content relatively densely .
And by the 1998 year , The second year of Steve Jobs's return , Page began to pay attention to the density of typesetting , Product oriented 、 The style of copywriting has emerged , And the arrangement of the two sides is mostly relative , orderly , This is also in line with people's reading habits .
People are visual animals , Pictures are always more attractive than words , Especially when it comes to consumer electronics , People's focus is usually on pictures first , Then there is the text . The beauty of high-definition pictures of symmetrical products with big titles , It also makes reading more comfortable .
here we are 2001 year , The combination of copywriting and products has become more and more mature , Headline style text and products are not just corresponding to page layout , The imagination space of copywriting is also increasing 、 More and more in line with the positioning of the product .
you 're right , The famous sentence iPod Product copy 「 Pocket a thousand songs 」 It was at this time that .
To this day, apple continues this design rule , stay iPad Pro The product page of ,iPad Pro The oblique cutting angle of the display is actually symmetrical with the gradient of the copy arrangement , And that sentence 「 Your next computer , Why computers 」 It is also praised by the majority of users , It even extended a lot of 「 stem 」.
▲ Copywriting and iPad Pro It's called
2013 year , It's a year of change , With iOS 7 Release , Apple has changed from quasi physical design to flat design , And rely on iPhone The advantages of such products , With a trend of flat design , Apple's official website is also changing in this wave of change .
stay 2013 On the home page of Apple's official website , We can see that many buttons are flattening , 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 , Apple 2013 It's been used for years .
We may be familiar with the later changes , Rolling parallax 、 The addition of various interactive animation , Let the webpage viewing experience reach a new angle , In the meantime, we can see the inheritance of Apple's design , Interactive animation has also been used by apple on wechat .
Check out its past tweets , Most of them use the corresponding SVG Animation technology , Guide users step by step 、 Show the content , Strong creativity and visual beauty , Can attract readers to read and understand the content better .
Besides , Multi device size adaptation is also an important part of Apple's design and technology innovation , If you pay attention to it , Will find M1 Chip version MacBook Pro On the product introduction page of , Many of them are enclosed by a rounded rectangle .
In addition to the rounded rectangle is Apple's consistent style , It can also adapt to different screen sizes , stay Mac Open this page on and on iPhone Open up , although The main body Basically, the content hasn't changed , But their alignment has changed .
▲ On the left is the computer desktop web page , On the right is the mobile web page
from 1997 Year to 2020 year , Apple is in Web Design 、 The exploration of Technology , It belongs to the leading group all over the world , Will actually watch and interact with , Push up to a new height after another .
Why is Apple's website so important
Compared to most companies today , Even Microsoft, which is also a top listed company , They didn't spend as much energy on their official website as apple did , On Microsoft's Chinese official website, we can hardly see the existence of parallax scrolling technology , Not to mention some ordinary companies .
that , Why does Apple spend so much energy setting up its website ？
The first is the difference between Chinese and foreign Internet environment , Now you may find a lot of app Interaction 、 The page design is extremely exquisite , but PC The website is very simple , The reason is the prosperity of mobile Internet in China .
Compared with apple, it's a long-term business 、 Even companies that have witnessed the rise of the Internet , Many domestic companies are rising in the wave of mobile Internet , Like the US regiment 、 Didi, etc , Most of their users come from the mobile Internet , That's smart phone users .
So it's like app、 Mobile applications such as applets are often more valued , The manpower that companies spend on them 、 There are more resources such as material resources .
The second is the brand , Official website as a lot of users contact with the company 、 An online portal to connect , First impressions are important , If the official website is very simple , I'm afraid that users will not have a good impression of the company or even its products .
Not to mention ordering products .
Website , It can also be said to be the facade of a technology company , Whether it's the layout of Apple's official website or the alternation of black and white pages 、 Even the animation effect , It's all about building 「 High texture 」, Make users believe in it , The web pages are so exquisite , The product should be no worse .
And apple as a technology company , Its products 、 technology 、 The functions are relatively advanced , It's not easy to explain abstract and complex things to the public , Especially in such a fragmentation 、 The era of instant gratification .
Content Aesthetics 、 The stimulus is a little bit unreasonable , The user will close the page .
This leads to the density and order mentioned above 、 Good copy 、 Parallax Scrolling 、 Interactive animation and so on , It's all for you to understand quickly ,AirPods Pro The demonstration of noise reduction function is the best example , Noise reduction is a very abstract function , But it's a very good way to complete the explanation with a sound wave narrowing animation .
Finally, there is the significance of the website for Apple sales , Whether at home or abroad , Apple's official website is one of its most important online sales channels , Its user traffic is also not small , stay 2019 Year of Alexa Among the most popular websites in the world , Apple came in first 54 position .
The passage is extremely smooth 、 Beautiful visual animation , Apple not only let users understand the product , It also constructs an extremely exquisite online experience field , Let people enjoy the beauty at the same time do not give up , This is the same as we were in 《 Apple Online iPhone 12 Accessories matching page , Let's double eleven 「 Routine Festival 」 disgraced 》 Mentioned 「 Take up , can't let go 」 The effects are similar .
Even online, you can have a great product experience , People unconsciously placed an order .
from 1997 Year to now ,23 Apple's exploration of web design has never stopped , It's the beauty of today 、 Smooth visual content , Let generation after generation fall in love with it . This is probably Apple's biggest product ,
- C++ 数字、string和char*的转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
C + + programming experience (6): using C + + style type conversion
Latest party and government work report ppt - Park ppt
Online ID number extraction birthday tool
Field pointer? Dangling pointer? This article will help you understand!
GVRP of hcna Routing & Switching
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing＆Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+＃1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11：如何处理标定助手品质问题
- HALCON 20.11：标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- Reverse linked list
- JS data type
- Remember the bug encountered in reading and writing a file
- Singleton mode
- 在这个 N 多编程语言争霸的世界，C++ 究竟还有没有未来？
- In this world of N programming languages, is there a future for C + +?
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World