Axure教程:怎樣做低保真軌跡追蹤與回放
對(duì)于互聯(lián)網(wǎng)審計(jì)系統(tǒng)及公安系統(tǒng)來說,終端的軌跡與回放的意義在于實(shí)施隨時(shí)追蹤和記錄終端行為軌跡,其目的是為了監(jiān)控和抓捕嫌疑人。其實(shí),在很多的場合我們都應(yīng)用到,像共享經(jīng)濟(jì)項(xiàng)目(共享單車、滴滴等)都會(huì)采集到終端的數(shù)據(jù),以至于在平臺(tái)進(jìn)行管控。
具體設(shè)計(jì)如下:
(說明:文中所涉及數(shù)字分別為X、Y、W、H)
順序?yàn)椋旱赘濉猻tate1(軌跡按鈕及軌跡列表的制作——?jiǎng)討B(tài)面板1(軌跡列表)——?jiǎng)討B(tài)面板2()底稿地圖+三個(gè)水滴顯示(動(dòng)態(tài)地圖,按照鼠標(biāo)按下與主頁面進(jìn)入進(jìn)行用例設(shè)置)-動(dòng)態(tài)面板(軌跡線)),state1中包含6個(gè)動(dòng)態(tài)面板,其中3個(gè)是屬于水滴,一個(gè)屬于軌跡列表,一個(gè)屬于軌跡線,state1進(jìn)入即是一個(gè)動(dòng)態(tài)頁面(此頁面用來設(shè)置底稿及軌跡按鈕)。
預(yù)覽效果圖
制作底稿
制作底稿的目的是為了放置動(dòng)態(tài)面板和按鈕部件。
拖入兩個(gè)矩形,先拖如底稿矩形部件,然后在頭部拖入一個(gè)矩形部件,底稿為0,40,1000,460,頭部為0,0,1000,40,使其處于統(tǒng)一位置即可,我這屬于參考;然后,拉入文字標(biāo)簽部件,寫:追蹤。
底稿,其實(shí)就是一個(gè)動(dòng)態(tài)面板的state1,在state1下放置的地圖,如下:
軌跡底稿及軌跡回放按鈕制作
拖入動(dòng)態(tài)面板,并命名為:軌跡,尺寸為:0,40,1000,460(與主頁底稿保持一致);然后,命名一個(gè)單頁的動(dòng)態(tài)頁面名稱:state1(防止遺忘);
(此舉等有了地圖后再做,以便有個(gè)參考)在當(dāng)前的底稿上(地圖),拉入按鈕部件,并命名為:軌跡回放。
制作軌跡素材
從百度地圖或高德地圖處截圖插入到當(dāng)前頁面,已地圖作為底稿,拖入動(dòng)態(tài)面板,并建立三個(gè)水滴標(biāo)志,然后,將水滴標(biāo)志改為動(dòng)態(tài)面板,設(shè)置不同顏色;并設(shè)置用例:
軌跡點(diǎn)及底稿圖
用例設(shè)置如下(三個(gè)水滴點(diǎn)統(tǒng)一設(shè)置,當(dāng)拖動(dòng)時(shí)的動(dòng)作):
添加軌跡線
在軌跡點(diǎn)及底稿圖中三水滴位置插入動(dòng)態(tài)面板,拖入兩根先并進(jìn)行設(shè)置,兩根線設(shè)置為粗顯,顏色任意;短線為:0,0,179,158;長線為:179,0,281,225;然后推出至軌跡/State1位置。
軌跡條件設(shè)置
軌跡回放按鈕:用例設(shè)置——鼠標(biāo)單擊時(shí),并在用例中設(shè)置限制如下:
短線設(shè)置
長線設(shè)置
完成按鈕的設(shè)置后,即可預(yù)覽,其中,水滴可在頁面中進(jìn)行移動(dòng)。
建議
按照整體思路:先放置好動(dòng)態(tài)面板,然后再進(jìn)行添加素材,最后根據(jù)放置水滴的位置再放置軌跡線的動(dòng)態(tài)頁面,其中軌跡線的動(dòng)態(tài)頁面需在水滴的范圍內(nèi),軌跡線不能超出動(dòng)態(tài)頁面的范圍;具體如下:
1、放置動(dòng)態(tài)面板及按鈕和下拉部件,使首頁先固定;如圖:
2、在動(dòng)態(tài)頁面state1,插入動(dòng)態(tài)頁面及底稿,其中底稿為地圖圖片素材;(注意:水滴的動(dòng)態(tài)頁面需要先放置水滴以后再設(shè)置為動(dòng)態(tài)頁面,并記錄水滴放置的坐標(biāo),此坐標(biāo)有利于軌跡線的顯示);如圖:
3、軌跡線的放置與設(shè)置(具體的設(shè)置已經(jīng)在上面提到)
本文由 @唐先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
好玩
可以出教程么,然后配上步驟(o^^o)
有視頻就好了,方便一些,看文字有些累