Axure教程:自娛自樂的七夕游戲_第1頁
Axure教程:自娛自樂的七夕游戲_第2頁
Axure教程:自娛自樂的七夕游戲_第3頁
Axure教程:自娛自樂的七夕游戲_第4頁
Axure教程:自娛自樂的七夕游戲_第5頁
已閱讀5頁,還剩9頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

Axure教程:自娛自樂的七夕游戲考慮到可能會在燭光晚餐中被打一頓,我決定還是不發(fā)揮專長了。所以,我決定帶上咱吃飯的家伙,給老公上一課。哦不,應(yīng)該是給他一個驚喜。構(gòu)思了大半個上午,考慮用戶是純愛系的特征,需符合七夕外出就餐使用場景,設(shè)計一款需要略動腦經(jīng),又滿載回憶、具有專屬性特征的一次性手機游戲。主題:陪伴是最長情的告白。收集過往的記憶照片,附上耳鬢廝磨時的情話,期待直男小哥哥解密后不可掩藏的邪魅一笑……適用場景:生日、情人節(jié)、七夕、圣誕節(jié)、戀愛紀(jì)念日、結(jié)婚紀(jì)念日等各種節(jié)日場景游戲簡介:根據(jù)被放大的照片局部,猜出照片內(nèi)容,輸入到文本框中,并提交答案?;卮鹫_,即可獲得回憶照片。每個問題有一個默認(rèn)提示,點擊鑰匙圖標(biāo),可獲得額外提示,每個問題最多可額外獲得三個提示。(圖:原型效果gif)

體驗地址:/需要通過手機瀏覽。PC雖然也可以,但由于設(shè)置了100%瀏覽器寬度及高度,體驗不佳。答案分別是:凱賓斯基、海南、手表、馮寶寶下載源文件:/s/1Ja_17YNV3TrTe1xuty6bgg提取碼:5wp8用Axure9打開,修改table_game中的數(shù)據(jù)及圖片,發(fā)布到AXshare。其中tips建議4個漢字以內(nèi);text建議30個漢字以內(nèi)(30個漢字大概一行半)。一、核心功能1)通過校驗問題頁中的輸入文字,獲得答案頁2)通過上滑、下滑的手勢操作,實現(xiàn)題目的切換3)原型尺寸自適應(yīng)手機屏幕二、原型設(shè)計方案1.利用中繼器,實現(xiàn)答案的校驗,及題目頁與答案頁的切換1)中繼器數(shù)據(jù)設(shè)計將整個題目中涉及的數(shù)據(jù)設(shè)計到一個中繼器中,每個題目占一個整頁面,達(dá)到切換題目時切換頁面的效果。在中繼器樣式中,設(shè)置[布局:垂直],[分頁:多頁顯示,每頁項數(shù)量1,起始頁1]設(shè)計問題頁及答案頁中的所需要的字段。新建中繼器,并將完成字段的命名及少量數(shù)據(jù)的填充。(圖:中繼器中的數(shù)據(jù)字段)字段說明:defalut_img及defalut_text:問題頁的圖片及配文。true_img及true_text:回答正確后的頁面圖片及配文。tips0~tips3:問題提示語。點擊鑰匙按鈕時,依次顯示tips1~3,同時鑰匙后的數(shù)字-1。answer:該問題的答案。點擊提交時,判斷輸入框中的文字是否等于answer。type:該問題是已正確回答。0表示未回答;1表示已正確回答。再次滑動至已正確回答的題目頁面時無需二次回答。2)中繼器內(nèi)部結(jié)構(gòu)設(shè)計根據(jù)數(shù)據(jù)字段,設(shè)計頁面元素,并按照顯示時候元素位置所在的層級,進(jìn)行分區(qū)?!卷攲印浚禾崾菊Z面板panel_toast。默認(rèn)為隱藏。設(shè)計兩個狀態(tài),分別存放回答錯誤的toast和沒有更多提示的toast。(圖:頂層動態(tài)面板)【第二層】:答案輸入面板panel_answer。用于提交答案及獲取圖片提示。(圖:第二層面板)【底層】:問題及答案頁面板panel_content。用于切換問題圖片及答案圖片。(圖:頂層面板)3)元件的賦值在進(jìn)行元件設(shè)計時,建議元件名稱與中繼器字段命名一致,方便后續(xù)賦值。(圖:中繼器數(shù)據(jù)字段與元件對應(yīng)關(guān)系)需要注意,當(dāng)問題已經(jīng)回答正確了,再次滑動至該問題時不必重復(fù)回答。故在中繼器賦值時需要進(jìn)行判斷type是否為1。(圖:為中繼器中的元件賦值)4)答案的校驗數(shù)據(jù)準(zhǔn)備妥當(dāng),且賦值完成后。將校驗事件寫在panel_answer的“提交”按鈕中,判斷輸入的文字內(nèi)容是否與中繼器的answer字段一致。(圖:校驗回答是否正確)這部分需要注意2點:更新中繼器中的行后,中繼器會重新載入數(shù)據(jù);這樣就會執(zhí)行中繼器載入時的動作,實現(xiàn)答案頁的顯示。再執(zhí)行更新行操作前,需要加入500ms以上的delay,確保點擊“提交”后手機軟鍵盤收起。2.中繼器自帶函數(shù)配合動態(tài)面板,實現(xiàn)滑動翻頁手機中的【上滑】、【下滑】操作對應(yīng)動態(tài)面板元件交互中的【向上拖動結(jié)束時】和【向下拖動結(jié)束時】。這樣也是為什么要將底層的元件放置到動態(tài)面板的原因。上滑:下一題,也就是中繼器的下一頁(下一行數(shù)據(jù))。使用中繼器交互動作,設(shè)置當(dāng)前頁面為next。下滑:上一題,也就是中繼器的上一頁(上一行數(shù)據(jù))。使用中繼器交互動作,設(shè)置當(dāng)前頁為previous(圖:中繼器翻頁操作)需要注意的是,為了使得頁面切換效果首尾相接,做成電子相冊的效果。在上滑時需要判斷【當(dāng)前頁是否為末頁】。如果是末頁,上滑后應(yīng)進(jìn)入第一頁。此時需要使用中繼器函數(shù),pageIndex(當(dāng)前頁)及pageCount(總頁數(shù)),增加判斷條件,當(dāng)前頁的頁碼是否等于總頁數(shù)。也就是Item.Repeater.pageIndex是否等于Item.Repeater.pageCount,如果是的話,則需要設(shè)置當(dāng)前頁面為1。同理,下滑時需要判斷【當(dāng)前頁是否為第一頁】,也就是Item.Repeater.pageIndex是否等于1,如果是的話,則設(shè)置當(dāng)前頁面為last。3.中繼器配合設(shè)置元件尺寸,實現(xiàn)自適應(yīng)手機屏幕第一次嘗試用Axure9做原型,發(fā)布時竟然沒有有找到移動設(shè)備設(shè)置的地方。由于原型尺寸使用的是375*667,在手機中無法顯示為100%屏幕尺寸。所以在中繼器每項加載時,增加了對于元件尺寸的設(shè)置:中繼器加載時,將需要

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論