對(duì)于Axure的學(xué)習(xí)，就是要多做練習(xí)，本文是微信原型制作的第一章，希望對(duì)同樣正在學(xué)習(xí)的朋友有所幫助。

本章主要制作聊天列表原型，實(shí)現(xiàn)滑動(dòng)效果。原型基于Axure8制作。

第一步：拖拉擺放一個(gè)中繼器以及相關(guān)控件

1.拖拉一個(gè)中繼器，標(biāo)簽名設(shè)置為msg_list，雙擊中繼器，進(jìn)入中繼器設(shè)置，矩形標(biāo)簽名稱(chēng)設(shè)置為msg_item，長(zhǎng)設(shè)置480，寬設(shè)置80，在樣式中設(shè)置邊框，設(shè)置為僅下邊框，邊框顏色為E4E4E4。

2.拖一個(gè)占位符，放到矩形框前部，大小55*55，作為頭像。

3.拖一個(gè)81*24的文本框，作為姓名框，標(biāo)簽名稱(chēng)設(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è)置好交互之后，就可以看到屬性中填寫(xiě)的內(nèi)容，已經(jīng)加載到了中繼器的列表上，然后在屬性中多添加些數(shù)據(jù)，模擬聊天列表。

第三步：設(shè)置微信聊天頁(yè)相關(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)航先通過(guò)對(duì)微信圖片進(jìn)行截圖，以后的章節(jié)模擬導(dǎo)航和頂部標(biāo)簽原型是，再?gòu)男轮谱鳌?/p>

第四步：設(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)畫(huà)“無(wú)”，單擊“添加邊界”。

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ì)值，通過(guò)fx功能實(shí)現(xiàn)。

完成后通過(guò)預(yù)覽觀看效果。

該原型連接：http://interestingprogrammer.coding.me/yanjingProject/微信聊天

本篇文章先進(jìn)行第一部分原型的介紹，后面章節(jié)會(huì)逐漸實(shí)現(xiàn)更多的微信原型功能，力求最終能完成一個(gè)完整的微信原型，希望與大家多多交流，共同進(jìn)步。

本文由 @有趣的程序員 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。