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

一、效果

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

下面是效果圖：

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

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

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

二、實(shí)現(xiàn)邏輯

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

三、操作步驟

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

操作步驟1—地圖拖動(dòng)

step one.準(zhǔn)備素材自己找地圖圖片，我是用地圖截圖拿ps拼接的，很費(fèi)時(shí)間，地圖后邊我會(huì)和原型一起上傳。

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

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

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

當(dāng)頁面載入時(shí)，讓地圖默認(rèn)坐標(biāo)為（-0.5*This.width，-0.5*This.height），這樣，地圖就能保證每次加載時(shí)都保持在中心位置。

此時(shí)，地圖拖動(dòng)基本成型。

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

Step one.交互設(shè)置單擊地圖圖片時(shí)，地圖長寬均變?yōu)楫?dāng)前大小的1.2倍；

雙擊地圖圖片時(shí)，地圖長寬均變?yōu)楫?dāng)前大小的0.8倍；

右擊地圖圖片時(shí)，地圖長寬均還原為初始值，地圖移動(dòng)到初始位置。如圖所示：

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

操作步驟3—全局變量

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

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

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

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

本案例賬號(hào)為：17611111111本案例密碼為：123456

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

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

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

點(diǎn)擊登錄btn，if 手機(jī)號(hào)碼=17611111111 且 密碼=123456時(shí)，進(jìn)入登錄狀態(tài)，此時(shí)全局變量 Login設(shè)置為1；當(dāng)賬號(hào)密碼不符合要求時(shí)，點(diǎn)擊登錄提示賬號(hào)密碼錯(cuò)誤。

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

四、原型優(yōu)化

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

總結(jié)

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

原型鏈接：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é)議。