為什麼iOS交互中，有的二級頁面是橫向切頁，有的是縱向切頁？

07-12

最近用手機發現一個很有意思的交互，可以看下面的GIF圖。iOS中，有的二級頁面是橫向切頁，有的是縱向切頁。於是乎很想知道它們的區別，花了一晚上求助Google，有了初步的答案，跟大家分享。

一、結論

縱向切頁：這個不是二級頁面，而是模態視圖，默認使用從下至上切入。

橫向切頁：這個是常規的二級頁面切換。

二、模態視圖（Model View）

下面引用蘋果iOS 11人機交互規範來解釋模態視圖。

模態視圖的最主要用途，是防止用戶在完成必要的任務之前去做其他事情。簡而言之，就是在一個用戶流程中，如果有必要的任務加進來，那就要彈出模態視圖，做完了再回到原有的正常流程中。

所以我們可以看到很多這樣的例子。比如系統設置中，首頁與Touch ID設置頁，分別是上下級頁面的關係，但是在進入Touch ID設置頁前，先要驗證密碼。所以驗證密碼這步，就交給了模態視圖。驗證完了，再讓你回到原有的流程中。還有我們很熟悉的淘寶，在瀏覽寶貝時突然來了賣家的消息，這時點進IM界面，就是用模態視圖承載的，跟賣家聊完了，退出模態視圖，你繼續逛。下圖是蘋果官方用作模態視圖介紹的例圖。

模態視圖主要的形態有Action Sheet、Alerts、Activity View等。當模態視圖出現在屏幕上時，用戶必須通過點擊相應按鈕或者退出模態來做出選擇。模態視圖可以佔據整個屏幕，就像一整個父試圖（原文是Parent View，有交互的同學可以告訴我有沒有更好的翻譯），比如Popover或者部分彈出窗口。模態視圖通常包括完成和取消按鈕。

模態視圖設計要點：

盡量減少使用。通常來說，用戶喜歡用非線性方式與應用程序交互。當某些任務必須要完成、保存某些數據或者放棄的時候才能繼續使用app的時候，你可以考慮設計一個模態視圖來吸引用戶的注意力。
提供一個明顯且安全的方式來退出模態視圖。確保用戶退出模態視圖的時候，他們能很清楚的知道自己下一步的結果。
確保模態視圖任務簡單、快速、集中注意力。不要使用模態視圖在你的app中再造一個app，如果一個模態視圖任務太複雜，人們在進入模態視圖的時候就會丟失剛才之前進行的任務。對於創建涉及到試圖層次結構的模態任務，要特別小心，因為用戶很可能會忘了剛才自己在幹嘛。如果一個模態任務必須包含子視圖，則提供一個通過層次結構展現的單一路徑和一個清晰的完成路徑。不要隨便使用完成按鈕，除非模態任務結束了。
顯示指定任務的標題，如果合適的話。你還可以在視圖的其他部分提供更全面描述任務或指導的文本。
為一些關鍵或緊急的信息保留Alerts模式。一個Alert會打斷用戶流程，並且需要用戶多一次點擊去忽略提醒。所以一定要讓用戶覺得這個打斷是重要且必要的。
尊重用戶的通知設置。用戶會在應用程序設置中配置來自你的應用程序的通知。你需要尊重用戶的設置，不要把用戶逼到去關閉系統通知。
不要在Popover上顯示模態視圖。除了Alerts外，任何東西都不能出現在Popover中。在極少數的情況下，如果你需要在Popover中觸發行為後顯示模態視圖，你應該在模態視圖顯示之前關閉Popover。
模態視圖的樣式要和你的主應用和諧一致。比如，如果你的模態視圖還包含導航欄，你最好保持和主應用程序相同的導航欄視覺設計。
選擇一個合適的模態視圖樣式。比如下面這幾種。

全屏。覆蓋整個屏幕，可以在模態視圖中完成複雜的任務。
Page Sheet。在大屏設備上，可以覆蓋大面積的底層內容。所有沒被覆蓋的區域都會被調暗，免得用戶發生誤交互。如果是在小屏設備上，那就是覆蓋全屏了，而且是縱向覆蓋。用於在模態視圖中完成複雜任務。
Form Sheet。對於大屏設備，顯示在屏幕中心，如果鍵盤處於激活狀態，可以重新定位。所有沒激活的區域將調暗，免得用戶發生誤交互。在小屏設備上，那就是覆蓋全屏。主要用於收集信息。
當前環境。與它的父視圖相同大小。僅用於大屏設備的分屏視圖、Popover或其它非全屏視圖中。

選擇適當的過度樣式。使用與App和諧一致的動畫切換風格，增強用戶對臨時環境轉換的感知。默認的切換動畫是垂直從屏幕底部至上切入，並在退出模態視圖後原圖切回。翻轉式動畫切換一般用於橫屏切換。從視覺上看，模態視圖看起來像當前視圖的反面。一旦結束就會切回來。在整個App中呈現一致的動畫切換風格。

三、導航

導航的設計應該是自然且「隱於無形」，除非用戶覺得不符合他們的使用預期，否則他們是不會在意導航是怎麼設計的。PM的工作就是需要設計一套合理的導航系統，用以支撐你的App的架構以及產品目標，而且要符合用戶的使用習慣。導航應該讓用戶覺得自然且親切，而且不能喧賓奪主。在iOS中，有三種導航樣式，在我們這次提到的兩種「切頁方式」中，除了模態視圖的「縱向切頁」外，剩下的橫向切頁就是其中一種樹形導航結構，又叫階層式導航。

很好理解，用戶從頂層出發，在每一層做出一個選擇，直到用戶想要的最終結果。如果需要改到另外一個最終頁面，則需要原路返回，到合適的節點，重新做出選擇，前往下一個通路。在iOS中，設置與郵件使用這種導航樣式。

始終提供清晰的路徑結構。用戶需要始終清楚他們在你的App中處於什麼位置，並需要知道怎麼到達他們想要的下一個目標頁面。暫且不管你的導航樣式，你的導航路徑必須是有邏輯的、可預測的、容易跟蹤的。大體上，每一屏上只給用戶一條路徑。如果他們需要在一屏上看到多樣化的內容，可以考慮使用Action Sheet、Alerts、Popover或者模態視圖。
設計足夠簡潔迅速的信息結構。讓用戶儘快能通過導航得到內容，最好是最少的點擊、最少的操作、最少的頁面層級
巧妙使用手勢操作。用好手勢操作可以使你的交互效率大大提高。比如，你可以讓用戶從屏幕邊緣滑動回上一頁。
使用標準導航控制項。無論何時，你都要使用標準的導航控制控制項，比如頁面控制、Tab按鍵、切分控制項、表格控制項、集合視圖、分屏視圖。用戶們對這些東西都很熟悉了，有助於降低用戶的學習門檻。
使用導航條來遍曆數據的層級結構。導航條的標題可以告訴用戶當前頁面在導航系統中的層級，返回按鈕可以很輕鬆的讓用戶回到上一級。