Axure：超级好用的在线原型管理工具--Axhub

OMG，炒鸡好用的在线原型管理工具-Axhub，它来喽！话不多说，上链接： >

使用Axure做团队项目

首先，你要有一个Axure账户 呵呵哒。

发起团队项目

在浏览器登录  Axure share （网速很卡很卡）

新建一个工作区，取一个团队名字。

创建团队项目

在Axure软件直接创建。

或者打开要进行团队协作的文件，将其创建为团队项目。

这里就可以看到在 Axure share 新建的 KK工作区啦。

不主动选择的话，它默认是把团队项目放到 My Projects 工作区里面的。

页面左侧多了一个蓝色小图标就代表创建团队项目成功啦。

邀请小伙伴参与这个团队项目

在浏览器登录 Axure share，在 kk工作区邀请小伙伴。

接受团队项目邀请

同事在收到团队协作邀请邮件后，登录 Axure share 接受邀请。

然后，打开Axure并登录。打开团队项目。

状态标识介绍

蓝色菱形  当前页面在云端，可复制里面的元素，不可编辑此页面。

绿色圆圈  此页面已签出到本地，可编辑此页面。

绿色加号  在本地新建的页面，可编辑此页面。

红色警示  此页面本来是我正在编辑，但被其它协作者强制签出到对方的本地进行编辑 且强制签入到云端了。

橙色警示   此页面本来是别的协作者正在编辑，但被我强制签出到我的本地进行编辑了。

编辑团队项目

获取到的团队项目，签出到本地，可以进行编辑。

当选择一个页面签出时，它d窗显示无法签出，表示此时有其它的小伙伴正在编辑这个页面。不建议强制编辑。

有调整后的页面。签入到云端保存。然后其他项目成员就可以将其签出到自己本地进行编辑。

对于文件夹的 *** 作

~完毕~

使用SVN的情况

创建团队项目时，在团队目录输入技术部的同事给的SVN地址。其它与创建在Axure云端一致。

小伙伴要参与时，获取团队项目

在团队目录这里输入SVN地址 加 "/文件名"

比如，我建的团队项目名叫“交互规范补充意见”

SVN地址为“ >

接上篇文章，这次主要来讲解一下聊天窗口的制作，首先看一下效果图：

我们要实现4个部分的功能：

1 好友聊天内容（关于实现与聊天列表中的内容一一对应本节未进行制作，这部分会在下篇文章中讲解）

2 我的聊天内容

3 文字输入框

4 发送按钮

那么闲话少叙，我们直奔主题

step1:制作好友聊天内容单元，这节中我们将好友聊天的内容直接写死在上面，如图1所示，我们根据需求设计一个聊天内容单元的样式，有头像，聊天内容和时间。

step2:在中继器-数据中根据需求新建列并对应填写数据如图21，并在使用中继器的交互给好友聊天内容单元初始化，填充内容如图22。具体初始化方式请参见上篇文章，至此我们得到了一个仅供展示的好友聊天内容单元。

step3:制作我的聊天内容样式，使用基本元件搭建文本气泡，头像和消息发送时间如图3。

step4:新建中继器，新建两列内容命名为ChatMessageIsay和MyAvatar并留空如图4，其中ChatMessageIsay的作用是为了后面从文本框中获取文字并加入到中继器中进行显示，而MyAvatar则是为了方便后期给中继器添加行的时候预留的（后期我们可以使用全局变量模拟头像URL来模拟换头像的 *** 作），在此步骤中暂时直接将头像选择固定。

step5:使用中继器初始化我的聊天内容，分别设置文本气泡中的文本图51，头像图52和消息发送时间图53，其中时间我们获取当前时间进行显示，函数写法见图。

step6:将step2和step5中制作好的好友聊天内容单元和我的聊天内容单元根据设计样式组合到一起并全选右键转化为动态面板，之后根据设计需要调整动态面板的尺寸，并将动态面板设置为垂直滚动，方便后面发送多条消息时滚动到最新发送的那条消息。如图6

step7:制作文字输入框，因为设计中该框仅为单层设计，故使用元件库中的文本框即可，另外多说一嘴，如果需要文字框随输入文字多少自适应变化的话，需要使用动态面板配合文本域进行制作，可以实现但是制作成本很高，远不及跟开发说一句“这个文本框尺寸需要根据输入内容动态变化，最大高度160pt来的简单高效”。另外此时文本框输入文字时是紧贴着左侧开始的，我们额外嵌套一个矩形元件来实现两边的间距如图7

step8:将step6和step7成果按照设计效果拼接，并排布发送键、键盘、顶部用户名，more按钮等元件如图8。

step9:点击顶部菜单栏-项目-全局变量>添加并命名一个新的全局变量ChatMyWords用来传递文字输入框(step7）中的内容至我的聊天内容单元(step5)如图9

step10:选择发送按钮，右侧交互-新建交互-单击时-下拉找到设置变量值-选择目标为step9中创建的全局变量ChatMyWords-设置为元件文字-元件选择为step7制作的输入框MessageField如图10。通过这个交互我们实现了将输入框中的文字存储于全局变量中。

step11:紧接着我们要将这个全局变量中的聊天内容显示在我的聊天内容单元中，做法依旧是在发送按钮上，右侧交互-添加动作-添加行-目标MyChatUnit-添加行如图11-在ChatMessageISay列中点击fx-插入变量或函数找到ChatMyWord-确认返回如图12。至此当我们点击发送按钮时，文字输入框中的内容就将显示于屏幕中。

step12：此时依然有个问题，当我们点击发送按钮时，文字输入框中的文字不会清空，故我们需要设置当点击发送按钮时-添加动作-设置文本-目标选择文字输入框MessageField-设置为文本-值留空如图13。这样当我们点击发送按钮时文本框中的内容就会清空，方便我们继续输入。

step13:已经做的差不多了，但此时当我们连续输入多个内容，到动态面板的尺寸显示不下时，最新的内容会藏在下面，所以我们继续优化每次发送时将动态面板中的内容滚动到最新发送的消息上。做法：点击发送按钮-添加动作-滚动到元件-目标MyChatUnit-垂直滚动-动画留空或自定义如图14。这样每次输入的时候都会滚动到最新发送的那条消息啦。

通过在发送按钮上添加以上步骤的交互如图15，就实现了我们开头动图中的效果啦，点击预览试一下吧。

OK下一篇文章我们会继续完善这个页面，实现聊天列表和聊天页面的联动。

通过 >

以上就是关于Axure：超级好用的在线原型管理工具--Axhub全部的内容，包括:Axure：超级好用的在线原型管理工具--Axhub、axure rp如何使用、使用axure进行团队协作 及 与好友分享原型等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！