之前寫文檔沒有用axure，最近才接觸這個軟件，覺得原型製作還是挺有趣的。閒來琢磨了一下里面的功能，邊做邊學，做了一個PC端的聊天窗口。現在還不夠完善，只是將大概功能實現出來。有更好的解決方案也希望大家能不吝賜教。
效果如下：
好了，接下來進入正題。
一、草圖繪製
- 三個色塊矩形疊放，增加矩形陰影，形成層級關係。從大到小分別對應背景、列表欄、輸入區域。
- 添加細節元素圖標、文字等，圖標可以在其他軟件中做好導出直接使用。
- 然後到了添加元件的步驟，輸入欄直接拉一個和輸入區域等高的文本框，去掉邊框，添加提示文字為“請輸入…”即可，左邊列表欄我是用中繼器做的。（教程大家發過很多，我這裡就不重複了）
二、交互制作
1. 第一步製作點擊切換列表的交互動效
①先繪製一個藍色矩形選中條。
②點擊文字（未回覆/已回覆/已結束），添加一個選中狀態（我這裡是將文字顏色變黑）。
③添加鼠標單擊時的事例。
- 設置選中狀態 -未回覆（文本標籤）為true；其他兩個標籤選項為false。其他兩個標籤設置同理，設置完成之後，就可以看到點擊有選中效果了。
- 再顯示中繼器內容的跟隨事件：仍然是鼠標單擊時的事例，把未回覆（當前標籤對應中繼器）設置為顯示，動畫可以設置為向左滑動或者向右滑動，隨便設置都可以，統一就行了。接著把剩下的兩個中繼器內容設置為隱藏。設置完成後，就有下邊的列表切換效果了。
- 再是藍色矩形條的切換跟隨，[[wh.left]]代表藍色矩形條的x軸起點位置絕對固定到wh這個元件的左端，[[wh.bottom]]代表藍色矩形條的Y軸位置起點在wh元件的底部，其他兩個標籤也設置起來，注意，第六步的變量要一一對應起來，比如：我這裡wh代表text-未回覆，yh代表text-已回覆，yj代表text-已結束。
到此為止，切換效果就有了。
2. 接下來就是列表的單行選中效果的製作
這要先說一下，我在中繼器中的項目編輯中加了一個矩形作為邊界，去掉邊框和填充。
①將該矩形添加一個選中狀態，我這裡簡單的做了一個填充顏色。
②將中繼器中的內容編組，為這個組設置鼠標單擊時的選中狀態為true。（設置隱藏 未讀數量可以達到點擊後紅色數字提示氣泡消失的效果）
③往下找到組合的設置選項組名稱，輸入一個名稱。
④再選擇中繼器，把隔離選項組效果的勾去掉就完成了單行選中效果了。
現在單行點擊效果也完成了。
3. 右邊聊天窗口的交互
①元件組成
首先，頭部是一個矩形，隨便打上一個聯繫人的名字。
然後是別人發來的消息顯示（因為我這裡其實是用的同一個聊天面板，設置改變只是頭部文字和未讀消息的文字，所以實現出來比較簡陋，切換到B聯繫人時，發給A的消息還是在，你們有好的解決方案可以說一下）。
（1）自己發的消息我是用一箇中繼器做的，雙擊進入中繼器編輯頁面，拉一個圖片+矩形框進來，給中繼器的列添加對應的屬性名。如：內容-neirong、圖片-img。
注意：這裡不要添加具體內容。
（2）把輸入框的隱藏邊框給勾上，在提交按鈕那兒選擇右邊的發送按鈕。
（3）最後選擇提交按鈕，添加鼠標單擊時的事例。
添加行（我的消息發送），選中剛剛聊天面板中建的中繼器然後點擊添加行，img對應的是自己的頭像，neirong欄可以填寫默認變量[[LVAR1]]或者自己定一個，然後點擊後面的fx編輯變量，將輸入框的文字賦值給它。
設置提交時，將文本框內容清空。
完成之後就能自己發消息啦。
4. 最後就是點擊左側列表，右邊聊天面板跟隨變化
（1）將右邊聊天面板編組，轉為動態面板，並設為隱藏。（可以先把面板移到別的地方，添加一個空狀態時的文字，再將面板移回原位）
（2）然後為左側中繼器的項目添加鼠標點擊時的事例。
- 第一行為定義num1（全局變量）為鼠標點擊中繼器項目的所在行數。
- 第二行為設置點擊該項目時使該項目變成選中狀態（這個用於前面的單行選中）。
- 第三行為點擊使數量氣泡消失。
- 第四行+第五行 為設置點擊刷新聊天面板顯示時的狀態。
（3）為聊天界面顯示時設置文字變化，如點擊第一行時顯示頭部為小明，消息為hello，第二行顯示頭部為二明，消息為我要睡覺了，以此類推。上一步設置隱藏再顯示面板，就是為了刷新這個文字變化。
然後點擊預覽，就可以模擬聊天啦！
最後在線原型預覽地址：https://21l2ua.axshare.com
題圖來自 Pixabay，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
