中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

之前寫文檔沒有用axure，最近才接觸這個軟件，覺得原型制作還是挺有趣的。閑來琢磨了一下里面的功能，邊做邊學，做了一個PC端的聊天窗口?，F在還不夠完善，只是將大概功能實現出來。有更好的解決方案也希望大家能不吝賜教。

效果如下：

好了，接下來進入正題。

一、草圖繪制

1. 三個色塊矩形疊放，增加矩形陰影，形成層級關系。從大到小分別對應背景、列表欄、輸入區域。
2. 添加細節元素圖標、文字等，圖標可以在其他軟件中做好導出直接使用。
3. ?然后到了添加元件的步驟，輸入欄直接拉一個和輸入區域等高的文本框，去掉邊框，添加提示文字為“請輸入…”即可，左邊列表欄我是用中繼器做的。（教程大家發過很多，我這里就不重復了）

二、交互制作

1. 第一步制作點擊切換列表的交互動效

①先繪制一個藍色矩形選中條。

②點擊文字（未回復/已回復/已結束），添加一個選中狀態（我這里是將文字顏色變黑）。

③添加鼠標單擊時的事例。

1. 設置選中狀態 -未回復（文本標簽）為true；其他兩個標簽選項為false。其他兩個標簽設置同理，設置完成之后，就可以看到點擊有選中效果了。
2. 再顯示中繼器內容的跟隨事件：仍然是鼠標單擊時的事例，把未回復（當前標簽對應中繼器）設置為顯示，動畫可以設置為向左滑動或者向右滑動，隨便設置都可以，統一就行了。接著把剩下的兩個中繼器內容設置為隱藏。設置完成后，就有下邊的列表切換效果了。
3. 再是藍色矩形條的切換跟隨，[[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

本文由 @JUN 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pixabay，基于 CC0 協議