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