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

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

0. 站點(diǎn)地圖

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

1. 手機(jī)框架（即我的站點(diǎn)地圖中的微信讀書）

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

2. 登錄

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

3. 底邊欄

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

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

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

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

4.1. 書籍簡介

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

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

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

4.2. 好友在讀

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

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

5. 書架

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

5.1. 書城

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

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

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

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

6. 想法

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

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

7. 我、好友排名

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

8. 閱讀

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

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

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

文件下載

源文件下載：

演示地址：

最新版Axure下載>>>

特別說明：

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

本文轉(zhuǎn)載自