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

本章主要制作聊天列表原型，實(shí)現(xiàn)滑動效果。原型基于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)換為動態(tài)面板，動態(tài)面板標(biāo)簽名設(shè)置為“消息列表動態(tài)面板”。

2.在動態(tài)面板上繼續(xù)右鍵，再轉(zhuǎn)換為動態(tài)面板，該動態(tài)面板起名為“窗口動態(tài)面板”，雙擊窗口，將“State1”修改為“窗口動態(tài)面板-聊天列表狀態(tài)”，完成后的邏輯為：“窗口動態(tài)面板”–>“窗口動態(tài)面板-聊天列表狀態(tài)”–>“消息列表動態(tài)面板”–>“State1”–>“msg_list”。

3.將“窗口動態(tài)面板” 的尺寸修改為480*572，這是為了與微信尺寸保持相同比例，然后需要微信的頂部標(biāo)簽和底部導(dǎo)航，本章原型主要涉及聊天窗口，頂部標(biāo)簽和底部導(dǎo)航先通過對微信圖片進(jìn)行截圖，以后的章節(jié)模擬導(dǎo)航和頂部標(biāo)簽原型是，再從新制作。

第四步：設(shè)置“窗口動態(tài)面板”的交互

第四步主要實(shí)現(xiàn)消息列表上下滑動的效果

1.選擇“窗口動態(tài)面板”交互屬性“拖動時(shí)”，添加動作選擇“移動”，“選擇要移動的元件”選擇“消息列表動態(tài)面板”，動作選擇垂直移動，動畫“無”，單擊“添加邊界”。

2.如果不設(shè)置邊界，消息動態(tài)列表移動時(shí)會出現(xiàn)上下邊界進(jìn)入“窗口動態(tài)面板”的情況，如下圖：

3.因此在設(shè)置交互動作時(shí)，要添加頂部和底部邊界。消息動態(tài)面板的頂部不能進(jìn)入窗口動態(tài)面板，因此頂部應(yīng)該小于0（窗口動態(tài)面板頂部為相對值0），而消息動態(tài)面板的底部不能進(jìn)入窗口動態(tài)面板，也就是底部要大于窗口動態(tài)面板底部的相對值，該相對值等于窗口動態(tài)面板底部的絕對值，減去頂部的絕對值，通過fx功能實(shí)現(xiàn)。

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

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

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

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