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

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

我们要实现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并不是最适合的工具，怎么说呢，软件之间也是各有所长的，建议使用visio，visio画流程图还是蛮给力的~~如果不得不用axure来画，建议去网上找一些axure的流程图组件，导入到axure中使用，这样会方便一些~~最坏的情况，就是使用axure自带的流程图部件了，在部件面板部分，通过下拉列表选择“flow“，使用里面的部件~~

当我们用账号登录某些系统或其他产品时，经常会遇到安全验证，最常见的是文字验证、滑动拼图验证、数字验证等。本文将为大家详细介绍如何使用Axure绘制常用验证码倒计时验证登录，希望对大家有所帮助。谁说鱼与熊掌不可兼得？选择，Axure理论+实操双向提升~精选多套系统全面Axure自学视频课，综合教学，适合新手0基础入门到进阶，感兴趣有需要都不要错过~

Axure设计制作登录验证码倒计时效果原型教程：

一、原型准备今天我们主要讲的是关于输入验证码倒计时登录，那我们首先先在页面中放置登录页基本的元件如：帐号输入框、验证码输入框、获取验证码按钮、登录按钮、登陆协议等接着，我们选中获取验证码按钮，添加交互：单击时-设置情形1-（if值于X>1）时对情形1添加动作：设置文本-值：[[X]]秒后重新获取选中全局变量X后，在[[X]]后输入：秒后重新获取下一步设置动作：等待-1000ms，接着再选择：设置变量值-[[X-1]]再对情形1设置最后一步动作：触发事件-单击时情形1设置完成后，接着我们再进行设置情形2，也就是除情形1之外所涉及的变量信息接着设置文本为重新获取，设置变量值为X为60截至到这里，我们即可以预览获取验证码倒计时页面，点击获取验证码就会显示倒计时了，可以查看上面的原型地址预览接着，我们再对登录按钮进行设置密码验证，密码验证和上方的倒计时设置情形基本相似，此处将不再详细做讲解我们再做一个错误提示的弹窗以表示输入错误验证码时所出现的提示，并先将其隐藏。以上所述就是“Axure怎么设计制作登录验证码倒计时效果原型？”的相关内容分享了，希望能够帮助到你！如果你还想要学习更多的Axure技巧，点击Axure相关文章，或者直接跟着我们的专业讲师开始Axure自学视频课学习体验~专业系统视频教程学习，学习收获总会比你零零散散图文学习来得更快速、更有效率~

今日就快来学习本文Axure制作焦点元件操作过程吧，相信在以后的使用中一定会得心应手的，一起来看看吧!

首先打开Axure软件后，新建几个文本框;

然后我们选中其中一个文本框;

接着在右侧找到载入时;

然后在左侧功能栏中，找到获取焦点;

这时候在右侧可以获知页面中的元件，选择之后确定即可;

设置完毕，可以使用F5预览;

最后我们可以看到页面载入后，会将焦点锁定到选择好的文本框上;

相信大伙看完了上文讲解的Axure制作焦点元件的具体步骤介绍，应该都学会了吧!

Axure|

多学习，多练手

画好原型后

1下载Axure

2如果是给itouch或者iPhone用的，比较好办，直接用320×480的分辨率画好辅助线，然后画原型

3按F5生成原型的时候，在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4设置说明见下图：（页面大小显示我的这个设置是按320×480的大小，默认不缩放）

5用你的移动设备访问你生成的原型链接（如本地服务器，或Dropbox托管）

6把该页面创建一个桌面快捷方式7完成（有icon，有闪屏）

另：想做鼠标动作或者复杂的页面交互比较麻烦，不推荐，尽量简洁。