【Axure实战】14.社交类项目-模拟聊天列表及聊天窗口（一）

作者: 不明蛰矣 | 来源:发表于2021-01-12 16:47 被阅读0次

第三章的实战笔记坑一挖就是大半年，2020年总算是磕磕绊绊地过去了，适逢手中项目均已进入尾声，也好在眼下这个时间点抽出部分时间把之前挖的坑填上。在之前项目中我发现一项功能原型的实现往往可以通过很多方法来实现，而且很多实现方式性价比并不高，费九牛二虎之力马马虎虎实现的原型效果都不如跟开发说一句：“就像XX产品XX页面那么做”来得简单高效。因而这个教程中涉及到的一些非常具体和硬核的操作，希望仅作为大家对Axure这个软件功能的理解和抛砖引玉之用。

在真正开始之前我还需要额外唠叨一句，那就是Axure做高仿真原型能做到什么程度？

总结起来一句话：实现部分功能模块单独的效果展示，可以，做出整体能用的App，不行。

Axure本身对于产品功能的模拟还处于一个“尚可接受”的状态，之所以如此是因为Axure可以理解为基于SDK的开发模式，我们只能使用其内部封装好的逻辑进行制作，虽然简化了效果实现的难度，但其灵活性也随之降低，尤其在多页面之间进行数据传值往往与很多新建页面的逻辑冲突，况且基于浏览器开发的预览模式也不可能像真实开发环境（iOS/Andriod）中方便使用各种变量进行传值且可以存储在本机数据库中，虽然可以使用一些“骚操作”勉强实现效果，但这时候页面的连续性已然成为高仿真原型制作中最费神的部分。再举个举个例子，如果你的App下方有三个模块，分别是聊天，新闻，设置。你在聊天页面做的所有操作当切换到新闻模块再切换回来时，基本都不复存在了，这就是Axure在高仿真原型制作中的局限。

铺垫了这么多，先看一下这次要实现的原型效果（由于项目原因，我这边使用没有设计UI的视觉素材进行讲解）：

效果图

实现上述效果我会分三篇文章进行讲解：1. 聊天列表的制作。 2. 聊天窗口的制作。 3. 聊天列表的信息与聊天窗口的互动。

本篇文章主要进行第一部分聊天列表制作方式的讲解，那我们开始吧：

step:1 根据需求制作聊天列表cell单元，我们的需求中包含的头像、用户名、聊天内容、聊天时间、未读消息红点及对应未读消息数，并使用基本元件进行搭建并分类命名如图。（如果这步有困难的朋友请自行训练Axure基本功能的使用，直到能自行拼出对应UI）

图1

step:2 交互设置消息红点元件当未读消息数是0的时候，隐藏新消息红点。在交互中新建交互>载入时>添加情形>添加条件【如图2.1】>添加动作>显示/隐藏>隐藏当前元件【图2.2】

图2

图2.2

step:3 交互设置消息红点元件当未读消息数非0的时候，消息红点内显示消息数。类似step2做法，设置当元件内文字=!0时【如图3.1】，显示当前元件，以上步骤完成后实现图中交互逻辑【如图3.2】

图3.1

图3.2

step:4 使用中继器（什么时候应该使用中继器？）进行聊天列表内容的编写,新建中继器并根据cell中的内容编写对应的列，如图4，我们编写了聊天列表的编号（为什么从8开始，因为1-7预留了新增好友的功能，这个放到后面去说，大家可以直接从1开始编号）、头像列右键从本机导入头像、用户名、聊天信息、未读消息数。