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

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

0. 站點(diǎn)地圖

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

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

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

2. 登錄

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

3. 底邊欄

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

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

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

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

4.1. 書(shū)籍簡(jiǎn)介

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

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

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

4.2. 好友在讀

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

點(diǎn)擊右上角的羽毛筆按鈕，會(huì)彈出 寫(xiě)想法 的界面，應(yīng)該說(shuō)整個(gè)微信讀書(shū)都是圍繞著社交展開(kāi)的，而閱讀的社交重點(diǎn)就在于用戶(hù)分享自己的閱讀想法，所以寫(xiě)想法這個(gè)功能的入口較多。該功能的實(shí)現(xiàn)是通過(guò)對(duì)寫(xiě)想法這個(gè)動(dòng)態(tài)面板的的顯示和隱藏。另外我還在主界面和寫(xiě)想法動(dòng)態(tài)面板之間加入了一個(gè) 模糊化 動(dòng)態(tài)面板，然后點(diǎn)擊羽毛筆功能，會(huì)同時(shí)彈出寫(xiě)想法和模糊化動(dòng)態(tài)面板，而實(shí)現(xiàn)后面的背景看上去的模糊效果。(實(shí)際上這里有更簡(jiǎn)單的方法，就是顯示動(dòng)態(tài)面板時(shí)給它設(shè)置一個(gè)燈箱效果就好了)

5. 書(shū)架

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

5.1. 書(shū)城

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

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

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

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

6. 想法

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

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

7. 我、好友排名

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

8. 閱讀

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

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

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

文件下載

源文件下載：Axure學(xué)習(xí)之微信讀書(shū).rp

演示地址：Axure學(xué)習(xí)之微信讀書(shū)演示(國(guó)內(nèi)AxShare速度較慢，大家最好還是下載原文件預(yù)覽)

特別說(shuō)明：

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

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

本文由人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家 @楊文強(qiáng)Kpaladin（微信：Kpaladin） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可，禁止轉(zhuǎn)載。