Axure高保真教程:制作書本翻頁效果

1 評論 3219 瀏覽 5 收藏 11 分鐘

在閱讀類產品中,翻頁效果是一種很常見的交互動效,但因為涉及中繼器等設置,好多同學并不會用Axure操作。本文作者分享了設計翻頁效果的詳細課程,希望可以幫到大家。

翻書效果是一種模擬真實書本翻頁動作的視覺效果,常用于網頁設計和應用程序中,以增強用戶體驗和交互性。這種效果通常通過動畫和過渡效果來模擬書頁的翻轉,使用戶感覺像在真實的書本中翻頁一樣。

所以今天作者就教大家怎么在Axure里用中繼器制作制作一個書本翻頁效果,具體效果如下所示:

一、效果展示

1、鼠標左右滑動或點擊左右箭頭,可以切換至上一頁或下一頁,切換期間有模擬翻頁的動畫效果

2、如果翻到首頁再繼續向前翻頁,或者翻到尾頁繼續向后翻頁,就會彈出提示彈窗進行提醒

3、文字內容在中繼器里標記,后續只需維護中繼器表格,即可填寫上對應的文字

原型地址:https://2mwoa3.axshare.com/#g=1&p=翻頁效果

二、制作教程

1. 材料準備

制作材料包括中繼器、動態面板、矩形、文本標簽、三角形

1.1 制作書框架

我們用矩形和三角形、以及文本標簽制作書的框架,三角形用于制作左右按鈕,矩形用于制作頁面灰色背景以及頁面內容(文字上下左右居中),文本標簽,用于制作底部頁碼

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

1.2 制作提示彈窗

用矩形制作提示彈窗,默認隱藏,放置在書本中部位置

1.3 制作翻書頁面

我們用動態面板制作翻書頁,需要制作兩個狀態頁面,狀態1是右側的頁面,我們可以把上面做好的右側頁面復制進去;狀態2是左側頁面,我們可以把上面做好的左側頁面復制進去。

然后放在書框架的上方,與里面的頁面對齊。

1.4 制作中繼器

我們新建一個中繼器,用來包括書本的內容,no列對應頁數,content列對應該頁數的內容

中繼器分頁設置我們設置每頁顯示項目數為2,這樣每次只會加載兩條

這樣基礎的材料就準備好了,后續交互需要一些默認隱藏的文本,后續交互制作過程中也會提及。

2. 設置交互

2.1 中繼器每項加載時的交互

我們是通過中繼器來傳值的,我們先要在中繼器外部準備3個默認隱藏的文本標簽,僅用于記錄中繼器里的文字,分別為記錄左側內容,記錄左側內容,記錄頁數

在中繼器每項加載時,如果是奇數行,那我們用設置文本的交互,將content列的值設置到記錄左側內容的文本標簽里;如果是偶數行,我們就用設置文本的交互,將content列的值設置到記錄右側內容的文本標簽里

我們還要記錄左側頁面的頁數,如果中繼器里加載的是奇數行,就用設置文本的交互,將no列的值設置到記錄頁數的文本里;如果是偶數列,那我們還要將no列的值先減一,再記錄。

2.2 設置頁面內容

中繼器加載完成后,在記錄文本里獲取左右兩頁記錄的文本,我們就用設置文本的交互,在載入時,先等待中繼器加載完,然后用設置文本的交互,將對應的文本值分別設置到左右頁面里,這里需要注意,這里我們要把頁面內容左右兩頁,以及用于翻頁的動態面板兩個state里面的兩頁都設置

2.3 設置頁碼

和前面一樣,中繼器加載完成后,我們獲取到記錄的左側頁面的頁數,所以我們用設置文本的交互,將左側頁面的頁面設置為當前記錄的文本,右側頁面設置問當前記錄的文本值加1,這里需要注意,這里我們要把頁面內容左右兩頁,以及用于翻頁的動態面板兩個state里面的兩頁都設置。

設置好之后,默認加載的內容就都能顯示了。

2.4 翻頁效果

這里我們以左箭頭為例展開說明,首先我們要判斷當前頁是否為第一頁,用pageindx函數就可以獲取到中繼器的頁碼了,如果是第一頁,我們就不能再往前翻頁了,所以就用顯示的交互,顯示提示彈窗,因為第一頁和最后一頁的提示,是共用一個提示彈窗的元件的,所以我們先用設置文本的交互,將里面的文本值設置為已經是第一頁啦。

那如果不是在第一頁,那我我們用設置面板狀態的交互,將翻頁的動態面板設置到state2,相當于將左側的頁面放上來,左側的是透明的。

然后我們用設置當前頁面的交互,將中繼器設置為上一頁,這樣中繼器就會重新加載傳值,記錄在前面的三個文本里面,然后我們用設置文本的交互,要先改面板右側,就是翻到新頁面的內容設置上去,默認在下面的右側內容是暫時不用改;然后左側的內容是要先改的,因為翻起來之后,就會看到下面的內容,所以需要先更新。兩個頁面對應的頁面也是同樣的道理

然后準備好之后,我們開始翻頁,用設置面板狀態的交互,將動態面板設置到上一頁,動畫效果選擇向右翻轉,然后增加一個動畫時間,例如2s。

之后我們要懂等待事件,等待動畫結束,再用設置文本的將會,將前面剩下的兩個頁面,在設置回同樣的內容,就是通過這樣一個時間差,以及先后顯示內容的順序,完成翻頁的交互。

這里還有一點需要注意的是,如果在動畫時間里連續多次點擊按鈕,就會出現bug,所以在點擊的開始,我們可以用禁用的交互,將按鈕禁用,翻頁結束后再用啟用的交互,將按鈕啟用。

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

2.5 左右滑動翻頁效果

如果我們想通過鼠標拖動實現左右翻頁的效果,那我們只需要通過觸發事件,觸發左右翻頁的按鈕,這里需要注意的是,如果我們向左滑動,其實是想翻到下一頁,所以觸發的是右箭頭鼠標單擊時的交互;如果是向右滑動,其實是想翻到上一頁,所以觸發的是左箭頭鼠標單擊時的交互。

這樣我們就完成了中繼器制作翻書效果的原型模板,后續使用也很方便,只需要在中繼器表格里對應頁面的文字內容,預覽時就可以自動生成效果。

那以上就是本期教程的全部內容,感興趣的同學們可以動手試試哦,感謝您的閱讀,我們下期見。

本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 厲害!學習了,很久都沒做過原型交互了

    來自四川 回復