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

一、沉浸與交互式體驗(yàn)

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

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

1、連續(xù)性

我們?cè)诋a(chǎn)品介紹頁(yè)可以看到，蘋(píng)果使用了大量的滾動(dòng) scroll 來(lái)體現(xiàn)連續(xù)性。

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

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

iPad Pro 的連續(xù)性

2、趣味性

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

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

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

AirPods 的趣味性

二、言之有序

1、秩序感

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

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

iPad 的秩序感

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

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

• iPad 是正面。

• iPad mini 是俯視。

如此一來(lái)，即顯得有序，也不會(huì)導(dǎo)致視覺(jué)疲勞。

2、設(shè)計(jì)語(yǔ)言

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

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

HomePod

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

三、層次

1、視差

第三是視差帶來(lái)的層次感。

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

Mac Pro 視差滾動(dòng)

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

2、視覺(jué)張力

不僅如此，樣式上富有視覺(jué)張力。或擴(kuò)張、或收縮、或吸引、或排斥之感覺(jué)，呈現(xiàn)刺激與震撼。舉兩個(gè)例子：

A13芯片的擴(kuò)張力

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

Pro級(jí)攝像頭的排斥力

排斥力：通過(guò)元素的大小對(duì)比，可以形成一定強(qiáng)度的視覺(jué)排斥力。Pro級(jí)攝像頭 輔以大特寫(xiě)，傳達(dá)空間意識(shí)。視覺(jué)上被其構(gòu)圖、美感觸動(dòng)。

四、高級(jí)感

再聊聊蘋(píng)果的高級(jí)感是怎么來(lái)的。

1、視覺(jué)降噪

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

iMac Pro 高級(jí)感

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

甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級(jí)灰中加了一點(diǎn)點(diǎn)綠而已。

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

iPad 留白

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

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

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

2、配圖

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

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

Designed by Apple in California

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

蘋(píng)果壁紙制作幕后

3、蘋(píng)果式文案

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

這不是崇洋媚外，心理學(xué)有個(gè)詞叫做「母語(yǔ)羞澀」。簡(jiǎn)單來(lái)說(shuō)就是，中文對(duì)于我們來(lái)說(shuō)，太常見(jiàn)了會(huì)讓人產(chǎn)生一種廉價(jià)感（實(shí)際上是羞澀感）的心理感受。

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

你的下一臺(tái)電腦，何必是電腦。

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

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

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

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

• 雙關(guān)：比如說(shuō) AppleWatch 的「它會(huì)時(shí)時(shí)關(guān)心你的心。」

• 排比：比如說(shuō) iMac的「從極速，到神速，任你提速。」

• 押韻：比如說(shuō) 配件 的「可重復(fù)充電，又可圈可點(diǎn)。」

• 對(duì)比：比如說(shuō)  iPad mini 的「身量小，能量大。」

4、儀式感

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

國(guó)際婦女節(jié)專題

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

不過(guò)話又說(shuō)回來(lái)，感動(dòng)歸感動(dòng)，還是參與友商的打折活動(dòng)香。

作者公眾號(hào)：洋爺（ID: yangye365）

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

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

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

品牌形象 · Mac開(kāi)機(jī)的故事

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

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

△ 歷代Mac開(kāi)機(jī)聲音

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

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

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

提高可用性 · 馬林巴琴

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

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

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

大家都知道，在接電話時(shí)，手機(jī)屏幕會(huì)自動(dòng)息屏。這是因?yàn)榫嚯x傳感器（ToF）在進(jìn)行監(jiān)視，防止臉部誤操作而掛斷電話。

同樣，蘋(píng)果在息屏通知也有個(gè)細(xì)節(jié)。如果你把手機(jī)放在褲兜或者手提包里時(shí)，那么接收通知只響會(huì)聲音，不會(huì)點(diǎn)亮屏幕。因?yàn)槭謾C(jī)在褲兜里的場(chǎng)景下，沒(méi)人能看到屏幕，自然也就沒(méi)有亮屏的需求。這時(shí)聲音的可用性就非常高，同時(shí)，可以幫助系統(tǒng)有效的節(jié)省能耗。

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

什么是好的界面聲音設(shè)計(jì)體驗(yàn)？

愉悅的感官體驗(yàn) · 郵件

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

△ MacBook郵件

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

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

舉個(gè)例子，在使用 Apple Pay 付款時(shí)，UI Animation 的效果、節(jié)奏、時(shí)長(zhǎng)都會(huì)影響到音效和震動(dòng)。

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

△ Apple Pay支付

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

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

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

聲音由來(lái) · 短信和日歷音效

Apple 設(shè)備中那些常聽(tīng)到的聲音是怎么來(lái)的呢？

因?yàn)樘O(píng)果公司有嚴(yán)格的保密機(jī)制，所以 Apple 的設(shè)計(jì)師都特別低調(diào)，很少能看到他們的公開(kāi)文章和視頻。在這里給大家推薦 WWDC 設(shè)計(jì)類演講，所以這可能是了解他們?cè)O(shè)計(jì)過(guò)程的唯一方式了。

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

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

相關(guān)資源：

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

總結(jié)

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

原文地址：洋爺（公眾號(hào)）

作者：洋爺

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

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

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

App Store 十年變化

– 圓角矩形

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

圓角矩形

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

蝸牛讀書(shū) App

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

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

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

Apple Music iOS 13 版本
 

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

細(xì)心觀察，微信同樣認(rèn)同這種語(yǔ)言，在頂欄和底欄做了微弱的半透明和模糊。

相冊(cè) iOS 13 版本

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

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

– 語(yǔ)音備忘錄

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

語(yǔ)音備忘錄 & Apple單詞的音軌

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

– 地圖

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

蘋(píng)果地圖 App

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

蘋(píng)果新總部位置

– Safari 瀏覽器

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

Safari 瀏覽器

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

– 時(shí)鐘

大家都知道時(shí)鐘 App 的圖標(biāo)時(shí)間是和系統(tǒng)時(shí)間同步的，秒針也會(huì)勻速轉(zhuǎn)動(dòng)。重點(diǎn)來(lái)了，長(zhǎng)按時(shí)鐘 App ，秒針的運(yùn)動(dòng)方式由勻速變成滴答滴答機(jī)械式轉(zhuǎn)動(dòng)了。

時(shí)鐘 App 滴答動(dòng)畫(huà)

03. 利用視覺(jué)線索

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

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

滾動(dòng)內(nèi)容 & 多頁(yè)內(nèi)容

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

滑動(dòng)窗口
 

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

04. 隱喻

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

– 時(shí)間隱喻

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

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

短信界面

蘋(píng)果就這樣通過(guò)顏色漸變、間距，完成了對(duì)時(shí)間的隱喻。

– 速度隱喻

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

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

龜兔賽跑

05. 設(shè)備同步

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

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

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

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

Powerbeats3 圖標(biāo)

06. San Francisco 字體的秘密

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

冒號(hào)的居中對(duì)齊優(yōu)化

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

符號(hào)的優(yōu)化

除此之外，「 #」符號(hào)中間的開(kāi)口是個(gè)非平行切口，這是特意被增大處理的。因?yàn)?# 的字號(hào)在縮小到一定程度的時(shí)候，切口會(huì)難以識(shí)別。所以視覺(jué)上需要更多的空白，提高可讀性。

07. 非線性動(dòng)畫(huà)

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

iOS 13 黑暗模式切換動(dòng)畫(huà)
 

解釋下非線性動(dòng)畫(huà)，就是一開(kāi)始很快，最后慢慢慢下來(lái)。比如，打開(kāi)任意一個(gè) App 的過(guò)程動(dòng)畫(huà)、鍵盤(pán)拉起時(shí)的瞬間，以及 iOS 13 控制中心黑暗模式快捷切換，這個(gè)icon 動(dòng)畫(huà)同樣用了非線性。

iOS 13 靜音開(kāi)關(guān)動(dòng)畫(huà)

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

總結(jié)

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

原文地址：洋爺（公眾號(hào)）

作者：洋爺

如今，當(dāng)我們談?wù)撈甬a(chǎn)品設(shè)計(jì)、談?wù)撈鹩脩趔w驗(yàn)，總是離不開(kāi)蘋(píng)果，它所堅(jiān)持的設(shè)計(jì)哲學(xué)是對(duì)細(xì)節(jié)和質(zhì)量的極致追求。下面，我就帶大家看看 Apple 在交互方面做的努力。

01. 動(dòng)態(tài)的觸控區(qū)域

Apple 為了解決在移動(dòng)設(shè)備上輸入本文的問(wèn)題，采用了一種流暢并且對(duì)用戶友好的解決方案：基于預(yù)測(cè)輸入系統(tǒng)，擴(kuò)大虛擬鍵盤(pán)的有效觸控區(qū)域。

例如，the 和 this 這兩個(gè)單詞。當(dāng)你按下“th”的時(shí)候，系統(tǒng)預(yù)測(cè)下一個(gè)字母可能是 e 或 i，從而動(dòng)態(tài)增加這兩個(gè)字母的點(diǎn)擊范圍，以此提高輸入的命中率。

當(dāng)然，視覺(jué)上你看不到按鈕尺寸的變化。指尖之上，一切都在無(wú)形之中。

02. 音效觸覺(jué)反饋

在現(xiàn)實(shí)世界中，音效、觸感和視覺(jué)能很自然的保持協(xié)調(diào)，因?yàn)槿咧g有著很自然的關(guān)系。蘋(píng)果在數(shù)字世界也極力保持著這種體驗(yàn)。

得益于 Taptic Engine 線性震動(dòng)馬達(dá)，讓 iPhone 有了觸覺(jué)上的反饋。

– 閃光燈

iPhone X 鎖屏上的閃光燈是一個(gè)非常高級(jí)別的觸覺(jué)體驗(yàn)例子。手電筒圖標(biāo)會(huì)根據(jù)手指觸碰的壓力而變化，讓你知道系統(tǒng)正在響應(yīng)操作，同時(shí)也告訴你需要再用力些。

當(dāng)力度一旦達(dá)到，系統(tǒng)會(huì)有個(gè)短震動(dòng)，告訴你可以松手了，松手后還有一個(gè)成功的震動(dòng)反饋。這像不像現(xiàn)實(shí)世界的老式拉線燈動(dòng)作？

– 鬧鐘

另外，在鬧鐘應(yīng)用中，當(dāng)你調(diào)節(jié)輪盤(pán)時(shí)，會(huì)有持續(xù)的機(jī)械震動(dòng)反饋，且音效是自行車鏈條轉(zhuǎn)動(dòng)的齒輪聲。快速撥動(dòng)輪盤(pán)時(shí)，視覺(jué)上還會(huì)有一個(gè)物理的慣性力，直到力竭停止。

至此，音效、觸感、視覺(jué)三者渾然一體，達(dá)到了精準(zhǔn)的協(xié)同表現(xiàn)。

03. 終點(diǎn)與手勢(shì)意圖

在 FaceTime 視頻通話中，屏幕角落有一個(gè)小的播放窗口代表著自己。這個(gè)浮動(dòng)的小窗口，它就可以被移到屏幕任意的4個(gè)角落，這些角落叫做手勢(shì)的終點(diǎn)。

滑動(dòng)與拖動(dòng)

你可以拖動(dòng)浮窗到角落，但這樣需要跨過(guò)半個(gè)屏幕，非常麻煩。

因此，蘋(píng)果基于預(yù)測(cè)動(dòng)量這一概念，捕獲滑動(dòng)的動(dòng)量和速度。用戶只需輕量級(jí)的滑動(dòng)投擲，即可將浮窗到達(dá)預(yù)測(cè)位置。蘋(píng)果把這個(gè)叫做，終點(diǎn)和手勢(shì)意圖一致。

04. 利用行為線索 

蘋(píng)果是如果教你使用手勢(shì)交互的？

在 Safari 瀏覽器中，每個(gè)標(biāo)簽頁(yè)的左上角都有個(gè)X圖標(biāo)，當(dāng)你點(diǎn)擊圖標(biāo)時(shí)，標(biāo)簽頁(yè)會(huì)向左滑出，表示它被關(guān)閉了。這就暗示，除了點(diǎn)擊圖標(biāo)，還可以采用左滑操作來(lái)關(guān)閉標(biāo)簽頁(yè)。

05. 物理曲線動(dòng)畫(huà)

為什么蘋(píng)果系統(tǒng)的過(guò)渡動(dòng)畫(huà)看起來(lái)很舒服？

因?yàn)樘O(píng)果大量采用了現(xiàn)實(shí)世界的物理特性：慣性、彈性、重力、阻力。和觸控一樣，蘋(píng)果把交互動(dòng)畫(huà)放在了極高的位置。

Apple Music

Apple Music 模態(tài)彈窗的動(dòng)畫(huà)曲線設(shè)計(jì)非常嚴(yán)謹(jǐn)。在屏幕底欄有個(gè)迷你播放器，點(diǎn)擊它，可以查看播放詳情。由于點(diǎn)擊這一操作沒(méi)有任何動(dòng)量，所以蘋(píng)果用了100%阻尼來(lái)確保它不會(huì)過(guò)沖。

但你如果下拉關(guān)閉模態(tài)彈窗時(shí)，向下的方向就有了動(dòng)量，因此蘋(píng)果用了80%阻尼來(lái)獲得一些彈性和擠壓。可以看到上面這個(gè)動(dòng)畫(huà)，最后底欄會(huì)有微彈效果。

06. 如無(wú)必要, 勿增實(shí)體

2017年，蘋(píng)果發(fā)布了 iPhone X，由 Face ID 取代了 Touch ID，確立了新的人機(jī)交互解鎖方式。

07. 重新定向

總結(jié)

當(dāng)你需要的時(shí)候，它永遠(yuǎn)能及時(shí)響應(yīng)。當(dāng)你滑動(dòng)操作時(shí)候，它永遠(yuǎn)能理解你的意圖，并且給你最自然的觸覺(jué)反饋。為用戶創(chuàng)造一系列的愉悅體驗(yàn)，這也許就是蘋(píng)果的設(shè)計(jì)哲學(xué)。

原文地址：洋爺（公眾號(hào)）

作者：洋爺

     歷史上第二次，蘋(píng)果與Microsoft之間的操作系統(tǒng)之戰(zhàn)即將拉開(kāi)序幕。距離下一代OS X系統(tǒng)“Leopard”亮相還有一個(gè)月時(shí)間，山雨欲來(lái)風(fēng)滿樓，當(dāng)諸多特性細(xì)節(jié)逐步浮出水面時(shí)，人們問(wèn)起了一個(gè)古老的問(wèn)題：蘋(píng)果又要和微軟開(kāi)戰(zhàn)了？

     Leopard將和微軟下一代操作系統(tǒng)Window Vista同時(shí)上市，業(yè)內(nèi)亦透露，蘋(píng)果一直在觀察微軟的風(fēng)聲草動(dòng)，Leopard中的不少特性功能都是針對(duì)Vista的弱項(xiàng)/強(qiáng)項(xiàng)設(shè)計(jì)：例如，Leopard有可能集成一項(xiàng)類似于微軟Virtual Earth的系統(tǒng)級(jí)圖形地圖技術(shù)－－微軟近期在這一技術(shù)上的投入亦大膽而隱蔽，通過(guò)收購(gòu)Vexcel等圖形技術(shù)公司不斷壯大VE的力量。

    Leopard泄漏截圖中另一項(xiàng)特性便是蘋(píng)果地址簿與iCal集成軟件，最重要的是Boot Camp。據(jù)稱，Boot Camp將被蘋(píng)果打造成完完全全的虛擬化解決方案－－直接和微軟的Virtual PC Express競(jìng)爭(zhēng)，當(dāng)然，同時(shí)讓OS X“吃掉”Windows。

    除此之外，業(yè)內(nèi)還暗示蘋(píng)果Leopard的正式名稱將比微軟Vista更容易進(jìn)行市場(chǎng)推廣。蘋(píng)果將8月7日開(kāi)幕的全球開(kāi)發(fā)者大會(huì)上首次披露Leopard.

    Apple蘋(píng)果電腦會(huì)在WWDC大會(huì)上宣布完成向Intel芯片過(guò)渡，同時(shí)發(fā)布最新的PowerMac電腦產(chǎn)品。11月上市的Mac OS Leopard（Mac OSX 10.5），將是蘋(píng)果電腦迄今為止，最先進(jìn)的操作系統(tǒng)，Mac OS Leopard（Mac OSX 10.5）更加注重技術(shù)進(jìn)步，而非用戶界面的花哨，Mac OS Leopard（Mac OSX 10.5）采用的新技術(shù)包括，Spotligh技術(shù)和Finder更緊密結(jié)合、添加更多的官方Cocoa Widgets（小玩藝），改進(jìn)型的文件系統(tǒng)、對(duì)藍(lán)光驅(qū)動(dòng)器的支持、集成2.0版的Automater、為Intel處理器進(jìn)行優(yōu)化、帶白板和tab功能的iChat4.0聊天軟件、Bootcamp最終版（集成新的Front Row功能）。

    Apple蘋(píng)果電腦選擇在11月份銷售Mac OS Leopard（Mac OSX 10.5），為的是趕上圣誕節(jié)銷售熱潮。Mac OS Leopard（Mac OSX 10.5）預(yù)計(jì)零售價(jià)格在129.99美金，另外，Apple蘋(píng)果電腦將在明年1月份推出采用Intel處理器的Mac mini和iMac電腦。

（點(diǎn)擊圖片看大圖）

官方首頁(yè)的信息
 

以下資料來(lái)自非官方信息有誤差在所難免

感谢您访问我们的网站，您可能还对以下资源感兴趣：广东疗忧健身俱乐部