微信作為我們日常使用頻率最高的App產品，我們每天的啟動次數與使用時長幾乎占據了使用移動終端的一半時間。學習產品設計的你，是否有沒有想過有一天我們自己也可以設計出可交互的微信原型界面。微信是一個超級龐大的App，由于時間原因本文只講解到微信的二級頁面，更深層次的頁面不再展開，線框圖的使用也不在此文中詳細講解，重點講解如何通過Axure實現相關交互效果，講述實現過程中的思路和方法。

我們先來了解下移動端App設計時的尺寸如何設置，要搞清楚這個問題得知道屏幕分辨率和物理像素的相關一系列問題，如要講述清楚，可能需要單開一篇文章，大家可以查看移動設備的界面設計尺寸了解相關知識。

一、準備工作

以1280*720為我們的設計尺寸，確定了尺寸后，打開Axure，設置全局輔助線，養成設置輔助線的習慣可以幫我們將原型做的更規范、更美觀，做出高質量的線框圖。打開手機中的微信，我們先來觀察下微信的一級主界面，主要包含：微信、通訊錄、發現和我共四個頻道頁面。界面中的頂部顯示時間、電量的狀態欄、以及上方的頂部導航和底部的導航欄在設計中使用的頻率較高，我們可以將這些經常用到的內容設置為母版，簡化我們的操作。狀態欄的高度設置40，頂部導航高度設置為90，底部導航高度設置為100，寬度統一為720。設置下母版的拖放行為，狀態欄的拖放行為設置為固定位置（固定坐標0，0），頂部導航的拖放行為設置為脫離母版，底部導航的拖放行為設置為脫離母版。（因上下兩個導航在每個頁面中的內容略有不同，所以設置為脫離母版，即在頁面中對此內容進行修改操作不會影響到原母版內容）

尺寸和母版設定完畢后，準備各一級、二級頁面的線框圖，此處省略一萬字，不在此啰嗦說明。

微信和通信錄界面中的瀑布流列表內容，可以通過中繼器快速實現效果，這樣做出來的保真度會更高，交互更流暢。中繼器的使用方法請參照手把手教您使用Axure7.0的中繼器(Repeater)

二、設計交互

2.1 頻道頁交互（一級頁面）

觀察交互

通過觀察我們得知各頻道頁（一級頁面）存在以下交互行為：1）底部導航欄icon默認為鏤空樣式，文字為黑色，當前頁的icon則為綠色填充效果，文字導航也為相同綠色；2）點擊底部導航中的icon或文字均可跳轉到對應的一級界面；3）微信頻道：上下滑動手勢可以查看頁面內容，點擊搜索icon跳轉至搜索界面，點擊加號按鈕可以彈出隱藏的功能菜單項，再次點擊則菜單隱藏；4）通訊錄頻道：上下滑動手勢可以查看聯系人列表內容，點擊搜索icon跳轉至搜索界面，點擊加號按鈕可以彈出隱藏的功能菜單項，再次點擊則菜單隱藏；5）上下滑動手勢可以查看聯系人列表內容，點擊搜索icon跳轉至搜索界面，點擊加號按鈕可以彈出隱藏的功能菜單項，再次點擊則菜單隱藏，點擊朋友圈、掃一掃等各通欄項均可以跳轉至對應的二級頁面；6）上下滑動手勢可以查看聯系人列表內容，點擊搜索icon跳轉至搜索界面，點擊加號按鈕可以彈出隱藏的功能菜單項，再次點擊則菜單隱藏，點擊相冊、收藏等各通欄項均可以跳轉至對應的二級頁面，點擊我頻道中的二維碼縮略圖彈出二維碼名片。

設計交互：實現的思路與方法

1、底部導航交互

為每個icon及文字設置單擊事件，利用熱區覆蓋在對應的icon及文字上，為每個熱區設置單擊事件，單擊時跳轉至對應的頻道頁，導航欄的交互也可以在母版中設置好。（線框圖階段將每個頻道頁的icon及文字設置為綠色）

底部導航交互

2、微信頻道交互

將消息列表頁的內容設置為動態面板，設置拖動時事件，沿Y軸垂直移動；設置拖動結束時事件，判斷當此動態面板Y坐標大于0的時候，動態面板回到初始位置（0，0）；新增一個拖動結束用例，當此動態面板的Y坐標小于-1280時（1280為動態面板的高度），動態面板回到拖動前位置，至此消息列表的上下滑動交互設定完畢。下面我們在為頂部搜索icon設置鼠標單擊交互事件，點擊后跳轉到搜索頁面。最后我們在為加號圖標按鈕設置交互，將彈出的窗口菜單設置為動態面板并隱藏，選中加號圖標設置鼠標單擊時事件，選擇切換可見性動作，顯示時設置向下滑動的效果，隱藏時設置向上收起的效果，動畫時長均為100毫秒。

消息列表拖動交互

3、通訊錄頻道交互

聯系人列表的上下滑動交互效果、搜索icon及加號icon的交互效果同上述的微信頻道中的方法一致，不在此重復描述

4、發現頻道交互

朋友圈、掃一掃、搖一搖、漂流瓶、購物和游戲通欄分別覆蓋一層熱區，并設置鼠標單擊時事件跳轉至對應的頁面；將附近的人彈出的提示框設置為動態面板，為確定按鈕設置單擊事件跳轉至二級頁面，為取消文字按鈕設置單擊事件隱藏提示框；附近的人通欄增加一個熱區，設置鼠標單擊事件顯示提示框，并設置燈箱效果，置頂顯示；頂部導航的搜索、加號交互設置同微信頻道中一致，不再重復描述。（提示框在準備工作階段畫好線框圖，默認隱藏）

附近的人通欄交互

5、我頻道交互

底部導航及頂部導航中的搜索、加號同其他幾個頻道頁一致；為頭像、相冊、收藏、錢包、卡券、表情、設置通欄分別覆蓋一層熱區，并設置鼠標單擊事件跳轉至對應的頁面；為頭像右側的二維碼單獨設置鼠標單擊事件，對個人二維碼名片設置切換可見性動作，置頂顯示，并設置燈箱效果，二維碼名片默認隱藏。（二維碼名片內容在準備工作階段已畫好）

二維碼名片交互

2.2 頻道子頁面交互（二級頁面）

觀察交互

各頻道的子頁面主要包含系統默認搜索、朋友圈、掃一掃、搖一搖、附近的人、漂流瓶、購物、游戲、個人信息、相冊、收藏、錢包、卡券、表情和設置頁面。通過觀察我們發現各頻道子頁面主要有以下的交互行為：

1. 點擊各頁面的返回按鈕均返回至上一層頁面；
2. 點擊朋友圈右上角的圖標彈出選擇圖片的彈框；
3. 點擊掃一掃、附近的人、購物、游戲、錢包頁面右上角的圖標彈出功能菜單，再次點擊菜單隱藏；
4. 點擊搖一搖、漂流瓶右上角的設置按鈕、游戲頁面上方的搜索按鈕、相冊右上角的消息按鈕、收藏頁面右上角的搜索和加號按鈕、表情頁面右上角的搜索和設置按鈕則屏幕向左滑動跳轉至下一層頁面；
5. 搖一搖設置頁面、漂流瓶設置頁面，點擊音效右側的按鈕，則按鈕左右滑動；
6. 附近的人頁面顯示一個矩形框確定地理位置，2秒后矩形框消失；
7. 點擊卡券消息通知頁面、相冊消息頁面右上角的清空文字按鈕，則頁面內容消失；
8. 點擊表情頁面上方的“精選表情”與“更多表情”則切換頁面顯示的內容。

設計交互：實現的思路和方法

1、各頁面返回交互：設置鼠標單擊事件，選擇打開鏈接動作返回上一頁。

2、朋友圈交互：右上角的相冊圖標設置鼠標單擊事件，顯示被隱藏的相冊彈出框，并設置燈箱效果，置頂顯示。

相冊彈出框交互

3、為掃一掃、附近的人、購物、游戲、錢包頁面右上角的icon圖標設置鼠標單擊事件，增加切換可見性動作，顯示時設置向下滑動的效果，隱藏時設置向上收起的效果，動畫時長均為100毫秒；其中購物界面中右上角的圖標設置為動態面板，設置兩個狀態，每個狀態上傳一個圖標，設置鼠標單擊事件的時候自動切換下一個面板狀態。

切換菜單可見性

4、為搖一搖、漂流瓶右上角的設置按鈕、游戲頁面上方的搜索按鈕、相冊右上角的消息按鈕、收藏頁面右上角的搜索和加號按鈕、表情頁面右上角的搜索和設置按鈕設置鼠標單擊事件，面板狀態設置為跳轉到對應的狀態頁面，頁面進入進出的動畫設置為向左滑動，動畫時長設置為500毫秒。同樣的思路方法將跳轉的狀態頁面中右上角的圖標設置鼠標單擊事件切換動態面板狀態，返回上一層頁面，則進入進出的動畫選擇向右滑動，動畫時長為500毫秒。（提前將各動態面板下的狀態畫好對應的線框圖，將整個頁面轉換為動態面板）

切換動態面板狀態

5、搖一搖設置、漂流瓶設置頁面交互：將大的綠色矩形框設置為動態面板，并設置為開啟和關閉兩個狀態（綠色為開啟狀態、關閉狀態沒有填充色，默認為開啟狀態），針對動態面板設置鼠標單擊事件，判斷當動態面板為開啟狀態時，移動上方白色矩形按鈕，X軸經過-(動態面板寬度/2-2)，設置線性動畫300毫秒，動態面板切換為關閉狀態并設置一個逐漸進入退出的300毫秒動畫；當動態面板為關閉狀態時，則白色矩形按鈕沿X軸經過(動態面板寬度/2-2)，設置線性動畫300毫秒，動態面板為關閉狀態并設置一個逐漸進入退出的300毫秒動畫。（這里的移動設置為相對距離）

開關按鈕交互

6、附近的人頁面交互：頁面設置一個加載事件，等待2秒后，隱藏定位地理位置的動態面板；動態面板中為加載圓圈設置載入時事件，為圓圈添加旋轉動作，設置以部件中心點順時針旋轉1440度即4圈，并設置一個2秒的線性動畫。

加載刷新按鈕交互

7、卡券消息通知、相冊消息頁面交互：將頁面中間的內容區域選中設置為一個內容組合，選中右上角清空文字，設置鼠標單擊事件，新增動作隱藏掉中間的內容組合。

清空交互

8、表情頁面交互：將“精選表情”和“更多表情”這兩個Table按鈕設置為一個組，并設置部件選中狀態為文字顏色變綠，將頁面中下方的內容設置為動態面板設置兩個內容狀態。首先為“精選表情”設置鼠標單擊事件，單擊后將該部件設置為選中狀態，移動下面的綠色線條到達當前位置，設定好當前的位置坐標，將下方的顯示內容切換到對應的動態面板狀態，設置200毫秒逐漸顯示的過渡動畫；然后為“更多”設置鼠標單擊事件，單擊后將該部件設置為選中狀態，移動下面的綠色線條到達位置X（360）Y軸（部件的Y軸坐標），將下方的顯示內容切換到對應的動態面板狀態并設置一個200毫秒逐漸顯示的過渡動畫。（這里的移動設置為絕對距離）

精選交互

更多交互

講一千道一萬，說的再多再詳細還是要靠大家親自上手操作，為了方便有興趣的朋友學習，這里給出源文件的下載地址：http://url.cn/2CIpnKF

作者：努力拼搏的80后

來源：簡書

原文鏈接：http://www.jianshu.com/p/d3f087169276#

本文由 @努力拼搏的80后 授權發布于人人都是產品經理，未經作者許可，禁止轉載。