編輯導讀：本篇教程跟大家分享，如何用Axure做一款七夕小遊戲，作者從預覽圖，到所需原件，再到操作步驟都一一展開了分析，並對過程中需要注意的問題進行了介紹，希望對你有所啓發。
七夕前一晚看到了簡書的一個集贊活動，腦子裏在想，作為產品經理的我有什麼可展示的技藝，能為親愛的程序員老公準備個七夕禮物呢？
難道提個需求？！
考慮到可能會在燭光晚餐中被打一頓，我決定還是不發揮專長了。所以，我決定帶上咱吃飯的傢伙，給老公上一課。哦不，應該是給他一個驚喜。
構思了大半個上午，考慮用户是純愛系的特徵，需符合七夕外出就餐使用場景，設計一款需要略動腦經，又滿載回憶、具有專屬性特徵的一次性手機遊戲。
- 主題：陪伴是最長情的告白。收集過往的記憶照片，附上耳鬢廝磨時的情話，期待直男小哥哥解密後不可掩藏的邪魅一笑……
- 適用場景：生日、情人節、七夕、聖誕節、戀愛紀念日、結婚紀念日等各種節日場景
- 遊戲簡介：根據被放大的照片局部，猜出照片內容，輸入到文本框中，並提交答案。回答正確，即可獲得回憶照片。每個問題有一個默認提示，點擊鑰匙圖標，可獲得額外提示，每個問題最多可額外獲得三個提示。
（圖：原型效果gif）
體驗地址：https://j726ic.axshare.com/
需要通過手機瀏覽。PC雖然也可以，但由於設置了100%瀏覽器寬度及高度，體驗不佳。
答案分別是：凱賓斯基、海南、手錶、馮寶寶
下載源文件：https://pan.baidu.com/s/1Ja_17YNV3TrTe1xuty6bgg
提取碼：5wp8
用Axure9打開，修改table_game中的數據及圖片，發佈到AXshare。其中tips建議4個漢字以內；text建議30個漢字以內（30個漢字大概一行半）。
一、核心功能1）通過校驗問題頁中的輸入文字，獲得答案頁
2）通過上滑、下滑的手勢操作，實現題目的切換
3）原型尺寸自適應手機屏幕
二、原型設計方案1. 利用中繼器，實現答案的校驗，及題目頁與答案頁的切換1）中繼器數據設計
將整個題目中涉及的數據設計到一箇中繼器中，每個題目佔一個整頁面，達到切換題目時切換頁面的效果。
在中繼器樣式中，設置[佈局：垂直]，[分頁：多頁顯示，每頁項數量1，起始頁1]
設計問題頁及答案頁中的所需要的字段。新建中繼器，並將完成字段的命名及少量數據的填充。
（圖：中繼器中的數據字段）
字段説明：
- defalut_img及defalut_text：問題頁的圖片及配文。
- true_img及true_text：回答正確後的頁面圖片及配文。
- tips0~tips3：問題提示語。點擊鑰匙按鈕時，依次顯示tips1~3，同時鑰匙後的數字-1。
- answer：該問題的答案。點擊提交時，判斷輸入框中的文字是否等於answer。
- type：該問題是已正確回答。0表示未回答；1表示已正確回答。再次滑動至已正確回答的題目頁面時無需二次回答。
2）中繼器內部結構設計
根據數據字段，設計頁面元素，並按照顯示時候元素位置所在的層級，進行分區。
【頂層】：提示語面板panel_toast。默認為隱藏。設計兩個狀態，分別存放回答錯誤的toast和沒有更多提示的toast。
（圖：頂層動態面板）
【第二層】：答案輸入面板panel_answer。用於提交答案及獲取圖片提示。
（圖：第二層面板）
【底層】：問題及答案頁面板panel_content。用於切換問題圖片及答案圖片。
（圖：頂層面板）
3）元件的賦值
在進行元件設計時，建議元件名稱與中繼器字段命名一致，方便後續賦值。
（圖：中繼器數據字段與元件對應關係）
需要注意，當問題已經回答正確了，再次滑動至該問題時不必重複回答。故在中繼器賦值時需要進行判斷type是否為1。
（圖：為中繼器中的元件賦值）
4）答案的校驗
數據準備妥當，且賦值完成後。將校驗事件寫在panel_answer的“提交”按鈕中，判斷輸入的文字內容是否與中繼器的answer字段一致。
（圖：校驗回答是否正確）
這部分需要注意2點：
- 更新中繼器中的行後，中繼器會重新載入數據；這樣就會執行中繼器載入時的動作，實現答案頁的顯示。
- 再執行更新行操作前，需要加入500ms以上的delay，確保點擊“提交”後手機軟鍵盤收起。
手機中的【上滑】、【下滑】操作對應動態面板元件交互中的【向上拖動結束時】和【向下拖動結束時】。這樣也是為什麼要將底層的元件放置到動態面板的原因。
- 上滑：下一題，也就是中繼器的下一頁（下一行數據）。使用中繼器交互動作，設置當前頁面為next。
- 下滑：上一題，也就是中繼器的上一頁（上一行數據）。使用中繼器交互動作，設置當前頁為previous
（圖：中繼器翻頁操作）
需要注意的是，為了使得頁面切換效果首尾相接，做成電子相冊的效果。
- 在上滑時需要判斷【當前頁是否為末頁】。如果是末頁，上滑後應進入第一頁。
此時需要使用中繼器函數，pageIndex（當前頁）及pageCount（總頁數），增加判斷條件，當前頁的頁碼是否等於總頁數。也就是Item.Repeater.pageIndex是否等於Item.Repeater.pageCount，如果是的話，則需要設置當前頁面為1。
- 同理，下滑時需要判斷【當前頁是否為第一頁】，也就是Item.Repeater.pageIndex是否等於1，如果是的話，則設置當前頁面為last。
第一次嘗試用Axure9做原型，發佈時竟然沒有有找到移動設備設置的地方。由於原型尺寸使用的是375*667，在手機中無法顯示為100%屏幕尺寸。
所以在中繼器每項加載時，增加了對於元件尺寸的設置：
- 中繼器加載時，將需要全屏的圖片尺寸設置為100%屏幕高度及100%屏幕寬度
- 對於高度為定值的某一區域內的元件進行組合。中繼器加載時，將該組合尺寸設置為100%屏幕寬度，高度為該組合的固定值。
（圖：元件自適應屏幕尺寸）
致敬苦中作樂的每個互聯網人~~
本文由 @holo咩 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。