中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

不知道從什么時(shí)候，H5開始借著微信平臺(tái)風(fēng)靡移動(dòng)互聯(lián)網(wǎng)，H5小游戲，H5廣告等，在朋友圈隨處可見。另外各種H5頁(yè)面制作工具也真是出不窮，這里就不一一列舉了。但是作為一個(gè)老牌原型設(shè)計(jì)工具的Axure，在H5時(shí)代，又怎么能甘拜下風(fēng)，其功能的強(qiáng)大也不是哪個(gè)H5小工具隨隨便便就能匹敵的，但又不得不承認(rèn)，在這方面，Axure也存在很多弊端，越高的靈活性就導(dǎo)致了越高的復(fù)雜性。至于如何取舍，還需各位自行斟酌。

本文我主要通過(guò)一個(gè)案例來(lái)說(shuō)明用Axure制作H5頁(yè)面（可能嚴(yán)格意義上，Axure的輸出不能算作H5）的時(shí)候，形狀、動(dòng)態(tài)面板、事件、動(dòng)作、判斷條件等的用法與技巧。另外我之所以選擇用Axure制作一個(gè)H5案例，正是看中它的靈活性（雖然這個(gè)過(guò)程有點(diǎn)復(fù)雜，那又有什么關(guān)系）。

原型預(yù)覽

下面先來(lái)看一下案例（最強(qiáng)大腦之加密情書）原型圖：

案例說(shuō)明：

這個(gè)案例可以說(shuō)是一個(gè)益智類的小游戲，主題是破解一封加密的情書，而破解方式是通過(guò)拖動(dòng)九宮格中的色塊到心形位置，最終拼好一個(gè)完整的心形，拼好心形之后，心形中的方塊上會(huì)逐一出現(xiàn)文字（也就是情書的內(nèi)容了），內(nèi)容顯示完整之后，游戲結(jié)束。另外由于原型實(shí)現(xiàn)的復(fù)雜性，沒有做更多的設(shè)計(jì)（比如每次拼圖的色塊形狀不同，計(jì)時(shí)或者倒計(jì)時(shí)，響應(yīng)式布局等等）。

或訪問(wèn)原型地址：http://raedme.cn/axurelab/002_jiamiqingshu/

交互說(shuō)明

那接下來(lái)就為大家剖析一下這個(gè)H5原型中的交互設(shè)計(jì)，以及如何使用Axure來(lái)實(shí)現(xiàn)這些功能，并且我將按照原型由整體到局部的順序來(lái)講解。

交互1：固定H5頁(yè)面，不隨手指的上下左右滑動(dòng)而移動(dòng)

通常情況下，用微信打開網(wǎng)頁(yè)，在頁(yè)面頂部下滑或者在頁(yè)面底部上滑的時(shí)候，會(huì)導(dǎo)致頁(yè)面繼續(xù)向下或向上移動(dòng)，并且露出頁(yè)面外的深灰色區(qū)域，如下圖中的樣子。

但是通常在很多H5的頁(yè)面中不會(huì)出現(xiàn)這樣的情況，無(wú)論你如何滑動(dòng)屏幕，頁(yè)面總會(huì)安安穩(wěn)穩(wěn)的呆在微信的窗口中，一動(dòng)不動(dòng)。那么這種效果如何實(shí)現(xiàn)呢？

實(shí)現(xiàn)方法：使用動(dòng)態(tài)面板，增加空白拖動(dòng)事件。

說(shuō)明：所謂空白拖動(dòng)事件，就是在動(dòng)態(tài)面板上增加一個(gè)拖動(dòng)事件，但是該事件下部添加任何動(dòng)作；之后用動(dòng)態(tài)面板覆蓋整個(gè)頁(yè)面（就是盡量把所有的頁(yè)面元素都轉(zhuǎn)化為動(dòng)態(tài)面板，然后每個(gè)動(dòng)態(tài)面板上都增加一個(gè)空白的拖動(dòng)事件）。這樣就能保證在頁(yè)面上滑動(dòng)的時(shí)候，整個(gè)頁(yè)面一動(dòng)不動(dòng)。

交互2：頁(yè)面自適應(yīng)窗口高度和寬度

其實(shí)這么說(shuō)不是很準(zhǔn)確，因?yàn)椴⒉皇琼?yè)面的大小在隨窗口的變化而變化，而是頁(yè)面上元素的大小或位置因窗口大小的變化而變化。本案例中多次用到自適應(yīng)頁(yè)面寬度（指交互1中涉及到的部分動(dòng)態(tài)面板）以及動(dòng)態(tài)設(shè)置元素位置位置來(lái)適應(yīng)窗口大小的變化（也可以理解為對(duì)主流手機(jī)屏幕尺寸的適配）。

比如交互1中提到的使用動(dòng)態(tài)面板來(lái)固定屏幕，那么就需要?jiǎng)討B(tài)面板能夠覆蓋整個(gè)窗口（不管窗口大小如何變化）。以及頁(yè)面底部文字的位置，永遠(yuǎn)距離頁(yè)面底部10像素，也不會(huì)因?yàn)槠聊怀叽绲母淖兌l(fā)生位移。

實(shí)現(xiàn)方法：動(dòng)態(tài)面板固定到瀏覽器&設(shè)置面板尺寸&移動(dòng)

動(dòng)態(tài)面板固定到瀏覽器并勾選100%寬度，可以實(shí)現(xiàn)動(dòng)態(tài)面板自動(dòng)隨窗口寬度而調(diào)整。

設(shè)置面板尺寸可以通過(guò)一個(gè)事件（本案例使用的頁(yè)面加載時(shí)）來(lái)動(dòng)態(tài)設(shè)置動(dòng)態(tài)面板的高寬尺寸。本案例用來(lái)實(shí)現(xiàn)頁(yè)面加載時(shí)，使動(dòng)態(tài)面板鋪滿窗口，所以設(shè)置面板尺寸為等同與窗口的高和寬，這里需要配合函數(shù)的使用。

移動(dòng)，這里說(shuō)的是一個(gè)動(dòng)作，可以將一個(gè)部件移動(dòng)到指定的位置，配合函數(shù)使用，可以使原件移動(dòng)到一個(gè)相對(duì)固定的位置。本案例中也是在頁(yè)面加載時(shí)執(zhí)行該操作，從而使頁(yè)面的底部文字時(shí)刻保持在距離頁(yè)面底部10個(gè)像素的位置。

交互3：跟隨拖動(dòng)效果

這是一個(gè)較為基礎(chǔ)的交互設(shè)計(jì)，通過(guò)鼠標(biāo)拖拽或者手指滑動(dòng)，來(lái)使對(duì)象跟隨鼠標(biāo)或手指進(jìn)行移動(dòng)。本案例中拖動(dòng)色塊就是采用的這種實(shí)現(xiàn)方式。

實(shí)現(xiàn)方法：使用動(dòng)態(tài)面板，增加拖動(dòng)事件及移動(dòng)動(dòng)作

移動(dòng)事件有多種移動(dòng)方式，本案例中選用的是跟隨拖動(dòng)，其他移動(dòng)方式，大家可自行嘗試，按需使用。

交互4：拖動(dòng)到固定位置后將其鎖定不再允許拖動(dòng)

結(jié)合交互3，當(dāng)拖動(dòng)一個(gè)對(duì)象時(shí)候，把其拖到固定的位置后，無(wú)法再對(duì)其進(jìn)行拖動(dòng)。本案例中將九宮格中的色塊拖放到心形的正確位置后，便不可再進(jìn)行移動(dòng)。這種交互的實(shí)現(xiàn)方法有兩種：

實(shí)現(xiàn)方法1：在拖動(dòng)事件中增加判斷條件，當(dāng)滿足一定的條件時(shí)執(zhí)行移動(dòng)動(dòng)作

比如設(shè)置某個(gè)可拖動(dòng)對(duì)象的X，Y坐標(biāo)不等于某某值的時(shí)候，可以移動(dòng)該對(duì)象，一旦等于某某值周就無(wú)法移動(dòng)該對(duì)象。

實(shí)現(xiàn)方法2：變相實(shí)現(xiàn)，通過(guò)設(shè)置對(duì)象的層次關(guān)系

當(dāng)對(duì)象的位置滿足一定條件時(shí)，將其置于底層，前提是上面需要有一個(gè)覆蓋層，使得無(wú)法觸碰到底層的對(duì)象（不推薦，設(shè)置層次關(guān)系可考慮在其他地方使用）。

交互5：磁吸效果

首先解釋一下這個(gè)效果的意思，在本案例中，當(dāng)色塊拖放到距離正確位置有一定距離（較小，距離值可自定義）的時(shí)候，色塊會(huì)自動(dòng)移動(dòng)到指定位置，而并不是需要手動(dòng)移動(dòng)到一個(gè)絲毫不差的位置（實(shí)際操作中也不太可能）。這種交互效果在很多場(chǎng)景下都會(huì)用得到。

實(shí)現(xiàn)方法：判斷坐標(biāo)，移動(dòng)

仍然是為拖動(dòng)事件添加移動(dòng)動(dòng)作，并且增加判斷條件，判斷拖動(dòng)的對(duì)象的坐標(biāo)值是否在某個(gè)區(qū)域內(nèi)，滿足條件后，執(zhí)行移動(dòng)動(dòng)作，將對(duì)象移動(dòng)到指定位置。

交互6：打字機(jī)效果

在本案例的結(jié)束頁(yè)面，當(dāng)加密情書開啟之后，心形圖案中會(huì)注意出現(xiàn)文字，類似打字的效果。在我個(gè)人實(shí)現(xiàn)這個(gè)效果的時(shí)候，實(shí)現(xiàn)方法還是比較笨拙的，如果有更好的方法還希望大家能與我交流，下面先說(shuō)我的實(shí)現(xiàn)方法。

實(shí)現(xiàn)方法：逐一顯示，等待時(shí)間

也就是逐一設(shè)置每個(gè)字的顯示，并且在每個(gè)字顯示之間增加等待時(shí)間，這樣就實(shí)現(xiàn)了顯示一個(gè)字，等待一段時(shí)間，然后顯示下一個(gè)字，然后等待一段時(shí)間，然后再顯示下一個(gè)字，一次類推。

交互7：常規(guī)的動(dòng)態(tài)面板狀態(tài)切換效果

這屬于動(dòng)態(tài)面板的基礎(chǔ)用法，本文就不再贅述，對(duì)于動(dòng)態(tài)面板不太熟悉的小伙伴們可以網(wǎng)上搜索相關(guān)教程，然后自己多多練習(xí)。

結(jié)束語(yǔ)

本文貌似在講一些Axure交互的東西，實(shí)際也是本案例的主要的制作方法，概念的東西不多，主要偏向于實(shí)操。另外也希望文中所述的案例能給與你一些啟發(fā)，文中若有表述不當(dāng)之處，也請(qǐng)大家指正。

在學(xué)習(xí)Axure之前，我一直以為它只是一個(gè)原型設(shè)計(jì)工具，畫一些簡(jiǎn)單的頁(yè)面，實(shí)現(xiàn)一些簡(jiǎn)單的交互。但慢慢的Axure變成我非常喜歡用的一個(gè)工具，即使工作中不需要，不用畫原型，我也會(huì)用它來(lái)實(shí)現(xiàn)我的一些想法。但這有一個(gè)前提，就是你想要足夠了解它。

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