我相信，從 Apple.com 找設(shè)計靈感是每一位設(shè)計師都做過的事。那它到底有何魅力？跟我來一探究竟吧。

一、沉浸與交互式體驗

每當(dāng)有新產(chǎn)品發(fā)布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發(fā)布的  iPad Pro 也一樣。

這背后是 Apple 基于 webGL 技術(shù)，創(chuàng)造的一種沉浸與交互式產(chǎn)品體驗。

1、連續(xù)性

我們在產(chǎn)品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現(xiàn)連續(xù)性。

一方面，滾動作為大多數(shù) Web 用戶最自然的操作，學(xué)習(xí)成本極低。

另一方面，在冗長的頁面下，滾動能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場銜接。

iPad Pro 的連續(xù)性

2、趣味性

另外，采用了大量的動畫式轉(zhuǎn)換（animated transition），即操作時展示的動態(tài)效果，以此來增加趣味性。

伴隨著豐富的、若隱顯現(xiàn)的章節(jié)文案，就像電影的旁白一樣，娓娓道來。

通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進或后退，毫無樂趣可言。

AirPods 的趣味性

二、言之有序

1、秩序感

說到言之有序，我們看 iPad 的頁面介紹。四款產(chǎn)品，分別是：iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感，可謂妙不可言。

iPad 的秩序感

• iPad Pro 的拍攝角度接近于正側(cè)面。

• iPad Air 是四分之三側(cè)面。

• iPad 是正面。

• iPad mini 是俯視。

如此一來，即顯得有序，也不會導(dǎo)致視覺疲勞。

2、設(shè)計語言

其次，官網(wǎng)與 iOS 保持協(xié)同的設(shè)計語言，給用戶呈現(xiàn)了一致的感官體驗。

從 iOS 11 開始，蘋果就采用了 Large Title 大標(biāo)題的字體風(fēng)格。字重也從 Regular + Light 的組合，轉(zhuǎn)向的 Medium + Bold ，以此增強信息傳播中的識別力。

HomePod

另外，高斯模糊的標(biāo)題欄背景、產(chǎn)品的投影等設(shè)計語言也保持系統(tǒng)一貫的風(fēng)格。我們可以很清晰的看到 Web 設(shè)計的同步轉(zhuǎn)變。

三、層次

1、視差

第三是視差帶來的層次感。

蘋果奉行包豪斯的無裝飾和極簡的理念。當(dāng)然，它不是那種附庸的美觀及外表的光鮮，而是將復(fù)雜難懂的技術(shù)以簡潔的形式傳達給用戶。

Mac Pro 視差滾動

在信息層次方面，Apple 的編排設(shè)計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

2、視覺張力

不僅如此，樣式上富有視覺張力?；驍U張、或收縮、或吸引、或排斥之感覺，呈現(xiàn)刺激與震撼。舉兩個例子：

A13芯片的擴張力

擴張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴張。采用發(fā)散式的視覺引導(dǎo)，視覺張力就出現(xiàn)了，讓人感覺巍峨壯觀。

Pro級攝像頭的排斥力

排斥力：通過元素的大小對比，可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構(gòu)圖、美感觸動。

四、高級感

再聊聊蘋果的高級感是怎么來的。

1、視覺降噪

我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。

iMac Pro 高級感

回過頭來看蘋果官網(wǎng)的大部分頁面，除了產(chǎn)品界面色彩 和 按鈕藍 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。

甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。

換言之，減少使用顏色的數(shù)量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產(chǎn)品高級感的效果。

iPad 留白

除此之外，恰當(dāng)?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容，讓重要的信息更準(zhǔn)確的傳達。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現(xiàn)一種意境美。

所以我們做設(shè)計時應(yīng)當(dāng)多做減法，避免無意義的視覺元素堆砌，反而能讓你的設(shè)計更有高級的氣質(zhì)。

這又印證了現(xiàn)代主義建筑大師密斯·凡德羅的那句話：Less Is More。

2、配圖

當(dāng)然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。

蘋果官網(wǎng)大部分的產(chǎn)品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果，這一點能看到蘋果對于品質(zhì)的極致追求。

Designed by Apple in California

不僅如此，蘋果產(chǎn)品圣經(jīng)《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個幕后制作視頻，相當(dāng)硬核。

蘋果壁紙制作幕后

3、蘋果式文案

做過英文 Web 的設(shè)計師都知道，英文往往比中文更好設(shè)計，相同的布局英文出來的效果也更好看。

這不是崇洋媚外，心理學(xué)有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產(chǎn)生一種廉價感（實際上是羞澀感）的心理感受。

老外也一樣，你可以看到美國企業(yè)：蘋果、麥當(dāng)勞、星巴克都是使用圖形 Logo，而日本企業(yè)不用母語，而是用英文，比如 SONY、TOYOTA、Canon。

你的下一臺電腦，何必是電腦。

回到蘋果官網(wǎng)，我們看到一部分文案是英文產(chǎn)品名稱，這個不會感覺羞澀。

那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關(guān)、重復(fù)等修辭手法。雖然語感很差，但基本上能明白字面意思。

其實這樣做的目的就是為了創(chuàng)造一種陌生感、一種獨特的語言風(fēng)格，來凸品牌氣質(zhì)。舉幾個例子：

• 重復(fù)：比如說 iPad Pro「你的下一臺電腦，何必是電腦。」

• 雙關(guān)：比如說 AppleWatch 的「它會時時關(guān)心你的心?！?/p>

• 排比：比如說 iMac的「從極速，到神速，任你提速?！?/p>

• 押韻：比如說 配件 的「可重復(fù)充電，又可圈可點?！?/p>

• 對比：比如說  iPad mini 的「身量小，能量大?！?/p>

4、儀式感

最后一點。生活要有儀式感，蘋果官網(wǎng)也有儀式感。

國際婦女節(jié)專題

在一些特殊的日子里，例如三八節(jié)當(dāng)天，友商選擇打廣告促銷。而蘋果推出了國際婦女節(jié)專題，致敬女性的偉大，這一做法頗具人文情懷。

不過話又說回來，感動歸感動，還是參與友商的打折活動香。

作者公眾號：洋爺（ID: yangye365）

設(shè)計不僅僅是關(guān)于人們看到什么，也包括他們聽到什么。聲音設(shè)計（Sound Design）是一個很容易被忽視但又如此有意義的話題。

據(jù)我了解，Apple、Google 和 Facebook 都有專業(yè)的 Sound Designer 來制作音效。聲音作為一種感官體驗，它與視覺、觸覺一樣，是產(chǎn)品設(shè)計中極為重要的一環(huán)。

為什么聲音設(shè)計那么重要呢？

品牌形象 · Mac開機的故事

聲音設(shè)計是需要貼近品牌，甚至一定程度上要體現(xiàn)品牌。比如，諾基亞的默認鈴聲，經(jīng)典的 Hello MOTO，甚至是打開王者榮耀的那聲 Timi 以及蘋果 Mac 的啟動和弦，同樣讓人印象深刻，很好地傳遞了品牌形象。

早在 1984 年，Macintosh 就有了開機聲，不過早期的幾個版本是三全音。直到 1991 年，蘋果聲音設(shè)計師 Jim Reekes 使用他那臺價值 7000 美元的 Quadra 700 錄制了 C 大調(diào)和弦作為開機聲，靈感來自甲殼蟲樂隊的歌曲《生命中的一天》。

△ 歷代Mac開機聲音

Reekes 說他感覺這個聲音「最正」，他想要的就是這種很寬，即便高音也有著很重的低音，有著鋒利的起音的聲音，能夠讓用戶振奮一下。

1997 年，喬布斯回歸蘋果之后，提出要讓所有的蘋果電腦都具備統(tǒng)一的聲音，并欽點說我就喜歡 Reekes 以前做的聲音，于是沒人敢在 Reekes 做的聲音上做修改。

但從 2017 年后生產(chǎn)的 Mac 機型都不會發(fā)出啟動聲了。我認為 Mac 的開機聲音在可用性方面，確實很一般。如果你在一個安靜的課堂，Macbook 的啟動聲音很可能會給其他同學(xué)帶來干擾。所以，這時就要考慮此刻的場景是否真的需要聲音。

提高可用性 · 馬林巴琴

iPhone 第一代經(jīng)典的鈴聲「Marimba」就是一個成功的聲音設(shè)計。一方面它的品牌辨識度特別高，在鈴聲響起的時候，幾乎每個人都知道這是 iPhone。

另一方面，它的可用性非常高。馬林巴琴是一種管弦樂器，有著豐富的音調(diào)，并且包含了大量的諧波成分。即便是在苛刻嘈雜的環(huán)境，人腦也可以快速將其分辨出來。

節(jié)省能耗 · 息屏通知

大家都知道，在接電話時，手機屏幕會自動息屏。這是因為距離傳感器（ToF）在進行監(jiān)視，防止臉部誤操作而掛斷電話。

同樣，蘋果在息屏通知也有個細節(jié)。如果你把手機放在褲兜或者手提包里時，那么接收通知只響會聲音，不會點亮屏幕。因為手機在褲兜里的場景下，沒人能看到屏幕，自然也就沒有亮屏的需求。這時聲音的可用性就非常高，同時，可以幫助系統(tǒng)有效的節(jié)省能耗。

當(dāng)然，你也試一下可以用手擋住 iPhone 的劉海位置，如果有消息通知，一樣不會亮屏。

什么是好的界面聲音設(shè)計體驗？

愉悅的感官體驗 · 郵件

好的 Sounds 會帶給你愉悅的音效感官體驗。Macbook 里有個自帶的郵件軟件，當(dāng)你發(fā)送成功的時候，能清晰地聽到「嗖」的一聲，雙聲道的音效會從 MacBook 左喇叭貫穿到右喇叭，這個細節(jié)太悅耳了。并且在傳達認知上，也符合用戶預(yù)期。

△ MacBook郵件

表達準(zhǔn)確且協(xié)調(diào) · Apple Pay

在「交互篇」中，我講到了也就是協(xié)調(diào)程度。在數(shù)字世界想要設(shè)計出好的體驗，就必須讓音效、觸感、視覺像現(xiàn)實世界一樣保持協(xié)調(diào)。也就是說 Sound 、UI、震動反饋三者是分不開的。

舉個例子，在使用 Apple Pay 付款時，UI Animation 的效果、節(jié)奏、時長都會影響到音效和震動。

首先，動畫應(yīng)該給人積極的感覺，就如同交易成功的感覺。然后，清脆的叮當(dāng)音效不會太莊重，也很明顯是確認音效。最后是震動，在大多數(shù)情況下，音效和震動這兩者不一定要完全契合，但需要保持同樣的節(jié)奏。

△ Apple Pay支付

但也有例外，科技產(chǎn)品帶來了一種現(xiàn)象叫做幽靈震動。如果有幾個連續(xù)震動，讓不同的人去體驗，他們不一定都能感覺到第一個震動，仿佛成了幽靈一般。

Apple 的設(shè)計師利用這個無法被感知的首次震動，創(chuàng)造出啟動效應(yīng)。

以 watchOS 的通知為例：想要確保用戶可以清楚地感知到某個重要的通知，那么在聲音響應(yīng)之前，增加一個幽靈震動來激發(fā)皮膚的觸感，確保用戶有心理準(zhǔn)備去迎接后半個提醒。

聲音由來 · 短信和日歷音效

Apple 設(shè)備中那些常聽到的聲音是怎么來的呢？

因為蘋果公司有嚴格的保密機制，所以 Apple 的設(shè)計師都特別低調(diào)，很少能看到他們的公開文章和視頻。在這里給大家推薦 WWDC 設(shè)計類演講，所以這可能是了解他們設(shè)計過程的唯一方式了。

下面是一段蘋果聲音設(shè)計師 Hugo Verweij 在 WWDC 關(guān)于《Designing Sound》的分享。Hugo 現(xiàn)場用樂器演示了 iOS 短信通知和日歷提醒的聲音是怎么制作的，非常精彩，推薦大家去看。

△ 短信通知聲音 & 日歷提醒聲音

相關(guān)資源：

如果你對蘋果的設(shè)計感興趣，可以訪問：
https://developer.apple.com/videos/design
或者在 AppStore 下載 WWDC 官方 App 來觀看，所有設(shè)計演講視頻都包含中文字幕！

總結(jié)

聲音設(shè)計在產(chǎn)品中扮演著重要的角色，它作為一種人人都能理解的通用語言，可以幫助用戶塑造體驗，幫助用戶更好的理解交互。希望今后能夠有更多聲音設(shè)計融入到產(chǎn)品當(dāng)中，這樣的機會也等著產(chǎn)品設(shè)計師去挖掘與探索。

原文地址：洋爺（公眾號）

作者：洋爺

通常，硬件的外觀僅僅是作為一種體驗的容器存在，而軟件用戶界面（User Interface）的體驗，則決定了我們是否喜歡這個設(shè)備。下面，就和大家看看 Apple 在界面方面做的努力。

01. 高度統(tǒng)一的設(shè)計語言

蘋果的設(shè)計語言有四個標(biāo)志性特征：平滑圓角矩形 (Squircle)、陰影 (Shadows)、半透明 (Translucency) 和高斯模糊 (Blurring)，它們幾乎貫穿整個系統(tǒng)。從原生應(yīng)用：相冊、App Store 應(yīng)用商店、音樂都有這些元素，并且高度統(tǒng)一。
 

App Store 十年變化

– 圓角矩形

從 iOS 7 轉(zhuǎn)型扁平化的今天，蘋果完成了對「圓角矩形」的終極運用。蘋果引入了工業(yè)設(shè)計中連續(xù)曲率概念，應(yīng)用在圓角圖標(biāo)的輪廓之上。

圓角矩形

但真正意義上的運用，體現(xiàn)在 iPhone X 發(fā)布之后。得益于 OLED 柔性屏和 COP 封裝，iPhone X 四邊等寬的機身達到了最高的設(shè)計美學(xué)，屏幕的外輪廓也追隨機身形態(tài)，于是就有了圓角的 Dock。

蝸牛讀書 App

在《致匠心，以設(shè)計》這本書中有提到蝸牛讀書App，在大的彈窗和卡片引入了曲率圓角。雖然這是一個很細節(jié)的設(shè)計，甚至感知不到。但它就是設(shè)計師不斷追求的東西。

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

投影可以凸顯內(nèi)容的重要性，半透明和高斯模糊暗示背后有更多的內(nèi)容，同時可以保持界面輕盈、通透。

Apple Music iOS 13 版本
 

相對于 iOS 12，iOS 13 將半透明的特性更進一步。除了迷你播放器之外，Apple Music 的底部導(dǎo)航菜單也變成半透明+高斯模糊了。

細心觀察，微信同樣認同這種語言，在頂欄和底欄做了微弱的半透明和模糊。

相冊 iOS 13 版本

而系統(tǒng)相冊的更新，則延續(xù)了 App Store 應(yīng)用商店的卡片樣式。至此，圓角、投影、半透明和高斯模糊，這四個特征在相冊界面皆得到了印證。

02. 極致的圖標(biāo)細節(jié)

– 語音備忘錄

就拿語音備忘錄來說，它的音軌圖形并不是隨意畫出來的。而是用錄音功能，說出“Apple”這個單詞，所呈現(xiàn)的音軌波形。

語音備忘錄 & Apple單詞的音軌

而且，還有一個小細節(jié)是，語音備忘錄是唯一支持180°豎屏旋轉(zhuǎn)的自帶應(yīng)用。因為它常見的使用場景是采訪，需要將手機底部的麥克風(fēng)對著受訪者，而這時圖形界面是反的。所以支持旋轉(zhuǎn)，這是一個基于用戶使用場景的細節(jié)設(shè)計。

– 地圖

在蘋果地圖 App 圖標(biāo)上有一個角標(biāo)「280」，它代表的是蘋果所在的總部位置，一條位于美國加州 280 州際公路附近。

蘋果地圖 App

另外，新的圖標(biāo)里，右上角露出了 Apple Park ，也就是我們熟知的飛船圖形，這和實際的平面地圖完全吻合。

蘋果新總部位置

– Safari 瀏覽器

新的 Safari 圖標(biāo)，磁針的角度由原來的45°變成了50°。有一個頗有意思的解釋是，地磁的北極在一直在持續(xù)向北移動，在過去的150年里偏移超過1000公里。這個說法顯然更具有故事性，但事實并非如此。因為磁極向北，那么磁針角度應(yīng)該越來越小才對，而不是增大。 

Safari 瀏覽器

實際上，45° 改為 50° 是出于視覺上的修正。左邊舊的圖標(biāo)，45°磁針剛覆蓋的是短的刻度條，被倆長刻度條相夾，略顯擁擠。而新的圖標(biāo)剛好相反，50°磁針相鄰是短刻度，視覺上更具空間感和韻律感。

– 時鐘

大家都知道時鐘 App 的圖標(biāo)時間是和系統(tǒng)時間同步的，秒針也會勻速轉(zhuǎn)動。重點來了，長按時鐘 App ，秒針的運動方式由勻速變成滴答滴答機械式轉(zhuǎn)動了。

時鐘 App 滴答動畫

03. 利用視覺線索

為什么蘋果系統(tǒng)上手容易？在現(xiàn)實世界中，有些東西你一看就知道它如何使用，比如門把手、無印良品的CD機。

這里有個心理學(xué)的概念：示能 （Affordance），在 iOS 中也建立了類似的機制。用戶借助以往的經(jīng)驗，通過圖形，預(yù)期下一步的行為或感知它的是做什么的。

滾動內(nèi)容 & 多頁內(nèi)容

比如，左邊有一列滾動內(nèi)容，你可以在底部裁剪掉半個文字，讓人嘗試著去發(fā)現(xiàn)下面還有更多的內(nèi)容。如果有好幾頁內(nèi)容，那就可以用頁面指示物，來引導(dǎo)還有其他幾頁內(nèi)容。

滑動窗口
 

對于滑動窗口內(nèi)容，你可以用像這樣的一個把手來暗示它是可以被抓取并滑動的。

04. 隱喻

好的設(shè)計是有溝通力的，隱喻 (Metaphors) 就是一種很好的方式，它同時也是 iOS 六大設(shè)計原則之一。

– 時間隱喻

很多人覺得 UI，不就是顏色、間距那些東西嗎，好像沒什么可設(shè)計的。那我們且看，iOS 短信界面是怎么處理的：

• 短信氣泡的背景顏色是有深淺變化的，信息越早，顏色越淡。
• 連發(fā)兩條信息，它們上下的間矩是很小的，并且只有下面的信息氣泡有角標(biāo)。
• 如果發(fā)送的間隔時間長一點，短信的上下間距會變大。

短信界面

蘋果就這樣通過顏色漸變、間距，完成了對時間的隱喻。

– 速度隱喻

蘋果系統(tǒng)有一項“朗讀屏幕”的功能，雙指從屏幕頂部向下輕掃，即可呼出。將 iPhone 或 iPad 上的文檔、網(wǎng)頁或微信里的文字讀出來，幫助你將閱讀變?yōu)槔首x。

當(dāng)然，你也可以控制系統(tǒng)朗讀的語速，Apple 很形象的將龜兔賽跑的圖標(biāo)，隱喻在速度之上。當(dāng)一個應(yīng)用程序的虛擬界面是植根于熟悉的真實世界時，那么用戶會學(xué)習(xí)的更快。

龜兔賽跑

05. 設(shè)備同步

蘋果的音頻產(chǎn)品線有很多，諸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3，每一個都有各自的圖標(biāo)。不管你連接哪個，都會同步顯示具體設(shè)備。

比如，當(dāng)你手機連接了 AirPods Pro ，電話界面的音頻喇叭 icon 會變成  AirPods Pro 的 icon。另外，AirPlay 功能可以連接多個揚聲器，甚至新舊款的 iPhone 圖標(biāo)都有區(qū)分。

AirPods Pro 圖標(biāo) & 全面屏 iPhone 圖標(biāo)

同樣，如果你有 Powerbeats3 耳機，并且系統(tǒng)是最新的iOS 13。當(dāng)你調(diào)節(jié)音量的時候，喇叭 icon 同樣會變成 Powerbeats3 耳機圖標(biāo)。

Powerbeats3 圖標(biāo)

06. San Francisco 字體的秘密

舊金山字體現(xiàn)在是 Apple 平臺統(tǒng)一的標(biāo)準(zhǔn)字體：被應(yīng)用在 Apple Watch，iPhone，iPad和Mac上，取代了以前的 Helvetica Neue。

冒號的居中對齊優(yōu)化

新字體有些微妙的變化，最讓我印象深刻的是冒號「 : 」的顯示方式。正常情況下，冒號是在基線上，視覺感知會偏下。但如果冒號是放在數(shù)字中間，系統(tǒng)會將它垂直居中對齊。

符號的優(yōu)化

除此之外，「 #」符號中間的開口是個非平行切口，這是特意被增大處理的。因為 # 的字號在縮小到一定程度的時候，切口會難以識別。所以視覺上需要更多的空白，提高可讀性。

07. 非線性動畫

用戶體驗有一個重要性能指標(biāo)是：響應(yīng)速度（Speed Index）。隨著硬件設(shè)備的不斷提升，不可否認的是，現(xiàn)在的 Android 啟動速度比 iOS 更快，但是，蘋果加入了很多非線性動畫，以及穩(wěn)定的幀率表現(xiàn)，在流暢度方面 iOS 更勝一籌。

iOS 13 黑暗模式切換動畫
 

解釋下非線性動畫，就是一開始很快，最后慢慢慢下來。比如，打開任意一個 App 的過程動畫、鍵盤拉起時的瞬間，以及 iOS 13 控制中心黑暗模式快捷切換，這個icon 動畫同樣用了非線性。

iOS 13 靜音開關(guān)動畫

還有一直被詬病的音量和靜音調(diào)節(jié)，終于得到解決。原先的大 Toast 提示會擋住當(dāng)前內(nèi)容，現(xiàn)在改到居頂顯示，并加入物理衰減鈴鐺動畫，極為真實。

總結(jié)

在 Apple 的界面視覺中，我們看到了各種隱喻和暗示，我們看到了非線性動畫帶來的流暢體驗，我們看到了雕刻細節(jié)的過程。它是設(shè)計師不斷追求的東西，最終給用戶呈現(xiàn)的是額外禮遇般的的產(chǎn)品體驗。

原文地址：洋爺（公眾號）

作者：洋爺