本文是微信原型制作練習的第二章，上一篇文章（點擊查看）發出后，很多朋友進行了反饋，提出了一些修改意見，收益匪淺，這也是我分享練習過程的原因，共同進步，如果你想跟著一起操作，首先你需要按照第一章的練習先制作出原型。

首先，在開始今天的練習之，前對第一篇文章，留言提出了不使用“添加邊界”來約束移動范圍，而是設置判斷條件，在范圍內進行拖動，超出范圍則還原到邊界，并通過動畫效果最大限度模擬微信的意見，我進行了原型修改，對比下效果十分更加接近真實產品。

使用條件判斷，模擬邊界限制

在上一章中，對于聊天列表拖動的邊界限制直接使用了交互效果里的“添加邊界”，文章發布后有朋友留言提出，邊界限制不能完全真實模擬微信的動畫效果，應該使用條件判斷來實現。原理是，設置三種狀態，在滑動范圍內正常拖動，超出上下界限后，觸發條件判斷，設置動作，將超出范圍的聊天列表移動到邊界內，并配合“動畫效果”，從而達到更逼真的原型模擬。

1. 選擇窗口動態面板，刪除第一章添加的“拖動時”的交互動作。首先設置第一種條件，在正常拖動范圍內：添加case1–>編輯條件–>選擇值后，單擊fx。這里需要用到消息列表動態面板的top值，通過添加局部變量msglist，等于元件，選擇消息列表動態面板。然后通過msglist得到top值。范圍條件為msglist.top>=0，第一章中進行過說明，消息動態面板的坐標是一窗口動態面板的頂端為0 的。

同樣的方法，得到msglist.bottom。范圍條件為msglist.bottom<=window.bottom-window.top，window是窗口動態面板，設置方法同msglist一樣。

條件設置好以后，添加動作–>移動消息列表動態面板–>垂直移動，無動畫也不需要設置邊界。

2. 設置第二種條件，當聊天列表動態面板的top進入了窗口動態面板的邊界時，觸發動作，將其還原到邊界位置，從而實現邊界約束。同1，設置變量msglist，設置條件msglist.top>0時，移動消息列表動態面板到絕對位置（0,0），動畫為緩慢退出，時間500毫秒。

3. 設置第三種條件，此處直接“else if true”即可，其他設置均與上述步驟相同，設置聊天動態面板移動到邊界位置，并設置動畫效果。此處要稍作說明的是，消息動態面板移動到絕對位置（0，[[window.height-msglist.height]]），當將移動聊天面板的bottom移動到窗口動態面板的下界限時，移動動態面板的top比窗口動態面板的上界限高出距離為msglist.height-window.height，因此絕對位置的y坐標需要移動到[[window.height-msglist.height]]

設置完成后，預覽原型效果，發現比上篇文章使用的”添加邊界”效果，確實稍好一些。

下面開始本章的練習，接著上篇文章的原型，繼續豐富原型功能，本篇要實現導航列表的切換，即能夠切換“微信”“通訊錄”“發現”和“我”四種頁面。

第一步：制作導航菜單欄

1. 制作一個長480，寬65的矩形框，保留下邊框，下邊框顏色為CCCCCC，標簽名設置為menu，四個導航圖標，直接截取微信的原圖即可，沒種導航需要截取選中和未選中兩種狀態。

2. 將四種未選中狀態的圖標均勻分布在menu上，以微信圖標為例，右鍵未選中狀態的微信圖標，選擇轉換為動態面板，然后將動態面板標簽名設置為menu_weixin，雙擊該動態面板，添加state2，將選中狀態的微信圖標拷貝到state2中。其他三種導航圖標同樣，以此設置為menu_tongxunlu、menu_faxian、menu_wo。

第二步：設置導航選中切換

1. 以menu_weixin為例，選擇單擊時添加交互動作?！霸O置面板狀態”–>將menu_weixin、menu_tongxunlu、menu_faxian、menu_wo全部選中，選擇狀態為state1。

2. 再添加“設置面板狀態”→ set當前元件state為state2。

3. 復制menu_weixin的單擊時動作case1，分別粘貼到其他三個導航動態面板。

4. 預覽效果

第三步：根據導航切換，改變窗口動態面板對應內容

1. 為窗口動態面板添加對應導航的狀態。雙擊窗口動態面板，添加三種狀態，分別是窗口動態面板-通訊錄狀態、窗口動態面板-發現狀態、窗口動態面板-我狀態。

2. 每種狀態分別設置一個大小適中的矩形框作為背景
，并輸入文字作為區分。下一章練習再分別實現不同導航狀態的具體原型，本章以文字區分代替。

3. 選擇menu_weixin狀態面板，單擊第二步設置的交互動作case1，添加“設置動態面板狀態”→ set窗口動態面板→ 選擇狀態為“聊天列表狀態”。按照此方法，依次設置menu_tongxunlu、menu_faxian、menu-wo為對應的窗口狀態面板狀態。

全部完成后可預覽效果。

該原型連接為：http://interestingprogrammer.coding.me/yanjingProject/微信聊天2

上篇文章發布后收到了很多朋友的留言和意見，從中也學到更多的知識。本篇文章是微信原型制作學習的第二章，同樣希望能與大家共同探討學習，共同進步。

相關閱讀

Axure教程：微信聊天列表原型制作（一）

本文由 @有趣的程序員 原創發布于人人都是產品經理。未經許可，禁止轉載。