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

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

一、準(zhǔn)備工作

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

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

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

二、設(shè)計(jì)交互

2.1 頻道頁(yè)交互（一級(jí)頁(yè)面）

觀察交互

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

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

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

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

底部導(dǎo)航交互

2、微信頻道交互

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

消息列表拖動(dòng)交互

3、通訊錄頻道交互

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

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

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

附近的人通欄交互

5、我頻道交互

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

二維碼名片交互

2.2 頻道子頁(yè)面交互（二級(jí)頁(yè)面）

觀察交互

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

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

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

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

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

相冊(cè)彈出框交互

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

切換菜單可見(jiàn)性

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

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

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

開(kāi)關(guān)按鈕交互

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

加載刷新按鈕交互

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

清空交互

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

精選交互

更多交互

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

作者：努力拼搏的80后

來(lái)源：簡(jiǎn)書(shū)

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

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