0. 站點(diǎn)地圖

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

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

對(duì)與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è)置從不顯示滾動(dòng)條 和 隱藏邊。

2. 登錄

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

3. 底邊欄

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

、

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

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

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

4.1. 書籍簡介

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

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

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

4.2. 好友在讀

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

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

5. 書架

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

5.1. 書城

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

該功能的實(shí)現(xiàn)如上圖用例處所示，首先實(shí)現(xiàn)上線拖動(dòng)很簡單，只要添加動(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)的 前面。

頂部直接下拉松手后的返回功能也是類似，在上面放一個(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)完全類似。

6. 想法

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

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

7. 我、好友排名

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

8. 閱讀

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

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