在閱讀類產(chǎn)品中，翻頁(yè)效果是一種很常見(jiàn)的交互動(dòng)效，但因?yàn)樯婕爸欣^器等設(shè)置，好多同學(xué)并不會(huì)用Axure操作。本文作者分享了設(shè)計(jì)翻頁(yè)效果的詳細(xì)課程，希望可以幫到大家。

翻書(shū)效果是一種模擬真實(shí)書(shū)本翻頁(yè)動(dòng)作的視覺(jué)效果，常用于網(wǎng)頁(yè)設(shè)計(jì)和應(yīng)用程序中，以增強(qiáng)用戶體驗(yàn)和交互性。這種效果通常通過(guò)動(dòng)畫(huà)和過(guò)渡效果來(lái)模擬書(shū)頁(yè)的翻轉(zhuǎn)，使用戶感覺(jué)像在真實(shí)的書(shū)本中翻頁(yè)一樣。

所以今天作者就教大家怎么在Axure里用中繼器制作制作一個(gè)書(shū)本翻頁(yè)效果，具體效果如下所示：

一、效果展示

1、鼠標(biāo)左右滑動(dòng)或點(diǎn)擊左右箭頭，可以切換至上一頁(yè)或下一頁(yè)，切換期間有模擬翻頁(yè)的動(dòng)畫(huà)效果

2、如果翻到首頁(yè)再繼續(xù)向前翻頁(yè)，或者翻到尾頁(yè)繼續(xù)向后翻頁(yè)，就會(huì)彈出提示彈窗進(jìn)行提醒

3、文字內(nèi)容在中繼器里標(biāo)記，后續(xù)只需維護(hù)中繼器表格，即可填寫上對(duì)應(yīng)的文字

二、制作教程

1. 材料準(zhǔn)備

制作材料包括中繼器、動(dòng)態(tài)面板、矩形、文本標(biāo)簽、三角形

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

1.1 制作書(shū)框架

我們用矩形和三角形、以及文本標(biāo)簽制作書(shū)的框架，三角形用于制作左右按鈕，矩形用于制作頁(yè)面灰色背景以及頁(yè)面內(nèi)容（文字上下左右居中），文本標(biāo)簽，用于制作底部頁(yè)碼

如下圖所示擺放，如果只是做左右滑動(dòng)效果的話，那三角形按鈕可以不需要

1.2 制作提示彈窗

用矩形制作提示彈窗，默認(rèn)隱藏，放置在書(shū)本中部位置

1.3 制作翻書(shū)頁(yè)面

我們用動(dòng)態(tài)面板制作翻書(shū)頁(yè)，需要制作兩個(gè)狀態(tài)頁(yè)面，狀態(tài)1是右側(cè)的頁(yè)面，我們可以把上面做好的右側(cè)頁(yè)面復(fù)制進(jìn)去；狀態(tài)2是左側(cè)頁(yè)面，我們可以把上面做好的左側(cè)頁(yè)面復(fù)制進(jìn)去。

然后放在書(shū)框架的上方，與里面的頁(yè)面對(duì)齊。

1.4 制作中繼器

我們新建一個(gè)中繼器，用來(lái)包括書(shū)本的內(nèi)容，no列對(duì)應(yīng)頁(yè)數(shù)，content列對(duì)應(yīng)該頁(yè)數(shù)的內(nèi)容

中繼器分頁(yè)設(shè)置我們?cè)O(shè)置每頁(yè)顯示項(xiàng)目數(shù)為2，這樣每次只會(huì)加載兩條

這樣基礎(chǔ)的材料就準(zhǔn)備好了，后續(xù)交互需要一些默認(rèn)隱藏的文本，后續(xù)交互制作過(guò)程中也會(huì)提及。

2. 設(shè)置交互

2.1 中繼器每項(xiàng)加載時(shí)的交互

我們是通過(guò)中繼器來(lái)傳值的，我們先要在中繼器外部準(zhǔn)備3個(gè)默認(rèn)隱藏的文本標(biāo)簽，僅用于記錄中繼器里的文字，分別為記錄左側(cè)內(nèi)容，記錄左側(cè)內(nèi)容，記錄頁(yè)數(shù)

在中繼器每項(xiàng)加載時(shí)，如果是奇數(shù)行，那我們用設(shè)置文本的交互，將content列的值設(shè)置到記錄左側(cè)內(nèi)容的文本標(biāo)簽里；如果是偶數(shù)行，我們就用設(shè)置文本的交互，將content列的值設(shè)置到記錄右側(cè)內(nèi)容的文本標(biāo)簽里

我們還要記錄左側(cè)頁(yè)面的頁(yè)數(shù)，如果中繼器里加載的是奇數(shù)行，就用設(shè)置文本的交互，將no列的值設(shè)置到記錄頁(yè)數(shù)的文本里；如果是偶數(shù)列，那我們還要將no列的值先減一，再記錄。

2.2 設(shè)置頁(yè)面內(nèi)容

中繼器加載完成后，在記錄文本里獲取左右兩頁(yè)記錄的文本，我們就用設(shè)置文本的交互，在載入時(shí)，先等待中繼器加載完，然后用設(shè)置文本的交互，將對(duì)應(yīng)的文本值分別設(shè)置到左右頁(yè)面里，這里需要注意，這里我們要把頁(yè)面內(nèi)容左右兩頁(yè)，以及用于翻頁(yè)的動(dòng)態(tài)面板兩個(gè)state里面的兩頁(yè)都設(shè)置

2.3 設(shè)置頁(yè)碼

和前面一樣，中繼器加載完成后，我們獲取到記錄的左側(cè)頁(yè)面的頁(yè)數(shù)，所以我們用設(shè)置文本的交互，將左側(cè)頁(yè)面的頁(yè)面設(shè)置為當(dāng)前記錄的文本，右側(cè)頁(yè)面設(shè)置問(wèn)當(dāng)前記錄的文本值加1，這里需要注意，這里我們要把頁(yè)面內(nèi)容左右兩頁(yè)，以及用于翻頁(yè)的動(dòng)態(tài)面板兩個(gè)state里面的兩頁(yè)都設(shè)置。

設(shè)置好之后，默認(rèn)加載的內(nèi)容就都能顯示了。

2.4 翻頁(yè)效果

這里我們以左箭頭為例展開(kāi)說(shuō)明，首先我們要判斷當(dāng)前頁(yè)是否為第一頁(yè)，用pageindx函數(shù)就可以獲取到中繼器的頁(yè)碼了，如果是第一頁(yè)，我們就不能再往前翻頁(yè)了，所以就用顯示的交互，顯示提示彈窗，因?yàn)榈谝豁?yè)和最后一頁(yè)的提示，是共用一個(gè)提示彈窗的元件的，所以我們先用設(shè)置文本的交互，將里面的文本值設(shè)置為已經(jīng)是第一頁(yè)啦。

那如果不是在第一頁(yè)，那我我們用設(shè)置面板狀態(tài)的交互，將翻頁(yè)的動(dòng)態(tài)面板設(shè)置到state2，相當(dāng)于將左側(cè)的頁(yè)面放上來(lái)，左側(cè)的是透明的。

然后我們用設(shè)置當(dāng)前頁(yè)面的交互，將中繼器設(shè)置為上一頁(yè)，這樣中繼器就會(huì)重新加載傳值，記錄在前面的三個(gè)文本里面，然后我們用設(shè)置文本的交互，要先改面板右側(cè)，就是翻到新頁(yè)面的內(nèi)容設(shè)置上去，默認(rèn)在下面的右側(cè)內(nèi)容是暫時(shí)不用改；然后左側(cè)的內(nèi)容是要先改的，因?yàn)榉饋?lái)之后，就會(huì)看到下面的內(nèi)容，所以需要先更新。兩個(gè)頁(yè)面對(duì)應(yīng)的頁(yè)面也是同樣的道理

然后準(zhǔn)備好之后，我們開(kāi)始翻頁(yè)，用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到上一頁(yè)，動(dòng)畫(huà)效果選擇向右翻轉(zhuǎn)，然后增加一個(gè)動(dòng)畫(huà)時(shí)間，例如2s。

之后我們要懂等待事件，等待動(dòng)畫(huà)結(jié)束，再用設(shè)置文本的將會(huì)，將前面剩下的兩個(gè)頁(yè)面，在設(shè)置回同樣的內(nèi)容，就是通過(guò)這樣一個(gè)時(shí)間差，以及先后顯示內(nèi)容的順序，完成翻頁(yè)的交互。

這里還有一點(diǎn)需要注意的是，如果在動(dòng)畫(huà)時(shí)間里連續(xù)多次點(diǎn)擊按鈕，就會(huì)出現(xiàn)bug，所以在點(diǎn)擊的開(kāi)始，我們可以用禁用的交互，將按鈕禁用，翻頁(yè)結(jié)束后再用啟用的交互，將按鈕啟用。

那右箭頭的交互也是一樣的里，只不過(guò)是和左箭頭相反，大家回去自行制作即可。

2.5 左右滑動(dòng)翻頁(yè)效果

如果我們想通過(guò)鼠標(biāo)拖動(dòng)實(shí)現(xiàn)左右翻頁(yè)的效果，那我們只需要通過(guò)觸發(fā)事件，觸發(fā)左右翻頁(yè)的按鈕，這里需要注意的是，如果我們向左滑動(dòng)，其實(shí)是想翻到下一頁(yè)，所以觸發(fā)的是右箭頭鼠標(biāo)單擊時(shí)的交互；如果是向右滑動(dòng)，其實(shí)是想翻到上一頁(yè)，所以觸發(fā)的是左箭頭鼠標(biāo)單擊時(shí)的交互。

這樣我們就完成了中繼器制作翻書(shū)效果的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里對(duì)應(yīng)頁(yè)面的文字內(nèi)容，預(yù)覽時(shí)就可以自動(dòng)生成效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。