hello，我又來(lái)啦，今天和大家分享用axure怎么做自適應(yīng)，也就是說(shuō)，我們做app端的作品時(shí)，怎么在不同的手機(jī)尺寸，顯示最佳的樣式。那么這期的話，我會(huì)以一個(gè)游戲的案例來(lái)展開(kāi)，所以比較好玩。首先我會(huì)教大家如何制作游戲原型，然后主要講原型制作完成后怎樣做手機(jī)版自適應(yīng)的效果。如果喜歡的朋友們，點(diǎn)下關(guān)注和收藏，謝謝大家！

效果演示

1. 演示地址

https://filq8e.axshare.com

制作教程

1. 材料準(zhǔn)備

這里需要幾張圖片，分別是桶、漢堡、雞翅、可樂(lè)、薯?xiàng)l，這些圖片都可以在網(wǎng)上找到，當(dāng)然了你也可以用別的圖片代替。

接著您需要復(fù)制黏貼多個(gè)漢堡、雞翅、可樂(lè)、薯?xiàng)l；如下圖所示打亂擺放即可。

將所有的漢堡、雞翅、可樂(lè)、薯?xiàng)l組合起來(lái)，再和桶一起轉(zhuǎn)為動(dòng)態(tài)面板，記住這里要取消自動(dòng)調(diào)整為內(nèi)容尺寸，然后將動(dòng)態(tài)面板填充一個(gè)背景色，案例中是深紅色，再調(diào)整動(dòng)態(tài)面板大小，調(diào)整桶的位置，放在面板底端居中位置。

最后，將漢堡、雞翅、可樂(lè)、薯?xiàng)l移到上方看不見(jiàn)的地方，簡(jiǎn)單來(lái)說(shuō)就是-this.height

2. 開(kāi)始頁(yè)面制作

開(kāi)始頁(yè)其實(shí)就是一個(gè)游戲玩法的介紹，如下圖所示，簡(jiǎn)單做法是可以用矩形、文字和圖標(biāo)組成。左右滑動(dòng)的圖片建議大家可以在icon找。

最后還有一個(gè)知道啦的提交按鈕，只有這個(gè)按鈕是有交互的。

鼠標(biāo)單擊時(shí)，先隱藏掉開(kāi)始頁(yè)的元件組合，然后向下移動(dòng)漢堡、雞翅、可樂(lè)、薯?xiàng)l組合，移動(dòng)到直至看不到最上的一塊，用數(shù)學(xué)公式就是target.height+動(dòng)態(tài)面板.height。

移動(dòng)動(dòng)畫(huà)選擇漸變，時(shí)間根據(jù)實(shí)際設(shè)置，案例是20000ms。

移動(dòng)結(jié)束時(shí)，即等待20000ms，顯示的分頁(yè)。

3. 判斷得分

我們首先要拉一個(gè)文本記錄分?jǐn)?shù)，默認(rèn)為空值即可。

然后我們要在桶口（頂端）放一個(gè)熱區(qū)，這是用來(lái)判斷實(shí)物有沒(méi)有進(jìn)洞口。

當(dāng)漢堡、雞翅、可樂(lè)、薯?xiàng)l移動(dòng)時(shí)，我們需要做一個(gè)判斷，如果碰到洞口，就隱藏該元件，并且得分（計(jì)分文本原來(lái)的值+得分），如果沒(méi)有碰到就不得分（計(jì)分文本框原來(lái)的值）。漢堡、雞翅、可樂(lè)、薯?xiàng)l的分?jǐn)?shù)我分別設(shè)置為10、8、6、4分，大家可以根據(jù)需要自己設(shè)置。

4. 得分頁(yè)制作

這頁(yè)和開(kāi)始頁(yè)很像，只是文字，不一樣，所以我們只需要改一下文字，和設(shè)置計(jì)分=上面的計(jì)分文本。

里面只有在玩一次有交互，這里交互有兩種做法，一種是將所有的漢堡、雞翅、可樂(lè)、薯?xiàng)l顯示，然后移動(dòng)回最開(kāi)始的位置，桶也是移動(dòng)回最開(kāi)始的位置，然后出發(fā)之前知道了的事件，重新開(kāi)始游戲。

但是我覺(jué)得這樣做太復(fù)雜了，所以我用第二種方法，刷新頁(yè)面，哈哈哈哈哈哈哈哈。

5.自適應(yīng)的設(shè)置

如果想在每一臺(tái)手機(jī)設(shè)備，都能看到自適應(yīng)的效果怎么做呢？

首先的話我們要對(duì)外部的動(dòng)態(tài)面板移動(dòng)到(0,0)的位置。

載入時(shí)，設(shè)置動(dòng)態(tài)面板的尺寸，寬度=屏幕的寬度，高度=屏幕的高度，錨點(diǎn)在左上角。

然后到桶，桶也是一樣，我們要設(shè)置他的尺寸，那桶的尺寸怎么設(shè)計(jì)能，其實(shí)他的寬度=窗口的width/原始動(dòng)態(tài)面板的歡度*桶的寬度，高度=窗口的width/原始動(dòng)態(tài)面板的歡度*高度。錨點(diǎn)同樣在左上角。然后的話移動(dòng)桶到中部位置即可，中部位置x=(窗口寬度-桶的寬度)/2。

最后到炸雞組合，首先也是設(shè)置尺寸，和上面桶的方式是一致的，然后移動(dòng)，移動(dòng)的話這里的y值要移動(dòng)到-this.height。

這樣就完成了，完成之后，需要上傳到網(wǎng)上，用axshare、axhub、或者大牛都可以，然后生成網(wǎng)址、或者二維碼，用手機(jī)連接就可以看到手機(jī)端的效果了。

那么這期分享就想到這里了，如果大家喜歡的關(guān)注一下和收藏文章，謝謝大家。

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

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