2019-3-6 濤濤
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等，再設計時需要考慮好其中的關聯性，給出最符合用戶心理預期的過渡方式，從而做出最合適的設計。
頁面跳轉在APP中屬于最常見，也是最基礎的一個交互細節點。
我們常見的跳轉方式：直接跳轉、左右跳轉、上下跳轉、翻轉、聯動；其它酷炫的效果我們看過很多，但是現實中能做到的又有幾個呢？
首先我們看一下，我們的視覺順序「閱讀順序」是：左→右，上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式：左右跳轉，上下跳轉。
最原始、最簡單的跳轉方式，web端常見，在APP中出現較少，標簽切換常見，這個比較簡單，沒什么講的。
常用于快速開發，Android中常用。
實現難度：無；
維護成本：無。
最常見的跳轉方式。（ios原生效果）
實現難度：簡單 ；
維護成本：低；
運用場景：夫級→子級→子子級，依次類推。
常用場景：
這里有個細節要注意，就是我們的返回鍵在左上角，也就養成了用戶一種習慣，左上角的鍵，與點擊之后的效果，往往就應該是頁面從右側退出的樣子，與進入時反向的效果。
這也是為什么大部分APP不會把入口按鈕放在左上角的原因。
那么左上角這個位置，除了給返回鍵當做固有的位置外。還常常用于抽屜式導航，因為抽屜式導航的方向，與返回時的移動方向是一致的。常見抽屜式導航APP如：滴滴打車、摩拜單車等。
相對于左右跳轉，上下跳轉就比較難理解了。
實現難度：簡單 ；
維護成本：低。
這種跳轉方式也很常見，但是大部分人不清楚什么時候用，這里我們簡單分析下。
運用場景：
1. 對當前頁面創建新的條目時；
2. 獨立啟動的一個子內容。（如小程序：微信/支付寶等）
比如我們在微信聊天頁，發起一個聊天的時候：
還有我們新添加群人員時，新建筆記本時，新建地址時等。
我們用微信聊天頁面在舉例：點擊＋號離的內容時：圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現，因為這些創建都是對當前聊天窗口一次性產生內容。（大家可以去感受一下這些細節）
下面我們看下百度的設置>地址管理>添加地址：左右>左右>上下。
實現難度：中等；
維護成本：低；
運用場景：完全切換內容，換到一個全新的內容集合里。
常見的有平安好醫生中間的按鈕，一級大姨媽APP中間的商城。
實現難度：高 ；
維護成本：高；
運用場景：元素之間從上級到下級關聯性強。
如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果，因為一旦頁面結構改變，整個效果基本無法復用。
類似于這種強聯動，我們會在很多概念設計稿中看到，但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。
這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口，另一種是搜索框做入口。
icon做入口：更像是上下級關系，常用左右跳轉來實現。比如：抖音。
搜索框做入口：點擊就給與獲取光標的感知，所已做好做簡單的聯動過渡效果。比如：微信、云音樂。
關于其它方式，基本上只有極個別的APP中可以看到。
其它的方式，要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果，因為元素要浮動，為了更加貼合所以有了收縮的效果。
形式上其實就是上下左右內外。考慮好之間的關聯性，給出最符合用戶心理預期的過渡方式，就可以幫助我們找到最合適的設計。
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。