我們都知道移動(dòng)APP設(shè)計(jì)中，除了繼承傳統(tǒng)PC端的翻頁模式之外外，還引入了特有而方便的單手勢(shì)操作的設(shè)計(jì)模式。如果你是一名移動(dòng)APP的愛好者，肯定知道有哪些比較酷的APP翻頁交互效果。

今天要介紹的之前25學(xué)堂介紹過的APP設(shè)計(jì)中用戶體驗(yàn)比較好的“跳轉(zhuǎn)”效果匯總。有點(diǎn)類似或者說雷同！側(cè)重點(diǎn)不一樣。希望對(duì)你們有所收獲！

在web中，頁面的跳轉(zhuǎn)基本都是通過A標(biāo)簽來實(shí)現(xiàn)的。

當(dāng)然也有一些是按鈕，js，彈窗等等跳轉(zhuǎn)效果。但是今天，我們需要闡述的就是關(guān)于APP界面設(shè)計(jì)中的“跳轉(zhuǎn)”動(dòng)作。

下面跟隨25學(xué)堂的小編來跟大家一一了解哪些常見的手勢(shì)翻頁交互效果吧！

1、左右滑動(dòng)

這種方式比較常見，頁面指示器的翻頁模式，就是結(jié)合了左右滑動(dòng)的手勢(shì)操作。

APP左右滑動(dòng)翻頁交互特效實(shí)例

經(jīng)典APP案例：tinder-卡片化滑動(dòng)設(shè)計(jì)App成功案例。

2、上下滑動(dòng)

在查看文章、郵件詳情時(shí)，可通過上下滑動(dòng)手勢(shì)直接進(jìn)入下一篇、上一篇，這樣避免用戶返回列表頁再選擇，減少操作次數(shù)。

APP上下滑動(dòng)翻頁交互特效實(shí)例：

第一個(gè)例子：163的印象筆記iOS7新版，介紹印象最前線的翻頁方式。

在當(dāng)前文章頂部繼續(xù)下滑，顯示上一篇的文章標(biāo)題，用戶可點(diǎn)擊標(biāo)題進(jìn)入上一篇，也可點(diǎn)擊半透明的空白處回到當(dāng)前文章。同樣的，在劃到當(dāng)前文章底部后，繼續(xù)下滑，可顯示下一篇的文章標(biāo)題。

sparrow 在某個(gè)郵件頂部下拉進(jìn)入上一封、底部上滑進(jìn)入下一封。

知乎回答的翻頁，下滑到底部、繼續(xù)滑動(dòng)會(huì)加在下一條回答（右滑手勢(shì)，返回上一級(jí)）

Flipborad 訂閱網(wǎng)站、文章列表的翻頁,手勢(shì)上下滑動(dòng)，類似翻看日歷的效果，頁面下半部分折起 遮蓋 上半部分（右滑手勢(shì)，返回上一級(jí)）

當(dāng)然一個(gè)完整的APP翻頁交互效果肯定是由多種方式并存的。比如左右，加載更多，下一頁，上一頁等等。

下面我們重點(diǎn)講解：使用手勢(shì)翻頁交互操作的優(yōu)點(diǎn)：

1、盡量與用戶的使用習(xí)慣保持一致，符合APP觸控操作設(shè)計(jì)原則；

2、同一頁面內(nèi)，手勢(shì)操作的取舍;盡量不要多用幾個(gè)手勢(shì)操作。

比如現(xiàn)在側(cè)邊欄導(dǎo)航非常流行，如果一個(gè)應(yīng)用的某個(gè)頁面，左滑可呼出側(cè)邊欄導(dǎo)航、也可返回上一級(jí)，這個(gè)時(shí)候用戶就會(huì)很迷糊，操作時(shí)會(huì)對(duì)預(yù)期的結(jié)果有個(gè)懷疑。

3、同一應(yīng)用內(nèi)的操作邏輯需要統(tǒng)一，減輕用戶的記憶負(fù)擔(dān)和學(xué)習(xí)成本，不要用同一種手勢(shì)用于實(shí)現(xiàn)不同的操作

4、引入手勢(shì)操作，增加用戶操作的趣味性和便利性

5、使用良好的手勢(shì)操作，提高APP的閱讀體驗(yàn)和成交率