為什么有些頁面是從下往上彈出，而有些是從右往左切換的呢？切換方向與什么有關(guān)山卦？本文將帶你系統(tǒng)了解一下厘惦。
橫向切換
目前最多的切換方式是橫向切換，新頁面從屏幕右側(cè)向左滑入涡扼，覆蓋當(dāng)前頁面，通過點(diǎn)擊導(dǎo)航欄后退按鈕（Back button）進(jìn)行返回，或者通過頁面右滑返回氏捞，返回過程中頁面從左往右退出。
橫向切換適用于幾乎所有方式冒版，一方面它有很強(qiáng)的頁面指示元素（列表中的>液茎，導(dǎo)航欄中的返回按鈕）來暗指頁面的跳轉(zhuǎn)方向，另一方面，右滑退出在大屏手機(jī)中的普遍運(yùn)用也使頁面更佳趨向于橫向切換捆等。
橫向切換優(yōu)勢(shì)在于有很強(qiáng)的視覺延續(xù)性和邏輯性滞造。
視覺延續(xù)性。列表中通過頁面在跳轉(zhuǎn)的時(shí)候栋烤，暗示箭頭（disclosure indicator）指示頁面的跳轉(zhuǎn)方向谒养，并表明點(diǎn)擊此行會(huì)跳轉(zhuǎn)到子頁面。狀態(tài)欄一般保持顏色不變明郭，導(dǎo)航欄內(nèi)容發(fā)生改變买窟，頁面元素切換成父集選項(xiàng)中的子集。
邏輯性薯定。通常應(yīng)用的一個(gè)功能會(huì)有很多子集頁面蔑祟，通過橫向頁面的切換告知是不同頁面。一步一步根據(jù)導(dǎo)航欄上的指示沉唠，可以退回最初頁面疆虚。
橫向切換最主要的形式是列表視圖（Table view）。
列表（Table View）
In a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some of their steps—or start over from the beginning—and make different choices. Settings and Mail are good examples of apps that use a hierarchical structure.
列表往往是同一概念層級(jí)的集合满葛，通過點(diǎn)擊列表径簿，頁面不斷進(jìn)行深入。
Display hierarchical information. The plain table style is well suited for displaying a hierarchy of information. Each list item can lead to a different subset of information displayed in another list. Users follow a path through the hierarchy by selecting one item in each successive list. The disclosure indicator tells users that tapping anywhere in the row reveals the subset of information in a new list.
列表中每一行都可以傳遞到不同的子頁面嘀韧，暗示箭頭（disclosure indicator）指示頁面的跳轉(zhuǎn)方向篇亭，并表明點(diǎn)擊此行會(huì)跳轉(zhuǎn)到子頁面。
縱向切換
縱向切換的特點(diǎn)
- 自下而上锄贷，通常是點(diǎn)擊頁面導(dǎo)航欄中（頁面上方）的元素译蒂，并吸附到元素當(dāng)前位置，顯的更加有關(guān)聯(lián)性谊却。
- 縱向切換運(yùn)動(dòng)軌跡比橫向切換更長(zhǎng)柔昼，更容易引起用戶的注意力。
- 縱向切換頁面會(huì)覆蓋頁面底部的tab bar炎辨，頁面不能夠跳轉(zhuǎn)捕透，只能在完成當(dāng)前頁面之后才可以進(jìn)行其它動(dòng)作。
- 縱向切換一般只能通過點(diǎn)擊頂欄的按鈕進(jìn)行退出碴萧，退出成本比右滑退出高乙嘀，更容易讓用戶集中在當(dāng)前頁面。
- 縱向頁面更強(qiáng)調(diào)動(dòng)作的即時(shí)性破喻。通常是通過點(diǎn)擊一個(gè)icon虎谢，呼出一個(gè)即時(shí)任務(wù)，任務(wù)內(nèi)容一般不復(fù)雜曹质，頁面結(jié)構(gòu)沒有層級(jí)上的深入婴噩。
iOS中相同于頁面上滑的效果的還有Action Sheet與Modal View
Paste_Image.png
Action Sheet 相當(dāng)于是最為簡(jiǎn)短的任務(wù)擎场，完成這個(gè)任務(wù)只需要通過點(diǎn)擊不同的選項(xiàng)。
Use an action sheet to:
Provide alternative ways to complete a task. An action sheet lets you to provide a range of choices that make sense in the context of the current task, without giving these choices a permanent place in the UI.
Action Sheet的作用
- 提供一系列完成任務(wù)的可選項(xiàng)
- 上滑的頁面并沒有蓋住全部底部頁面讳推，對(duì)當(dāng)前的任務(wù)有更好的情景感知
- 完成這些任務(wù)并不需要復(fù)雜的工作顶籽，所以不需要給它們跳轉(zhuǎn)額外的頁面玩般，只需在當(dāng)前頁面中以上滑列表的形式展現(xiàn)银觅，保持在頁面當(dāng)前的任務(wù)流中
- 點(diǎn)擊可選項(xiàng)中的任何一項(xiàng)，action sheet消失或者跳轉(zhuǎn)頁面
Modal View
A modal view—that is, a view presented modally—provides self-contained functionality in the context of the current task or workflow.
個(gè)人理解坏为，模態(tài)頁面是一個(gè)提供完成父集頁面中一個(gè)子任務(wù)的頁面究驴。
Use a modal view when you need to offer the ability to accomplish a self-contained task related to your app’s primary function.
A modal view is especially appropriate for a multistep subtask that requires UI elements that don’t belong in the main app UI all the time.
當(dāng)需要提供完成一個(gè)能夠單獨(dú)完成任務(wù)的時(shí)候，可以使用模態(tài)頁面匀伏。
模態(tài)頁面特別適合與當(dāng)前app中UI元素不同的多層級(jí)子任務(wù)洒忧。
模態(tài)頁面相比較action sheet，頁面元素不受限制够颠，可以完成較復(fù)雜的任務(wù)熙侍。
通常展現(xiàn)完成該任務(wù)或者取消該任務(wù)的按鈕，以此來退出頁面履磨。
點(diǎn)擊右下角新建郵件蛉抓，新頁面從下而上滑出，但不占滿整個(gè)屏幕剃诅，表示這個(gè)頁面從屬于父集頁面巷送。
什么時(shí)候使用縱向滑動(dòng)？
1矛辕、創(chuàng)建任務(wù)
任務(wù)內(nèi)容屬于父集頁面笑跛，點(diǎn)擊icon或button，呼出新頁面聊品。因?yàn)轫撁孢\(yùn)動(dòng)方向是從下而上飞蹂，為了保持運(yùn)動(dòng)的一致性，頁面中如果有子頁面翻屈，一般運(yùn)動(dòng)方向也為縱向晤柄。通過點(diǎn)擊頁面頂端取消、完成退出頁面妖胀，沒有返回按鈕芥颈，不能右滑退出。
新建任務(wù)的頁面一般處于編輯狀態(tài)赚抡，和原先瀏覽狀態(tài)頁面UI元素不同爬坑。
- 新建問題
點(diǎn)擊右上角＋按鈕，頁面從下而上滑入涂臣，點(diǎn)擊X盾计，頁面退出售担。
-
新建回答
quora-回答問題
點(diǎn)擊回答問題，頁面從底部彈出署辉，并完成頁面加載族铆，頁面覆蓋整個(gè)父集頁面，點(diǎn)擊取消哭尝，頁面向下滑出哥攘。
- 發(fā)起群聊
- 微博掃一掃功能、
2材鹦、和本頁其他其他內(nèi)容不一樣逝淹，通過使用不同頁面切換方向進(jìn)行切換更加強(qiáng)調(diào)頁面跳轉(zhuǎn)后內(nèi)容的區(qū)別性。
3桶唐、強(qiáng)調(diào)頁面的關(guān)注度
Twitter在聊天頁面使用了頁面上滑動(dòng)作栅葡，退出只能通過點(diǎn)擊cancel。整個(gè)屏幕都被聊天內(nèi)容占滿尤泽，導(dǎo)航欄也被覆蓋欣簇。
