Apple 的设计哲学·网页篇

Apple致力于让每件产品都赏心悦目，与其说官方是产品展示系统，倒不如说它是苹果产品分支的再现。

我相信，从Apple.com找设计灵感是每一位设计师都做过的事。那它究竟有何魅力？跟我来一探讨竟吧。

一、沉浸与交互式体验

每当有新产品发布时，我们就会被它的Landingpage所吸引。不管是AirPodsPro也好，和前段时间发布的iPadPro也一样。

这背后是Apple基于webGL技术，创造的一种沉浸与交互式产品体验。

1、连续性

我们在产品介绍页可以见到，苹果使用了长期的滚动scroll来表现连续性。

一方面，滚动作为大多数Web用户最自然的操作，学习成本极低。

另一方面，在冗长的页面下，滚动能让产品特点保持更自然的转场衔接。

iPadPro的连续性

2、趣味性

此外，采用了长期的动画式转换（animatedtransition），即操作时展现的动态效果，以此来提高趣味性。

伴随着丰富的、若隐显现的章节文案，就像小说的独白一样，娓娓道来。

通过滚动的方法提高交互性，这是明智之举。试想一下，如果只放置已渲染的演示视频，那么用户的操作会得到限制，只能在视频中前行或后退，毫无乐趣可言。

AirPods的趣味性二、言之有序

1、秩序感

说到言之有序，我们看iPad的页面介绍。四款产品，分别是：iPadPro、iPadAir、iPad、iPadmini。

拍摄视角的秩序感，可谓妙不可言。

iPad的秩序感

如此一来，即变得有序，也不会造成视觉疲劳。

2、设计语言

其次，官网与iOS保持协作的设计语言，给用户展现了一致的感官感受。

从iOS11开始，苹果就采用了LargeTitle大标题的图标样式。字重也从Regular+Light的组合，转向的Medium+Bold，以此提高信息传播中的甄别力。

HomePod

此外，高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的简约。我们可以很清晰的看见Web设计的同步转变。

三、层次

1、视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和时尚的观念。当然，它不是这种附庸的简洁及外形的光鲜，而是将复杂难懂的技术以简单的方式传达给用户。

MacPro视差滚动

在信息层次方面，Apple的编排设计由浅入深，犹如抽丝剥茧。很好的借助了视差滚动，传达图片与文字之间「层」的概念。这种深度感可以降低客户的理解和乐趣。

2、视觉张力

虽然极其，样式上充满视觉张力。或扩张、或收缩、或吸引、或排斥之感到，呈现刺激与震撼。举两个实例：

A13芯片的扩张力

扩张力：整个场景以A13芯片为视觉中心点，元素和发力围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就发生了，让人觉得巍峨壮观。

Pro级摄像头的排斥力

排斥力：通过元素的大小对比，可以产生一定韧性的视觉排斥力。Pro级摄像头辅以大特写，传达空间观念。视觉上被其构图、美感触动。

四、高级感

再看看苹果的高级感是如何来的。

1、视觉降噪

我们都清楚，高饱和度的颜色，会妨碍人的心情波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。

iMacPro高级感

回过头来看苹果官方的大部分页面，除了产品界面色调和按键蓝之外，其他的文字、背景、控件一律采取黑白条纹系，以此塑造高级感。

或者是iPhone11Pro新出的暗夜绿，也是高级灰中加了一点点绿而已。

换言之，减少使用材质的总量，降低色彩的饱和度都能减少色彩对人的心态，起到改善产品高级感的疗效。

iPad留白

除此此外，恰当的留白可以非常突显产品内容，让重要的信息更精确的贯彻。并且能打造出广阔的空间感，让场景得到延伸，呈现一种意境美。

然而我们做设计时必须多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的个性。

这又印证了现代主义建筑巨匠密斯·凡德罗的那句话：LessIsMore。

2、配图

其实，只有留白是不够的。既然是做宣传，那么一份高分辨率、精致的配图就变得尤为重要。

苹果官方大个别的产品都是运用实拍+前期修图，而非渲染图。目的就是为了体现真实产品的细腻、以及颜色光影效果，这一点能看见苹果针对质量的极致追求。

DesignedbyAppleinCalifornia

虽然那么，苹果产品圣经《DesignedbyAppleinCalifornia》，以及壁纸同样是由摄影师拍摄完成。有兴趣的朋友可以看下边这个幕后制作视频，相当硬核。

苹果壁纸制作幕后

3、苹果式文案

做过英文Web的设计师都明白，英文通常比中文更好设计，相同的布局英文出来的效果也更漂亮。

这不是崇洋媚外，心理学有个词叫做「母语羞涩」。简单来说就是，中文对于我们来说，太常见了会让人造成一种廉价感（实际上是羞涩感）的心理体验。

老外也一样，你可以看见中国企业：苹果、麦当劳、星巴克都是使用图形Logo，而中国企业不用母语，而是用英语，比如SONY、TOYOTA、Canon。

你的下一台手机，何必是电脑。

回到苹果官方，我们发现一个别文案是中文产品名称，这个不会觉得羞涩。

那中文部分如何办呢？非常有意思的是，Apple的本土化队伍用了完全不对仗但平仄、奇怪的对偶、双关、重复等词句手法。虽然语感很差，但基本上能知道字面意思。

虽然这种做的目的就是为了成就一种陌生感、一种奇特的语言简约，来凸品牌个性。举几个反例：

4、仪式感

最终一点。生活要有仪式感，苹果官方也有仪式感。

国际妇女节专题

在一些特殊的日子里，例如三八节当天，友商选择打广告促销。而小米推出了国际妇女节专题，致敬女性的伟大，这一做法颇有人文情怀。

只是话又说出来，感动归感动，还是参加友商的打折活动香。