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

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

0. 站點地圖

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

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

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

2. 登錄

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

3. 底邊欄

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

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

4. 發現

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

4.1. 書籍簡介

在發現界面中點擊書籍封面，會進入到書籍簡介頁面。

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

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

4.2. 好友在讀

在發現或書籍簡介點擊 “xx好友在讀” 均會進入到好友在讀界面。

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

5. 書架

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

5.1. 書城

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

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

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

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

6. 想法

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

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

7. 我、好友排名

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

8. 閱讀

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

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

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

文件下載

源文件下載：Axure學習之微信讀書.rp

演示地址：Axure學習之微信讀書演示(國內AxShare速度較慢，大家最好還是下載原文件預覽)

特別說明：

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

PS:本人作為初學者，這是做的第一個較完整原型，其中難免有錯誤和不足，歡迎大家一起交流學習?？梢越o我評論留言，謝謝。

本文由人人都是產品經理專欄作家 @楊文強Kpaladin（微信：Kpaladin） 原創發布于人人都是產品經理?。未經許可，禁止轉載。