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

本章主要制作聊天列表原型，實現滑動效果。原型基于Axure8制作。

第一步：拖拉擺放一個中繼器以及相關控件

1.拖拉一個中繼器，標簽名設置為msg_list，雙擊中繼器，進入中繼器設置，矩形標簽名稱設置為msg_item，長設置480，寬設置80，在樣式中設置邊框，設置為僅下邊框，邊框顏色為E4E4E4。

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

3.拖一個81*24的文本框，作為姓名框，標簽名稱設置為Name，字體顏色黑色，字體大小20。

4.拖一個57*16的文本框，作為消息內容快照，放到姓名框下面，標簽名設置為Msg，字體顏色999999，字體大小為14。

5.拖一個57*16的文本框，作為時間顯示，放到最后，標簽名設置為DateTime，字體顏色999999，字體大小為14。最終效果如下。

6.設置msg_item交互屬性，選擇屬性–>鼠標按下–>填充顏色，設置為cccccc。

第二步：設置聊天列表信息

1.在中繼器msg_list的屬性中，添加一些字段。

2.設置msg_list屬性中的交互。每項載入時，將第一步中設置的相關控件文本初始化為屬性中配置的字段內容。選擇“每項載入時”–>“設置文本”–>選擇msg_list（中繼器）DateTime–>“設置文本為”–>選擇函數fx–>“插入變量或函數”–>選擇“中繼器/數據集”的item.datetime。其他以此為例。

3.設置好交互之后，就可以看到屬性中填寫的內容，已經加載到了中繼器的列表上，然后在屬性中多添加些數據，模擬聊天列表。

第三步：設置微信聊天頁相關控件

1.在中繼器msg_list上右鍵，將中繼器轉換為動態面板，動態面板標簽名設置為“消息列表動態面板”。

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

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

第四步：設置“窗口動態面板”的交互

第四步主要實現消息列表上下滑動的效果

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

2.如果不設置邊界，消息動態列表移動時會出現上下邊界進入“窗口動態面板”的情況，如下圖：

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

完成后通過預覽觀看效果。

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

本篇文章先進行第一部分原型的介紹，后面章節會逐漸實現更多的微信原型功能，力求最終能完成一個完整的微信原型，希望與大家多多交流，共同進步。

本文由 @有趣的程序員 原創發布于人人都是產品經理。未經許可，禁止轉載。