国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)讀：本篇教程跟大家分享，如何用Axure做一款七夕小游戲，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開了分析，并對過程中需要注意的問題進(jìn)行了介紹，希望對你有所啟發(fā)。

七夕前一晚看到了簡書的一個集贊活動，腦子里在想，作為產(chǎn)品經(jīng)理的我有什么可展示的技藝，能為親愛的程序員老公準(zhǔn)備個七夕禮物呢？

難道提個需求？！

考慮到可能會在燭光晚餐中被打一頓，我決定還是不發(fā)揮專長了。所以，我決定帶上咱吃飯的家伙，給老公上一課。哦不，應(yīng)該是給他一個驚喜。

構(gòu)思了大半個上午，考慮用戶是純愛系的特征，需符合七夕外出就餐使用場景，設(shè)計一款需要略動腦經(jīng)，又滿載回憶、具有專屬性特征的一次性手機(jī)游戲。

• 主題：陪伴是最長情的告白。收集過往的記憶照片，附上耳鬢廝磨時的情話，期待直男小哥哥解密后不可掩藏的邪魅一笑……
• 適用場景：生日、情人節(jié)、七夕、圣誕節(jié)、戀愛紀(jì)念日、結(jié)婚紀(jì)念日等各種節(jié)日場景
• 游戲簡介：根據(jù)被放大的照片局部，猜出照片內(nèi)容，輸入到文本框中，并提交答案。回答正確，即可獲得回憶照片。每個問題有一個默認(rèn)提示，點擊鑰匙圖標(biāo)，可獲得額外提示，每個問題最多可額外獲得三個提示。

（圖：原型效果gif）

體驗地址：https://j726ic.axshare.com/

需要通過手機(jī)瀏覽。PC雖然也可以，但由于設(shè)置了100%瀏覽器寬度及高度，體驗不佳。

答案分別是：凱賓斯基、海南、手表、馮寶寶

下載源文件：https://pan.baidu.com/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)手機(jī)屏幕

二、原型設(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ū)。

【頂層】：提示語面板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，確保點擊“提交”后手機(jī)軟鍵盤收起。

2. 中繼器自帶函數(shù)配合動態(tài)面板，實現(xiàn)滑動翻頁

手機(jī)中的【上滑】、【下滑】操作對應(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)手機(jī)屏幕

第一次嘗試用Axure9做原型，發(fā)布時竟然沒有有找到移動設(shè)備設(shè)置的地方。由于原型尺寸使用的是375*667，在手機(jī)中無法顯示為100%屏幕尺寸。

所以在中繼器每項加載時，增加了對于元件尺寸的設(shè)置：

• 中繼器加載時，將需要全屏的圖片尺寸設(shè)置為100%屏幕高度及100%屏幕寬度
• 對于高度為定值的某一區(qū)域內(nèi)的元件進(jìn)行組合。中繼器加載時，將該組合尺寸設(shè)置為100%屏幕寬度，高度為該組合的固定值。

（圖：元件自適應(yīng)屏幕尺寸）

致敬苦中作樂的每個互聯(lián)網(wǎng)人~~

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

題圖來自Unsplash，基于CC0協(xié)議。