這4個常見的差異化設計，同時也是符合 iOS 人機界面指南所描述的界面設計三大要點的：導航、視圖、控件。

最近入手了一臺二手 iPad mini 2，體驗了一些比較熱門的 iOS 應用在 iPad 端的交互設計，發現一些應用為了保證 iPad 端的用戶體驗，在應用框架層的設計上與 iPhone 端存在一定的差異化。

首先，手持式設備的導航及頁面布局設計除了要實現產品目標之外，還需要考慮用戶的使用場景和最舒適的握持方式。與 iPhone 不同的是，由于屏幕和設備尺寸較大，iPad 會有3種握持方式：雙手、單手、工具握持（比如支架），考慮到設備重量和使用場景，其中最為常見的是雙手握持和工具（支架）握持。因此，iPad 的最佳操作舒適區和熱區也會因為握持方式的不同而不同，雙手握持的最佳操作舒適區在屏幕左右兩側；支架握持時則是全屏幕，這與 iPhone 是有差別的。

比較之后發現，同一個應用在 iPad 和 iPhone 兩種設備上的常見的差異化設計主要表現在4個方面：導航欄、標簽欄、窗口、視圖布局。當然，兩種設備使用一套 UI 的 APP 除外。

一、 導航欄控件的差異化

Navigation Bars（導航欄）顯示在應用程序屏幕的頂部，位于狀態欄下方，并可通過一系列分層屏幕進行導航。當顯示一個新的屏幕時，一個后退按鈕（通常標有前一個屏幕的標題）出現在該條的左側。有時，導航欄的右側包含一個控件，如 Edit 或 Done 按鈕，用于管理活動視圖中的內容。 ——《iOS人機界面指南》

導航欄除了后退、標題、操作這3個常見元素之外，還可以存在「分段控件」，這時候標題元素就不會存在。

iPad 設備中的系統日歷，在導航欄里通過分段控件，實現日、周、月、年4種視圖的快速切換；而在 iPhone 設備中，則是通過導航欄左側的返回按鈕，實現不同視圖的切換。

二、標簽欄位置的差異化

Tab Bars（標簽欄）出現在應用程序屏幕的底部，并提供在應用程序不同部分之間快速切換的功能。標簽欄是半透明的，可以具有背景色調，在所有屏幕方向上保持相同的高度，并且在顯示鍵盤時隱藏。 ——《iOS人機界面指南》

對于 iOS 主流手持式設備 iPhone 來說，屏幕底部的標簽欄是最為常見的功能切換方式。那么為了保證用戶對系統的主要功能的認知一致性，個人認為：iPad 在設計導航時，首先要盡量保證標簽欄內容和功能的一致性，其次需要考慮握持方式和屏幕尺寸等因素，對標簽欄位置、大小、視覺效果進行優化和調整。

iPad 設備中的網易云音樂HD 和印象筆記應用，將標簽欄放在了屏幕的左側，適應了 iPad 設備的最佳握持手勢，方便點擊切換；而 iPhone 設備中的標簽欄按照《iOS人機界面指南》放在了屏幕底部，同時這也符合 iPhone 的握持手勢和點擊舒適區域。

三、 窗口形式的差異化

1. Popovers

由于 iPad 設備屏幕較大，有著天生的空間優勢，以至于在 iPad 設備上經常會出現「Popovers 」形式的彈出式窗口。如果 Popovers 運用得當，可以極大地提升用戶任務流的操作效率，因為它沒有遮擋當前場景下的背景內容，讓用戶感覺到他們并沒有離開這個「空間」。

Popovers 是一個瞬時視圖，當您點擊某個控件或某個區域時，它會出現在屏幕上的其他內容上方或附近。通常，彈出窗口包含指向其出現位置的箭頭。Popovers 可以是非模態或模態的。通過點擊屏幕的另一部分或彈出窗口上的按鈕，可以解除非模態彈出窗口。點擊彈出窗口上的取消或其他按鈕即可解除模態彈窗。 ——《iOS人機界面指南》

Popovers 非常適合在大屏幕設備上使用，它可以包含各種元素，包括導航欄、工具欄、選項卡欄、表、集合、圖像、地圖和自定義視圖。當彈出窗口可見時，通常會禁用與其他視圖的交互，直到彈出窗口被解除。

2. Modality

相比而言，iPhone 的屏幕空間較小，因此在 iPhone 應用中，通常會在全屏模式 Modality 窗口中呈現相關信息而不是在彈出窗口中占用較小的屏幕空間。

Modality 通過阻止人們完成任務或消除信息或觀點之前做其他事情來創造焦點窗口。操作表單、警告、和活動視圖時會出現模式窗口。當模態視圖出現在屏幕上時，用戶必須通過點擊按鈕或退出模態體驗來做出選擇。某些應用程序可以實現模式視圖，例如在日歷中編輯事件或在 Safari 中選擇書簽。模態視圖可占據整個屏幕、整個父視圖（如彈出窗口）或屏幕的一部分。模態視圖通常包括退出視圖的完成和取消按鈕。 ——《iOS人機界面指南》

iPad 的系統日歷APP，新建日程采用的是 Popovers 彈出式窗口，充分利用了屏幕的空間優勢；iPhone 的新建日程，考慮到屏幕空間因素，則是從屏幕底部滑出一個全屏式 Modality 窗口。

iPad 的系統地圖應用，共享窗口也是在按鈕附近顯示 Popovers；iPhone 設備里則是從底部劃出 Modality 窗口。

照片應用中，確認刪除照片的窗口也存在差異性。

iPad 的 Mindnode 應用，大綱窗口是 Popovers 彈出式窗口，可以顯示/隱藏，以及調整窗口的高度；iPhone 里，大綱是 Modality 窗口，用戶需要關閉或收起這個窗口才可以進行其他操作。

四、視圖布局的差異化

在 iPhone（除 Plus）設備中，由于屏幕尺寸較小，因此系統和應用基本上只提供了小屏幕下的豎屏交互體驗，而對于較大屏幕的 iPad 來說，考慮到屏幕空間的優勢以及最佳握持手勢這兩個重要因素，對應用的試圖布局進行差異化設計是非常有必要的。

Split Views（分割視圖）管理兩個并排的內容窗格的呈現，主窗格中包含永久性內容，輔助窗格中包含相關信息。每個窗格可以包含各種元素，包括導航欄，工具欄，選項卡欄，表格，集合，圖像，地圖和自定義視圖。分割視圖通常用于可過濾的內容；主窗格中將顯示過濾器類別列表，并且所選類別的過濾結果將顯示在輔助窗格中。如果您的應用需要它，主窗格可以覆蓋次窗格，并且可以在不使用時隱藏在屏幕外。這在設備處于縱向方向時特別有用，因為它可以在輔助窗格中查看更多內容。 ——《iOS人機界面指南》

iPad 存在豎屏和橫屏兩種屏幕方向，而分割視圖是一種很靈活的視圖布局設計方式，能夠很好的應對 iPad 屏幕方向的切換。

通常情況下，分割視圖將屏幕的三分之一給到主窗格，三分之二給到次窗格。

△ iOS12的系統股市應用

△ iOS12的系統語音備忘錄

△ Youtube

△ Bear

iPad 的網易云音樂HD應用，當用戶在歌單列表點擊某一個首歌的評論按鈕時，評論列表會從屏幕右側滑入，并將歌單列表向左推移。通過分割視圖很好地表現了父子視圖的關系。

總結

在為 iPad 和 iPhone 這兩類 iOS 設備設計信息架構框架時，首先要保證用戶對系統/產品功能的認知一致性，其次需要基于用戶場景和最佳握持手勢，對導航欄、標簽欄、窗口以及視圖布局進行必要的差異化設計。我想，這4個常見的差異化設計，同時也是符合 iOS 人機界面指南所描述的界面設計三大要點的：導航、視圖、控件。

作者：王晗陵，微信公眾號“設計意志”（ID：D-Minder）

本文由 @王晗陵?原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議