微信作為我們?nèi)粘Ｊ褂妙l率最高的App產(chǎn)品，我們每天的啟動次數(shù)與使用時長幾乎占據(jù)了使用移動終端的一半時間。學(xué)習(xí)產(chǎn)品設(shè)計的你，是否有沒有想過有一天我們自己也可以設(shè)計出可交互的微信原型界面。微信是一個超級龐大的App，由于時間原因本文只講解到微信的二級頁面，更深層次的頁面不再展開，線框圖的使用也不在此文中詳細(xì)講解，重點(diǎn)講解如何通過Axure實(shí)現(xiàn)相關(guān)交互效果，講述實(shí)現(xiàn)過程中的思路和方法。

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

一、準(zhǔn)備工作

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

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

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

二、設(shè)計交互

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

觀察交互

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

設(shè)計交互：實(shí)現(xiàn)的思路與方法

1、底部導(dǎo)航交互

為每個icon及文字設(shè)置單擊事件，利用熱區(qū)覆蓋在對應(yīng)的icon及文字上，為每個熱區(qū)設(shè)置單擊事件，單擊時跳轉(zhuǎn)至對應(yīng)的頻道頁，導(dǎo)航欄的交互也可以在母版中設(shè)置好。（線框圖階段將每個頻道頁的icon及文字設(shè)置為綠色）

底部導(dǎo)航交互

2、微信頻道交互

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

消息列表拖動交互

3、通訊錄頻道交互

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

4、發(fā)現(xiàn)頻道交互

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

附近的人通欄交互

5、我頻道交互

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

二維碼名片交互

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

觀察交互

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

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

設(shè)計交互：實(shí)現(xiàn)的思路和方法

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

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

相冊彈出框交互

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

切換菜單可見性

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

切換動態(tài)面板狀態(tài)

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

開關(guān)按鈕交互

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

加載刷新按鈕交互

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

清空交互

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

精選交互

更多交互

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

作者：努力拼搏的80后

來源：簡書

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

本文由 @努力拼搏的80后 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。