我相信，從 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 的界面視覺中，我們看到了各種隱喻和暗示，我們看到了非線性動畫帶來的流暢體驗，我們看到了雕刻細節的過程。它是設計師不斷追求的東西，最終給用戶呈現的是額外禮遇般的的產品體驗。

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

作者：洋爺