我相信，从 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 高级感

回过头来看苹果官网的大部分页面，除了产品界面色彩 和 按钮蓝 之外，其他的文字、背景、控件一律采用黑白灰色系，以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿，也是高级灰中加了一点点绿而已。

换言之，减少使用颜色的数量，降低色彩的饱和度都能削减色彩对人的情绪，起到提升产品高级感的效果。

iPad 留白

除此之外，恰当的留白可以更加突出产品内容，让重要的信息更准确的传达。并且能营造出广阔的空间感，让画面得到延伸，呈现一种意境美。

所以我们做设计时应当多做减法，避免无意义的视觉元素堆砌，反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话：Less Is More。

2、配图

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

苹果官网大部分的产品都是采用实拍+后期修图，而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果，这一点能看到苹果对于品质的极致追求。

Designed by Apple in California

不仅如此，苹果产品圣经《Designed by Apple in California》，以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频，相当硬核。

苹果壁纸制作幕后

3、苹果式文案

做过英文 Web 的设计师都知道，英文往往比中文更好设计，相同的布局英文出来的效果也更好看。

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

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

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

回到苹果官网，我们看到一部分文案是英文产品名称，这个不会感觉羞涩。

那中文部分怎么办呢？比较有意思的是，Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差，但基本上能明白字面意思。

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

• 重复：比如说 iPad Pro「你的下一台电脑，何必是电脑。」

• 双关：比如说 AppleWatch 的「它会时时关心你的心。」

• 排比：比如说 iMac的「从极速，到神速，任你提速。」

• 押韵：比如说 配件 的「可重复充电，又可圈可点。」

• 对比：比如说  iPad mini 的「身量小，能量大。」

4、仪式感

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

国际妇女节专题

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

不过话又说回来，感动归感动，还是参与友商的打折活动香。

作者公众号：洋爷（ID: yangye365）

设计不仅仅是关于人们看到什么，也包括他们听到什么。声音设计（Sound Design）是一个很容易被忽视但又如此有意义的话题。

据我了解，Apple、Google 和 Facebook 都有专业的 Sound Designer 来制作音效。声音作为一种感官体验，它与视觉、触觉一样，是产品设计中极为重要的一环。

为什么声音设计那么重要呢？

品牌形象 · Mac开机的故事

声音设计是需要贴近品牌，甚至一定程度上要体现品牌。比如，诺基亚的默认铃声，经典的 Hello MOTO，甚至是打开王者荣耀的那声 Timi 以及苹果 Mac 的启动和弦，同样让人印象深刻，很好地传递了品牌形象。

早在 1984 年，Macintosh 就有了开机声，不过早期的几个版本是三全音。直到 1991 年，苹果声音设计师 Jim Reekes 使用他那台价值 7000 美元的 Quadra 700 录制了 C 大调和弦作为开机声，灵感来自甲壳虫乐队的歌曲《生命中的一天》。

△ 历代Mac开机声音

Reekes 说他感觉这个声音「最正」，他想要的就是这种很宽，即便高音也有着很重的低音，有着锋利的起音的声音，能够让用户振奋一下。

1997 年，乔布斯回归苹果之后，提出要让所有的苹果电脑都具备统一的声音，并钦点说我就喜欢 Reekes 以前做的声音，于是没人敢在 Reekes 做的声音上做修改。

但从 2017 年后生产的 Mac 机型都不会发出启动声了。我认为 Mac 的开机声音在可用性方面，确实很一般。如果你在一个安静的课堂，Macbook 的启动声音很可能会给其他同学带来干扰。所以，这时就要考虑此刻的场景是否真的需要声音。

提高可用性 · 马林巴琴

iPhone 第一代经典的铃声「Marimba」就是一个成功的声音设计。一方面它的品牌辨识度特别高，在铃声响起的时候，几乎每个人都知道这是 iPhone。

另一方面，它的可用性非常高。马林巴琴是一种管弦乐器，有着丰富的音调，并且包含了大量的谐波成分。即便是在苛刻嘈杂的环境，人脑也可以快速将其分辨出来。

节省能耗 · 息屏通知

大家都知道，在接电话时，手机屏幕会自动息屏。这是因为距离传感器（ToF）在进行监视，防止脸部误操作而挂断电话。

同样，苹果在息屏通知也有个细节。如果你把手机放在裤兜或者手提包里时，那么接收通知只响会声音，不会点亮屏幕。因为手机在裤兜里的场景下，没人能看到屏幕，自然也就没有亮屏的需求。这时声音的可用性就非常高，同时，可以帮助系统有效的节省能耗。

当然，你也试一下可以用手挡住 iPhone 的刘海位置，如果有消息通知，一样不会亮屏。

什么是好的界面声音设计体验？

愉悦的感官体验 · 邮件

好的 Sounds 会带给你愉悦的音效感官体验。Macbook 里有个自带的邮件软件，当你发送成功的时候，能清晰地听到「嗖」的一声，双声道的音效会从 MacBook 左喇叭贯穿到右喇叭，这个细节太悦耳了。并且在传达认知上，也符合用户预期。

△ MacBook邮件

表达准确且协调 · Apple Pay

在「交互篇」中，我讲到了也就是协调程度。在数字世界想要设计出好的体验，就必须让音效、触感、视觉像现实世界一样保持协调。也就是说 Sound 、UI、震动反馈三者是分不开的。

举个例子，在使用 Apple Pay 付款时，UI Animation 的效果、节奏、时长都会影响到音效和震动。

首先，动画应该给人积极的感觉，就如同交易成功的感觉。然后，清脆的叮当音效不会太庄重，也很明显是确认音效。最后是震动，在大多数情况下，音效和震动这两者不一定要完全契合，但需要保持同样的节奏。

△ Apple Pay支付

但也有例外，科技产品带来了一种现象叫做幽灵震动。如果有几个连续震动，让不同的人去体验，他们不一定都能感觉到第一个震动，仿佛成了幽灵一般。

Apple 的设计师利用这个无法被感知的首次震动，创造出启动效应。

以 watchOS 的通知为例：想要确保用户可以清楚地感知到某个重要的通知，那么在声音响应之前，增加一个幽灵震动来激发皮肤的触感，确保用户有心理准备去迎接后半个提醒。

声音由来 · 短信和日历音效

Apple 设备中那些常听到的声音是怎么来的呢？

因为苹果公司有严格的保密机制，所以 Apple 的设计师都特别低调，很少能看到他们的公开文章和视频。在这里给大家推荐 WWDC 设计类演讲，所以这可能是了解他们设计过程的唯一方式了。

下面是一段苹果声音设计师 Hugo Verweij 在 WWDC 关于《Designing Sound》的分享。Hugo 现场用乐器演示了 iOS 短信通知和日历提醒的声音是怎么制作的，非常精彩，推荐大家去看。

△ 短信通知声音 & 日历提醒声音

相关资源：

如果你对苹果的设计感兴趣，可以访问：
https://developer.apple.com/videos/design
或者在 AppStore 下载 WWDC 官方 App 来观看，所有设计演讲视频都包含中文字幕！

总结

声音设计在产品中扮演着重要的角色，它作为一种人人都能理解的通用语言，可以帮助用户塑造体验，帮助用户更好的理解交互。希望今后能够有更多声音设计融入到产品当中，这样的机会也等着产品设计师去挖掘与探索。

原文地址：洋爷（公众号）

作者：洋爷

通常，硬件的外观仅仅是作为一种体验的容器存在，而软件用户界面（User Interface）的体验，则决定了我们是否喜欢这个设备。下面，就和大家看看 Apple 在界面方面做的努力。

01. 高度统一的设计语言

苹果的设计语言有四个标志性特征：平滑圆角矩形 (Squircle)、阴影 (Shadows)、半透明 (Translucency) 和高斯模糊 (Blurring)，它们几乎贯穿整个系统。从原生应用：相册、App Store 应用商店、音乐都有这些元素，并且高度统一。
 

App Store 十年变化

– 圆角矩形

从 iOS 7 转型扁平化的今天，苹果完成了对「圆角矩形」的终极运用。苹果引入了工业设计中连续曲率概念，应用在圆角图标的轮廓之上。

圆角矩形

但真正意义上的运用，体现在 iPhone X 发布之后。得益于 OLED 柔性屏和 COP 封装，iPhone X 四边等宽的机身达到了最高的设计美学，屏幕的外轮廓也追随机身形态，于是就有了圆角的 Dock。

蜗牛读书 App

在《致匠心，以设计》这本书中有提到蜗牛读书App，在大的弹窗和卡片引入了曲率圆角。虽然这是一个很细节的设计，甚至感知不到。但它就是设计师不断追求的东西。

– 阴影、半透明和高斯模糊

投影可以凸显内容的重要性，半透明和高斯模糊暗示背后有更多的内容，同时可以保持界面轻盈、通透。

Apple Music iOS 13 版本
 

相对于 iOS 12，iOS 13 将半透明的特性更进一步。除了迷你播放器之外，Apple Music 的底部导航菜单也变成半透明+高斯模糊了。

细心观察，微信同样认同这种语言，在顶栏和底栏做了微弱的半透明和模糊。

相册 iOS 13 版本

而系统相册的更新，则延续了 App Store 应用商店的卡片样式。至此，圆角、投影、半透明和高斯模糊，这四个特征在相册界面皆得到了印证。

02. 极致的图标细节

– 语音备忘录

就拿语音备忘录来说，它的音轨图形并不是随意画出来的。而是用录音功能，说出“Apple”这个单词，所呈现的音轨波形。

语音备忘录 & Apple单词的音轨

而且，还有一个小细节是，语音备忘录是唯一支持180°竖屏旋转的自带应用。因为它常见的使用场景是采访，需要将手机底部的麦克风对着受访者，而这时图形界面是反的。所以支持旋转，这是一个基于用户使用场景的细节设计。

– 地图

在苹果地图 App 图标上有一个角标「280」，它代表的是苹果所在的总部位置，一条位于美国加州 280 州际公路附近。

苹果地图 App

另外，新的图标里，右上角露出了 Apple Park ，也就是我们熟知的飞船图形，这和实际的平面地图完全吻合。

苹果新总部位置

– Safari 浏览器

新的 Safari 图标，磁针的角度由原来的45°变成了50°。有一个颇有意思的解释是，地磁的北极在一直在持续向北移动，在过去的150年里偏移超过1000公里。这个说法显然更具有故事性，但事实并非如此。因为磁极向北，那么磁针角度应该越来越小才对，而不是增大。 

Safari 浏览器

实际上，45° 改为 50° 是出于视觉上的修正。左边旧的图标，45°磁针刚覆盖的是短的刻度条，被俩长刻度条相夹，略显拥挤。而新的图标刚好相反，50°磁针相邻是短刻度，视觉上更具空间感和韵律感。

– 时钟

大家都知道时钟 App 的图标时间是和系统时间同步的，秒针也会匀速转动。重点来了，长按时钟 App ，秒针的运动方式由匀速变成滴答滴答机械式转动了。

时钟 App 滴答动画

03. 利用视觉线索

为什么苹果系统上手容易？在现实世界中，有些东西你一看就知道它如何使用，比如门把手、无印良品的CD机。

这里有个心理学的概念：示能 （Affordance），在 iOS 中也建立了类似的机制。用户借助以往的经验，通过图形，预期下一步的行为或感知它的是做什么的。

滚动内容 & 多页内容

比如，左边有一列滚动内容，你可以在底部裁剪掉半个文字，让人尝试着去发现下面还有更多的内容。如果有好几页内容，那就可以用页面指示物，来引导还有其他几页内容。

滑动窗口
 

对于滑动窗口内容，你可以用像这样的一个把手来暗示它是可以被抓取并滑动的。

04. 隐喻

好的设计是有沟通力的，隐喻 (Metaphors) 就是一种很好的方式，它同时也是 iOS 六大设计原则之一。

– 时间隐喻

很多人觉得 UI，不就是颜色、间距那些东西吗，好像没什么可设计的。那我们且看，iOS 短信界面是怎么处理的：

• 短信气泡的背景颜色是有深浅变化的，信息越早，颜色越淡。
• 连发两条信息，它们上下的间矩是很小的，并且只有下面的信息气泡有角标。
• 如果发送的间隔时间长一点，短信的上下间距会变大。

短信界面

苹果就这样通过颜色渐变、间距，完成了对时间的隐喻。

– 速度隐喻

苹果系统有一项“朗读屏幕”的功能，双指从屏幕顶部向下轻扫，即可呼出。将 iPhone 或 iPad 上的文档、网页或微信里的文字读出来，帮助你将阅读变为朗读。

当然，你也可以控制系统朗读的语速，Apple 很形象的将龟兔赛跑的图标，隐喻在速度之上。当一个应用程序的虚拟界面是植根于熟悉的真实世界时，那么用户会学习的更快。

龟兔赛跑

05. 设备同步

苹果的音频产品线有很多，诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3，每一个都有各自的图标。不管你连接哪个，都会同步显示具体设备。

比如，当你手机连接了 AirPods Pro ，电话界面的音频喇叭 icon 会变成  AirPods Pro 的 icon。另外，AirPlay 功能可以连接多个扬声器，甚至新旧款的 iPhone 图标都有区分。

AirPods Pro 图标 & 全面屏 iPhone 图标

同样，如果你有 Powerbeats3 耳机，并且系统是最新的iOS 13。当你调节音量的时候，喇叭 icon 同样会变成 Powerbeats3 耳机图标。

Powerbeats3 图标

06. San Francisco 字体的秘密

旧金山字体现在是 Apple 平台统一的标准字体：被应用在 Apple Watch，iPhone，iPad和Mac上，取代了以前的 Helvetica Neue。

冒号的居中对齐优化

新字体有些微妙的变化，最让我印象深刻的是冒号「 : 」的显示方式。正常情况下，冒号是在基线上，视觉感知会偏下。但如果冒号是放在数字中间，系统会将它垂直居中对齐。

符号的优化

除此之外，「 #」符号中间的开口是个非平行切口，这是特意被增大处理的。因为 # 的字号在缩小到一定程度的时候，切口会难以识别。所以视觉上需要更多的空白，提高可读性。

07. 非线性动画

用户体验有一个重要性能指标是：响应速度（Speed Index）。随着硬件设备的不断提升，不可否认的是，现在的 Android 启动速度比 iOS 更快，但是，苹果加入了很多非线性动画，以及稳定的帧率表现，在流畅度方面 iOS 更胜一筹。

iOS 13 黑暗模式切换动画
 

解释下非线性动画，就是一开始很快，最后慢慢慢下来。比如，打开任意一个 App 的过程动画、键盘拉起时的瞬间，以及 iOS 13 控制中心黑暗模式快捷切换，这个icon 动画同样用了非线性。

iOS 13 静音开关动画

还有一直被诟病的音量和静音调节，终于得到解决。原先的大 Toast 提示会挡住当前内容，现在改到居顶显示，并加入物理衰减铃铛动画，极为真实。

总结

在 Apple 的界面视觉中，我们看到了各种隐喻和暗示，我们看到了非线性动画带来的流畅体验，我们看到了雕刻细节的过程。它是设计师不断追求的东西，最终给用户呈现的是额外礼遇般的的产品体验。

原文地址：洋爷（公众号）

作者：洋爷