導(dǎo)航主界面
微信作為我們?nèi)粘Ｊ褂妙l率最高的App產(chǎn)品，每天的啟動(dòng)次數(shù)與使用時(shí)長(zhǎng)幾乎占據(jù)了使用移動(dòng)終端的一半時(shí)間。學(xué)習(xí)產(chǎn)品設(shè)計(jì)的你，有沒有想過有一天我們自己也可以設(shè)計(jì)出可交互的微信原型界面。微信是一個(gè)超級(jí)龐大的App，由于時(shí)間原因本文只講解到微信的二級(jí)頁面，更深層次的頁面不再展開，線框圖的使用也不在此文中詳細(xì)講解，重點(diǎn)講解如何通過Axure實(shí)現(xiàn)相關(guān)交互效果，講述實(shí)現(xiàn)過程中的思路和方法。
一、準(zhǔn)備工作
以1280*720為我們的設(shè)計(jì)尺寸，確定了尺寸后，打開Axure，設(shè)置全局輔助線，養(yǎng)成設(shè)置輔助線的習(xí)慣可以幫我們將原型做的更規(guī)范、更美觀，做出高質(zhì)量的線框圖。打開手機(jī)中的微信，我們先來觀察下微信的一級(jí)主界面，主要包含：微信、通訊錄、發(fā)現(xiàn)和我共四個(gè)頻道頁面。界面中的頂部顯示時(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è)頁面中的內(nèi)容略有不同，所以設(shè)置為脫離母版，即在頁面中對(duì)此內(nèi)容進(jìn)行修改操作不會(huì)影響到原母版內(nèi)容）
尺寸和母版設(shè)定完畢后，準(zhǔn)備各一級(jí)、二級(jí)頁面的線框圖，此處省略一萬字，不在此啰嗦。
微信和通信錄界面中的瀑布流列表內(nèi)容，可以通過中繼器快速實(shí)現(xiàn)效果，這樣做出來的保真度會(huì)更高，交互更流暢。
二、設(shè)計(jì)交互
2.1 頻道頁交互（一級(jí)頁面）
觀察交互
通過觀察我們得知各頻道頁（一級(jí)頁面）存在以下交互行為：1）底部導(dǎo)航欄icon默認(rèn)為鏤空樣式，文字為黑色，當(dāng)前頁的icon則為綠色填充效果，文字導(dǎo)航也為相同綠色；2）點(diǎn)擊底部導(dǎo)航中的icon或文字均可跳轉(zhuǎn)到對(duì)應(yīng)的一級(jí)界面；3）微信頻道：上下滑動(dòng)手勢(shì)可以查看頁面內(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í)頁面；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í)頁面，點(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)的頻道頁，導(dǎo)航欄的交互也可以在母版中設(shè)置好。（線框圖階段將每個(gè)頻道頁的icon及文字設(shè)置為綠色）
底部導(dǎo)航交互
2）微信頻道交互：將消息列表頁的內(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)到搜索頁面。最后我們?cè)跒榧犹?hào)圖標(biāo)按鈕設(shè)置交互，將彈出的窗口菜單設(shè)置為動(dòng)態(tài)面板并隱藏，選中加號(hào)圖標(biāo)設(shè)置鼠標(biāo)單擊時(shí)事件，選擇切換可見性動(dòng)作，顯示時(shí)設(shè)置向下滑動(dòng)的效果，隱藏時(shí)設(shè)置向上收起的效果，動(dòng)畫時(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)的頁面；將附近的人彈出的提示框設(shè)置為動(dòng)態(tài)面板，為確定按鈕設(shè)置單擊事件跳轉(zhuǎn)至二級(jí)頁面，為取消文字按鈕設(shè)置單擊事件隱藏提示框；附近的人通欄增加一個(gè)熱區(qū)，設(shè)置鼠標(biāo)單擊事件顯示提示框，并設(shè)置燈箱效果，置頂顯示；頂部導(dǎo)航的搜索、加號(hào)交互設(shè)置同微信頻道中一致，不再重復(fù)描述。（提示框在準(zhǔn)備工作階段畫好線框圖，默認(rèn)隱藏）
附近的人通欄交互
5）我頻道交互：底部導(dǎo)航及頂部導(dǎo)航中的搜索、加號(hào)同其他幾個(gè)頻道頁一致；為頭像、相冊(cè)、收藏、錢包、卡券、表情、設(shè)置通欄分別覆蓋一層熱區(qū)，并設(shè)置鼠標(biāo)單擊事件跳轉(zhuǎn)至對(duì)應(yīng)的頁面；為頭像右側(cè)的二維碼單獨(dú)設(shè)置鼠標(biāo)單擊事件，對(duì)個(gè)人二維碼名片設(shè)置切換可見性動(dòng)作，置頂顯示，并設(shè)置燈箱效果，二維碼名片默認(rèn)隱藏。（二維碼名片內(nèi)容在準(zhǔn)備工作階段已畫好）
二維碼名片交互
2.2 頻道子頁面交互（二級(jí)頁面）
觀察交互
各頻道的子頁面主要包含系統(tǒng)默認(rèn)搜索、朋友圈、掃一掃、搖一搖、附近的人、漂流瓶、購(gòu)物、游戲、個(gè)人信息、相冊(cè)、收藏、錢包、卡券、表情和設(shè)置頁面。通過觀察我們發(fā)現(xiàn)各頻道子頁面主要有以下的交互行為：1）點(diǎn)擊各頁面的返回按鈕均返回至上一層頁面；2）點(diǎn)擊朋友圈右上角的圖標(biāo)彈出選擇圖片的彈框；3）點(diǎn)擊掃一掃、附近的人、購(gòu)物、游戲、錢包頁面右上角的圖標(biāo)彈出功能菜單，再次點(diǎn)擊菜單隱藏；4）點(diǎn)擊搖一搖、漂流瓶右上角的設(shè)置按鈕、游戲頁面上方的搜索按鈕、相冊(cè)右上角的消息按鈕、收藏頁面右上角的搜索和加號(hào)按鈕、表情頁面右上角的搜索和設(shè)置按鈕則屏幕向左滑動(dòng)跳轉(zhuǎn)至下一層頁面；5）搖一搖設(shè)置頁面、漂流瓶設(shè)置頁面，點(diǎn)擊音效右側(cè)的按鈕，則按鈕左右滑動(dòng)；6）附近的人頁面顯示一個(gè)矩形框確定地理位置，2秒后矩形框消失；7）點(diǎn)擊卡券消息通知頁面、相冊(cè)消息頁面右上角的清空文字按鈕，則頁面內(nèi)容消失；8）點(diǎn)擊表情頁面上方的“精選表情”與“更多表情”則切換頁面顯示的內(nèi)容。
設(shè)計(jì)交互：實(shí)現(xiàn)的思路和方法
1）各頁面返回交互：設(shè)置鼠標(biāo)單擊事件，選擇打開鏈接動(dòng)作返回上一頁。
2）朋友圈交互：右上角的相冊(cè)圖標(biāo)設(shè)置鼠標(biāo)單擊事件，顯示被隱藏的相冊(cè)彈出框，并設(shè)置燈箱效果，置頂顯示。
相冊(cè)彈出框交互
3）為掃一掃、附近的人、購(gòu)物、游戲、錢包頁面右上角的icon圖標(biāo)設(shè)置鼠標(biāo)單擊事件，增加切換可見性動(dòng)作，顯示時(shí)設(shè)置向下滑動(dòng)的效果，隱藏時(shí)設(shè)置向上收起的效果，動(dòng)畫時(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)。
切換菜單可見性
4）為搖一搖、漂流瓶右上角的設(shè)置按鈕、游戲頁面上方的搜索按鈕、相冊(cè)右上角的消息按鈕、收藏頁面右上角的搜索和加號(hào)按鈕、表情頁面右上角的搜索和設(shè)置按鈕設(shè)置鼠標(biāo)單擊事件，面板狀態(tài)設(shè)置為跳轉(zhuǎn)到對(duì)應(yīng)的狀態(tài)頁面，頁面進(jìn)入進(jìn)出的動(dòng)畫設(shè)置為向左滑動(dòng)，動(dòng)畫時(shí)長(zhǎng)設(shè)置為500毫秒。同樣的思路方法將跳轉(zhuǎn)的狀態(tài)頁面中右上角的圖標(biāo)設(shè)置鼠標(biāo)單擊事件切換動(dòng)態(tài)面板狀態(tài)，返回上一層頁面，則進(jìn)入進(jìn)出的動(dòng)畫選擇向右滑動(dòng)，動(dòng)畫時(shí)長(zhǎng)為500毫秒。（提前將各動(dòng)態(tài)面板下的狀態(tài)畫好對(duì)應(yīng)的線框圖，將整個(gè)頁面轉(zhuǎn)換為動(dòng)態(tài)面板）
切換動(dòng)態(tài)面板狀態(tài)
5）搖一搖設(shè)置、漂流瓶設(shè)置頁面交互：將大的綠色矩形框設(shè)置為動(dòng)態(tài)面板，并設(shè)置為開啟和關(guān)閉兩個(gè)狀態(tài)（綠色為開啟狀態(tài)、關(guān)閉狀態(tài)沒有填充色，默認(rèn)為開啟狀態(tài)），針對(duì)動(dòng)態(tài)面板設(shè)置鼠標(biāo)單擊事件，判斷當(dāng)動(dòng)態(tài)面板為開啟狀態(tài)時(shí)，移動(dòng)上方白色矩形按鈕，X軸經(jīng)過-(動(dòng)態(tài)面板寬度/2-2)，設(shè)置線性動(dòng)畫300毫秒，動(dòng)態(tài)面板切換為關(guān)閉狀態(tài)并設(shè)置一個(gè)逐漸進(jìn)入退出的300毫秒動(dòng)畫；當(dāng)動(dòng)態(tài)面板為關(guān)閉狀態(tài)時(shí)，則白色矩形按鈕沿X軸經(jīng)過(動(dòng)態(tài)面板寬度/2-2)，設(shè)置線性動(dòng)畫300毫秒，動(dòng)態(tài)面板為關(guān)閉狀態(tài)并設(shè)置一個(gè)逐漸進(jìn)入退出的300毫秒動(dòng)畫。（這里的移動(dòng)設(shè)置為相對(duì)距離）
開關(guān)按鈕交互
6）附近的人頁面交互：頁面設(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)畫。
加載刷新按鈕交互
7）卡券消息通知、相冊(cè)消息頁面交互：將頁面中間的內(nèi)容區(qū)域選中設(shè)置為一個(gè)內(nèi)容組合，選中右上角清空文字，設(shè)置鼠標(biāo)單擊事件，新增動(dòng)作隱藏掉中間的內(nèi)容組合。
清空交互
8）表情頁面交互：將“精選表情”和“更多表情”這兩個(gè)Table按鈕設(shè)置為一個(gè)組，并設(shè)置部件選中狀態(tài)為文字顏色變綠，將頁面中下方的內(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毫秒逐漸顯示的過渡動(dòng)畫；然后為“更多”設(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毫秒逐漸顯示的過渡動(dòng)畫。（這里的移動(dòng)設(shè)置為絕對(duì)距離）
精選交互
更多交互
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。