神州租车:北汽集团将收购不超过21.26%股份
06-18
iPhone 12 Pro Max真的很难买。
前段时间iPhone 12 Pro Max发布的时候,有朋友向我抱怨,为了尽快拿到手机,他想通过线下门店去取,于是刷新就成了日常时不时会到苹果官网查询库存状况。
浏览了很多官方网站后,他也发现了很多有趣的现象。
苹果官网的产品详情页,滑动时往往会有明显的交互效果。
比如iPhone,网页中的文字、图形等都会通过滑动进行交互。
种类。
▲ 注意侧面的网页滚动条。
网页中的手机、文字、甚至图形都仿佛“活了过来”,非常有趣。
我没有抢手机,但是浏览网页(钓鱼)玩得很开心。
越滑,就越有趣。
刚才提到的网页交互方式,在设计领域其实被称为“视差滚动”。
它涉及到相当复杂的网页技术,但确实是最容易让人感知的地方。
用鼠标或手指上下滑动,网页上的内容就会发生相应的变化。
以苹果官网iPhone 12 Pro产品介绍页面为例。
整个网页的背景颜色为黑色。
随着鼠标或手指向下滑动,iPhone和文字会依次慢慢浮现,动画极其流畅。
在介绍iPhone 12 Pro中框的材质时,网页动画就像人工照明一样。

从上到下的明暗变化,文字也浮现出来,以视觉的形式展现了不锈钢材质,同时也使得人们可以更直观地观察手机的颜色和中框。
说到影像系统,iPhone 12 Pro这次的焦点,黑白和色彩的变化通过视觉滚动的方式展现到了极致。
在人像夜拍片段中,随着滑动操作,副本也向上滑动,高清夜拍图像在黑色背景中慢慢出现,仿佛真的拍了一张夜拍。
当然,这张高品质的夜间人像图像也为视觉表现加分不少??。
在AirPods Pro的产品介绍页面中,交互动画被提升到了一个新的水平。
它的产品介绍中其实有一个比较特别的互动。
为了强调 AirPods Pro 的贴合度,苹果特地添加了佩戴 AirPods Pro 的人摇头的动画。
即使如此大的摆动,AirPods Pro也不会掉落,这非常直观地体现了AirPods Pro的佩戴稳定性。
对了,下滑的时候动画会直接完成交互动作。
如果中途暂停并向上滑动,动画可以返回到之前的状态。
它看起来有点“幽灵”,浏览网页变得很有趣。
起床了。
▲ 快速上下滑动,场景变得“鬼魅”。
AirPods Pro介绍页面上还有很多类似的动画。
与传统网页展示内容相比,在视差滚动、互动动画以及相应图片和文案的支持下,增强了图像的美感和层次感,观看体验得到了极大的提升。
在iPhone 12 Pro产品介绍中,随着用户滑动,相应的内容会依次出现。
黑色背景和文字颜色的差异凸显了信息的层次,让用户不自觉地看起来更加清晰。
内容以控制用户的注意力。
▲不同颜色和字体大小的文字,向上滑动可以返回之前的动画状态,让人仔细观察产品的每一个细节。
比如AirPods Pro有多大、人的实际佩戴尺寸、不同侧面的内容等都可以通过视差滚动来体现。
同时,滑动反馈的参与感也能促进用户的沉浸感,提高阅读率。
与变化较少的图片和文字相比,具有明显的优势。
当然,这期间也有导致碎片化时代持续阅读越来越困难的原因,尤其是用户了解抽象复杂的产品功能和技术。
这也是视差滚动及相关交互动画技术的另一个优势。
就像刚才提到的佩戴AirPods Pro的人摇头的互动动画案例,人们很容易理解佩戴稳定性这个极其抽象的功能。
在苹果众多技术、动画、高清图片、文案的支持下,用户会发现越浏览越有趣。
为了让你的观看体验更加愉快,苹果付出了很多努力。
视差滚动只是苹果官网上使用的技术的一小部分。
自从2008年乔布斯回归苹果以来,作为一个非常重视设计的领导者,他自然也会关注当时公司的政策。
品牌展示出口——官网 非常关注苹果官网。
从2010年到现在,苹果官网发生了翻天覆地的变化。
从中我们也可以看到苹果设计的转变和传承,以及它如何让人们更加享受。
对比过去三年苹果官网,我们可以发现很多设计上的变化。
首先是布局。
2009年的苹果官网依然和大多数网页一样,内容排列比较密集。
到了2009年,也就是乔布斯回归后的第二年,页面开始注重布局的密度。
以产品为主、文案为辅的设计风格已经显露出来,两侧的排列大多是相对对称的。
有序也符合人们的阅读习惯。
人是视觉动物,图片永远比文字更有吸引力。
尤其是在展示消费电子产品时,人们普遍先关注图片,后关注文字。
大标题文案与产品高清图片的美感对称,阅读起来更加舒适。
到了2020年,文案与产品的配合已经越来越成熟。
标题文字与产品不仅与页面布局相对应,文案的想象空间也越来越大,越来越符合产品的定位。
。
是的,著名的iPod产品文案《把一千首歌放进你的口袋里》也在这个时候出现了。
时至今日,苹果仍然延续着这一设计规则。
在iPad Pro产品页面上,iPad Pro显示屏的斜角实际上与文案堆叠排列的倾斜度对称,还有一句“为什么你的下一台电脑应该是?” “电脑”甚至受到了广大网友的好评,甚至被引申为很多“表情包”。
▲ 文案和 iPad Pro 都比较年轻,是变化的一年。
随着iOS 7的发布,苹果从拟物化设计转向扁平化设计,并依托iPhone等产品的优势,掀起了扁平化设计的热潮。
,苹果官网也在这波变革中发生了变化。
在2019年苹果官网的首页中,我们可以看到很多按钮变得扁平化。
播放按钮只是一个中间有三角形的圆圈的抽象表示。
现在很多网页仍然采用滚动播放的方式。
用过它。
接下来的变化你可能会很熟悉。
滚动视差和各种交互动画的加入,将网页的观看体验带到了一个新的角度。
这期间我们也可以看到苹果设计的传承,交互动画也被苹果使用了。
在微信上。
查看其过去的推文。
它们大多采用相应的SVG动画技术来引导用户一步步操作和显示内容。
强大的创意和视觉美感能够吸引读者更好地阅读和理解内容。
此外,多设备尺寸适配也是苹果设计和技术变革的一个重点。
如果你留意的话,你会发现,在M1芯片版MacBook Pro的产品介绍页面上,很多元素都被圆角矩形框包围起来。
镶框。
除了圆角矩形是苹果一贯的风格之外,它还可以适应不同屏幕尺寸的产品。
当你在 Mac 上打开这个页面和在 iPhone 上打开它时,虽然主要内容基本保持不变,但它们的排列却发生了一些变化。
▲ 左边是电脑桌面网页,右边是手机网页。
2010年至2017年,苹果对网页设计和技术的探索位居全球领先,将实际观看和交互体验推向最前沿。
一个又一个达到新的高度。
为什么苹果如此重视其网站?与当今大多数公司相比,即使是同为顶级上市公司的微软,也没有像苹果那样在自己的官网上花费那么多精力。
微软中文官网上几乎没有视差滚动等技术。
都存在,更何况是一些普通的公司。
那么苹果为何要花费如此多的精力来建立这个网站呢?首先是中外互联网环境的差异。
现在你可能会发现,很多app的交互和页面设计都极其精致,但PC网站却非常简单。
原因就在于国内移动互联网的兴起。
与苹果这样经营已久,甚至见证了互联网兴起的企业相比,国内不少企业是在移动互联网浪潮中崛起的,比如美团、滴滴,其用户大部分来自于移动互联网。
互联网。
那是智能手机用户。
因此,App、小程序等移动应用往往会受到更多关注,企业在其上投入更多的人力、物力等资源。
第二是品牌。
官方网站是很多用户与公司联系、联系的网上入口。
第一印象非常重要。
如果官方网站非常简单,用户可能不会对该公司甚至其产品产生良好的印象。
更不用说订购产品了。
一个网站也可以说是一家科技公司的门面。
无论是苹果官网的布局,还是页面的黑白交替,甚至是动画效果,都是为了打造“高品质”,让用户信服。
所有网页都是这样完成的。
精致,产品应该相差不大。
作为一家科技公司,苹果的产品、技术、功能都比较先进。
向公众解释抽象而复杂的事物并不容易,尤其是在这样一个碎片化、强调即时满足的时代。
如果内容的美观性和刺激性稍有不合理,用户就会关闭页面。
这就是为什么上面提到的疏密有序、好的文案、视差滚动、交互动画等等都是为了让你快速理解。
AirPods Pro的降噪功能演示就是最好的案例。
降噪原本是一个极其抽象的功能,但通过一个声波缩小的动画很好地解释了。
最后,还有该网站对苹果公司的销售意义。
无论是国内还是国外,苹果官网都是其最重要的线上销售渠道之一,用户流量也不小。
在 Alexa 2018 年全球最受欢迎网站排名中,苹果排名第 54 位。
通过极其流畅、精美的视觉动画,苹果不仅让用户了解产品,还构建了极其精致的在线体验场,让人们在享受美好的同时不放弃。
这和我们之前在《苹果上线的 iPhone 12 配件搭配页面,让双十一「套路节」颜面扫地》中提到的“爱不释手”效果有异曲同工之妙。
即使在网上,你也可以有非常好的产品查看体验,人们在不知不觉中就会下订单。
从2000年至今,苹果在过去的23年里从未停止过对网页设计的探索,如今已经制作出了令一代又一代人着迷的精致流畅的视觉内容。
这可能是苹果最重要的产品。
版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,欢迎发送邮件 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
标签:
相关文章
06-18
06-18
06-17
06-17
06-17
06-06
06-17
06-18
最新文章
Android旗舰之王的过去与未来
智能手表不被开发、AR眼镜被推迟,Meta的产品经历了一波三折
为什么Cybertruck是特斯拉史上最难造的车?
更新鸿蒙3后,文杰允许你在车里做PPT了
新起亚K3试驾体验:追求“性价比”,韩系汽车仍不想放弃
阿维塔15登场!汽车配备了增程动力,理想情况下会迎来新的对手吗?
马斯克宣布创建 ChatGPT 竞争对手! OpenAI的CEO给他泼了冷水, GPT-5可能会发生巨大变化
骁龙无处不在,是平台也是生态