利用好 iPad 的大屏幕 —— 如何爲 iPadOS 14 設計 app？

利用自動佈局、Mac Catalyst、全終端統一購買等技術，許多 app 可以擴展到更多設備和平臺。人們可以有更多機會在所有他們喜歡的設備中選擇一個最適合的去使用他們喜歡的 app。對於設計師和開發者來說，這意味着我們需要聚焦於每個平臺最適合什麼，進一步在每個設備和每個平臺上創造更好的體驗。

一方面，在 Mac 上，你可以利用 Mac 巨大的屏幕，它有着最精確的輸入方法，macOS app 支持所有的那些高級的使用實例和功能，讓每一個人都可以用上它。

另一方面，在 iPhone 上，iPhone app 可以讓你通過多點觸控快速、簡單地隨時隨地地訪問那些最重要的功能。對於這兩者來說，你的 app 的設計方向應該都十分明確。

但對於 iPad 來說呢？因爲 iPad 處於兩者之間，但並不意味着它的使用場景只處於兩者之間。一個好的 iPad app 的目標應該有它的獨特之處，這也是這篇文章想要講的。

在這篇文章中會首先講下在 iPadOS 14 中的 app 中應用的一些設計準則，接着會講一講怎麼把這些設計準則應用到你的 app 中。

Layout 佈局

作爲 iPad 最突出的一點就是它有一塊大屏幕。在你設計一個 iPad app 時，你的第一步就應該是利用好這塊大屏幕來展示你的內容和用戶界面。

下面通過 iPadOS 14 原生 app 的幾個實例來具體看下你該如何實現這一點。

扁平化 app 導航

避免爲了更新屏幕上的一部分內容而出現大的全屏幕的過渡。下圖是 iOS 13 中的「照片」app，你可以選擇一個相冊或者一個媒體類型（如人像），接着它就會滑動過渡到你選擇的具體內容並以全屏展示。這是簡單的、熟悉的，而且這個邏輯在 iPhone 上運轉良好。

在 iPad 上也有着相似的導航結構，但是在屏幕右側有大塊的屏幕空間沒有被利用起來。

所有在 iPadOS 14 中，「照片」app 增加了邊欄來作爲導航，不再有大塊的沒有被利用的空白空間，右側的照片內容可以充滿整個屏幕，左側的邊欄也能發揮它的功能。

這種顯示結構也帶來了另外一個好處。如果你想在 app 中的不同部分切換，去往不同的相冊，查看不同的照片，現在只需要點擊一下就可以了。

同時這個結構也會讓拖放操作更加容易，因爲你要放置的目標，也即你想放置照片的相冊，在屏幕上總是可見的。

展示更多的內容

這是一個很簡單的道理，你在 iPad 上獲得了一塊更大的屏幕，所以爲了填滿它你需要更多的內容。回到 iOS 12，下圖是 iPad 主屏幕的樣子，你可以看到所有的圖標之間的距離是很遠的，它們在空間上是稀疏的。

在 iPadOS 13 中，多增加了一行一列的圖標。而現在在 iPadOS 14 中，進一步增加了新的小組件。現在圖標還是很大，但是你可以一次性看到更多，它更好地利用了整個屏幕空間。

再來看另外一個例子。下圖是 iPadOS 13 中的「文件」app。文件充滿了整個屏幕，看上去已經沒有空白空間可以增加更多了。但是它一次性只展示了 12 個圖標，它可以變得更好。

在 iPadOS 14 中，「文件」app 中的圖標變得更小了，但仍然足夠大到看得清、容易點擊，所以整個 app 仍然是可用的。這是一個通過對可用屏幕空間更好地利用，從而輕微地改變內容密度來讓整個 app 變得更加有效率、更加強大的一個好的示例。現在「文件」app 可以展示原來的三倍數量的圖標。

只要保證你的文本是清晰可讀的，你就應該看看有沒有更好的辦法在你的 app 中展示更多的內容。

添加更多上下文關係

在 iPhone app 中，你總是聚焦於一個特定的事情，因爲在這樣一個小屏幕上只有那麼一點空間去展示內容。但是在 iPad 上，你可以獲得更多的空間用來一次性展示更多的內容。

下圖是在 iPadOS 13 中當你在「文件」app 中重命名一個文件時的樣子，除了能看到重命名的文件你看不到其他東西，但這也意味着你丟失了有關於其他文件的上下文關係。

在 iPadOS 14 中，爲了保持上下文關係，即使你在重命名一個文件時，屏幕上的其他內容也是可用的。你可以使用文件夾的其他文件的名稱來作爲重命名文件的參考。

所以像「文件」app 一樣，檢查你的 app 中有遮罩或者遮擋了屏幕上其他部分內容的地方，看看能否保持上下文關係可見，這會讓你的 app 更加輕量化、更加強大。

另一個例子是彈出框（popover），當你要展示一個東西來自於哪裏的上下文關係時，彈出框很有用。例如，當你在日曆中查看或者編輯某個特定的日程時，彈出框的箭頭可以幫助你知道那個日程來自於哪一天。

進一步來看下 iPadOS 13 中的日曆彈出框，這個彈出框的箭頭只是指向了一個叫「日曆」的按鈕，它沒有給出任何的有用的上下文關係。

所以在 iPadOS 14 中，日曆菜單被移動到和日曆日程同一層級，現在你可以在查看日曆日程或者與日曆日程發生交互的同時，改變不同日曆的可見性，結果會馬上顯示在屏幕右側。

仔細審查你的 app，看看是否有任何的彈出框或者模態菜單，看看它們是否給人們有用的上下文關係，是否擋住你的 app 的其他內容，嘗試着讓那些控件在同一層級而不是相互遮蓋會不會變得更好。如果你的 app 需要同時在 macOS 上運行，更要避免使用模態窗口，因爲 Mac 擁有更大的屏幕和最大的窗口，所以在 macOS 上模態 UI 比在 iPadOS 上使用得更少了。

另一方面，在像 iPhone 上這樣的緊湊型設備上，你可能沒有足夠的空間一次性展示多個東西，你不應該勉強這樣做，你不應該把多個部分的 UI 壓縮到一個屏幕上。當你沒有足夠空間在同一個層級上展示每一件東西時，模態仍然是一個聚焦在一個特定部分內容的好的選擇。

沉浸於內容任務中

有時候，iPad 最神奇的體驗來自於屏幕不只是一塊玻璃時，整個設備會變成內容的一部分，比如在「圖片」app 中翻動書頁或者在「Apple TV」app 中觀看視頻，亦或是在「備忘錄」app 中使用 Apple Pencil 塗塗畫畫。

在「照片」app 中，當你深入編輯一張照片時，它使用了一種爲 iPad 特別設計的自定義的沉浸式佈局。你可以看到所有的控件在屏幕的左側或右側對齊，這樣當你手持 iPad 時可以方便地用兩手使用它們。在大屏幕上，你會看到照片的呈現是賞心悅目的，編輯控件不會蓋住你的照片。

來看另一個例子，在 iPadOS 14 的「音樂」app 中，正在播放界面佔據了整個屏幕，這樣你可以完全聚焦於正在播放的音樂和歌詞。與 Mac 相比較，這種聚焦於一個特定部分內容的能力對於 iPad 來說是獨一無二的、特別的。軟件可以讓硬件本身幾乎消失，就像變成內容的一部分。

Inputs 輸入

iPad 是一個觸控優先的設備，但是從一開始，iPad 就支持多種輸入方式。最開始支持鍵盤，到現在支持 Apple Pencil 和觸控板。最好的 iPad app 是支持所有的這些輸入方式，讓每種輸入方式做自己最擅長的事情。

當然，你應該從多點觸控開始。在 iPadOS 中的每一個東西都被設計成易於點擊或者可以通過快速流暢的手勢進行操作。你的 iPad app 應該總是支持這些觸控交互方式。即使你打算支持其他的輸入方式，但你仍需要確保你的 app 在觸控體驗上是極好的。

在支持多點觸控之後的下一步就是利用 iPadOS 的內建功能支持其他的輸入方式。對於使用妙控鍵盤或者其他鍵盤的用戶來說，你應該在 app 中確保所有的指令都被添加了鍵盤快捷方式。很多人喜歡使用鍵盤快捷方式，如果你的 app 有這些快捷方式，用戶會很喜歡，但這些快捷方式不會阻礙其他用戶的使用。

如果你把你的 app 通過 Mac Catalyst 帶到 Mac 上去，所有的這些鍵盤快捷方式都可以被轉換到 Mac 上，這對於用戶使用很方便。

除了鍵盤，現在 iPad 還支持了觸控板。大多數的觸控板支持都是自動的，因爲在 iPadOS 中所有的內建控件都已經支持觸控板操作。

你也可以把指針系統延伸到任何你添加的自定義控件上或者自定義交互上。有關於 iPadOS 的指針系統，可參考《 iPadOS 指針系統的設計規範 iPadOS Pointing System Design Guideline》。

你也應該支持 Apple Pencil 的隨手寫（Scribble）功能，像指針支持一樣，當你使用系統的文本輸入控件時，你將會自動獲得隨手寫功能的支持。但是如果你有自定義的控件，你應該確保支持隨手寫功能，因爲人們期望在整個設備上的所有 app 中都能使用隨手寫功能。

這就是使用 iPadOS 上各種輸入方式的所有內建功能。有一點值得特別提及的是，各種輸入方式可以同時工作，你可以在 iPad 上把多種輸入方式組合在一起成爲一個交互，這可能會創造很多之前沒有存在過的交互方式。

例如將鍵盤和觸控組合在一起。在 Safari 中，你可以通過在鍵盤上按着 command 鍵時在屏幕上點擊鏈接，從而在新標籤中打開網頁；按着 Option 鍵時在屏幕上點擊鏈接，從而下載一個文件；按着 Ctrl 鍵時點擊鏈接，從而獲取更多操作選項。

在你的 app 中，你也應該支持將多種輸入方式組合在一起使用。你可以支持哪些標準的系統行爲，例如按住 Option 鍵時拖動元素實現複製或者按住 Shift 鍵時點擊元素實現選擇一組元素。

將 Apple Pencil 和觸控組合在一起也是一種方案。在「Loom」app 中，它將 Apple Pencil 和觸控組合在一起以更快地畫出框架。在左邊，你可以通過觸控使用轉盤來選擇哪一個框架是你需要繪製的；在右邊，可以使用 Apple Pencil 繪製實際的動畫框架，這樣就可以大幅提高工作效率。

這就是可以讓你的輸入更加強大的一些方法。

還有最後一點，爲了讓你的 app 變得更加快速，一個核心方法就是讓你的 app 始終保持響應。無論屏幕上發生了什麼，動畫、過渡或者是任何進程，它應該對於各種輸入總是可響應的。

這裏有一個例子，iPadOS 14 的下拉菜單在展開過程中，你就可以通過一個點擊選擇某個操作。如果需要等到菜單完全展開才能操作，那就會感到 app 運行很緩慢，像是 app 跟不上你的思考速度一樣。

另一個例子是在之前當你展開一個下拉菜單時，點擊菜單外面的區域你只可以關閉它，你不能把手勢傳遞到菜單下面的內容。而在 iPadOS 14 中，在展開下拉菜單時，你可以在做出滾動底部內容的手勢時，同時關閉菜單並開始滾動內容，app 一直處於時刻保持可響應的狀態。

這些微小的交互很微不足道，但是當你真正用到的時候，會發現它們很加分。人們會發現無論在什麼情境下，iPad 都會時刻響應用戶的各種輸入方式，這會增強用戶的信心。人們有時候會抱怨動畫過渡太慢，時間過長，需要等它們完成才能繼續操作。如果你的 app 是時刻保持響應的，用戶可以隨時與 app 發生交互，那這些動畫就可以幫助人們獲取情境關係而不是阻擋用戶操作。

Sidebars 邊欄

系統 app 中邊欄的應用

爲了優化 iPad 的佈局，在 iPadOS 14 中的一個核心功能就是邊欄（sidebar）。來看幾個系統 app 的示例。

下圖是 iPadOS 13 中的「家庭」app，你可以看到在標籤欄（tab bar）中有許多空餘的水平空間，這沒能充分利用好 iPad 這塊屏幕。導航到一個特定的房間需要更多的步驟。你需要點擊「房間」標籤，然後打開房間的彈出框，找到你要找的房間，點擊並切換過去。這在當你在黑暗中想打開一盞燈時顯得格外繁瑣。

現在在 iPadOS 14 中，使用邊欄替代了標籤欄，這樣更好地利用了大屏幕，你通過簡單的單次點擊就可以進入任何你想查看的房間，你還可以通過簡單地拖放重新排列房間。

在「音樂」app 中也添加了邊欄，它爲前往整個音樂資料庫的各個部分提供了更快速的導航。

在「文件」app 中的邊欄讓導航和自定義變得比以前更加簡單。新的邊欄支持編輯模式，讓展示、隱藏、重新排序內容變得更加簡單。你也可以簡單地通過拖放動作將重要的內容在邊欄創建一個快捷方式，人們可以按照自己的需要調整邊欄上的內容。邊欄甚至支持收起展開文件夾，你通過一個手指就能重新排列內容。

「照片」app 中也增加了邊欄，讓導航變得更加簡單和快速。內容放置在一個可摺疊的羣組中，你可以把媒體類型羣組摺疊以快速訪問下面的相冊。

如果你點擊邊欄頂部的開關按鈕，邊欄就可以收起來，讓你的照片充滿整個屏幕。

要想再讓邊欄出現，可以從屏幕左側輕掃，這樣就可以讓邊欄以遮罩的形式出現，你可以隨時在需要的時候召喚出邊欄，在需要與內容發生交互時，邊欄又會自動隱藏，你可以專注於照片本身。

當然，你也可以通過點擊邊欄開關按鈕讓邊欄重新出現，而不自動隱藏。

當在豎屏使用情景時，邊欄會自動切換爲遮罩模式，這是爲了確保你的內容在水平方向有足夠的展示空間，同樣地，你可以通過點擊邊欄開關按鈕或者從屏幕左側輕掃重新喚出邊欄。

在 iPad 的多任務模式下也是類似的模式。例如在分屏視圖中沒有足夠的空間顯示邊欄和你的內容，邊欄就會切換成遮罩模式。

來看一下「郵件」app，iPad 上的「郵件」app 的一個特別之處就是它支持三列布局，這對於將郵箱和郵件的層級視覺化非常有幫助。在 iPadOS 13 中，三列的佈局只在最大的 iPad Pro 上是可用的，更小的 iPad 被限制爲只能展示兩列布局。在 iPadOS 14 中發生了變化，所有的 iPad 都可以顯示三列的佈局，在屏幕左側輕掃就可以讓第三列顯示出來，你可以同時查看郵箱、郵件列表和郵件內容。一旦你處理完邊欄上的任務，佈局會自動收回兩列的佈局以爲內容騰出空間。

當邊欄以遮罩樣式出現時，三欄的佈局也可以正常顯示。從屏幕左側輕掃顯示邊欄，如果你需要第三列的內容，繼續向右輕掃，這樣兩個並排的邊欄就會以遮罩樣式顯示在內容上面。現在所有運行 iPadOS 14 的 iPad 都可以使用這種樣式。

在 iPadOS 上創建的邊欄會在 macOS 上被轉換爲 mac 樣式的邊欄，所以對於 Catalyst app 來說，邊欄也是創建導航結構的好方法。

總結一下 iPadOS 14 的新的邊欄功能：

它優化了 iPad 的佈局；
它支持模態編輯和非模態編輯，用戶可以快速導航到對於他們最重要的地方；
它支持多窗口或者多 app 之間的拖放操作；
它的內容可以以可摺疊的羣組形式呈現；
它可以以遮罩形式展示，這樣就不會與其他內容搶佔空間；
可以通過流暢的輕掃手勢讓其出現和隱藏，快速簡單；
把三列布局的優勢帶到了所有的 iPad 上。

Split View 分欄視圖設計規範

iPadOS 14 的邊欄是由之前的 Split View 分欄視圖演化而來，先來看下分欄視圖的設計規範。

Split View 分欄視圖管理着你的 app 中的首要層級的內容層級展示。分欄視圖包括了一個兩列或三列的界面，展示了一個主要列（primary column）、一個可選的補充列（supplementary column）和一個二級的內容面板（content pane）。在主要列中的變化會驅動可選列中的內容變化，進而影響展示的內容。分欄視圖對於在多個內容層級之間進行導航非常有用，像是在郵件中爲了瀏覽每封郵件需要在郵箱和郵件中來回穿行。

分欄視圖可以展示不同的內容，但是許多系統 app 使用一個分欄視圖創建了一個基於邊欄的界面。在這種類型的界面中，主要列展示了一個邊欄，可選的補充列展示了一個列表視圖，二級內容面板展示選擇內容的詳細細節。

在 iPad 上，使用分欄視圖而不是標籤欄（tab bar）：分欄視圖提供了和標籤欄相同的快速導航功能，但可以更好地利用好更大的顯示屏。
爲每個列的類型選擇合適的樣式：主要列展示邊欄時，則使用邊欄的外觀樣式。這個外觀對於 app 的層級導航和展示一系列內容列表都是合適的，比如郵件 app 中的郵箱。補充列展示列表視圖時，使用普通（plain）的邊欄外觀樣式。這個外觀對於展示獨立的內容列表是合適的，像是郵箱中的郵件。具體開發指導可參見「 UICollectionLayoutListConfiguration.Appearance 」。
在主要列和補充列中，始終高亮活躍的選中部分：雖然二級內容面板會變化，但它應該總是與其他列中的清晰可識別的選中內容相關聯。這個選中內容可以幫助人們理解列與列之間的關係，確定前後文關係。
如果合適的話，允許人們在列與列之間拖放內容：因爲分欄視圖提供了對多個內容層級的訪問，人們可以通過在列與列之間拖拽和釋放條目，快速地將其從 app 中的一部分內容移動到另一部分

具體開發指導可參見「 UISplitViewController 」。

Sidebar 邊欄設計規範

Sidebar 邊欄爲 app 提供了層級導航，可以讓用戶快速訪問你的 app 中的首要層級的一系列內容。在邊欄中選擇一個條目可以讓人們導航到一個特定部分的內容中去。例如，在郵件 app 中的邊欄展示了一個所有郵箱的列表，人們可以選擇一個郵箱訪問郵件列表，選擇一封特定的郵件在內容面板展示內容。

你通過使用一個邊欄樣式的列表創建一個邊欄，並把它放在一個 Split View 分欄視圖中的主要列。

在一個邊欄上應用正確的外觀：爲了創建一個邊欄，使用一個 collection view 列表中的邊欄外觀佈局，具體開發指導可參見「 UICollectionLayoutListConfiguration.Appearance 」
使用一個邊欄組織 app 的層級信息：邊欄是一個扁平化信息層級和同時提供對幾個相同層級的信息分類的訪問的好方法。使用一個邊欄快速導航到 app 的核心部分或者首要層級的內容（如文件夾和播放列表）。
任何可能的時候，讓人們自定義一個邊欄的內容：因爲一個邊欄爲你的 app 提供了導航，你可以使用它爲人們提供了快速訪問他們關心的內容的快捷方式。讓用戶來決定哪些條目是最重要的纔是最好的。
不要阻止人們隱藏邊欄：允許人們隱藏邊欄以爲內容創建更多的空間，可以通過內建的邊緣滑動手勢再次顯示邊欄。避免默認情況下隱藏邊欄。
保持邊欄中的標題清晰準確：刪除不必要的和冗餘的詞語。例如，在郵件 app 中就沒有在每個郵箱的標題中出現「郵件」字樣，而是使用了更準確的術語，比如「有旗標」、「草稿」。
通常情況下，避免在一個邊欄中展示超過兩個層級之外的內容：當數據層級超過兩級時，應該在分欄視圖的補充列中使用一個列表視圖。

具體開發指導可參見「 UICollectionLayoutListConfiguration 」。

在你的 app 中添加邊欄

有兩種樣式的 app 導航非常適合邊欄：扁平型和層級型。

扁平型導航使用了一個扁平的結構，第一層級的不同部分的內容具有差不多的比重，你通常會使用標籤欄在不同部分間導航，像是「照片」、「音樂」這種 app。

層級型導航在需要對內容進行組織和在不同層級之間的內容來回橫穿的 app 中更加普遍，像是「郵件」、「備忘錄」這種 app。

除非你的 app 是沉浸型 app 比如遊戲，否則一般都可以歸類爲這兩種導航樣式，這兩種都可以添加新的邊欄。我們可以從已經有 tab bar 的app 說起。Tab bar 是讓導航變得簡單的最有用的工具之一，當你看到 tab bar 時，你能馬上知道自己在哪，可以去往哪裏。使用 iPad 和 iPhone 的用戶也很熟悉 tab bar，所以對於用戶來說也沒有什麼學習成本，它可以清晰地傳達出 app 最重要的幾個部分。所以無論你的 app 多麼複雜，tab 都可以讓你的 app 結構容易理解。