本文作者將與我們分享：如何用Axure將H5活動(dòng)頁(yè)面制作出來(lái)，在此并不談?wù)撨@個(gè)頁(yè)面交互上的合理性。enjoy~

近日，開(kāi)發(fā)了一個(gè)H5的活動(dòng)頁(yè)面，當(dāng)時(shí)只簡(jiǎn)單的畫(huà)了個(gè)線框圖，活動(dòng)上線以后，不玩游戲且單身的我，由于下班后閑來(lái)無(wú)聊（你看，為了防止眼高手低的鍵盤(pán)俠噴“研究Axure有啥意義”，邏輯嚴(yán)密的本產(chǎn)品經(jīng)理加了多少限定條件），便又花了點(diǎn)時(shí)間做了個(gè)高保真的原型，如下（為避廣告嫌疑，替換了所有的圖片和文本）：

點(diǎn)擊此處預(yù)覽

如各位所見(jiàn)，確乎是個(gè)比較簡(jiǎn)單的頁(yè)面，但無(wú)數(shù)比我這做的還簡(jiǎn)單，甚至……簡(jiǎn)陋的頁(yè)面，都有人拿出來(lái)寫(xiě)了文章，而且大部分寫(xiě)作套路都是上來(lái)就第一步第二步第三步，看過(guò)之后等自己想要重復(fù)，就仿佛進(jìn)入了北京的霧，只好求“大神”發(fā)個(gè)源文件，以供后面學(xué)習(xí)（抄襲），很好的印證了“聽(tīng)過(guò)很多道理，卻依舊過(guò)不好這一生”，甚至……抄都抄不好這一生，雖然我十分羞愧，因?yàn)槲乙矝](méi)抄好，不對(duì)，是過(guò)好……這前半生，但最終我還是沒(méi)能免俗，也來(lái)學(xué)學(xué)別人一步兩步的整點(diǎn)套路。

當(dāng)然，本文不談?wù)撨@個(gè)頁(yè)面交互上的合理性，純從怎么樣用Axure將它制作出來(lái)來(lái)展開(kāi)分析。

交互過(guò)程

也就是拿到一個(gè)頁(yè)面后，從直觀的交互上，或者通俗點(diǎn)，從直觀的看得到摸得到聽(tīng)得到的，看它大概是怎樣的情況：

1. 打開(kāi)頁(yè)面后，看到一張圖，然后底部有個(gè)箭頭在往上抖啊抖，引誘著你往上拖
2. 于是，情不自禁的將手指在屏幕上往上一拖，又是一個(gè)頁(yè)面，底部的箭頭依然在抖啊抖，繼續(xù)拖
3. 拖了幾頁(yè)以后，底部的箭頭沒(méi)了，但由于之前拖出了慣性，沒(méi)剎住車(chē)，所以還是下意識(shí)往上拖了一下，或者是及時(shí)剎住了車(chē)，看到了頁(yè)面上的引誘點(diǎn)擊的區(qū)域，就去點(diǎn)了下，于是頁(yè)面就彈出了一個(gè)窗口，上面寫(xiě)了一段話，和一個(gè)碩大的分享按鈕
4. 于是被文字信息所繼續(xù)誘惑，暗想都滑了這么多頁(yè)了，索性再去分享一下，就下意識(shí)去點(diǎn)分享圖片上的分享按鈕，眾所周知的是微信里是不支持直接點(diǎn)擊分享的，必須通過(guò)微信自帶的分享按鈕進(jìn)行分享，但由于擔(dān)心有的用戶還不知，于是又一個(gè)蒙層提示用戶得去通過(guò)微信右上角的按鈕然后再去分享，至于最終用戶是否分享，就看緣分了

好，從用戶操作的流程上來(lái)看，大概就是這么一個(gè)交互的過(guò)程。

邏輯拆分

那弄清楚了整個(gè)頁(yè)面的流程，是不是就直接開(kāi)始一步一步做原型了呢？當(dāng)然，不是。就好比上了一塊牛排，是不是直接就開(kāi)口咬呢，除非口異于常人，或者壓根就不是人，否則都得老老實(shí)實(shí)拿刀叉先去比劃比劃。

那這里，根據(jù)整個(gè)交互過(guò)程，我們可以先把它怎樣去拆分下呢，生活習(xí)慣和思維方式不同的人面對(duì)這樣一個(gè)頁(yè)面，肯定會(huì)有不同的拆法，就連我自己在做這個(gè)頁(yè)面時(shí)，都思考過(guò)好幾種拆法，而且每一個(gè)拆分出來(lái)的模塊，我又思考了好幾種實(shí)現(xiàn)方式，我先談?wù)勎易约鹤罱K使用的拆分：

1. 主頁(yè)：一個(gè)可以上滑切換圖片的頁(yè)面，當(dāng)然也要可以下滑切換回上一張圖片
2. 彈窗：滑到最后一張圖時(shí)點(diǎn)擊引誘點(diǎn)擊的區(qū)域，或者繼續(xù)上滑會(huì)出現(xiàn)的彈窗
3. 蒙層：在彈窗上面點(diǎn)擊分享，會(huì)出現(xiàn)一個(gè)灰色蒙層，再次點(diǎn)擊灰色蒙層，蒙層會(huì)消失
4. 箭頭：在前面幾個(gè)頁(yè)面循環(huán)展示（也就是一直在抖啊抖的）的動(dòng)畫(huà)，以及在最后一個(gè)頁(yè)面箭頭消失
5. 完成以上所有頁(yè)面的邏輯，然后將其組合到一起

經(jīng)過(guò)第一道拆分工序以后，不知道是不是看起來(lái)有了點(diǎn)想法，大概腦袋里知道個(gè)方向了？那接下來(lái)，繼續(xù)。

“支紛節(jié)解”

經(jīng)過(guò)上面的一番緊要的分析，或許思路更加的清晰了，盡管這個(gè)頁(yè)面十分簡(jiǎn)單，但這時(shí)可能還是會(huì)覺(jué)得，還是有細(xì)節(jié)問(wèn)題，如同把牛排切開(kāi)成幾大塊以后，才發(fā)現(xiàn)對(duì)自己嘴巴的尺寸過(guò)于高估，一叉子下去往嘴里送，發(fā)現(xiàn)有點(diǎn)堵，于是只好拿出來(lái)繼續(xù)切。

那就繼續(xù)進(jìn)行拆分，原則就是一直拆到拆分后的每個(gè)模塊都是自己能夠搞定的就停止拆分：

1. 主頁(yè)

一個(gè)可以上滑切換圖片的頁(yè)面，當(dāng)然也要可以下滑切換回上一張圖片。

（1）主頁(yè)當(dāng)中的圖片列表，可以上下拖動(dòng)

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

分析：

1. 因?yàn)橛型蟿?dòng)，所以第一想到的就是使用動(dòng)態(tài)面板；由于拖動(dòng)結(jié)束或者過(guò)程中，頁(yè)面會(huì)發(fā)生改變，所以應(yīng)該是動(dòng)態(tài)面板里會(huì)有多個(gè)狀態(tài)；然后不同的頁(yè)面分屬不同的狀態(tài)，在拖動(dòng)相關(guān)的事件里去添加設(shè)置面板狀態(tài)的相關(guān)動(dòng)作
2. 說(shuō)明需要整一個(gè)東西用來(lái)控制可見(jiàn)的范圍，比如把拖動(dòng)的那個(gè)動(dòng)態(tài)面板嵌套在固定尺寸的動(dòng)態(tài)面板里

2. 彈窗

滑到最后一張圖時(shí)點(diǎn)擊引誘點(diǎn)擊的區(qū)域，或者繼續(xù)上滑會(huì)出現(xiàn)的彈窗。

（1）滑到最后一頁(yè)繼續(xù)上滑會(huì)出現(xiàn)

（2）滑到最后一頁(yè)點(diǎn)擊下半部分區(qū)域會(huì)出現(xiàn)

（3）最后一頁(yè)返回到上一頁(yè)，再滑到最后一頁(yè)，會(huì)重置為初始狀態(tài)

分析：

1. 結(jié)合前面的分析，可以采用在動(dòng)態(tài)面板的最后一個(gè)狀態(tài)里，做一些特殊的處理，比如向上拖動(dòng)結(jié)束時(shí)的事件會(huì)添加出現(xiàn)彈窗的動(dòng)作
2. 結(jié)合前面的分析，說(shuō)明在動(dòng)態(tài)面板的最后一個(gè)狀態(tài)里，要設(shè)置點(diǎn)擊事件，并添加出現(xiàn)彈窗的動(dòng)作
3. 說(shuō)明向上拖動(dòng)結(jié)束時(shí)，彈窗應(yīng)該要隱藏，或者是將動(dòng)態(tài)面板的狀態(tài)切換為某個(gè)初始狀態(tài)

3. 蒙層

在彈窗上面點(diǎn)擊分享，會(huì)出現(xiàn)一個(gè)灰色蒙層，再次點(diǎn)擊灰色蒙層，蒙層會(huì)消失。

（1）點(diǎn)擊分享按鈕出現(xiàn)灰色蒙層

（2）點(diǎn)擊蒙層，蒙層消失

分析：

1. 在分享按鈕上添加了點(diǎn)擊事件，且添加點(diǎn)擊后彈出灰色蒙層的動(dòng)作
2. 在灰色蒙層上添加了點(diǎn)擊事件，且添加點(diǎn)擊后蒙層消失的動(dòng)作

4. 箭頭

在前面幾個(gè)頁(yè)面循環(huán)展示（也就是一直在抖啊抖的）的動(dòng)畫(huà)，以及在最后一個(gè)頁(yè)面箭頭消失。

（1）循環(huán)展示的動(dòng)畫(huà)

（2）最后一張圖片底部沒(méi)有箭頭

分析：

1. 動(dòng)畫(huà)效果可以拆分為箭頭出現(xiàn)，箭頭上移，箭頭隱藏整個(gè)過(guò)程，然后一直循環(huán)，如何循環(huán)呢，這個(gè)需要加以思考
2. 說(shuō)明需要根據(jù)主頁(yè)面動(dòng)態(tài)面板切換的狀態(tài)來(lái)判斷箭頭是否顯示

具體實(shí)現(xiàn)

到上面為止，可以說(shuō)基本上思路和操作方法已經(jīng)很明確了，基本上盤(pán)子里切好的每塊肉，都可以一口送嘴里去了，那就可以著手在Axure里進(jìn)行編寫(xiě)了，接下來(lái)，我省略掉部分非關(guān)鍵步驟，給大家看下具體應(yīng)該怎么去實(shí)現(xiàn)，去實(shí)現(xiàn)的時(shí)候要注意對(duì)照著上面的分析去思考下應(yīng)該怎么實(shí)現(xiàn)，而不是只要想著照抄步驟，畢竟再權(quán)威的人說(shuō)的都不一定對(duì)，別人說(shuō)的也不一定好，甚至大家可以自己想出更好的方案：

1. 主頁(yè)

（1）在手機(jī)屏幕可見(jiàn)范圍內(nèi)，添加一個(gè)動(dòng)態(tài)面板（外部容器），且尺寸和屏幕除去導(dǎo)航欄和系統(tǒng)欄后的尺寸保持一致，這樣做是為了控制內(nèi)部的內(nèi)容都處于這樣的一個(gè)范圍內(nèi)。

（2）在該動(dòng)態(tài)面板的默認(rèn)狀態(tài)里，再添加一個(gè)動(dòng)態(tài)面板（圖片主頁(yè)），該動(dòng)態(tài)面板是為了用于切換圖片狀態(tài)。

（3）在圖片主頁(yè)的動(dòng)態(tài)面板里添加多個(gè)狀態(tài)，在每個(gè)不同的狀態(tài)里分別放一張圖片。

（4）為了使頁(yè)面可以拖動(dòng)，再在圖片主頁(yè)的動(dòng)態(tài)面板，添加向上拖動(dòng)結(jié)束和向下拖動(dòng)結(jié)束時(shí)的事件，分別在事件里添加對(duì)應(yīng)的動(dòng)作（即設(shè)置面板狀態(tài)為向上滑動(dòng)和設(shè)置面板狀態(tài)為向下滑動(dòng)，為了人性化，還可以設(shè)置對(duì)應(yīng)的進(jìn)入和退出的動(dòng)畫(huà)）。

2. 彈窗

我這里采用的方法是，動(dòng)態(tài)面板（圖片主頁(yè)）的最后一個(gè)狀態(tài)里，也就是5當(dāng)中，又創(chuàng)建了一個(gè)動(dòng)態(tài)面板（最后一頁(yè)），里面添加兩種狀態(tài)，然后當(dāng)滑動(dòng)到圖片主頁(yè)動(dòng)態(tài)面板到最后一個(gè)狀態(tài)時(shí)，通過(guò)切換狀態(tài)的方式來(lái)達(dá)到彈窗的效果，一種是圖中的初始狀態(tài)，另外一種就是彈窗狀態(tài)，而彈窗狀態(tài)是里是包含了彈窗的元件的。

當(dāng)然，大家完全可以采用別的方法，比如根據(jù)不同事件，設(shè)置彈窗隱藏和顯示的動(dòng)作。

彈窗的出現(xiàn)邏輯是最后一頁(yè)這個(gè)動(dòng)態(tài)面板向上拖動(dòng)結(jié)束時(shí)，將面板狀態(tài)設(shè)置為彈窗狀態(tài)，同時(shí)向下拖動(dòng)結(jié)束時(shí)，又將面板重置為初始狀態(tài)。

3. 蒙層

根據(jù)之前的分析，蒙層的邏輯是建立在彈窗出現(xiàn)的邏輯之上的，而且蒙層只有顯示和隱藏這兩種狀態(tài)，鑒于上面一步彈窗的設(shè)計(jì)，那蒙層就比較好處理了，首先要注意圖層的順序，就是蒙層需要在彈窗的上方，然后只需要在彈窗狀態(tài)的情況下，根據(jù)不同的情況去設(shè)置蒙層的顯示和隱藏即可（對(duì)分享按鈕設(shè)置點(diǎn)擊事件，添加蒙層的顯示動(dòng)作，對(duì)蒙層本身設(shè)置點(diǎn)擊事件，添加蒙層的隱藏動(dòng)作）。

對(duì)分享按鈕，設(shè)置點(diǎn)擊事件：

對(duì)灰色蒙層自身設(shè)置點(diǎn)擊事件：

4. 箭頭

在前面做主頁(yè)的時(shí)候，已經(jīng)有了箭頭的圖標(biāo)，但那是一個(gè)靜態(tài)的沒(méi)有添加任何時(shí)間的圖標(biāo)，目前整個(gè)頁(yè)面就只剩下了這個(gè)箭頭相關(guān)的邏輯沒(méi)有完成了，主要包括兩個(gè)，一個(gè)是箭頭的循環(huán)動(dòng)畫(huà)，一個(gè)是主頁(yè)切換到了狀態(tài)5的時(shí)候要自動(dòng)隱藏，后者相對(duì)來(lái)說(shuō)比較好實(shí)現(xiàn)，如下：

那箭頭的循環(huán)動(dòng)畫(huà)，要怎么實(shí)現(xiàn)呢，先看結(jié)果：

可以看出來(lái)，將之前的一個(gè)靜態(tài)圖標(biāo)，改成了一個(gè)動(dòng)態(tài)面板（箭頭變換），里面添加了兩種狀態(tài)，State1里的箭頭位于動(dòng)態(tài)面板靠下的位置，State2里的箭頭位于動(dòng)態(tài)面板靠上的位置，并添加了兩個(gè)事件：

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

當(dāng)箭頭處于位于動(dòng)態(tài)面板下方狀態(tài)時(shí)，則讓箭頭變?yōu)樘幱趧?dòng)態(tài)面板上方的狀態(tài)，同時(shí)用一個(gè)動(dòng)畫(huà)來(lái)切換狀態(tài)，這樣就有一種箭頭從下方往上移動(dòng)的效果，移動(dòng)完成以后，將箭頭隱藏；而當(dāng)箭頭處于位于動(dòng)態(tài)面板上方狀態(tài)時(shí)，則讓箭頭變?yōu)樘幱趧?dòng)態(tài)面板下方的狀態(tài)，這樣的話，就是當(dāng)處于狀態(tài)1時(shí)，切換為狀態(tài)2，處于狀態(tài)2，切換為狀態(tài)1的邏輯，但如果只這樣設(shè)置的滑，預(yù)覽的時(shí)候會(huì)發(fā)現(xiàn)箭頭依然沒(méi)有動(dòng)，這是因?yàn)槲覀儧](méi)有對(duì)動(dòng)作進(jìn)行觸發(fā)，所以需要再添加一個(gè)事件

（2）載入時(shí)

在這個(gè)事件里，設(shè)置動(dòng)態(tài)面板的狀態(tài)為State2，這樣就會(huì)觸發(fā)上面狀態(tài)改變的邏輯，達(dá)到一個(gè)循環(huán)移動(dòng)的效果

至此，整個(gè)頁(yè)面的邏輯就算完成了，可能有的人看了之后，還覺(jué)得有的地方不太明白，建議大家再回過(guò)頭去看下，其實(shí)核心的思想就是將頁(yè)面邏輯拆分，拆分到每個(gè)元件、事件、動(dòng)作都是你熟悉的，就可以了，所以這里也可以看出來(lái)，對(duì)于一些基本的原件、事件、動(dòng)作，還是需要有一定的掌握，不然就會(huì)導(dǎo)致即使你將頁(yè)面拆分到很小的一個(gè)一個(gè)邏輯，但是依然沒(méi)有辦法下手去進(jìn)行整合的情況。

至于難點(diǎn)的話，其實(shí)整體都還算比較簡(jiǎn)單。對(duì)于初學(xué)者來(lái)說(shuō)，硬要說(shuō)有就是：

1. 動(dòng)態(tài)面板的基本用法
2. 如何運(yùn)用動(dòng)態(tài)面板實(shí)現(xiàn)循環(huán)動(dòng)畫(huà)效果

其實(shí)，只要花一兩個(gè)小時(shí)學(xué)習(xí)下，人人都是能學(xué)會(huì)的，就如同“人人都是產(chǎn)品經(jīng)理”一樣。畢竟我們只是使用軟件，不是開(kāi)發(fā)軟件。

最后，我想說(shuō)的是，我雖然實(shí)現(xiàn)了這樣的效果，但也不見(jiàn)得就是唯一和最好的方法，有的環(huán)節(jié)或者細(xì)節(jié)上，我自己也有嘗試過(guò)別的方式，大家也可以考慮用其他的方式去實(shí)現(xiàn)，因?yàn)槲艺f(shuō)的不一定對(duì)，而別人說(shuō)的我也不會(huì)馬上茍同，除非經(jīng)過(guò)自己思考確實(shí)是合理而又正確的。

作者：Jesse King（小風(fēng)），產(chǎn)品經(jīng)理

本文由 @Jesse King 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議