跨平臺(tái)設(shè)計(jì)！如何面向 Apple 生態(tài)的多種設(shè)備進(jìn)行設(shè)計(jì)?

今天是「跨平臺(tái)設(shè)計(jì)」的最后一篇。說起來，這種圖文形式的 WWDC 分會(huì)解析也將要完成三個(gè)系列了，對(duì)我而言像是吃了三頓大餐，從 iOS 13 設(shè)計(jì)特性，到基礎(chǔ)設(shè)計(jì)原理，到眼下的跨平臺(tái)，可謂豐盛。接下來或許做些小食。

繼續(xù)，由 Apple 的設(shè)計(jì)師 Cas Lemmens 為我們講解如何面向 Apple 生態(tài)體系中的多種設(shè)備進(jìn)行設(shè)計(jì)。

跨平臺(tái)設(shè)計(jì) - 平臺(tái)連接

在之前的幾個(gè)步驟中，我們完成了平臺(tái)的選擇，并且針對(duì)目標(biāo)平臺(tái)進(jìn)行了產(chǎn)品功能與風(fēng)格的適配。如果這是你第一次開發(fā) app，那么「跨平臺(tái)設(shè)計(jì)流程」至此便告一段落了，你可以繼續(xù)進(jìn)行相關(guān)的設(shè)計(jì)開發(fā)并最終發(fā)布到 App Store。

然而，如果你正在基于現(xiàn)有產(chǎn)品，面向下一個(gè)目標(biāo)平臺(tái)進(jìn)行設(shè)計(jì)，那么「平臺(tái)連接」就是接下來的重要步驟。

「平臺(tái)連接」涉及到兩個(gè)重要的體驗(yàn)時(shí)刻：

• 入口：人們打開 app 開始使用的時(shí)刻。
• 出口：人們執(zhí)行操作之后離開 app 的時(shí)刻。

實(shí)際上，即便只是面向單一平臺(tái)進(jìn)行設(shè)計(jì)，這兩個(gè)時(shí)刻也是至關(guān)重要的。很多情況下，我們?cè)谥匦麓蜷_一個(gè) app 時(shí)都會(huì)希望回到上一次離開時(shí)的環(huán)境狀態(tài)當(dāng)中，這就是我們所說的「狀態(tài)重現(xiàn)」。所謂「狀態(tài)」，通常包括內(nèi)容、數(shù)據(jù)或相關(guān)設(shè)置項(xiàng)等，具體形式取決于特定的 app。

譬如，對(duì)于「天氣」來說，狀態(tài)應(yīng)該恢復(fù)到上一次查看時(shí)定位的地區(qū)，同時(shí)氣象信息更新到當(dāng)前最新；對(duì)于「?jìng)渫洝苟裕瑒t應(yīng)自動(dòng)打開上一次正在記錄的筆記，包括你當(dāng)時(shí)所使用的輸入工具；而對(duì)于影音娛樂類的產(chǎn)品來說更是如此，沒人希望每次回到一個(gè)游戲當(dāng)中都要重新來過一次。

當(dāng)涉及多個(gè)平臺(tái)的切換時(shí)，「入口」與「出口」的銜接則變得尤為重要。在多個(gè)平臺(tái)之間實(shí)現(xiàn)狀態(tài)的記錄與重現(xiàn)，將能使人們?cè)谌魏吻榫诚露伎梢韵硎艿捷p松、無縫的跨平臺(tái)體驗(yàn)。

在 Apple，「平臺(tái)連接」是我們尤為關(guān)注的設(shè)計(jì)環(huán)節(jié)。譬如 Apple TV 會(huì)記錄你之前停下的位置，并同步到你其他的設(shè)備當(dāng)中；下一次你便可以在任何設(shè)備上直接繼續(xù)觀看。

再以「地圖」為例。今天早上，我用 MacBook 的「地圖」 app 查看了過來這邊會(huì)議中心的路線。這次查詢會(huì)被保存到「最近搜索」當(dāng)中，并同步到你其他的設(shè)備當(dāng)中。因此，當(dāng)我開始駕車時(shí)，可以直接從「最近搜索」列表中選擇這條路線進(jìn)行導(dǎo)航。

以上這些例子都有一個(gè)共同前提，即我們的每個(gè)設(shè)備都安裝了相應(yīng)的 app。如果此時(shí)出現(xiàn)了一臺(tái)新設(shè)備呢？譬如你一直在使用 MacBook 和 iPhone；某一天你突然買了一臺(tái) iPad，希望它也能成為你日常生活中的一部分。你需要先在 iPad 上安裝各種 app，然后完成相關(guān)的設(shè)置流程，讓 app 知道你是誰，這樣它們才能與其他設(shè)備實(shí)現(xiàn)無縫連接。

很多時(shí)候，這個(gè)過程相當(dāng)無聊，你必須記住你的郵箱、用戶名、密碼，你必須手動(dòng)輸入，而且很可能輸錯(cuò)。有時(shí)，這個(gè)過程甚至?xí)钅銋挓┑椒艞壴谛略O(shè)備里使用這個(gè) app。而 iCloud 鑰匙串正是為了解決這類問題而設(shè)計(jì)的。僅需點(diǎn)擊一個(gè)按鈕，鑰匙串就能幫你在新設(shè)備當(dāng)中輸入你的用戶名、郵箱、密碼。

實(shí)際上，這個(gè)設(shè)置流程本身同樣是「平臺(tái)連接」所要解決的問題。例如當(dāng)你新買了一臺(tái) Apple TV，你并不需要手動(dòng)安裝并設(shè)置 app；你只需把 iPhone 或是 iPad 靠近 TV，系統(tǒng)就可以自動(dòng)將這些設(shè)備上的那些提供了 TV 適配的 app 遷移到 TV 當(dāng)中。

綜上所述，「平臺(tái)連接」的核心任務(wù)在于，通過對(duì) app 狀態(tài)的記錄和重現(xiàn)，優(yōu)化「出口」與「入口」的銜接，進(jìn)而在不同的設(shè)備之間實(shí)現(xiàn)輕松便捷的無縫體驗(yàn)。

以「Things」為例。這個(gè) app 所要記錄和重現(xiàn)的「狀態(tài)」就是我們的每一個(gè)待辦事項(xiàng)清單。你可以在任何設(shè)備上添加和管理你的待辦事項(xiàng)，所有信息都會(huì)即刻同步到你的所有設(shè)備當(dāng)中。

「Deliveries」也是同樣。它會(huì)將正在追蹤的物流訂單保存在 iCloud 當(dāng)中，并根據(jù)物流服務(wù)的狀態(tài)變化而自動(dòng)更新相關(guān)信息，同時(shí)同步到你正在打開的每一個(gè)設(shè)備當(dāng)中。

跨平臺(tái)設(shè)計(jì) - 平臺(tái)擴(kuò)展

在跨平臺(tái)設(shè)計(jì)的第五步，即「平臺(tái)擴(kuò)展」當(dāng)中，我們所要關(guān)注的是兩個(gè)不同的平臺(tái)如何同時(shí)進(jìn)行配合協(xié)作。

關(guān)于這個(gè)話題，我們首先需要回過頭來復(fù)習(xí)一下我們?cè)诘谝徊剑础钙脚_(tái)選擇」當(dāng)中探討的關(guān)于設(shè)備的「情境」與「能力」的問題。

以 MacBook 為例。從能力的角度來看，它的性能很強(qiáng)大，支持多任務(wù)，你可以通過鍵鼠或觸控板完成精確的操作，等等。但它所不擅長的事情之一，就是辨別你的身份。每當(dāng)我們打開或是喚醒 MacBook 時(shí)，都會(huì)面對(duì)這樣的登錄窗口；我們必須手動(dòng)輸入密碼，或是通過 Touch ID 確認(rèn)身份。正如前面所說，手動(dòng)輸入密碼的過程很煩人，你必須記住密碼，并且確保輸入正確。但很長時(shí)間以來，這就是讓 MacBook 識(shí)別我們身份的唯一方式。

而 Apple Watch 則是「始終開機(jī)，常伴于身」的，是高度私人化的，它知道我們的身份。因此我們可以讓 Watch 與 MacBook 對(duì)話，使 MacBook 知道我們是誰，并自動(dòng)開啟。

這里最需要關(guān)注的是整個(gè)體驗(yàn)的便捷性：我不需要命令 Watch 去給 MacBook 發(fā)送信息，也不用告訴 MacBook 去接收來自 Watch 的訊號(hào)；只要兩個(gè)設(shè)備距離足夠近，通訊就會(huì)自然發(fā)生；實(shí)際上我根本不需要做任何事。

因此，體驗(yàn)的便捷性是多平臺(tái)擴(kuò)展協(xié)作的關(guān)鍵之一。新增一個(gè)平臺(tái)絕不意味著操作步驟的復(fù)雜化。

接下來以 iMac 為例。從能力的角度，iMac 具有更強(qiáng)大的性能，更大的顯示屏，你可以很輕松地在 iMac 上瀏覽購物網(wǎng)站。但是 iMac 無法為你存儲(chǔ) ApplePay 的相關(guān)信息，你無法直接進(jìn)行支付操作。

但 iPhone 可以做到這一點(diǎn)。所以當(dāng)這兩個(gè)平臺(tái)在支付場(chǎng)景里進(jìn)行通訊時(shí)，支付就變得可行了。你可以在 iMac 上瀏覽商品并下單，系統(tǒng)會(huì)提示你到 iPhone 上繼續(xù)操作；你進(jìn)而在 iPhone 上通過身份驗(yàn)證確認(rèn)付款，完成交易。

當(dāng)然，iPad 和 Watch 都可以扮演這一角色，這里最需要關(guān)注的是整個(gè)操作流程的清晰性。iMac 會(huì)明確地告訴我去到 iPhone 上繼續(xù)操作；在 iPhone 上，我則可以收到相關(guān)的購買信息以便確認(rèn)，然后通過 Touch ID（或 Face ID）快速完成支付；整個(gè)流程清晰而連貫。

因此，操作的清晰性是多平臺(tái)擴(kuò)展協(xié)作的另一個(gè)關(guān)鍵。否則，整個(gè)體驗(yàn)將變得令人困惑。

再以 Keynote 為例。Keynote 在制作和演示幻燈片方面無與倫比，但我們?cè)趯?shí)際演示時(shí)通常會(huì)遇到一個(gè)問題：MacBook 始終要與投屏保持連接，當(dāng)需要翻頁時(shí)，我們必須站在它后面進(jìn)行操作，因此無法始終保持自由移動(dòng)狀態(tài)。

而 iPhone 是移動(dòng)設(shè)備，便于攜帶。通過為 iPhone 版本的 Keynote 增加遙控播放功能，我們便可以幫助演講者實(shí)現(xiàn)自由移動(dòng)，無需始終站在 MacBook 后面做翻頁操作。

這里最需要關(guān)注的是功能的可選性。如果我的 iPhone 沒電了，或是忘帶了，我也仍然可以站在 MacBook 后面操作，而不至于不可用。

因此，功能的可選性是多平臺(tái)擴(kuò)展協(xié)作的又一個(gè)關(guān)鍵。

綜上所述，「平臺(tái)擴(kuò)展」的核心任務(wù)在于，通過能力層面的取長補(bǔ)短，實(shí)現(xiàn)不同平臺(tái)的整合，同時(shí)確保體驗(yàn)的便捷性、清晰性和可選性。

總結(jié)

以上便是我要與各位分享的跨平臺(tái)設(shè)計(jì)的典型流程。

• 首先，我們要對(duì)每一個(gè)平臺(tái)的情境特質(zhì)與能力特征進(jìn)行分析，并以此為基礎(chǔ)選擇我們的目標(biāo)平臺(tái)。
• 然后，我們要基于目標(biāo)平臺(tái)的情境與能力特性，對(duì)我們希望實(shí)現(xiàn)的功能進(jìn)行權(quán)衡與取舍。
• 接下來，我們要在品牌風(fēng)格與平臺(tái)規(guī)范之間尋求平衡，對(duì) app 的外觀及使用體驗(yàn)進(jìn)行定義。
• 然后，我們會(huì)探索如何在多個(gè)平臺(tái)之間實(shí)現(xiàn)功能的連續(xù)性，打造輕松、無縫的使用體驗(yàn)。
• 最后，我們還要考慮如何同時(shí)基于多平臺(tái)實(shí)現(xiàn)最優(yōu)的綜合生態(tài)體驗(yàn)。

正如我們?cè)陂_篇時(shí)所說，我們打造這些平臺(tái)與 app 的本質(zhì)目標(biāo)，是提升人們的日常生活品質(zhì)，并力圖在人與設(shè)備之間構(gòu)建富有意義的關(guān)聯(lián)。最終，我們希望這些平臺(tái)與 app 構(gòu)成的生態(tài)體驗(yàn)會(huì)遠(yuǎn)遠(yuǎn)優(yōu)于它們各自所帶給我們的。

希望今天的分享能令你有所收獲。讓我們共同努力。非常感謝各位。