之前写文档没有用axure,最近才接触这个软件,觉得原型制作还是挺有趣的。闲来琢磨了一下里面的功能,边做边学,做了一个PC端的聊天窗口。现在还不够完善,只是将大概功能实现出来。有更好的解决方案也希望大家能不吝赐教。

效果如下:

Axure:制作PC端聊天窗口原型

好了,接下来进入正题。

一、草图绘制

  1. 三个色块矩形叠放,增加矩形阴影,形成层级关系。从大到小分别对应背景、列表栏、输入区域。
  2. 添加细节元素图标、文字等,图标可以在其他软件中做好导出直接使用。
  3.  然后到了添加元件的步骤,输入栏直接拉一个和输入区域等高的文本框,去掉边框,添加提示文字为“请输入…”即可,左边列表栏我是用中继器做的。(教程大家发过很多,我这里就不重复了)

Axure:制作PC端聊天窗口原型

二、交互制作

1. 第一步制作点击切换列表的交互动效

①先绘制一个蓝色矩形选中条。

Axure:制作PC端聊天窗口原型

②点击文字(未回复/已回复/已结束),添加一个选中状态(我这里是将文字颜色变黑)。

③添加鼠标单击时的事例。

Axure:制作PC端聊天窗口原型

  1. 设置选中状态 -未回复(文本标签)为true;其他两个标签选项为false。其他两个标签设置同理,设置完成之后,就可以看到点击有选中效果了。
  2. 再显示中继器内容的跟随事件:仍然是鼠标单击时的事例,把未回复(当前标签对应中继器)设置为显示,动画可以设置为向左滑动或者向右滑动,随便设置都可以,统一就行了。接着把剩下的两个中继器内容设置为隐藏。设置完成后,就有下边的列表切换效果了。
  3. 再是蓝色矩形条的切换跟随,[[wh.left]]代表蓝色矩形条的x轴起点位置绝对固定到wh这个元件的左端,[[wh.bottom]]代表蓝色矩形条的Y轴位置起点在wh元件的底部,其他两个标签也设置起来,注意,第六步的变量要一一对应起来,比如:我这里wh代表text-未回复,yh代表text-已回复,yj代表text-已结束。

Axure:制作PC端聊天窗口原型

到此为止,切换效果就有了。

2. 接下来就是列表的单行选中效果的制作

这要先说一下,我在中继器中的项目编辑中加了一个矩形作为边界,去掉边框和填充。

Axure:制作PC端聊天窗口原型

①将该矩形添加一个选中状态,我这里简单的做了一个填充颜色。

Axure:制作PC端聊天窗口原型

②将中继器中的内容编组,为这个组设置鼠标单击时的选中状态为true。(设置隐藏 未读数量可以达到点击后红色数字提示气泡消失的效果)

Axure:制作PC端聊天窗口原型

③往下找到组合的设置选项组名称,输入一个名称。

Axure:制作PC端聊天窗口原型

④再选择中继器,把隔离选项组效果的勾去掉就完成了单行选中效果了。

Axure:制作PC端聊天窗口原型

现在单行点击效果也完成了。

3. 右边聊天窗口的交互

①元件组成

首先,头部是一个矩形,随便打上一个联系人的名字。

然后是别人发来的消息显示(因为我这里其实是用的同一个聊天面板,设置改变只是头部文字和未读消息的文字,所以实现出来比较简陋,切换到B联系人时,发给A的消息还是在,你们有好的解决方案可以说一下)。

Axure:制作PC端聊天窗口原型

(1)自己发的消息我是用一个中继器做的,双击进入中继器编辑页面,拉一个图片+矩形框进来,给中继器的列添加对应的属性名。如:内容-neirong、图片-img。

注意:这里不要添加具体内容。

Axure:制作PC端聊天窗口原型

(2)把输入框的隐藏边框给勾上,在提交按钮那儿选择右边的发送按钮。

Axure:制作PC端聊天窗口原型

(3)最后选择提交按钮,添加鼠标单击时的事例。

Axure:制作PC端聊天窗口原型

添加行(我的消息发送),选中刚刚聊天面板中建的中继器然后点击添加行,img对应的是自己的头像,neirong栏可以填写默认变量[[LVAR1]]或者自己定一个,然后点击后面的fx编辑变量,将输入框的文字赋值给它。

Axure:制作PC端聊天窗口原型

Axure:制作PC端聊天窗口原型

设置提交时,将文本框内容清空。

Axure:制作PC端聊天窗口原型

完成之后就能自己发消息啦。

4. 最后就是点击左侧列表,右边聊天面板跟随变化

(1)将右边聊天面板编组,转为动态面板,并设为隐藏。(可以先把面板移到别的地方,添加一个空状态时的文字,再将面板移回原位)

(2)然后为左侧中继器的项目添加鼠标点击时的事例。

  • 第一行为定义num1(全局变量)为鼠标点击中继器项目的所在行数。
  • 第二行为设置点击该项目时使该项目变成选中状态(这个用于前面的单行选中)。
  • 第三行为点击使数量气泡消失。
  • 第四行+第五行 为设置点击刷新聊天面板显示时的状态。

(3)为聊天界面显示时设置文字变化,如点击第一行时显示头部为小明,消息为hello,第二行显示头部为二明,消息为我要睡觉了,以此类推。上一步设置隐藏再显示面板,就是为了刷新这个文字变化。

Axure:制作PC端聊天窗口原型

Axure:制作PC端聊天窗口原型

然后点击预览,就可以模拟聊天啦!

最后在线原型预览地址:https://21l2ua.axshare.com