今天討論的主題是網站與APP移動端原生頁面的跳轉方式。從交互角度定義這個概念：“在當前頁面，觸發某個交互動作之后，頁面之間是如何轉換的”。
需要明確的是：自然的跳轉與承接方式、以及整個應用內類似場景的跳轉一致性，既可以幫助用戶更好的建立對產品的認知，也有利于降低用戶的使用成本。
一個應用內可能包含有多種不同的跳轉方式，設計師在設計考量時需要把握好兩點：區分主輔（主要的頁面跳轉方式，以及輔助型頁面跳轉方式）；區分場景（明確跳轉前后頁面之間的關系）。
常見的頁面跳轉方式：
1.水平方向跳轉
可以細分為兩種具體的跳轉方式：左右平移和覆蓋平移。目前絕大多數應用，頁面在水平方向切換，采用“左右平移和覆蓋平移結合的方式”，下圖示例-淘寶APP，由列表頁進入詳情頁的頁面轉換。仔細觀察會發現頁面跳轉過程中：背景頁面在水平方向只移動了部分距離，之后被新頁面覆蓋替換。

水平方向跳轉

也有部分應用，頁面跳轉主要方式是：完全的覆蓋平移。下圖示例-網易嚴選APP，商品列表展示頁面跳轉至商品詳情頁的過程中，背景頁面并未在水平方向移動，新頁面滑入后覆蓋在背景頁面之上。

水平方向跳轉

2.豎直方向跳轉
（1）如果跳轉前后的頁面存在比較緊密的強關聯性，不想讓用戶感知到前后頁面有明顯的隔離感。適合采用“當前頁面給出浮層展示新頁面”的方式。下圖示例-輕芒雜志APP，在文章詳情頁查看本篇文章的全部評論時，文章詳情頁以遮蓋浮層的形式展示用戶的全部評論。

豎直方向跳轉

（2）若用戶在未跳轉前的頁面執行了某個操作，觸發的新頁面目的是執行重要且臨時性的操作，適合采用“在未跳轉前的頁面，從下至上彈出新頁面，且完全遮蓋”。下圖示例-印象筆記APP，創建是工具類應用的核心功能，若未完成新建筆記，則無法查看其他頁面。

豎直方向跳轉

3.頁面收縮轉換
這種頁面轉換方式類似于Material design的懸浮按鈕，點擊后由一個點放大到覆蓋原有頁面，在新頁面點擊關閉，頁面縮小恢復至前一個頁面的默認狀態。這句話解釋起來有點繞口，以下圖微信APP的浮窗功能示例說明。

頁面收縮轉換

4.頁面漸變消失/出現

這種方式是在原有頁面上漸變出現或消失，不存在某個方向的移動。使界面操作輕量化，為用戶建立一種緩壓的心智。下圖示例-騰訊視頻APP，在首頁點擊導航欄右側“更多分類”按鈕，全部頻道頁面在首頁之上漸變出現，點擊全部頻道頁面的關閉按鈕，頁面漸變消失。

頁面漸變消失/出現

5.翻頁效果
在一些讀書類、電子雜志、電子報刊等移動應用中，瀏覽翻頁可以設置為模仿現實生活中紙張翻頁的效果。如下圖示例-掌閱APP，閱讀書籍時頁面切換的翻頁效果。

翻頁效果

6.頁面轉場動效
目前很多應用中加入了操作流暢的微動效，頁面之間不再是直觀的某個方向滑動，而是使用動效引導用戶的視線聚焦。

頁面轉場動效

使用動效的目的是錦上添花，在應用滿足可用性和易用性的條件下，巧妙使用微交互中的動效，既可以無形中更好的引導用戶操作，又可以給用戶帶來愉悅的使用體驗。下圖示例-最美應用APP頁面切換的動效。

網站欄目：網站與APP移動端頁面跳轉常見設計方式
分享網址：http://www.js-pz168.com/news22/113122.html

成都網站建設公司_創新互聯，為您提供服務器托管、手機網站建設、網站設計公司、網頁設計公司、網站建設、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯