# 迭代打磨 23 年，这才是苹果「最重磅产品」 - 作者：周宇 - 发布时间：2020-12-06 20:00 - 分类：公司 - 原文：https://www.ifanr.com/1383399 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/414005-People-working-with-MacBook-Pro.jpg) > iPhone 12 Pro Max 真的好难买呀。 前段时间 iPhone 12 Pro Max 发售时我一位朋友曾如此向我抱怨道，为了尽快拿到机子，他想通过线下门店取货，所以时不时刷新苹果官网查看库存状态也成了日常。 官网刷多了，也让他发现了不少有趣的现象，苹果官网的产品详情页，滑动时往往会有明显的交互效果，例如网页中的 iPhone 、文字、图形等都会随着滑动交互而产生变化。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/23331.gif) ▲ 注意边上的网页滚动条 网页中的手机、文字、乃至图形就好像「活」过来了一样，十分有趣。 手机没抢到，到是刷网页（摸鱼）玩的不亦乐乎。 ### 越滑，越有趣 刚刚所提到的网页交互方式，其实在设计领域被称为「视差滚动」，其涉及一套相当复杂的网页技术，但确实也是人们最容易感知到地方，随着鼠标或手指上下滑动，网页中的内容会随之变化。 以苹果官网 iPhone 12 Pro 产品介绍页为例，整个网页的背景色是黑色，随着鼠标或是手指向下滑动，iPhone 、文字会慢慢依次浮现，动画极为顺畅。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/0333.gif) 在介绍 iPhone 12 Pro 中框材质时，网页动画就像是人为的打光，从上到下亮暗依次变化，文字也随之浮现，将不锈钢材质用视觉化的形式表现了出来，同时也让人能较为直观的观察到手机的颜色与中框。 而在本次 iPhone 12 Pro 的重点——影像系统时，黑白与彩色的变化更是被视觉滚动展现到了极致，在人像夜拍片段，随着滑动操作，文案也向上滑动，高清夜拍图像在黑色背景缓缓出现，就像是真的完成了一次夜间拍摄一样。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/3333.gif) 当然，这张高质量的夜拍人像图像也为视觉表现加了不少分。 而在 AirPods Pro 的产品介绍页中，交互动画被发挥到了一个新的高度。在它的产品介绍中其实有一个比较特殊的交互。为了强调 AirPods Pro 的贴合性，苹果特别加入了一个人佩戴 AirPods Pro 甩头的动画。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/123123.gif) 如此大幅度的甩动，AirPods Pro 还是不会掉，极为直观的体现了 AirPods Pro 的佩戴稳定性。 顺便说下，下滑时动画会直接完成交互动作，而如果你在途中停顿且上滑时，这一动画还能回到之前的状态，看起来就有一些「鬼畜」，刷网页也变得有趣了起来。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/111111.gif) ▲ 快速上下滑动，场面就变得「鬼畜」了 类似的动画在 AirPods Pro 介绍页中有很多。 相比传统的网页显示内容，在视差滚动、交互动画以及相应图片、文案的加持下，图像的美观度、层次性都获得了加强，观看体验获得了极大的提升。 在 iPhone 12 Pro 的产品介绍中，随着用户的滑动，相应的内容才会依次浮现，通过黑背差异以及文字颜色的差异，凸显了信息的层级，会让用户不自觉地看向更为明显的内容，以达到控制用户注意力的目的。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/WX20201202-171651.png) ▲不同颜色、字号的文字 而且向上滑动还能返回之前的动画状态，可以让人仔细观察产品的各个细节。像是 AirPods Pro 有多大，人的实际佩戴大小，它的不同面都有哪些东西，都可以通过视差滚动体现。 同时滑动反馈的参与感，也能促进用户沉浸其中，提升完读率，相比变化较小的图文优势明显。 当然，这期间也有碎片化时代持续阅读越来越困难的原因，尤其是要让用户理解抽象复杂的产品功能、技术。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/blair-fraser-GfZMQRqt4eo-unsplash.jpg) 这也是视差视差滚动和相关的交互动画技术的另一个优势，就如同刚刚提到人佩戴 AirPods Pro 甩头的交互动画案例，人们能很轻松的了解佩戴稳定性这一极为抽象的功能。 在苹果诸多技术、动画、高清大图、文案的加持下，用户才能越逛越觉得有趣。 ### 为了让你看的更爽，苹果很努力 视差滚动只是苹果官网所使用的技术的一小部分，从 1997 年乔布斯回归苹果开始，他作为一位极为重视设计的领导者，自然也会对当时公司的品牌展示出口——官网十分在意 从 1997 年到现在，苹果官网发生翻天覆地的变化，从中我们也能看到苹果设计的变革和继承，以及它如何让人看得更爽。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/01.png) 将 1997 年、1998 年、2001 年这三年的苹果官网对比，能发现不少设计变革，首先就是排版，1997 年的苹果官网还是和大多数网页一样，相对密集地排列内容。 而到了 1998 年，也就是乔布斯回归的第二年，页面就开始注重排版的疏密程度了，产品为主、文案为辅的设计风格已经显露了出来，而且双方的排列也大多是相对称的，井然有序，这也符合人的阅读习惯。 人都是视觉动物，图片永远是比文字更吸引人的，尤其是在展示消费电子产品时，人们的关注点一般而言都先是图片，而后才是文字。大标题文案对称产品高清图的美感，也让人阅读更为舒适。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/apple-website_2001_ipod-december.png) 到了 2001 年，文案和产品的配合已经越来越趋于成熟了，大标题式文字和产品不仅仅在页面排布上相对应，文案的想象空间也越来越大、越来越符合产品的定位。 没错，那句知名的 iPod 产品文案「将一千首歌装进口袋」也正是在这时出现的。 直至今天苹果依旧在延续这一设计规则，在 iPad Pro 的产品页，iPad Pro 的展示斜切角度其实和文案的层叠排布斜度相对称，而那句「你的下一台电脑，何必是电脑」更是被广大用户所津津称道，甚至还延伸出了许多「梗」。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/3333.jpg) ▲ 文案和 iPad Pro 相对称 2013 年，是一个变革的年份，随着 iOS 7 的发布，苹果从拟物化设计转到了扁平化设计，并依靠 iPhone 等产品的优势，带起了一股扁平化设计大潮，苹果官网也在这一股变革风潮中改变。 在 2013 年的苹果官网首页中，我们可以看到不少按钮都走向了扁平化，播放按钮只是一个圆形中间加上一个三角形的抽象表示，现在不少网页还在用的滚动播放，苹果 2013 年就用上了。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/999.gif) 后来的变化大家可能就比较熟悉了，滚动视差、各种交互动画的加入，让网页的观看体验达到了一个新的角度，这期间也能看到苹果设计的继承，交互动画也被苹果用到了微信上。 去查看它以往的推文，大多都使用了相应 SVG 动画技术，一步一步指引用户操作、展现内容，极强的创意和视觉美感，都能吸引读者更好地阅读和理解内容。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/IMG_4172.jpg) 此外，多设备尺寸适配也是苹果在设计与技术变革上的一个重点，各位留心观察的话，会发现在 M1芯片版 MacBook Pro 的产品介绍页中，有不少内都被一个圆角矩形框所框住了。 除了圆角矩形属于苹果的一贯风格，它也能起到适配不同屏幕大小的产品的作用，在 Mac 上打开这一页面和在 iPhone 上打开，虽然主体内容基本都没变，但它们的排列却发生了变化。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/003.png) ▲ 左为电脑桌面端网页，右为手机移动端网页 从 1997 年到 2020 年，苹果在网页设计、技术这方面的探索，在全球范围都属于领先的那一批，将实际观看和交互体验，推上了一个又一个新高度。 ### 为什么苹果这么重视网站 对比现如今大部分公司，哪怕是同为顶尖上市公司的微软，都没有像苹果这样花费大精力在自家官网上，在微软中文官网上几乎看不到视差滚动这类技术的存在，更别说一些普通的公司了。 那么，为什么苹果要花费如此大精力去设置网站呢？ ![](https://s3.ifanr.com/wp-content/uploads/2020/12/jefferson-santos-9SoCnyQmkzI-unsplash-1.jpg) 首先就是中外互联网环境差异，现在你可能会发现不少 app 的交互、页面设计的极为精致，但 PC 网站却十分简陋，原因正是国内移动互联网的兴盛。 相比苹果这样的经营长久、甚至见证了互联网崛起的公司，国内不少公司都是在移动互联网浪潮中崛起的，像美团、滴滴等都是，它们的用户大多都来自移动互联网，也就是智能手机用户。 所以像 app、小程序等移动端应用往往更受重视，公司在它们身上花费的人力、物力等资源也更多。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/rami-al-zayat-w33-zg-dNL4-unsplash.jpg) 其次就是品牌了，官方网站作为不少用户与公司接触、产生联系的线上入口，第一印象很重要，如果官网十分简陋，用户对这家公司乃至公司旗下产品恐怕印象都不会太好。 更别说下单购买产品了。 网站，也可以说是一家科技公司的门面，无论是苹果官网的排版还是页面黑白之间交替、乃至动画效果等，都是为了打造「高质感」，让用户为之信服，网页都做的如此精致，产品应该也差不到哪里去。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/alexander-tsang-_frvdyMH6S0-unsplash.jpg) 而苹果作为一家科技公司，其产品、技术、功能都相对比较先进，要向大众解读抽象且复杂的它们并不算是一件容易的事，尤其是在这样一个碎片化、强调即时满足的时代。 内容美观度、刺激点稍有一点不合理，用户就会关闭页面。 这才有了上文所提到了疏密有序、好文案、视差滚动、交互动画等等，都是为了让你能快速理解，AirPods Pro 的降噪功能演示就是一个最好的案例，降噪本来是一个极为抽象的功能，但通过一个音波缩小的动画就很好的完成了解释。 ![](https://s3.ifanr.com/wp-content/uploads/2020/12/9991.gif) 最后则是网站对于苹果的销售意义了，无论是国内还是国外，苹果官网都是它最重要的线上销售渠道之一，其用户流量同样不小，在 2019 年的[ Alexa 全球最受欢迎网站排名](https://zh.m.wikipedia.org/zh-hans/%E6%9C%80%E5%8F%97%E6%AC%A2%E8%BF%8E%E7%BD%91%E7%AB%99%E5%88%97%E8%A1%A8)中，苹果就排到了第 54 位。 通过极为顺畅、美观的视觉动画，苹果既让用户了解了产品，也建构了一个极为精美的线上体验场，让人享受美好的同时又不舍放弃，这和我们此前在《[苹果上线的 iPhone 12 配件搭配页面，让双十一「套路节」颜面扫地](https://mp.weixin.qq.com/s/73gy52YJ2jrEZKI3IEZaqQ)》提到的「拿得起，放不下」效应有着异曲同工之妙。 即使在线上也能有极为不错的产品观摩体验，让人不知不觉中就下单了。 从 1997 年到现在，23 年间苹果在网页设计上探索从未停止，才有如今精美、流畅的视觉内容，让一代又一代人为之倾倒。这或许才是苹果最为重磅的产品，