這4個(gè)常見的差異化設(shè)計(jì)，同時(shí)也是符合 iOS 人機(jī)界面指南所描述的界面設(shè)計(jì)三大要點(diǎn)的：導(dǎo)航、視圖、控件。

最近入手了一臺(tái)二手 iPad mini 2，體驗(yàn)了一些比較熱門的 iOS 應(yīng)用在 iPad 端的交互設(shè)計(jì)，發(fā)現(xiàn)一些應(yīng)用為了保證 iPad 端的用戶體驗(yàn)，在應(yīng)用框架層的設(shè)計(jì)上與 iPhone 端存在一定的差異化。

首先，手持式設(shè)備的導(dǎo)航及頁面布局設(shè)計(jì)除了要實(shí)現(xiàn)產(chǎn)品目標(biāo)之外，還需要考慮用戶的使用場(chǎng)景和最舒適的握持方式。與 iPhone 不同的是，由于屏幕和設(shè)備尺寸較大，iPad 會(huì)有3種握持方式：雙手、單手、工具握持（比如支架），考慮到設(shè)備重量和使用場(chǎng)景，其中最為常見的是雙手握持和工具（支架）握持。因此，iPad 的最佳操作舒適區(qū)和熱區(qū)也會(huì)因?yàn)槲粘址绞降牟煌煌?，雙手握持的最佳操作舒適區(qū)在屏幕左右兩側(cè)；支架握持時(shí)則是全屏幕，這與 iPhone 是有差別的。

比較之后發(fā)現(xiàn)，同一個(gè)應(yīng)用在 iPad 和 iPhone 兩種設(shè)備上的常見的差異化設(shè)計(jì)主要表現(xiàn)在4個(gè)方面：導(dǎo)航欄、標(biāo)簽欄、窗口、視圖布局。當(dāng)然，兩種設(shè)備使用一套 UI 的 APP 除外。

一、 導(dǎo)航欄控件的差異化

Navigation Bars（導(dǎo)航欄）顯示在應(yīng)用程序屏幕的頂部，位于狀態(tài)欄下方，并可通過一系列分層屏幕進(jìn)行導(dǎo)航。當(dāng)顯示一個(gè)新的屏幕時(shí)，一個(gè)后退按鈕（通常標(biāo)有前一個(gè)屏幕的標(biāo)題）出現(xiàn)在該條的左側(cè)。有時(shí)，導(dǎo)航欄的右側(cè)包含一個(gè)控件，如 Edit 或 Done 按鈕，用于管理活動(dòng)視圖中的內(nèi)容。 ——《iOS人機(jī)界面指南》

導(dǎo)航欄除了后退、標(biāo)題、操作這3個(gè)常見元素之外，還可以存在「分段控件」，這時(shí)候標(biāo)題元素就不會(huì)存在。

iPad 設(shè)備中的系統(tǒng)日歷，在導(dǎo)航欄里通過分段控件，實(shí)現(xiàn)日、周、月、年4種視圖的快速切換；而在 iPhone 設(shè)備中，則是通過導(dǎo)航欄左側(cè)的返回按鈕，實(shí)現(xiàn)不同視圖的切換。

二、標(biāo)簽欄位置的差異化

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

對(duì)于 iOS 主流手持式設(shè)備 iPhone 來說，屏幕底部的標(biāo)簽欄是最為常見的功能切換方式。那么為了保證用戶對(duì)系統(tǒng)的主要功能的認(rèn)知一致性，個(gè)人認(rèn)為：iPad 在設(shè)計(jì)導(dǎo)航時(shí)，首先要盡量保證標(biāo)簽欄內(nèi)容和功能的一致性，其次需要考慮握持方式和屏幕尺寸等因素，對(duì)標(biāo)簽欄位置、大小、視覺效果進(jìn)行優(yōu)化和調(diào)整。

iPad 設(shè)備中的網(wǎng)易云音樂HD 和印象筆記應(yīng)用，將標(biāo)簽欄放在了屏幕的左側(cè)，適應(yīng)了 iPad 設(shè)備的最佳握持手勢(shì)，方便點(diǎn)擊切換；而 iPhone 設(shè)備中的標(biāo)簽欄按照《iOS人機(jī)界面指南》放在了屏幕底部，同時(shí)這也符合 iPhone 的握持手勢(shì)和點(diǎn)擊舒適區(qū)域。

三、 窗口形式的差異化

1. Popovers

由于 iPad 設(shè)備屏幕較大，有著天生的空間優(yōu)勢(shì)，以至于在 iPad 設(shè)備上經(jīng)常會(huì)出現(xiàn)「Popovers 」形式的彈出式窗口。如果 Popovers 運(yùn)用得當(dāng)，可以極大地提升用戶任務(wù)流的操作效率，因?yàn)樗鼪]有遮擋當(dāng)前場(chǎng)景下的背景內(nèi)容，讓用戶感覺到他們并沒有離開這個(gè)「空間」。

Popovers 是一個(gè)瞬時(shí)視圖，當(dāng)您點(diǎn)擊某個(gè)控件或某個(gè)區(qū)域時(shí)，它會(huì)出現(xiàn)在屏幕上的其他內(nèi)容上方或附近。通常，彈出窗口包含指向其出現(xiàn)位置的箭頭。Popovers 可以是非模態(tài)或模態(tài)的。通過點(diǎn)擊屏幕的另一部分或彈出窗口上的按鈕，可以解除非模態(tài)彈出窗口。點(diǎn)擊彈出窗口上的取消或其他按鈕即可解除模態(tài)彈窗。 ——《iOS人機(jī)界面指南》

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

2. Modality

相比而言，iPhone 的屏幕空間較小，因此在 iPhone 應(yīng)用中，通常會(huì)在全屏模式 Modality 窗口中呈現(xiàn)相關(guān)信息而不是在彈出窗口中占用較小的屏幕空間。

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

iPad 的系統(tǒng)日歷APP，新建日程采用的是 Popovers 彈出式窗口，充分利用了屏幕的空間優(yōu)勢(shì)；iPhone 的新建日程，考慮到屏幕空間因素，則是從屏幕底部滑出一個(gè)全屏式 Modality 窗口。

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

照片應(yīng)用中，確認(rèn)刪除照片的窗口也存在差異性。

iPad 的 Mindnode 應(yīng)用，大綱窗口是 Popovers 彈出式窗口，可以顯示/隱藏，以及調(diào)整窗口的高度；iPhone 里，大綱是 Modality 窗口，用戶需要關(guān)閉或收起這個(gè)窗口才可以進(jìn)行其他操作。

四、視圖布局的差異化

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

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

iPad 存在豎屏和橫屏兩種屏幕方向，而分割視圖是一種很靈活的視圖布局設(shè)計(jì)方式，能夠很好的應(yīng)對(duì) iPad 屏幕方向的切換。

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

△ iOS12的系統(tǒng)股市應(yīng)用

△ iOS12的系統(tǒng)語音備忘錄

△ Youtube

△ Bear

iPad 的網(wǎng)易云音樂HD應(yīng)用，當(dāng)用戶在歌單列表點(diǎn)擊某一個(gè)首歌的評(píng)論按鈕時(shí)，評(píng)論列表會(huì)從屏幕右側(cè)滑入，并將歌單列表向左推移。通過分割視圖很好地表現(xiàn)了父子視圖的關(guān)系。

總結(jié)

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

作者：王晗陵，微信公眾號(hào)“設(shè)計(jì)意志”（ID：D-Minder）

本文由 @王晗陵?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議