最近在學Axure，周末做了個案例練練手，選了騰訊新出的微信讀書，主要考慮這是1.0版，所以功能不是那么復(fù)雜。做完之后回顧了一下自己的制作過程，既算是做一個總結(jié)，也希望能給同樣正在學習的新手帶來一點幫助。就我個人來說，對于工具的學習，無論是某一個軟件，還是某一門程序語言，都是比較習慣先找個資料看一下基礎(chǔ)的介紹，然后就開始做一個稍微復(fù)雜點的案例，在案例中快速學習，遇到不懂的再去查資料。這樣不僅可以幫助我們快速的掌握工具，而且可以體會到這項工具的實際用法。

下面大概介紹一下我這個原型的制作。

0. 站點地圖

制作原型之前最好先構(gòu)思一下自己的原型框架，然后建出站點地圖，這樣可以幫助自己理清邏輯，當然，實際制作的過程中可以不斷對產(chǎn)品地圖進行修改的。

1. 手機框架（即我的站點地圖中的微信讀書）

對與APP的原型制作不同于網(wǎng)站，網(wǎng)站是很多網(wǎng)頁完整的刷新，而APP，我們既要看到一個手機，又要看到里面的內(nèi)容，而手機外殼最好是不要進行刷新的，這個可以借助內(nèi)部框架部件來實現(xiàn)。如下圖所示，只要在手機外殼中間拖入一個內(nèi)部框架，然后設(shè)置 框架目標頁 到登錄頁面，設(shè)置從不顯示滾動條 和 隱藏邊。

2. 登錄

登錄界面的實現(xiàn)也比較簡單，給登錄處添加單擊跳轉(zhuǎn)鏈接即可。有一點比較特殊的是，我在上面設(shè)置了一個隱藏的動態(tài)面板“登錄失敗”，然后頁面載入時會判斷一個LoginResult的值，決定是否讓其顯示一秒后消失，這個變量值來源于后一個界面的微信登錄，如果用戶點擊取消而導(dǎo)致的跳轉(zhuǎn)回登錄界面就會觸發(fā)動態(tài)面板的顯示。動態(tài)面板的顯示隱藏功能在本原型中用的很多，后面大家可以仔細體會一下它的用法。

3. 底邊欄

在主界面的四個頁面中我們將要用到這個原型中一個很重要的母版 底邊框，所以我們需要先將這個母版做好。底邊欄的實現(xiàn)是排列了四個圖片部件，然后對每個都設(shè)定選中時的圖標。

然后在 發(fā)現(xiàn)、書架、想法、我四個頁面添加頁面載入時事件選中其中某一個部件，并且將其設(shè)置為禁用。這里有個小技巧是可以如下圖所示將四個部件設(shè)置為選項組，這樣同一時間將只能有一個處于選中狀態(tài)，設(shè)置頁面載入時事件時就只需要將對應(yīng)的設(shè)定為選中，而不需要去將其它的設(shè)定為未選中了。

4. 發(fā)現(xiàn)

發(fā)現(xiàn)界面主要展示目前你的好友正在讀的書籍，可以通過向左向右劃動來查看更多。該功能的實現(xiàn)是使用動態(tài)面板的“向右滑動時”和“向左滑動時”，配合切換效果中的“向右滑動”和“向左滑動”，具體用例信息見下圖。

4.1. 書籍簡介

在發(fā)現(xiàn)界面中點擊書籍封面，會進入到書籍簡介頁面。

需要注意的是書籍簡介界面的入口主要有三個，”發(fā)現(xiàn)界面中點擊書籍”、“好友書架中點擊書籍”(好友書架功能我沒有做)、“書城中點擊書籍”。所以左上角的返回按鈕也對應(yīng)三個目的地。具體通過入口進來時設(shè)定變量的值 ，然后返回按鈕點擊時對該變量進行判斷后，決定跳轉(zhuǎn)到何處。（后面的類似功能都是通過這種方式，就不再贅述了）

另外在此界面中點擊書封面或者試讀按鈕均可進入閱讀界面。（同時為了閱讀界面的返回，這里會設(shè)定一個變量值）。

4.2. 好友在讀

在發(fā)現(xiàn)或書籍簡介點擊 “xx好友在讀” 均會進入到好友在讀界面。

點擊右上角的羽毛筆按鈕，會彈出 寫想法 的界面，應(yīng)該說整個微信讀書都是圍繞著社交展開的，而閱讀的社交重點就在于用戶分享自己的閱讀想法，所以寫想法這個功能的入口較多。該功能的實現(xiàn)是通過對寫想法這個動態(tài)面板的的顯示和隱藏。另外我還在主界面和寫想法動態(tài)面板之間加入了一個 模糊化 動態(tài)面板，然后點擊羽毛筆功能，會同時彈出寫想法和模糊化動態(tài)面板，而實現(xiàn)后面的背景看上去的模糊效果。

5. 書架

書架界面就比較簡單了，主要是點擊書的封面會進入到書籍簡介界面，點擊右上角或者最后一本書之后的加號會進入到書城。

5.1. 書城

書城界面比較特殊的是可以進行上下拖動，而且拖動到最上面和最下面一定程度會無法再拖動，并且釋放后會自動回到最頂和最底。（其實這個功能在APP的很多界面都有，本原型只在書城界面上實現(xiàn)了作為示范）

該功能的實現(xiàn)如上圖用例處所示，首先實現(xiàn)上線拖動很簡單，只要添加動態(tài)面板拖動時沿Y軸拖動即可。

而對于頂部往下拉到一定程度不能繼續(xù)拉的功能的具體做法是在頂部設(shè)置一塊圖片熱區(qū)。然后給動態(tài)面板設(shè)定 拖動動態(tài)面板時 事件，當動態(tài)面板未接觸該圖片熱區(qū)，則將動態(tài)面板移動到一個絕對位置，其中要注意的是必須將這個用例放在動態(tài)面板沿Y軸移動的 前面。

頂部直接下拉松手后的返回功能也是類似，在上面放一個很小的圖片熱區(qū)，然后設(shè)定 結(jié)束拖動動態(tài)面板時 事件，如果動態(tài)面板未接觸到該圖片熱區(qū)，則將動態(tài)面板移動到絕對位置。同理，底部的實現(xiàn)完全類似。

6. 想法

想法應(yīng)該是微信讀書的一大重點，很多其它軟件雖然也有這樣的功能，但是微信讀書生而可以借助微信本身積累的好友圈，可以較為容易的形成這樣一個分享交流讀書想法的平臺。想法的功能上和微信朋友圈很類似，主要是針對某一本書發(fā)表自己的想法，然后其它人可以點贊，評論。

大家可以看到這個頁面中的動態(tài)面板比較多，但其實用的技術(shù)都是前面使用過的了，主要就是點擊某個按鈕之后使動態(tài)面板顯示隱藏即可，需要注意的是要自己在腦袋里想象一下這里面幾個功能的過程以決定幾個動態(tài)面板的上下層關(guān)系。（在部件管理中排列動態(tài)面板即可實現(xiàn)動態(tài)面板的上下層關(guān)系）

7. 我、好友排名

“我” 這里的功能其實還很多的，而“好友排名”應(yīng)該算是微信讀書的一個特色，所以這里將其分享效果做了一下，其它功能比較基礎(chǔ)，就沒有做。功能實現(xiàn)也很簡單，就是點擊后的顯示隱藏。

8. 閱讀

看下圖大家會發(fā)現(xiàn)這個界面中動態(tài)面板非常之多，幾乎所有的功能都是彈出式進行。這是因為閱讀功能是讀書軟件的最基本功能，用戶的閱讀體驗不宜被打斷，任何操作結(jié)束后都應(yīng)該直接回到閱讀界面，而不用經(jīng)過跳轉(zhuǎn)。

這里的主要功能也都是通過動態(tài)面板的的顯示隱藏來實現(xiàn)，就不再贅述了。而閱讀中的拖動效果，也是前面用過的 左右滑動 時事件，同時點擊屏幕的右邊進入下一頁，左邊進入上一頁就更簡單了，添加途中的 4,5 兩個圖片熱區(qū)即可。

寫完了發(fā)現(xiàn)可能寫的還是不夠詳細，光是看文字估計大家都會有點不明所以，所以在此給出axure原文件供大家下載，對照著看應(yīng)該很容易掌握這里面用到的幾個功能。然后有一點不足是我這個原型沒能用到另一個很重要的部件 中繼器，下次我會再做一個會重點使用到中繼器的案例。

文件下載

源文件下載：

演示地址：

最新版Axure下載>>>

特別說明：

此原型只是為了學習axure軟件，并非實際作為產(chǎn)品經(jīng)理應(yīng)該將原型畫成這樣，實際工作中，產(chǎn)品經(jīng)理是在UI之前輸出原型，既不可能有如此完善的UI素材，也完全沒必要做成這樣，產(chǎn)品經(jīng)理的原型最重要的是體現(xiàn)產(chǎn)品邏輯結(jié)構(gòu)和功能點。為了防止給和我一樣的產(chǎn)品初學者帶來錯誤觀點，所以特此說明。

本文轉(zhuǎn)載自