Axure教程:原型實戰(zhàn)之模擬拼圖效果(變量、動態(tài)面板、參數(shù)…全面實戰(zhàn)應(yīng)用)

18 評論 17435 瀏覽 62 收藏 7 分鐘

文章分享的這個原型設(shè)計涉及到了許多Axure的核心知識模塊,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學(xué)習(xí)。

背景介紹

這是一個可玩性不高的拼圖游戲,但是貴在用Axure做出來,中間涉及到了許多Axure的核心知識模塊,比如:中繼器、各類函數(shù)、時間、動態(tài)面板等等,對于Axure的使用有了非常深層次的認知,本案例適合Axure高級使用者觀看學(xué)習(xí)。

 

實現(xiàn)步驟

一、準(zhǔn)備工作

準(zhǔn)備工作,主要分為幾個模塊:

1.1、準(zhǔn)備原材料

準(zhǔn)備拼圖的原始圖片,自己上網(wǎng)下載(也可下載本文提供的材料附件)。

1.2、切割分區(qū)

將原圖均勻的切割為9宮格(利用Axure自帶的切割工具即可完成切割)

 

1.3、正確排布圖制作

將原圖縮小為150×150(大小可自定義),然后按照九宮格的形式,標(biāo)記上數(shù)字,分別為1、2、3、4、5、6、7、8、9,圖片下方寫上提示文字(文本控件),命名為point(用來展示拼圖結(jié)果),在提示文字的下方做一個文本計時器,默認初始值為120S,命名為time-count(計時器通過控制動態(tài)面板的顯示和隱藏來實現(xiàn)),控制計時器的動態(tài)面板命名為d-command

1.4、制作實時位置表

首先創(chuàng)建9個新的全局變量,分別代表九宮格的九張圖片,依次為num1=1、num2=2、num3=3、num4=4、num5=5、num6=6、num7=7、num8=8、num9=9,默認num1+num2+…num3=45,拼圖完成,成功。(不理解這段話,請看排布成功的圖)

1.5、創(chuàng)建拼圖區(qū)域

將原圖切割為九宮格,并按照排布正確的縮略圖進行標(biāo)號,將圖8刪除,拖入一個同樣大小的矩形框,用來代替圖8.

1.6、設(shè)置拼圖規(guī)則

圖8為空白色塊,請拖動其他色塊朝色塊8移動。色塊8本身不能移動。拼圖的時長為120S。

二、實現(xiàn)效果

2.1、倒計時鐘表+實時位置表

當(dāng)動態(tài)面板d-command顯示時,兩種情況:1、如果time-count>0時,設(shè)置time-count每隔一秒自動遞減1,用到公式[[LVAR1-1]]。2、如果num1=1…num9=9,設(shè)置提示文字point內(nèi)容為“恭喜你,拼對了!”

2.2、拖動效果實現(xiàn)

首先搞明白一點,九宮格的每一塊都有四種拖動可能:向左拖動、向右拖動、向上拖動、向下拖動,因此除了圖8,對于其他幾塊圖形,都要進行邏輯判斷,判斷的依據(jù)就是拖動結(jié)束后,被拖動的色塊位于什么位置,位于哪個位置,代表色塊的變量的值就等于幾,依據(jù)此,實現(xiàn)對拖動效果的判斷。

以色塊6為例進行說明,色塊6拖動的過程中,可能出現(xiàn)在九宮格的任何地方,因此就要對所有的情況進行條件判斷,同時無論色塊6出現(xiàn)在什么地方,色塊8肯定是和它相鄰的,因此依據(jù)此,就可以判斷拖動的結(jié)果是否和正確的排布相同。(條件非常多,有點復(fù)雜,這里就不一一截取了,具體可以下載原文件查看)

向左移動條件判斷如下:

向右移動條件判斷如下:

向上拖動條件判斷如下:

向下拖動條件判斷:

還有很重要的一點,就是1,4,7不能向左拖動,1,2,3不能向上拖動,3,6,9不能向右移動,7,8,9不能向下移動。

源文件下載:拼圖game.rp

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作者你好,這個rp文件錯誤,無法下載

    來自四川 回復(fù)
  2. 你好

    來自四川 回復(fù)
  3. 我是新手求帶,這些有點看不懂

    回復(fù)
  4. 打不開

    回復(fù)
  5. 我居然學(xué)會了 哎媽呀

    來自廣東 回復(fù)
    1. 可以,厲害????????????????

      回復(fù)
    2. rp文件不能下載,作者,能發(fā)一份嘛

      來自四川 回復(fù)
    3. 請教個問題 那種三位數(shù)是啥意思 像什么696,581

      來自上海 回復(fù)
  6. 這有啥用?炫技?

    來自廣東 回復(fù)
  7. 實現(xiàn)的確實挺好的,但是個人覺得不要只局限于畫原型,它只是一個表達工具。不要在工具上花費太多的時間。

    來自浙江 回復(fù)
  8. 這有啥用?

    來自浙江 回復(fù)
  9. 倪馬海 倪馬海~~~

    來自廣東 回復(fù)
  10. 6到飛起~~~~~~~~~ ??

    來自江蘇 回復(fù)
  11. 666

    來自廣東 回復(fù)
  12. 666666

    來自北京 回復(fù)
  13. 666

    來自河南 回復(fù)
  14. 666

    來自河北 回復(fù)
  15. 999

    來自河南 回復(fù)