Apple 的设计设计哲学·网页篇

2022-02-10 点击量：

Apple 致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。

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

一、沉浸与交互式体验

每当有新产品发布时，我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段时间发布的  iPad Pro 也一样。

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

1、连续性

我们在产品介绍页可以看到，苹果使用了大量的滚动 scroll 来体现连续性。

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

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

iPad Pro 的连续性

2、趣味性

另外，采用了大量的动画式转换（animated transition），即操作时展示的动态效果，以此来增加趣味性。

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

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

AirPods 的趣味性 二、言之有序

1、秩序感

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

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

iPad 的秩序感

iPad Pro 的拍摄角度接近于正侧面。

iPad Air 是四分之三侧面。

iPad 是正面。

iPad mini 是俯视。

如此一来，即显得有序，也不会导致视觉疲劳。

2、设计语言

其次，官网与 iOS 保持协同的设计语言，给用户呈现了一致的感官体验。

从 iOS 11 开始，苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合，转向的 Medium + Bold ，以此增强信息传播中的识别力。

HomePod

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

三、层次

1、视差

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

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

Mac Pro 视差滚动

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

2、视觉张力

不仅如此，样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉，呈现刺激与震撼。举两个例子：

A13芯片的扩张力

扩张力：整个画面以 A13芯片 为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导，视觉张力就出现了，让人感觉巍峨壮观。

Pro级摄像头的排斥力

排斥力：通过元素的大小对比，可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写，传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的。

1、视觉降噪

我们都知道，高饱和度的色彩，会影响人的情绪波动。相反，低饱和度的配色，对人眼的刺激较弱，会有一种冷静且克制的高级感。

iMac Pro 高级感