頁面跳(tiào)轉在 APP 中屬于最常見(jiàn)，也是最基礎的一(yī)個交互細節點。我們常見(jiàn)的跳(tiào)轉方式有直接跳(tiào)轉、左右跳(tiào)轉、上(shàng)下(xià)跳(tiào)轉、翻轉、聯動。

其它酷炫的效果我們看(kàn)過很(hěn)多，但(dàn)是現實中能(néng)做(zuò)到的又有幾個呢？在設計時(shí)需要(yào)考慮好其中的關聯性，給出最符合用戶心理預期的過渡方式，從(cóng)而做(zuò)出最合适的設計。

視(shì)覺順序

首先看(kàn)一(yī)下(xià)，我們的視(shì)覺「閱讀順序」是：左→右，上(shàng)→下(xià)。因此延伸出目前 APP 最常見(jiàn)的兩種頁面跳(tiào)轉方式：左右跳(tiào)轉，上(shàng)下(xià)跳(tiào)轉。

直接跳(tiào)轉

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

常用于快(kuài)速開(kāi)發，Android中常用。

• 實現難度：無；
• 維護成本：無。

左右跳(tiào)轉

最常見(jiàn)的跳(tiào)轉方式。（ios原生效果）

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

常用場景：

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

這(zhè)裏有個細節要(yào)注意，就是我們的返回鍵在左上(shàng)角，也就養成了(le)用戶一(yī)種習慣，左上(shàng)角的鍵，與點擊之後的效果，往往就應該是頁面從(cóng)右側退出，與進入時(shí)反向的效果。

這(zhè)也是為(wèi)什麽大部分 APP 不會把入口按鈕放在左上(shàng)角的原因。

那(nà)麽左上(shàng)角這(zhè)個位置，除了(le)給返回鍵當做(zuò)固有的位置外(wài)。還常常用于抽屜式導航，因為(wèi)抽屜式導航的方向，與返回時(shí)的移動方向是一(yī)緻的。常見(jiàn)抽屜式導航的 APP 如(rú)：滴滴打車、摩拜單車等。

上(shàng)下(xià)跳(tiào)轉

相對于左右跳(tiào)轉，上(shàng)下(xià)跳(tiào)轉就比較難理解了(le)。

• 實現難度：簡單；
• 維護成本：低(dī)。

這(zhè)種跳(tiào)轉方式也很(hěn)常見(jiàn)，但(dàn)是大部分人(rén)不清楚什麽時(shí)候用，這(zhè)裏我們簡單分析下(xià)。

運用場景：

• 對當前頁面創建新的條目時(shí)；
• 獨立啓動的一(yī)個子內(nèi)容。（如(rú)微(wēi)信/支付寶小程序等）

比如(rú)我們在微(wēi)信聊天頁，發起一(yī)個聊天的時(shí)候：

還有新添加群人(rén)員(yuán)，新建筆(bǐ)記本，新建地(dì)址時(shí)等。

我們用微(wēi)信聊天頁面舉例：點擊＋号離的內(nèi)容時(shí)，圖片、拍照、位置、紅(hóng)包、收藏等，都(dōu)是采用下(xià)到上(shàng)的方式呈現，因為(wèi)這(zhè)些創建都(dōu)是對當前聊天窗口一(yī)次性産生內(nèi)容。

下(xià)面我們看(kàn)下(xià)百度的設置>地(dì)址管理>添加地(dì)址：左右>左右>上(shàng)下(xià)。

翻轉

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

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

聯動性

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

如(rú) APP store 每日推薦到介紹頁。類似的還有 Behance APP 的作(zuò)品展示。國(guó)內(nèi)APP 很(hěn)少(shǎo)有這(zhè)種聯動效果，因為(wèi)一(yī)旦頁面結構改變，整個效果基本無法複用。

類似于這(zhè)種強聯動，我們會在很(hěn)多概念設計稿中看(kàn)到，但(dàn)是在實際的 APP 是很(hěn)少(shǎo)見(jiàn)到的。因為(wèi)開(kāi)發成本/維護成本都(dōu)很(hěn)高。

搜索頁面打開(kāi)

這(zhè)裏強調一(yī)下(xià)搜索頁面。搜索頁面的進入往往有兩種形式。一(yī)種是 icon 做(zuò)入口，另一(yī)種是搜索框做(zuò)入口。

icon做(zuò)入口：更像是上(shàng)下(xià)級關系，常用左右跳(tiào)轉來實現。比如(rú)：抖音。

搜索框做(zuò)入口：點擊就獲取光(guāng)标的感知，是一(yī)個簡單的聯動過渡效果。比如(rú)：微(wēi)信、雲音樂(yuè)。

其它方式

關于其它方式，基本上(shàng)隻有極個别的 APP 中可(kě)以看(kàn)到。

其它的方式，要(yào)結合實際的情況來考究。一(yī)定要(yào)注意關聯性。比如(rú)微(wēi)信新出的浮動展開(kāi)效果，因為(wèi)元素要(yào)浮動，為(wèi)了(le)更加貼合所以有了(le)收縮的效果。

結語

頁面跳(tiào)轉形式上(shàng)其實就是上(shàng)下(xià)左右內(nèi)外(wài)。考慮好之間(jiān)的關聯性，給出最符合用戶心理預期的過渡方式，就可(kě)以幫助我們找到最合适的設計。