本章主要制作聊天列表原型,，實(shí)現(xiàn)滑動(dòng)效果。原型基于Axure8制作,。 第一步：拖拉擺放一個(gè)中繼器以及相關(guān)控件1.拖拉一個(gè)中繼器,，標(biāo)簽名設(shè)置為msg_list，雙擊中繼器,，進(jìn)入中繼器設(shè)置,，矩形標(biāo)簽名稱設(shè)置為msg_item，長設(shè)置480,，寬設(shè)置80,，在樣式中設(shè)置邊框，設(shè)置為僅下邊框,，邊框顏色為E4E4E4,。
2.拖一個(gè)占位符，放到矩形框前部,，大小55*55,，作為頭像。 3.拖一個(gè)81*24的文本框,，作為姓名框,，標(biāo)簽名稱設(shè)置為Name，字體顏色黑色，字體大小20,。 4.拖一個(gè)57*16的文本框,，作為消息內(nèi)容快照，放到姓名框下面,，標(biāo)簽名設(shè)置為Msg,，字體顏色999999，字體大小為14,。 5.拖一個(gè)57*16的文本框,，作為時(shí)間顯示，放到最后,，標(biāo)簽名設(shè)置為DateTime,，字體顏色999999，字體大小為14,。最終效果如下,。
6.設(shè)置msg_item交互屬性，選擇屬性–>鼠標(biāo)按下–>填充顏色,，設(shè)置為cccccc,。
第二步：設(shè)置聊天列表信息1.在中繼器msg_list的屬性中，添加一些字段,。
2.設(shè)置msg_list屬性中的交互,。每項(xiàng)載入時(shí)，將第一步中設(shè)置的相關(guān)控件文本初始化為屬性中配置的字段內(nèi)容,。選擇“每項(xiàng)載入時(shí)”–>“設(shè)置文本”–>選擇msg_list（中繼器）DateTime–>“設(shè)置文本為”–>選擇函數(shù)fx–>“插入變量或函數(shù)”–>選擇“中繼器/數(shù)據(jù)集”的item.datetime,。其他以此為例。
3.設(shè)置好交互之后,，就可以看到屬性中填寫的內(nèi)容,，已經(jīng)加載到了中繼器的列表上，然后在屬性中多添加些數(shù)據(jù),，模擬聊天列表,。
第三步：設(shè)置微信聊天頁相關(guān)控件1.在中繼器msg_list上右鍵，將中繼器轉(zhuǎn)換為動(dòng)態(tài)面板,，動(dòng)態(tài)面板標(biāo)簽名設(shè)置為“消息列表動(dòng)態(tài)面板”,。
2.在動(dòng)態(tài)面板上繼續(xù)右鍵，再轉(zhuǎn)換為動(dòng)態(tài)面板,，該動(dòng)態(tài)面板起名為“窗口動(dòng)態(tài)面板”,，雙擊窗口，將“State1”修改為“窗口動(dòng)態(tài)面板-聊天列表狀態(tài)”,，完成后的邏輯為：“窗口動(dòng)態(tài)面板”–>“窗口動(dòng)態(tài)面板-聊天列表狀態(tài)”–>“消息列表動(dòng)態(tài)面板”–>“State1”–>“msg_list”,。 3.將“窗口動(dòng)態(tài)面板” 的尺寸修改為480*572,，這是為了與微信尺寸保持相同比例，然后需要微信的頂部標(biāo)簽和底部導(dǎo)航,，本章原型主要涉及聊天窗口,，頂部標(biāo)簽和底部導(dǎo)航先通過對(duì)微信圖片進(jìn)行截圖，以后的章節(jié)模擬導(dǎo)航和頂部標(biāo)簽原型是,，再從新制作,。
第四步：設(shè)置“窗口動(dòng)態(tài)面板”的交互第四步主要實(shí)現(xiàn)消息列表上下滑動(dòng)的效果 1.選擇“窗口動(dòng)態(tài)面板”交互屬性“拖動(dòng)時(shí)”，添加動(dòng)作選擇“移動(dòng)”,，“選擇要移動(dòng)的元件”選擇“消息列表動(dòng)態(tài)面板”,，動(dòng)作選擇垂直移動(dòng)，動(dòng)畫“無”,，單擊“添加邊界”,。
2.如果不設(shè)置邊界，消息動(dòng)態(tài)列表移動(dòng)時(shí)會(huì)出現(xiàn)上下邊界進(jìn)入“窗口動(dòng)態(tài)面板”的情況,，如下圖：
3.因此在設(shè)置交互動(dòng)作時(shí),，要添加頂部和底部邊界。消息動(dòng)態(tài)面板的頂部不能進(jìn)入窗口動(dòng)態(tài)面板,，因此頂部應(yīng)該小于0（窗口動(dòng)態(tài)面板頂部為相對(duì)值0）,，而消息動(dòng)態(tài)面板的底部不能進(jìn)入窗口動(dòng)態(tài)面板，也就是底部要大于窗口動(dòng)態(tài)面板底部的相對(duì)值,，該相對(duì)值等于窗口動(dòng)態(tài)面板底部的絕對(duì)值，減去頂部的絕對(duì)值,，通過fx功能實(shí)現(xiàn),。
完成后通過預(yù)覽觀看效果。 該原型連接：http://interestingprogrammer./yanjingProject/微信聊天 本篇文章先進(jìn)行第一部分原型的介紹,，后面章節(jié)會(huì)逐漸實(shí)現(xiàn)更多的微信原型功能,，力求最終能完成一個(gè)完整的微信原型，希望與大家多多交流,，共同進(jìn)步,。 本文由 @有趣的程序員 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,。 |
|
|
