关于Apple的网页设计，你应该知道的几件事

致力于让每件产品都赏心悦目，与其说官网是产品展示平台，倒不如说它是苹果产品分支的延续。文章对Apple的网页设计展开了梳理分析，与大家分享。的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。回到苹果官网

Apple 致力于让每一款产品都赏心悦目。 与其说官网是一个产品展示平台，不如说它是苹果产品分支的延续。 寻找设计灵感是每个设计师都做过的事情，那么它的魅力在哪里呢？ 本文对苹果的网页设计进行了分析，分享给大家。

1.沉浸式互动体验

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

这背后是苹果基于webGL技术打造的沉浸式交互产品体验。

1. 连续性

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

一方面，滚动对于大多数Web用户来说是最自然的操作，并且学习成本极低。

另一方面，在较长的页面上，滚动可以让产品功能保持更自然的过渡。

iPad Pro 的连续性

2. 乐趣

另外，还使用了大量的动画过渡（ ），即操作过程中显示的动态效果，以增加趣味性。

配上丰富而若隐若现的章节文案，如同电影的旁白一样进行叙述。

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

娱乐

2. 按顺序说话 1. 秩序感

说到顺序，我们来看一下iPad的页面介绍。 这四款产品分别是：iPad Pro、iPad Air、iPad 和 iPad mini。

拍摄角度的秩序感非常棒。

iPad 的秩序感

这样，就会显得有序，不会造成视觉疲劳。

2、设计语言

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

从iOS 11开始，苹果采用了大标题字体样式。 字重也从+Light的组合变为+Bold的组合，以增强信息传播中的识别度。

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

3. 级别 1. 视差

三是视差带来的层次感。

苹果奉行无装饰、极简主义的包豪斯哲学。 当然，它并不是那种附加的美感和光鲜亮丽的外观，而是以简洁的形式向用户传达复杂、高难度的技术。

Mac Pro 视差滚动

从信息层面来说，苹果的布局设计是由浅入深，就像剥茧一样。 它很好地利用视差滚动来传达图片和文本之间“层次”的概念。 这种深度感可以增加用户的理解和享受。

2.视觉张力

不仅如此，造型充满视觉张力。 膨胀、收缩、吸引或排斥的感觉呈现出兴奋和震惊。 举两个例子：

A13芯片的扩展能力

扩张力：整个画面以A13芯片为视觉中心点，元素和布局围绕这个视觉中心点向外扩张。 利用发散的视觉引导，出现视觉张力，使人感到雄伟、壮观。

专业级相机排斥力

斥力：通过元素的大小比较，可以形成一定强度的视觉斥力。 专业级相机辅以大特写，以传达空间意识。 我被它的构图和美丽所感动。

4、高端感

我们来说说苹果的奢华感是怎么来的？

1.视觉降噪

我们都知道，高饱和度的色彩会影响人们的情绪波动。 相反，低饱和度的配色对人眼的刺激较小，给人一种沉稳内敛的高级感。

iMac Pro 的高级质感

回顾苹果官网的大部分页面，除了产品界面颜色和按钮蓝色外，其他文字、背景、控件都是黑、白、灰，营造出一种高端的感觉。

就连11 Pro新推出的夜绿配色，也只是在高端灰色的基础上加了一点点绿色。

也就是说，减少颜色的使用数量，降低颜色的饱和度，可以减少颜色对人的情感影响，有提高产品高端感的效果。

iPad 空白

此外，适当的留白可以突出产品内容，更准确地传达重要信息。 并能营造广阔的空间感，延伸画面，呈现优美的意境。

因此，我们在设计时应该多做减法，避免视觉元素无意义的堆叠，这样其实可以让你的设计更加高级。

这印证了现代主义建筑师密斯·凡德罗的话：少即是多。

2. 插图

当然，仅仅留下空白是不够的。 既然是为了宣传，一张高分辨率、精美的图片就显得尤为重要。

苹果官网上的产品大部分采用实拍+后期修图的方式，而不是效果图。 目的是体现真实产品的质感和材料的光影效果。 这体现了苹果对品质的极致追求。

由苹果在

不仅如此，苹果产品圣经“by Apple in”和壁纸也由摄影师拍摄。 有兴趣的同学可以看下面的幕后制作视频，相当硬核。

3.苹果式文案

从事过英文网页的设计师都知道，英文往往比中文设计得更好，同样的布局用英文看起来更好。

这并不是崇拜外国人。 心理学上有一个术语叫“母语害羞”。 简单来说，中文对于我们来说太常见了，让人觉得廉价（其实是害羞）。

对于外国人来说也是如此。 你可以看到，美国公司：苹果、麦当劳、星巴克都使用图形标志，而日本公司则不使用母语，而是使用英语网页设计公司，如SONY、佳能、佳能等。

为什么你的下一台电脑应该是电脑？

回到苹果官网，我们看到部分文案是英文产品名称，这不会让你感到害羞。

中文部分呢？ 更有趣的是，苹果的本地化团队使用了押韵、奇怪的排比、双关语和重复等完全不一致的修辞技巧。 虽然我的语感很差网页设计公司，但是字面意思我基本都能听懂。

其实这样做的目的就是为了营造一种陌生感和独特的语言风格来凸显品牌的气质。 举几个例子：

4、仪式感

最后一点。 生活应该有仪式感，苹果官网也有仪式感。

国际妇女节专题

在一些特殊的日子，比如3月8日节日，朋友们会选择做广告和促销。 苹果在国际妇女节推出了特别功能，向女性的伟大致敬。 这种做法是相当人性化的。

不过话又说回来，如果感动的话，还不如参加朋友们的打折活动呢。