本文作者將與我們分享如何使用Axure創(chuàng)建H5活動頁面，而不討論此頁面交互的合理性。享受?

最近，我開發(fā)了一個H5活動頁面。那時，我只是畫了一個線框。活動結(jié)束后，我沒有玩游戲而且我單身，因為我下班后感到無聊（你看，為了防止低調(diào)的鍵盤男人噴霧&ldquo Studying Axure有尷尬的意思，邏輯上嚴格的資格產(chǎn)品經(jīng)理補充說，并花了一些時間制作高保真原型，如下（避免廣告懷疑，更換所有圖片和文字）：

點擊此處預(yù)覽

正如你所看到的，它是一個相對簡單的頁面，但無數(shù)比我做的更簡單。甚至……簡單的頁面，人們已經(jīng)開始寫文章，大多數(shù)寫作例程都是先行。第二步，第三步，看到它后，等著你重復(fù)，似乎已經(jīng)進入了北京的迷霧，我不得不要求“大申”發(fā)送一個源文件供以后學(xué)習(xí)（抄襲），這是一個很好的見證。 “我聽過很多真相，但我的生活仍然很糟糕?！鄙踔?hellip;…復(fù)制對今生來說并不好，雖然我很慚愧，因為我沒有復(fù)制它，不，它太好了… &hellip這是我生命的前半部分，但最后我還是不能原諒它。我也分兩步學(xué)習(xí)整套步驟。

當(dāng)然，本文并未談及此頁面交互的合理性，純粹是從如何使用Axure進行分析。

互動過程

也就是說，在獲得頁面后，從直觀的交互或流行的點，從直觀的視圖，你可以得到聲音，看看它是什么樣的：

打開頁面后，您將看到一張圖片，然后底部的箭頭會搖晃并搖晃，誘使您向上拖動

所以，忍不住將手指向上拖動到屏幕上，它是一個頁面，底部的箭頭仍然在顫抖，繼續(xù)拖動

拖了幾頁之后，底部的箭頭消失了，但是因為我之前已經(jīng)拖出了慣性，我沒有停下車，所以我下意識地把它拖了下來，或者及時停了車，看到了誘餌點擊頁面。該區(qū)域，只是轉(zhuǎn)到下一個，所以頁面會彈出一個帶有段落的窗口，以及一個巨大的分享按鈕

所以我受到文本信息的誘惑，我以為我已經(jīng)滑了這么多頁面。我只想再次分享。我會下意識地分享圖片上的分享按鈕。眾所周知，微信不支持直接點擊共享。微信附帶共享按鈕進行分享，但是因為有些用戶還沒有意識到它，所以另一層提示用戶通過微信右上角的按鈕然后共享它。至于最終用戶要分享，這取決于命運。 p>

那么，從用戶操作過程的角度來看，它可能就是這樣一個交互過程。

邏輯分裂

這弄明了整個頁面的流程，是否可以直接逐步啟動原型？當(dāng)然不。這就像拿一塊牛排，只是直接咬它，除非它與普通人不同，或者它根本不是一個人，否則你必須拿刀和叉來比較筆畫。

在這里，根據(jù)整個交互過程，我們可以先拆分它。不同生活習(xí)慣和不同思維方式的人面對這樣一個頁面，肯定會有不同的拆解方法，即使我自己也在做這個頁面。當(dāng)時，我已經(jīng)考慮了幾種分割方法，并且我已經(jīng)考慮了每種分割模塊的幾種實現(xiàn)方法。讓我談?wù)勎易罱K使用的分裂：

主頁：可以切換以切換圖像的頁面，當(dāng)然，您也可以切換回上一個圖像

彈出窗口：單擊滑動到最后一張圖片時想要單擊的區(qū)域，或者繼續(xù)彈出彈出窗口

遮罩：點擊彈出窗口進行分享，會出現(xiàn)灰色圖層，再次點擊灰色圖層，遮罩將消失

箭頭：一個循環(huán)顯示前幾頁的動畫（即一直在搖晃），箭頭在最后一頁消失

完成上述所有頁面的邏輯，然后將它們組合在一起

在第一次分裂過程之后，我不知道它是否有一些想法。也許我知道我腦子里的方向？然后，繼續(xù)。

“支持解決方案”

經(jīng)過上面的分析，也許這個想法更加清晰，雖然這個頁面很簡單，但這次可能仍然覺得還有細節(jié)，比如將牛排切成幾塊大塊，只為自己找出大小的嘴太高估了。叉子掉到嘴邊，發(fā)現(xiàn)有點堵塞，所以我不得不把它拿出來繼續(xù)切割。

然后繼續(xù)拆分，原則是在拆分后總是拆分每個模塊，以便能夠讓它停止拆分：

1.主頁

一個可以滑動以切換圖片的頁面，當(dāng)然，您也可以切換回上一張圖片。

（1）主頁中的圖片列表可以上下拖動

（2）圖像始終顯示在屏幕的可見范圍內(nèi)

分析：

因為存在拖動，所以首先想到的是使用動態(tài)面板;由于拖動結(jié)束或進程，頁面將發(fā)生變化，因此動態(tài)面板中應(yīng)該有多個狀態(tài);然后不同的頁面屬于不同的狀態(tài)。添加相關(guān)操作以在拖動相關(guān)事件中設(shè)置面板狀態(tài)

說明您需要一整套來控制可見范圍，例如將拖動的動態(tài)面板嵌套在固定大小的動態(tài)面板中

2.彈出窗口

滑動到最后一張圖片時，單擊誘惑點擊的區(qū)域，或者繼續(xù)彈出出現(xiàn)的彈??出窗口。

（1）滑動到最后一頁繼續(xù)向上滑動會出現(xiàn)

（2）滑動到最后一頁并單擊要顯示的區(qū)域的下半部分

（3）最后一頁返回上一頁，然后滑到最后一頁，將重置為初始狀態(tài)

分析：

結(jié)合之前的分析，您可以在動態(tài)面板的最后一個狀態(tài)中進行一些特殊處理。例如，拖動結(jié)束時的事件將添加彈出窗口的操作

結(jié)合之前的分析，在動態(tài)面板的最后一個狀態(tài)中，您需要設(shè)置click事件并添加彈出窗口的操作

請注意，當(dāng)拖動結(jié)束時，應(yīng)隱藏彈出窗口，或者應(yīng)將動態(tài)面板的狀態(tài)切換到初始狀態(tài)

3.蒙古層

單擊彈出窗口進行共享，將出現(xiàn)灰色蒙版，再次單擊灰色蒙版，蒙版將消失。

（1）單擊“共享”按鈕以顯示灰色掩碼

（2）單擊遮罩，遮罩消失

分析：

在共享按鈕上添加了單擊事件，并添加了一個單擊以彈出灰色蒙版。

在灰色蒙版上添加了單擊事件，并添加了單擊

箭頭

在前幾頁中，動畫循環(huán)播放（即，它一直在搖動），最后一頁上的箭頭消失。

（1）循環(huán)顯示的動畫

（2）最后一張圖片底部沒有箭頭

分析：

動畫效果可以分為箭頭，箭頭向上移動，箭頭隱藏整個過程，然后循環(huán)，如何循環(huán)，這需要考慮

說明有必要根據(jù)主頁動態(tài)頁面切換的狀態(tài)判斷是否顯示箭頭

具體實施

可以說，基本思想和操作方法已經(jīng)非常清楚了?；旧?，每塊切好的肉都可以送到嘴里，然后你可以開始用Axure書寫，然后我省略了一些非關(guān)鍵步驟，并向你展示了如何實現(xiàn)它。當(dāng)你實現(xiàn)它時，你應(yīng)該注意如何實現(xiàn)上述分析，而不是僅考慮復(fù)制步驟，畢竟是權(quán)威人士。這不一定是真的，其他人不一定說得好，甚至每個人都可以提出更好的解決方案：

1.主頁

（1）在移動電話屏幕的可見范圍內(nèi)添加動態(tài)面板（外部容器），移除導(dǎo)航欄和系統(tǒng)欄后，其大小與屏幕大小相同。這是為了將內(nèi)部內(nèi)容控制在這樣的范圍內(nèi)。 。

（2）在動態(tài)面板的默認狀態(tài)下，添加動態(tài)面板（圖片主頁），用于切換圖片狀態(tài)。

（3）在圖像主頁的動態(tài)面板中添加多個狀態(tài)，并在每個不同的狀態(tài)下放置圖片。

（4）為了使頁面可拖動，在圖像主頁的動態(tài)面板中，添加向上拖動和向下拖動結(jié)束的事件，分別在事件中添加相應(yīng)的動作（即設(shè)置面板狀態(tài)向上滑動并將面板狀態(tài)設(shè)置為向下滑動。對于人性化，您還可以設(shè)置相應(yīng)的進入和退出動畫。

2.彈出窗口

我在這里使用的方法是在動態(tài)面板的最后一個狀態(tài)（圖像主頁），即5，創(chuàng)建動態(tài)面板（最后一頁），添加兩個狀態(tài)，然后滑動到圖像主頁動態(tài)面板。在最后一個狀態(tài)中，彈出窗口的效果是通過切換狀態(tài)來實現(xiàn)的。一個是圖中的初始狀態(tài)，另一個是彈出狀態(tài)，彈出狀態(tài)是包含彈出窗口的組件。

當(dāng)然，您可以使用其他方法，例如將窗口設(shè)置為根據(jù)不同事件隱藏和顯示。

彈出窗口的外觀邏輯是最后一頁。向上拖動動態(tài)面板時，面板狀態(tài)設(shè)置為彈出狀態(tài)，拖動完成后，面板將重置為初始狀態(tài)。

3.蒙古層

根據(jù)前面的分析，掩碼的邏輯建立在彈出窗口的邏輯上，并且掩碼只有兩種顯示狀態(tài)和隱藏狀態(tài)。鑒于上面彈出窗口的設(shè)計，可以更好地處理掩模。首先，要注意圖層的順序，即蒙版需要在彈出窗口上方，然后只需要設(shè)置蒙版顯示并在彈出的情況下根據(jù)不同的情況隱藏state（在共享按鈕上設(shè)置click事件），添加遮罩層的顯示操作，將click事件設(shè)置為遮罩層本身，并添加遮罩層的隱藏操作。

設(shè)置共享按鈕的單擊事件：

在灰色蒙版上設(shè)置單擊事件：

箭頭

當(dāng)我在頭版上工作時，我已經(jīng)有一個箭頭圖標，但它是一個靜態(tài)圖標，沒有添加任何時間。目前，整個頁面都留有與此箭頭關(guān)聯(lián)的邏輯。它由兩個，一個組成。它是箭頭的循環(huán)動畫。一種是在主頁切換到狀態(tài)5時自動隱藏。后者相對更好，如下所示：

箭頭的循環(huán)動畫，如何實現(xiàn)它，首先看一下結(jié)果：

可以看出，先前的靜態(tài)圖標已更改為動態(tài)面板（箭頭轉(zhuǎn)換），其中添加了兩個狀態(tài)。 State1中的箭頭位于動態(tài)面板下方，State2中的箭頭位于動態(tài)面板上。位置并添加了兩個活動：

（1）狀態(tài)改變時

當(dāng)箭頭處于動態(tài)面板下方的狀態(tài)時，箭頭將變?yōu)閯討B(tài)面板上方的狀態(tài)，并使用動畫切換狀態(tài)，以便箭頭從下方向上移動。移動完成后，箭頭將被隱藏。當(dāng)箭頭處于動態(tài)面板上方的狀態(tài)時，箭頭將更改為動態(tài)面板下方的狀態(tài)。在這種情況下，當(dāng)它處于狀態(tài)1時，它在狀態(tài)2中切換到狀態(tài)2，并切換到狀態(tài)1邏輯。但是，如果您只設(shè)置幻燈片，您會發(fā)現(xiàn)預(yù)覽時箭頭仍然不會移動。這是因為我們沒有觸發(fā)動作，所以我們需要添加另一個事件

（2）加載時

在這種情況下，將動態(tài)面板的狀態(tài)設(shè)置為State2，這將觸發(fā)上述狀態(tài)更改的邏輯，從而實現(xiàn)循環(huán)效果

此時，整個頁面的邏輯就完成了。有些人可能已經(jīng)看過了。我還是覺得有些地方不懂。我建議你回去看看。事實上，核心思想是分割頁面邏輯并將其拆分為每個組件，事件和操作對您來說都很熟悉，因此您可以看到它。對于某些基本原件，事件和操作，您仍需要進行一些控制。否則，即使您拆分頁面。有一個小邏輯，但仍然沒有辦法開始集成。

至于困難，整體實際上比較簡單。對于初學(xué)者來說，很難說：

動態(tài)面板的基本用法

如何使用動態(tài)面板來實現(xiàn)循環(huán)動畫效果

事實上，只要你花一兩個小時學(xué)習(xí)，每個人都可以學(xué)習(xí)，就像“每個人都是產(chǎn)品經(jīng)理”一樣。畢竟，我們只使用軟件，而不是開發(fā)軟件。

最后，我想說的是，盡管我已經(jīng)取得了這樣的效果，但它并不一定是唯一且最好的方法。在某些鏈接或細節(jié)中，我自己嘗試了其他方法。你也可以考慮其他方式來實現(xiàn)，因為我不一定是對的，其他人不會立即同意，除非思考后是合理和正確的。

« 沒有底線！聯(lián)想S5 Pro定價1298元低于媒體預(yù)測 | 95后，快遞員萬元還款：一句話正在移動 »