第三章的实战笔记坑一挖就是大半年，2020年总算是磕磕绊绊地过去了，适逢手中项目均已进入尾声，也好在眼下这个时间点抽出部分时间把之前挖的坑填上。在之前项目中我发现一项功能原型的实现往往可以通过很多方法来实现，而且很多实现方式性价比并不高，费九牛二虎之力马马虎虎实现的原型效果都不如跟开发说一句：“就像XX产品XX页面那么做”来得简单高效。因而这个教程中涉及到的一些非常具体和硬核的操作，希望仅作为大家对Axure这个软件功能的理解和抛砖引玉之用。
在真正开始之前我还需要额外唠叨一句，那就是Axure做高仿真原型能做到什么程度？
总结起来一句话：实现部分功能模块单独的效果展示，可以，做出整体能用的App，不行。
Axure本身对于产品功能的模拟还处于一个“尚可接受”的状态，之所以如此是因为Axure可以理解为基于SDK的开发模式，我们只能使用其内部封装好的逻辑进行制作，虽然简化了效果实现的难度，但其灵活性也随之降低，尤其在多页面之间进行数据传值往往与很多新建页面的逻辑冲突，况且基于浏览器开发的预览模式也不可能像真实开发环境（iOS/Andriod）中方便使用各种变量进行传值且可以存储在本机数据库中，虽然可以使用一些“骚操作”勉强实现效果，但这时候页面的连续性已然成为高仿真原型制作中最费神的部分。再举个举个例子，如果你的App下方有三个模块，分别是聊天，新闻，设置。你在聊天页面做的所有操作当切换到新闻模块再切换回来时，基本都不复存在了，这就是Axure在高仿真原型制作中的局限。
铺垫了这么多，先看一下这次要实现的原型效果（由于项目原因，我这边使用没有设计UI的视觉素材进行讲解）：
实现上述效果我会分三篇文章进行讲解：1. 聊天列表的制作。 2. 聊天窗口的制作。 3. 聊天列表的信息与聊天窗口的互动。
本篇文章主要进行第一部分聊天列表制作方式的讲解，那我们开始吧：
step:1 根据需求制作聊天列表cell单元，我们的需求中包含的头像、用户名、聊天内容、聊天时间、未读消息红点及对应未读消息数，并使用基本元件进行搭建并分类命名如图。（如果这步有困难的朋友请自行训练Axure基本功能的使用，直到能自行拼出对应UI）
step:2 交互设置消息红点元件当未读消息数是0的时候，隐藏新消息红点。在交互中新建交互>载入时>添加情形>添加条件【如图2.1】>添加动作>显示/隐藏>隐藏当前元件【图2.2】
step:3 交互设置消息红点元件当未读消息数非0的时候，消息红点内显示消息数。类似step2做法，设置当元件内文字=!0时【如图3.1】，显示当前元件，以上步骤完成后实现图中交互逻辑【如图3.2】
step:4 使用中继器（什么时候应该使用中继器？）进行聊天列表内容的编写,新建中继器并根据cell中的内容编写对应的列，如图4，我们编写了聊天列表的编号（为什么从8开始，因为1-7预留了新增好友的功能，这个放到后面去说，大家可以直接从1开始编号）、头像列右键从本机导入头像、用户名、聊天信息、未读消息数。
step5：使用中继器给cell中的头像初始化：选择中继器>新建交互>每项加载>添加动作>设置图片>目标ChatsAvatar>值>fx>插入变量或函数【如图5】
step6：使用中继器给cell中的聊天内容初始化：选择中继器>新建交互>每项加载>添加动作>设置文本>目标ChatsContent>值>fx>插入变量或函数【如图6】
step7：使用类似的方式给cell中的用户名、未读消息数进行初始化【如图7】
step8：为了追求效果，我们使用axure函数获取当前时间对cell中的聊天时间进行初始化，函数写法见【图8】
step9: 设置打开聊天列表时按照未读消息的个数从前到后排序：选择中继器>新建交互>载入时>添加排序>目标当前>列ChatListNum>排序类型数字>排序降序 【如图9】（此步骤本机预览时部分情况会失效，上传到Axure云后进行云预览则有效）
step10：将之前所做的所有元件全选，右键转换为动态面板，并对动态面板命名【如图10】
step11：调整动态面板大小到适合移动设备尺寸，设置动态面板滚动为垂直滚动【如图11】
此时点击预览，一个简单的聊天列表就制作完成了【如图12】，至于如何隐藏预览动态面板时右侧的下拉条，请详见之前的文章（什么时候该使用动态面板？）
这一节关于聊天列表的制作就到此为止，下一节会继续关于聊天窗口部分的制作。
