如何設計和實現 iPad app 的多窗口功能

摘要：在 iOS 13 及之後的版本中，iPad app 可以支持多窗口功能。另外一個就是可以通過拖拽 app 的圖標到屏幕的邊緣開啓多窗口功能，因爲當你那樣操作時，就像是確切的在說我要在這裏開啓一個新的窗口。

在 iOS 13 及之後的版本中，iPad app 可以支持多窗口功能。例如，在一個具有文檔創建功能的 iPad app 中，人們可以同時打開多個文檔窗口。這篇文章會從設計和實現層面講述 iPad 多窗口功能的觸發方法、樣式以及功能等主題。

注意：如果你想把你的 iPad app 帶到 Mac 中去，想讓 Mac 版本支持多窗口功能，那就必須在 iPad app 中支持多窗口功能。有關於把 iPad app 帶到 Mac 中去，參見「把 iPad 上的 app 帶到 Mac 中去（上）」和「把 iPad 上的 app 帶到 Mac 中去（下）」。

從 Dock 欄拖拽 app 的圖標到屏幕的一邊，選擇一個當前的窗口或者創建一個新的窗口；
拖拽一個對象到屏幕的一邊，把它釋放到系統提供的可供釋放的目標上；
長按 Dock 欄上或者首頁上一個 app 的圖標，點擊情景菜單中出現的「顯示所有窗口」，再點擊添加按鈕；
長按一個對象直到出現一個情景菜單，其中包括在新窗口中查看對象的選項。

通常情況下，iPad app 使用兩種類型的窗口。「Primary window 主要窗口」包括了多個 app 對象以及與之相關的動作，通常人們會一直與「primary window」保持交互。「Auxiliary window 輔助窗口」包含了一個對象以及與之相關聯的動作，人們在關閉輔助窗口前通常會與其只交互一次。例如，在「郵件」app 中，主要窗口包括了郵箱，而一條單獨的信息會展示在輔助窗口中。

支持主要窗口和輔助窗口的多窗口體驗：因爲主要窗口總是包含高層級的對象，人們會從打開展示了不同區域內容的多窗口中受益。例如，人們可能想要首要郵件窗口一個展示他們的收件箱，另一個展示草稿箱。正如你所期待的，多個輔助窗口讓用戶更容易瀏覽和在多個條目間工作，例如多條郵件信息。
確保一個輔助窗口自己是有用的：輔助窗口應該給人們 app 的內容和功能的額外視圖。避免只是使用輔助窗口去提供主要窗口內容的選項或工具。
在輔助窗口使用一個「Done 完成」或者「Close 關閉」按鈕：因爲輔助窗口只包含了一個任務或對象的內容和動作，人們期望在完成時能夠關閉它。不要在按鈕中使用「Back 後退」來關閉窗口。你可以在按鈕中使用「Back 後退」去幫助人們返回窗口中的上一個視圖。

設計意圖

在 iOS 12 和之前的版本中，如果你進入切換 app 界面，你會看到下面這種 app 的網格佈局，你可以點擊其中一個進入那個 app。

在 iOS 13 中，一切看上去還跟以前一樣，但在這個界面中，不再全是一個個的應用，而是一個個的窗口。

首先來看下多窗口功能在 app 中是什麼樣子的，從中解答兩個問題，我的 app 應該支持多窗口功能嗎？如果需要支持，這些多窗口應該是怎樣的？具體的我應該在哪裏添加多窗口功能？它們應該怎麼表現？用戶是如何思考它們的？我們將通過看幾個 Apple 原生應用的例子來回答上面的問題。

先來看「Safari 瀏覽器」，Safari 是多窗口功能的早產兒，因爲在 iOS 13 之前的版本就已經基本具備了多窗口功能，下圖中展示了在 iOS 12 中，Safari 通過分隔視圖實現了多窗口功能。

在 iOS 13 或者 iPadOS 13 中，是下面這個樣式，實際上看起來和之前沒有什麼不同。因爲在之前，在 Safari 中能使用多窗口功能打開多個網頁就已經非常重要，現在我們將多窗口功能帶到了整個系統中。

具體來看，Safari 的每個窗口都是完全一樣的，它們就像是另一個界面的克隆。每一個窗口都可以做 app 所有的事情，這很重要，因爲在 iPad 上用戶應該在他們想要的那個窗口中做任何的事情。如果人們覺得需要，還可以創建更多的窗口。但是需要注意，如果你的 app 必須依賴多窗口功能才能工作，那就有些問題了。所以說每一個窗口都是另一個窗口的克隆並不是必須的，但用戶打開的第一個窗口應該可以完成所有的事情更加重要。而在 Safari 的這個例子中，每一個窗口都是一樣的，在大多數的 app 中也是這樣。

在 iOS 13 的 Safari 中，你可以隨時從多窗口的 Split View 模式轉換到 Slide Over 模式，並將屏幕邊緣的窗口滑出去，以進行一會兒更加專注的工作。

第二個例子是一個基於文檔的 app，Pages。在任何基於文檔的 app 中，用戶都會希望能夠同時在不同的窗口中查看多個文檔。所以你很有必要支持多窗口功能。但有一個點你需要注意，在每個窗口的左上角，有一個「文檔」按鈕，你可以通過這個按鈕訪問你想要的其他文檔。這也跟 Safari 一樣，每一個窗口都是一樣的。當然，並不是每一個基於文檔的 app 都要做成這樣，但在這裏，這是講得通的。

第三個例子是「Maps 地圖」，它也是隻有一種多窗口類型的 app，要在這裏提這個 app 的原因，是它更可以展示需要支持多窗口功能的必要性。通常情況下，你打開地圖，去到某個地方然後關閉它。但當你計劃你的晚上安排時，你可能想要先去喫晚飯，晚飯後再去看一個演出，在此時使用多窗口功能就很有幫助，你可以在兩者之間思考並改變它們。所以我們不能確保在任何時候多窗口功能都是有用的，但我們知道有時候會用上它。

同時，多窗口功能是系統級別的。當你已經確定了要去哪裏喫晚飯後，你可以關閉右邊的地圖，將其替換成「Notes 備忘錄」app，從而去完成其他事情。

第四個例子是「Mail 郵件」，這是第一個有不同類型多窗口功能的 app。當你回覆一條消息時，你可以把這個模態窗口變成一個單獨的窗口，以 Slide Over 或者 Split View 的方式展示。你可以看到在單獨的這個信息窗口中有一個發送按鈕和一個取消按鈕，你不能在這個窗口中回到上一級的郵件列表中，這種窗口是經過特殊設計的，當你點擊發送或者取消按鈕時，這個窗口就會關閉，關閉時會有一個過渡動畫，這也可以應用在你的 app 中。

你可以通過滑動窗口底部的知識條在多個 Slide Over 的窗口中切換。

第五個例子是「Messages 信息」，它也有不同類型的多窗口。當你把一條消息拖動到屏幕邊緣時，就可以開啓一個單獨的窗口，一個只屬於那個對話的窗口。你會在窗口頂部看到一個完成按鈕，點擊就可以完成這個任務。在瀏覽一條信息時可以同時查看另一條信息作爲參考是非常有幫助的。所以在這種需要另一個頁面同時作爲參考時，就需要支持多窗口功能。

最後一個例子是「Calendar 日曆」，日曆已經支持了拖放功能，但現在通過多窗口功能，你可以在不同的窗口中同時查看兩個不同周的事項，你還可以從一邊拖拽一個事項到另一邊。所以如果你的 app 支持了多窗口的拖放功能，你也可以獲得上面這個功能的強大能力。

今年我們介紹了將 iPad app 帶到 Mac 上去，Mac app 都有多個窗口，如果沒有多窗口功能，Mac app 會非常奇怪。但現在有了 iOS 13 的多窗口功能，這件事就變得更加順理成章了。

那具體用戶可以通過什麼樣的交互打開多窗口功能呢？

首先來看下系統提供了哪些交互。在 App Expose 中，右上角會有一個小按鈕用來打開新的窗口，這是系統自帶的功能。

另外一個就是可以通過拖拽 app 的圖標到屏幕的邊緣開啓多窗口功能，因爲當你那樣操作時，就像是確切的在說我要在這裏開啓一個新的窗口。

再來看下用戶會根據已有的東西做出哪些動作來想開啓多窗口功能。用戶可以直接拖拽 Safari 的某個 tab 到屏幕邊緣來開啓多窗口功能，這種交互系統不能自動幫你實現，但你可以通過 API 適配實現這個交互。

如果用戶可以拖拽起某個對象，並且打開一個新的窗口可以講得通的話，那用戶就期望有這麼一個功能，你應該去實現他。比較普遍的例子就是任何形式的「master-detail view 主要-詳情視圖」，比如在「Mail 郵件」中，左側主視圖中的每一個 cell 都代表着一條消息，如果點擊一條消息，那就可以在詳情視圖中看到完整的消息。所以用戶就會期望當拖起 table view 中的一條消息到屏幕邊緣時可以打開一個新的窗口。