之前自學(xué)過Axure軟件，但是平常工作只用到了線框圖，沒有用到很復(fù)雜的交互效果，最近利用業(yè)余時間進(jìn)行Axure軟件的自學(xué)，在練習(xí)時選用了單讀APP進(jìn)行選型臨摹，由于單讀APP是款小眾且具有文藝范的應(yīng)用，結(jié)構(gòu)也比較簡單，符合我這個偽文藝青年的需求，所以便選用此作為原型。

個人覺得在學(xué)習(xí)任何軟件，光是看教程或者書本是沒有意義的，主要還是要動手去練，建議大家選擇一個結(jié)構(gòu)比較簡單、自己又比較喜歡的應(yīng)用進(jìn)行臨摹，在實(shí)踐中學(xué)習(xí)、在實(shí)踐中提供，這樣就會事半功倍；本人通過此次原型臨摹學(xué)到了以下幾個知識點(diǎn)是之前沒有掌握的，列在下面，希望對大家在使用該原型時有所幫助：

1. 全局變量—頁面之間的動態(tài)面板狀態(tài)調(diào)用
2. 局部變量—計時器的算法生成
3. 條件篩選—部件文字、動態(tài)面板狀態(tài)、值
4. 動態(tài)面板狀態(tài)之間的切換—模擬手機(jī)頁面滑動（左右上下、淡入淡出）
5. 動態(tài)面板拖拽—模擬手機(jī)頁面拖拽效果、拖拽限制
6. 動態(tài)面板接觸后移動—模擬手機(jī)頁面翻頁效果
7. 輸入框獲得焦點(diǎn)后提示消失—模擬搜索框、輸入框效果

下面我大概介紹一下我的原型制作，水平有限，請多指正。

1、站點(diǎn)地圖

我的站點(diǎn)地圖分為首頁、文字頁面、搜索頁面、登錄頁面，結(jié)構(gòu)比較簡單。主要是由于我在頁面之間的切換大量運(yùn)用了動態(tài)面板，因?yàn)閯討B(tài)面板狀態(tài)的切換可以逼真模擬出APP在手機(jī)操作實(shí)際轉(zhuǎn)場動效的效果。如在首頁就設(shè)置了8個一級動態(tài)面板。

2、首頁

1）用戶第一次進(jìn)入APP時需要載入啟動頁，所以在用例中設(shè)置載入時進(jìn)入啟動頁，2秒后跳轉(zhuǎn)至內(nèi)容頁；

2）由于首頁所有頁面都是通過動態(tài)面板的狀態(tài)變化實(shí)現(xiàn)的，所以當(dāng)其他頁面需要跳轉(zhuǎn)回首頁時需要借助全局變量來進(jìn)行判斷以確定動態(tài)面板的狀態(tài)。所以設(shè)置全局變量arrive_first，以判斷跳轉(zhuǎn)頁面。

3、內(nèi)容列表頁

在內(nèi)容列表頁中我們要實(shí)現(xiàn)頁面沿Y軸拖拽，向上拖拽、向下拖拽的限制，及拖拽至某一坐標(biāo)自動翻頁的效果等。

1）對內(nèi)容頁進(jìn)行拖拽限制，需內(nèi)容頁只沿Y軸移動；

2）需要完成向上和向下拖拽的限制，即拖拽內(nèi)容不能超過內(nèi)容本身，當(dāng)用戶向下拖拽時我們以“我的圖標(biāo)”為參照，當(dāng)用戶向上拖拽時我們要建立一個隱藏的熱區(qū)作為參照，當(dāng)前動態(tài)面板沒有接觸該區(qū)域時，會自動將動態(tài)面板恢復(fù)至原有位置，這里有兩點(diǎn)需要注意，第一、向上拖拽、向下拖拽動態(tài)面板恢復(fù)的坐標(biāo)是不同的；第二、建議動畫效果選擇“彈跳”，這樣既感覺變化不生硬，又可以模擬出手機(jī)動效的特點(diǎn)。

3）因?yàn)樵趹?yīng)用中超過一頁的內(nèi)容，當(dāng)用手指拖動超過某個臨界值時，頁面會自動上拉至下個界面，所以我在此也模擬了該效果。首先需要在頁面中找一個坐標(biāo)，即當(dāng)頁面拖拽到哪個臨界值時，頁面會自動下拉，在此我找的是標(biāo)題作為坐標(biāo)，當(dāng)標(biāo)題接觸到我的圖標(biāo)時，頁面會自動上拉到下一界面；當(dāng)標(biāo)題未接觸到我的圖標(biāo)時，頁面會自動回到當(dāng)前界面。

?

4、登錄頁面

1）當(dāng)點(diǎn)擊“我的圖標(biāo)”進(jìn)入我的頁面時，系統(tǒng)會自動檢測用戶是否為登錄狀態(tài)，如果是非登錄狀態(tài)則會跳轉(zhuǎn)至登錄頁面，如果是登錄狀態(tài)則會進(jìn)入我的頁面。這里就需要引入第二個全局變量sign_up來判斷用戶是否進(jìn)行登錄。當(dāng)sign_up變量值不等于“已登錄”時用戶跳轉(zhuǎn)至登錄頁面，否則則進(jìn)入我的頁面。

2）在登錄頁面中，點(diǎn)擊“登錄”按鈕需要對輸入框中的“手機(jī)號碼”、“密碼”進(jìn)行判斷，只有當(dāng)手機(jī)號碼為“13866666666”、密碼為“111111”時方可成功登錄。

3）其他輸入情況則需顯示錯誤提示。

5、找回密碼頁面

在找回密碼界面中重點(diǎn)要進(jìn)行說明的是計時器的使用，當(dāng)點(diǎn)擊“點(diǎn)擊驗(yàn)證”按鈕時按鈕消失，開啟計時器，當(dāng)“計時器”數(shù)字為0時，計時器消失、“點(diǎn)擊驗(yàn)證”按鈕恢復(fù)。

1）需要建立一個動態(tài)面板，命名為“坐標(biāo)”并設(shè)置為隱藏，設(shè)置為2個狀態(tài)，并設(shè)置用例，當(dāng)該動態(tài)面板狀態(tài)改變時，如果“計時器”數(shù)字大于等于1則倒計時數(shù)字-1，如果為0時則隱藏計時器，恢復(fù)“點(diǎn)擊驗(yàn)證”按鈕；

2）這里涉及到需要建立一個局部變量，并設(shè)定每觸發(fā)1次，數(shù)字-1的算法；

3）給“點(diǎn)擊驗(yàn)證”按鈕設(shè)置用例，當(dāng)點(diǎn)擊該按鈕時，動態(tài)面板“坐標(biāo)”每1秒鐘更換狀態(tài)1次，這樣通過動態(tài)面板“坐標(biāo)”每1秒狀態(tài)的更換可觸發(fā)局部變量的計算，達(dá)成計時器的效果。

6、評論頁面

評論頁面要說的是，當(dāng)輸入框獲得焦點(diǎn)后彈出鍵盤的實(shí)現(xiàn)方式。

1）需要建立一個鍵盤及輸入框，將以上部件放置在動態(tài)面板中，新建用例，當(dāng)輸入框獲得焦點(diǎn)時，整個動態(tài)面板向上移動216個像素（鍵盤的高度）；所以當(dāng)點(diǎn)擊輸入框時整個動態(tài)面板會上移216像素，這樣在頁面中就會顯示鍵盤部件。

2）當(dāng)輸入框失去焦點(diǎn)時，整個動態(tài)面板向下移動216個像素（鍵盤的高度），所以當(dāng)不再點(diǎn)擊輸入框時整個動態(tài)面板會下移216像素，鍵盤便會移出頁面之外。

7、搜索頁面

當(dāng)用戶點(diǎn)擊搜索框時，搜索圖標(biāo)及搜索文字提示需自動移動至搜索框左側(cè)，當(dāng)用戶點(diǎn)擊別處時恢復(fù)。

1）此處需要考慮當(dāng)搜索框獲得焦點(diǎn)時，搜索圖標(biāo)與文字移動的位置，且動畫需要選擇線性移動，已給用戶實(shí)時反饋。

以上說明只是針對該選型中的關(guān)鍵知識點(diǎn)和重點(diǎn)的交互進(jìn)行說明，有一些細(xì)節(jié)在此沒有說明，還是希望大家能夠下載原型進(jìn)行體驗(yàn)

特別說明：

此原型只是為了學(xué)習(xí)axure軟件，實(shí)際工作中，產(chǎn)品經(jīng)理是在UI之前輸出原型，多為線框圖，既不可能有如此完善的UI素材，也完全沒必要做成這樣，產(chǎn)品經(jīng)理的原型最重要的是體現(xiàn)產(chǎn)品邏輯結(jié)構(gòu)和功能點(diǎn)，工具的作用是為了提供效率達(dá)成目的，切勿陷入追求原型的完美而影響項(xiàng)目進(jìn)度的陷阱中。為了防止給和我一樣的產(chǎn)品初學(xué)者帶來錯誤觀點(diǎn)，所以特此說明。

原型分享

作者鏈接: http://pan.baidu.com/s/1eRsFhtg 密碼: 6psw

官方鏈接:?https://pan.baidu.com/s/1sljhAih 密碼: hf9q

作者：小L，一個熱愛互聯(lián)網(wǎng)產(chǎn)品，學(xué)習(xí)互聯(lián)網(wǎng)產(chǎn)品的非典型產(chǎn)品經(jīng)理。

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