axure商城

Axure RP 9 教程—模擬ofo

最近疑似陷入財務困境的小黃車,共享單車ofo公司,遭到用戶爭相索還199元人民幣的押金,小黃車陷入風口浪尖之中。(⊙o⊙)……不過呢,今天要講的不是ofo的困境,不是ofo會以何種方式涼涼,今天要講的是模擬ofo地圖。

 

一、效果

  1. 首頁地圖的縮放
  2. 首頁地圖的移動
  3. 自動判斷用戶是否已登錄
  4. 賬號密碼錯誤出現提醒
  5. 賬號密碼正確進入登錄狀態
  6. 未登錄狀態點擊導航菜單跳轉到登錄頁面
  7. 已登錄狀態點擊導航菜單進入對應的頁面
  8. 配合以上操作的一些細節性交互:選定按鈕組、選中時按鈕變化、動態面板的跳轉等

下面是效果圖:

效果圖1:地圖縮放和還原

效果圖2:未登錄狀態

效果圖3:登錄過程及登錄狀態

二、實現邏輯

  1. 地圖拖動:動態面板嵌套的方式,規定動態面板拖動的邊界,保證地圖在手機屏幕內顯示
  2. 地圖縮放:放大時使地圖圖片大小變換為當前大小的1.2倍;縮小時使地圖圖片大小變換為當前大小的0.8倍。
  3. 賬號密碼錯誤:規定賬號密碼即可
  4. 賬號密碼正確:判斷賬號密碼正確后,進入登錄狀態,設置全局變量的值為標記已登錄狀態。
  5. 未登錄時點擊導航菜單進入登錄頁面:使用全局變量控制,全局變量值代表未登錄時,進入登錄頁面。
  6. 已登錄時點擊導航菜單進入對應頁面:使用全局變量控制,當全局變量值代表已登錄時,進入對應頁面。
  7. 本案例所使用變量:Login=0時,未登錄;Login=1時,已登錄

三、操作步驟

步驟真的非常多非常多,這里只簡單介紹實現方法,大家可以下載原型自行摸索!!!

操作步驟1—地圖拖動

step one.準備素材自己找地圖圖片,我是用地圖截圖拿ps拼接的,很費時間,地圖后邊我會和原型一起上傳。

step two.創建動態面板

創建兩個動態面板,一個取名為屏幕,是用于控制手機屏幕大小的,另一個取名為地圖,是用來移動地圖的。

在地圖的動態面板上設置交互,移動時,地圖動態面板With Drag,拖動邊界控制為地圖大小。

當頁面載入時,讓地圖默認坐標為(-0.5*This.width,-0.5*This.height),這樣,地圖就能保證每次加載時都保持在中心位置。

此時,地圖拖動基本成型。

操作步驟2—地圖縮放和還原

Step one.交互設置單擊地圖圖片時,地圖長寬均變為當前大小的1.2倍;

雙擊地圖圖片時,地圖長寬均變為當前大小的0.8倍;

右擊地圖圖片時,地圖長寬均還原為初始值,地圖移動到初始位置。如圖所示:

Axure教程—模擬ofo

Axure教程—模擬ofo

Axure教程—模擬ofo

Step two.設置觸發按鈕增加三個btn,分別為放大、縮小和還原,為三個按鈕設置鼠標單擊時的交互,分別對應到上邊三個交互,即可以實現地圖的縮放和還原

操作步驟3—全局變量

全部變量的具體使用在下期會做詳細的描述,本期先講全局變量的使用方法。我們再一開始頁面載入時,就設置全局變量,本案例使用變量命名為Login,頁面載入時,Login值默認為0,此時我們視為未登錄狀態,點擊導航菜單的時候,if Login=0,則動態面板跳轉到登錄頁面。

當我們輸入正確的賬號和密碼,點擊登錄按鈕的時候,此時設置全局變量Login的值為1,這時我們認為處于已登錄狀態,此時單擊導航菜單時,即 if Login=1,動態面板切換到導航菜單對應的頁面內。

具體操作步驟視Axure版本的不同有所不同,本次不做詳細解釋,大家下載原型自行研究即可。想當年在下都是沒人指導看著總監的原型自己琢磨出來的,哈哈哈哈哈(再來兩瓶東北老雪,我還能吹出花兒來!!!嗝兒~)

操作步驟4—賬號密碼設置

本案例賬號為:17611111111本案例密碼為:123456

設置手機號文本框 Text的輸入類型為手機號碼,長度為11位。

設置密碼文本框Text的輸入類型為密碼,長度為6到18位。

設置登錄btn為不可點擊狀態,當手機號碼為11位且輸入密碼后,登錄btn為可點擊狀態。(這一步的實現有點兒小意思,我設置了隱藏的框,用于記錄手機號碼輸入是否滿足11位,只有手機號碼輸入11位,且輸入密碼后,登錄btn才處于可點擊狀態)

點擊登錄btn,if 手機號碼=17611111111 且 密碼=123456時,進入登錄狀態,此時全局變量 Login設置為1;當賬號密碼不符合要求時,點擊登錄提示賬號密碼錯誤。

這里有個有趣的地方,文本框的提示語及提示格式,Axure 8和 Axure 9中有明顯的不同,第一次使用Axure 9 的文本框設置,我也是一臉蒙逼,話說回來,學習新知識還是很快樂哈!

四、原型優化

本案例設置了很多細節性的交互,大家可以下載原型摸索,包括:動態面板切換效果,廣告欄位移動效果,登錄和未登錄時頂部tips氣泡顯示效果等。

Axure教程—模擬ofo

總結

本期原型只能用Axure RP 9 beta及以上版本打開,為什么我要堅持使用Axure 9,而不用現在絕大部分人在使用的Axure 8呢,其實原因很簡單,與時俱進,順勢而為,作為產品,要有超強的適應能力和學習能力,建議各位下載Axure RP 9體驗其中的變化。

原型下載鏈接:https://www.axureshop.com/wp-content/uploads/edd/2018/12/24110359.rp

關注作者公眾號,一起向夢想出發

給TA買糖
共{{data.count}}人
人已贊賞
Axure教程

Axure RP 9 教程—制作九宮格拼圖

2018-12-24 19:12:33

Axure教程

Axure RP 9 教程—中繼器篩選和新增

2018-12-25 20:01:09

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo