頁面跳轉(zhuǎn)在 APP 中屬于最常見，也是最基礎的一個交互細節(jié)點。我們常見的跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)、聯(lián)動。

其它酷炫的效果我們看過很多，但是現(xiàn)實中能做到的又有幾個呢？在設計時需要考慮好其中的關聯(lián)性，給出最符合用戶心理預期的過渡方式，從而做出最合適的設計。

視覺順序

首先看一下，我們的視覺「閱讀順序」是：左→右，上→下。因此延伸出目前 APP 最常見的兩種頁面跳轉(zhuǎn)方式：左右跳轉(zhuǎn)，上下跳轉(zhuǎn)。

直接跳轉(zhuǎn)

直接跳轉(zhuǎn)是最原始、最簡單的跳轉(zhuǎn)方式，web端常見，在APP中出現(xiàn)較少，標簽切換常見。

常用于快速開發(fā)，Android中常用。

• 實現(xiàn)難度：無；
• 維護成本：無。

左右跳轉(zhuǎn)

最常見的跳轉(zhuǎn)方式。（ios原生效果）

• 實現(xiàn)難度：簡單；
• 維護成本：低；
• 運用場景：父級→子級→子子級，依次類推。

常用場景：

• 對應功能的展開：常以導航形式存在，如美團首頁的美食、電影、住店等分流入口。
• 對于內(nèi)容的展開：如聊天列表>聊天窗；文章列表>到文章詳情。
• 對于活動廣告的展開：banner圖廣告、彈窗廣告等，比較常見。

這里有個細節(jié)要注意，就是我們的返回鍵在左上角，也就養(yǎng)成了用戶一種習慣，左上角的鍵，與點擊之后的效果，往往就應該是頁面從右側(cè)退出，與進入時反向的效果。

這也是為什么大部分 APP 不會把入口按鈕放在左上角的原因。

那么左上角這個位置，除了給返回鍵當做固有的位置外。還常常用于抽屜式導航，因為抽屜式導航的方向，與返回時的移動方向是一致的。常見抽屜式導航的 APP 如：滴滴打車、摩拜單車等。

上下跳轉(zhuǎn)

相對于左右跳轉(zhuǎn)，上下跳轉(zhuǎn)就比較難理解了。

• 實現(xiàn)難度：簡單；
• 維護成本：低。

這種跳轉(zhuǎn)方式也很常見，但是大部分人不清楚什么時候用，這里我們簡單分析下。

運用場景：

• 對當前頁面創(chuàng)建新的條目時；
• 獨立啟動的一個子內(nèi)容。（如微信/支付寶小程序等）

比如我們在微信聊天頁，發(fā)起一個聊天的時候：

還有新添加群人員，新建筆記本，新建地址時等。

我們用微信聊天頁面舉例：點擊＋號離的內(nèi)容時，圖片、拍照、位置、紅包、收藏等，都是采用下到上的方式呈現(xiàn)，因為這些創(chuàng)建都是對當前聊天窗口一次性產(chǎn)生內(nèi)容。

下面我們看下百度的設置>地址管理>添加地址：左右>左右>上下。

翻轉(zhuǎn)

• 實現(xiàn)難度：中等；
• 維護成本：低；
• 運用場景：完全切換內(nèi)容，換到一個全新的內(nèi)容集合里。

常見的有平安好醫(yī)生中間的按鈕，大姨媽APP中間的商城。

聯(lián)動性

• 實現(xiàn)難度：高；
• 維護成本：高；
• 運用場景：元素之間從上級到下級關聯(lián)性強。

如 APP store 每日推薦到介紹頁。類似的還有 Behance APP 的作品展示。國內(nèi)APP 很少有這種聯(lián)動效果，因為一旦頁面結(jié)構(gòu)改變，整個效果基本無法復用。

類似于這種強聯(lián)動，我們會在很多概念設計稿中看到，但是在實際的 APP 是很少見到的。因為開發(fā)成本/維護成本都很高。

搜索頁面打開

這里強調(diào)一下搜索頁面。搜索頁面的進入往往有兩種形式。一種是 icon 做入口，另一種是搜索框做入口。

icon做入口：更像是上下級關系，常用左右跳轉(zhuǎn)來實現(xiàn)。比如：抖音。

搜索框做入口：點擊就獲取光標的感知，是一個簡單的聯(lián)動過渡效果。比如：微信、云音樂。

其它方式

關于其它方式，基本上只有極個別的 APP 中可以看到。

其它的方式，要結(jié)合實際的情況來考究。一定要注意關聯(lián)性。比如微信新出的浮動展開效果，因為元素要浮動，為了更加貼合所以有了收縮的效果。

結(jié)語

頁面跳轉(zhuǎn)形式上其實就是上下左右內(nèi)外。考慮好之間的關聯(lián)性，給出最符合用戶心理預期的過渡方式，就可以幫助我們找到最合適的設計。

歡迎添加作者微信：