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

水平方向跳轉(zhuǎn)

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

水平方向跳轉(zhuǎn)

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

豎直方向跳轉(zhuǎn)

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

豎直方向跳轉(zhuǎn)

3.頁(yè)面收縮轉(zhuǎn)換
這種頁(yè)面轉(zhuǎn)換方式類似于Material design的懸浮按鈕，點(diǎn)擊后由一個(gè)點(diǎn)放大到覆蓋原有頁(yè)面，在新頁(yè)面點(diǎn)擊關(guān)閉，頁(yè)面縮小恢復(fù)至前一個(gè)頁(yè)面的默認(rèn)狀態(tài)。這句話解釋起來(lái)有點(diǎn)繞口，以下圖微信APP的浮窗功能示例說(shuō)明。

頁(yè)面收縮轉(zhuǎn)換

4.頁(yè)面漸變消失/出現(xiàn)

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

頁(yè)面漸變消失/出現(xiàn)

5.翻頁(yè)效果
在一些讀書類、電子雜志、電子報(bào)刊等移動(dòng)應(yīng)用中，瀏覽翻頁(yè)可以設(shè)置為模仿現(xiàn)實(shí)生活中紙張翻頁(yè)的效果。如下圖示例-掌閱APP，閱讀書籍時(shí)頁(yè)面切換的翻頁(yè)效果。

翻頁(yè)效果

6.頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效
目前很多應(yīng)用中加入了操作流暢的微動(dòng)效，頁(yè)面之間不再是直觀的某個(gè)方向滑動(dòng)，而是使用動(dòng)效引導(dǎo)用戶的視線聚焦。

頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效

使用動(dòng)效的目的是錦上添花，在應(yīng)用滿足可用性和易用性的條件下，巧妙使用微交互中的動(dòng)效，既可以無(wú)形中更好的引導(dǎo)用戶操作，又可以給用戶帶來(lái)愉悅的使用體驗(yàn)。下圖示例-最美應(yīng)用APP頁(yè)面切換的動(dòng)效。

網(wǎng)站欄目：網(wǎng)站與APP移動(dòng)端頁(yè)面跳轉(zhuǎn)常見設(shè)計(jì)方式
分享網(wǎng)址：http://jinyejixie.com/news22/113122.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)