? ? ? ?第三章的實(shí)戰(zhàn)筆記坑一挖就是大半年，2020年總算是磕磕絆絆地過去了，適逢手中項(xiàng)目均已進(jìn)入尾聲，也好在眼下這個時間點(diǎn)抽出部分時間把之前挖的坑填上。在之前項(xiàng)目中我發(fā)現(xiàn)一項(xiàng)功能原型的實(shí)現(xiàn)往往可以通過很多方法來實(shí)現(xiàn)，而且很多實(shí)現(xiàn)方式性價比并不高，費(fèi)九牛二虎之力馬馬虎虎實(shí)現(xiàn)的原型效果都不如跟開發(fā)說一句：“就像XX產(chǎn)品XX頁面那么做”來得簡單高效。因而這個教程中涉及到的一些非常具體和硬核的操作，希望僅作為大家對Axure這個軟件功能的理解和拋磚引玉之用。
? ? ? ?在真正開始之前我還需要額外嘮叨一句，那就是Axure做高仿真原型能做到什么程度？
?? ? ? 總結(jié)起來一句話：實(shí)現(xiàn)部分功能模塊單獨(dú)的效果展示，可以，做出整體能用的App，不行。
? ? ? ?Axure本身對于產(chǎn)品功能的模擬還處于一個“尚可接受”的狀態(tài)，之所以如此是因?yàn)锳xure可以理解為基于SDK的開發(fā)模式，我們只能使用其內(nèi)部封裝好的邏輯進(jìn)行制作，雖然簡化了效果實(shí)現(xiàn)的難度，但其靈活性也隨之降低，尤其在多頁面之間進(jìn)行數(shù)據(jù)傳值往往與很多新建頁面的邏輯沖突，況且基于瀏覽器開發(fā)的預(yù)覽模式也不可能像真實(shí)開發(fā)環(huán)境（iOS/Andriod）中方便使用各種變量進(jìn)行傳值且可以存儲在本機(jī)數(shù)據(jù)庫中，雖然可以使用一些“騷操作”勉強(qiáng)實(shí)現(xiàn)效果，但這時候頁面的連續(xù)性已然成為高仿真原型制作中最費(fèi)神的部分。再舉個舉個例子，如果你的App下方有三個模塊，分別是聊天，新聞，設(shè)置。你在聊天頁面做的所有操作當(dāng)切換到新聞模塊再切換回來時，基本都不復(fù)存在了，這就是Axure在高仿真原型制作中的局限。
鋪墊了這么多，先看一下這次要實(shí)現(xiàn)的原型效果（由于項(xiàng)目原因，我這邊使用沒有設(shè)計UI的視覺素材進(jìn)行講解）：
實(shí)現(xiàn)上述效果我會分三篇文章進(jìn)行講解：1.?聊天列表的制作。 2.?聊天窗口的制作。 3.?聊天列表的信息與聊天窗口的互動。
本篇文章主要進(jìn)行第一部分聊天列表制作方式的講解，那我們開始吧：
step:1?根據(jù)需求制作聊天列表cell單元，我們的需求中包含的頭像、用戶名、聊天內(nèi)容、聊天時間、未讀消息紅點(diǎn)及對應(yīng)未讀消息數(shù)，并使用基本元件進(jìn)行搭建并分類命名如圖。（如果這步有困難的朋友請自行訓(xùn)練Axure基本功能的使用，直到能自行拼出對應(yīng)UI）
step:2?交互設(shè)置消息紅點(diǎn)元件當(dāng)未讀消息數(shù)是0的時候，隱藏新消息紅點(diǎn)。在交互中新建交互>載入時>添加情形>添加條件【如圖2.1】>添加動作>顯示/隱藏>隱藏當(dāng)前元件【圖2.2】
step:3?交互設(shè)置消息紅點(diǎn)元件當(dāng)未讀消息數(shù)非0的時候，消息紅點(diǎn)內(nèi)顯示消息數(shù)。類似step2做法，設(shè)置當(dāng)元件內(nèi)文字=!0時【如圖3.1】，顯示當(dāng)前元件，以上步驟完成后實(shí)現(xiàn)圖中交互邏輯【如圖3.2】
step:4?使用中繼器（什么時候應(yīng)該使用中繼器？）進(jìn)行聊天列表內(nèi)容的編寫,新建中繼器并根據(jù)cell中的內(nèi)容編寫對應(yīng)的列，如圖4，我們編寫了聊天列表的編號（為什么從8開始，因?yàn)?-7預(yù)留了新增好友的功能，這個放到后面去說，大家可以直接從1開始編號）、頭像列右鍵從本機(jī)導(dǎo)入頭像、用戶名、聊天信息、未讀消息數(shù)。
step5：使用中繼器給cell中的頭像初始化：選擇中繼器>新建交互>每項(xiàng)加載>添加動作>設(shè)置圖片>目標(biāo)ChatsAvatar>值>fx>插入變量或函數(shù)【如圖5】
step6：使用中繼器給cell中的聊天內(nèi)容初始化：選擇中繼器>新建交互>每項(xiàng)加載>添加動作>設(shè)置文本>目標(biāo)ChatsContent>值>fx>插入變量或函數(shù)【如圖6】
step7：使用類似的方式給cell中的用戶名、未讀消息數(shù)進(jìn)行初始化【如圖7】
step8：為了追求效果，我們使用axure函數(shù)獲取當(dāng)前時間對cell中的聊天時間進(jìn)行初始化，函數(shù)寫法見【圖8】
step9:?設(shè)置打開聊天列表時按照未讀消息的個數(shù)從前到后排序：選擇中繼器>新建交互>載入時>添加排序>目標(biāo)當(dāng)前>列ChatListNum>排序類型數(shù)字>排序降序 【如圖9】（此步驟本機(jī)預(yù)覽時部分情況會失效，上傳到Axure云后進(jìn)行云預(yù)覽則有效）
step10：將之前所做的所有元件全選，右鍵轉(zhuǎn)換為動態(tài)面板，并對動態(tài)面板命名【如圖10】
step11：調(diào)整動態(tài)面板大小到適合移動設(shè)備尺寸，設(shè)置動態(tài)面板滾動為垂直滾動【如圖11】
此時點(diǎn)擊預(yù)覽，一個簡單的聊天列表就制作完成了【如圖12】，至于如何隱藏預(yù)覽動態(tài)面板時右側(cè)的下拉條，請詳見之前的文章（什么時候該使用動態(tài)面板？）
這一節(jié)關(guān)于聊天列表的制作就到此為止，下一節(jié)會繼續(xù)關(guān)于聊天窗口部分的制作。
