最近疑似陷入財務(wù)困境的小黃車，共享單車ofo公司，遭到用戶爭相索還199元人民幣的押金，小黃車陷入風(fēng)口浪尖之中。(⊙o⊙)……不過呢，今天要講的不是ofo的困境，不是ofo會以何種方式?jīng)鰶觯裉煲v的是模擬ofo地圖。

一、效果

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

下面是效果圖：

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

效果圖2：未登錄狀態(tài)

效果圖3：登錄過程及登錄狀態(tài)

二、實現(xiàn)邏輯

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

三、操作步驟

步驟真的非常多非常多，這里只簡單介紹實現(xiàn)方法，大家可以下載原型自行摸索?。?！

操作步驟1—地圖拖動

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

step two.創(chuàng)建動態(tài)面板

創(chuàng)建兩個動態(tài)面板，一個取名為屏幕，是用于控制手機屏幕大小的，另一個取名為地圖，是用來移動地圖的。

在地圖的動態(tài)面板上設(shè)置交互，移動時，地圖動態(tài)面板With Drag，拖動邊界控制為地圖大小。

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

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

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

Step one.交互設(shè)置單擊地圖圖片時，地圖長寬均變?yōu)楫斍按笮〉?.2倍；

雙擊地圖圖片時，地圖長寬均變?yōu)楫斍按笮〉?.8倍；

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

Step two.設(shè)置觸發(fā)按鈕增加三個btn，分別為放大、縮小和還原，為三個按鈕設(shè)置鼠標單擊時的交互，分別對應(yīng)到上邊三個交互，即可以實現(xiàn)地圖的縮放和還原

操作步驟3—全局變量

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

當我們輸入正確的賬號和密碼，點擊登錄按鈕的時候，此時設(shè)置全局變量Login的值為1，這時我們認為處于已登錄狀態(tài)，此時單擊導(dǎo)航菜單時，即 if Login=1，動態(tài)面板切換到導(dǎo)航菜單對應(yīng)的頁面內(nèi)。

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

操作步驟4—賬號密碼設(shè)置

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

設(shè)置手機號文本框 Text的輸入類型為手機號碼，長度為11位。

設(shè)置密碼文本框Text的輸入類型為密碼，長度為6到18位。

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

點擊登錄btn，if 手機號碼=17611111111 且 密碼=123456時，進入登錄狀態(tài)，此時全局變量 Login設(shè)置為1；當賬號密碼不符合要求時，點擊登錄提示賬號密碼錯誤。

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

四、原型優(yōu)化

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

總結(jié)

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

原型鏈接：https://pan.baidu.com/s/12MmC2BzWmj-CbI4bSWa2Zw

提取碼：2uc4

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。