使用Axure实现微信聊天原型Word文档下载推荐.docx

使用Axure实现微信聊天原型Word文档下载推荐.docx

《使用Axure实现微信聊天原型Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《使用Axure实现微信聊天原型Word文档下载推荐.docx（14页珍藏版）》请在冰点文库上搜索。

设置连接属性到page1。

在page1页面中拖入背景页面，设置宽高为375*667。

拖入动态面板，命名为“聊天详情”。

在动态面板“聊天详情”中制作详情页面，完成基础页面的制作。

详情页面样式如图5.2所示。

图5.2聊天详情静态基础页面

步骤2：

制作底部键盘的弹出与收起

将组件选中，右击转换为动态面板，命名为“底部栏”。

双击动态面板“底部栏”，进入面板内部添加键盘图片素材，如图5.3所示。

图5.3底部栏效果

将图片键盘转换为动态面板，命名为keyboard。

双击动态面板keyboard，添加状态2、状态3，分别拖入图片素材“键盘2”“键盘3”。

添加3个状态间的转换交互事件：

向状态1中的“键盘1”左下角ABC处添加热区，命名为“键盘1”，为热区“键盘1”添加按键按下时事件。

设置动态面板keyboard的状态为“状态2”（如图5.4所示），以同样的方法制作各状态之间的切换效果。

图5.4键盘内部状态切换的设置

制作键盘的收起效果：

向状态1中的“键盘1”右下角return处添加热区，命名为“收起”。

为热区“收起”添加按键单击时事件。

设置移动动态面板“底部栏”到（0,618），方式：

绝对位置，动画：

线性，时间：

500毫秒（如图5.5所示）。

以同样的方法制作状态2和状态3中的收起效果。

图5.5收起效果的交互设置

弹出效果的制作：

将底部栏的语音按钮和文字输入选中，右击转换为动态面板，命名为“语音与文字切换”。

添加状态2，将两个状态分别命名为“输入切换”“按住说话”。

进入动态面板“语音与文字切换”状态1（输入切换）。

在文字输入处添加文本输入框，命名为“文字输入框”。

设置鼠标单击时事件：

设置获取焦点于文本元件“文字输入框”，移动动态面板“底部栏”到（0,410）,方式为绝对位置，动画为线性，时间为200毫秒，如图5.6所示。

图5.6弹出效果的交互设置

步骤3：

制作底部键盘内部交互

添加表情的制作：

选中表情图标，右击转换为动态面板，命名为“表情”，添加状态2。

进入状态2，拖入小键盘图标。

选中动态面板keyboard，右击转换为新的动态面板，命名为“底部键盘组”，添加状态2，状态3，分别将3个状态命名为“键盘”“表情”“添加图片”。

设置动态面板“表情”状态1中表情图标的鼠标单击时事件：

设置动态面板“底部键盘组”为表情，设置动态面板“语音与文字切换”为输入切换（状态1），设置动态面板“表情”为状态2，设置获取焦点在“文字输入框”，移动动态面板“底部栏”到（0,410），方式为绝对位置，动画为线性，时间为200毫秒，如图5.7所示。

图5.7状态1表情图标的交互设置

设置状态2中小键盘图标的鼠标单击时事件：

设置动态面板“语音与文字切换”为输入切换（状态1），设置动态面板“底部键盘组”为键盘，设置动态面板“表情”为状态1，设置获取焦点在“文本输入框”。

移动动态面板“底部栏”到（0,410），方式为绝对位置，动画为线性，时间为200毫秒，如图5.8所示。

图5.8状态2小键盘图标的交互设置

添加图片的制作：

选中添加图片图标，右击转换为动态面板，命名为“图片”，添加状态2，进入状态2，拖入添加图片图标。

设置动态面板“图片”状态1中添加图片图标的鼠标单击时事件：

设置动态面板“底部键盘组”为图片，设置动态面板“语音与文字切换”为输入切换（状态1），设置动态面板“表情”为显示，设置动态面板“图片”为状态2，设置动态面板“表情”为状态1。

移动动态面板“底部栏”到（0,410），方式为绝对位置，动画为线性，时间为200毫秒，如图5.9所示。

图5.9状态1添加图片图标的交互设置

设置动态面板“图片”状态2中添加图片图标的鼠标单击时事件：

设置动态面板“底部键盘组”为键盘，设置动态面板“语音与文字切换”为输入切换（状态1），设置动态面板“表情”为显示。

设置动态面板“图片”为状态1，设置动态面板“表情”为状态1。

移动动态面板“底部栏”到（0,410），方式为绝对位置，动画为线性，时间200毫秒，如图5.10所示。

图5.10状态2添加图片图标的交互设置

步骤4：

制作语音输入效果

在聊天详细页面中制作语音输入的图标，如图5.11所示。

图5.11语音输入交互图标

选中图标右击转换为动态面板，命名为“语音输入”。

为动态面板“语音输入”新添加2个状态，3个动态面板的内容均为该图标，不同之处在于状态1中图标右侧的音量条为两个格（如图5.12所示），状态2中图标右侧的音量条为4个格，状态3中图标右侧的音量条为6个格。

图5.12状态1中的语音交互图标

语音输入效果与底部栏的联动制作：

设置动态面板“语音输入”为隐藏。

双击动态面板“语音与文字切换”进入“按住说话”状态。

拖入图标小键盘，在拖入一个矩形元件用于制作按钮“按住说话”。

状态2下“按住说话”页面效果，如图5.13所示。

图5.13状态2页面效果

设置状态2的交互：

设置小键盘图标的鼠标单击时事件：

设置动态面板“语音与文字切换”为输入切换（状态1），设置获取焦点在“文本输入框”。

移动动态面板“底部栏”到（0,410），方式为绝对位置，动画为线性，时间为200毫秒。

设置动态面板“表情”为显示，设置尺寸于矩形“按住说话”，设置宽高为248*35，锚点在左侧，无动画，如图5.14所示。

图5.14状态2中小键盘图标的交互设置

设置矩形元件“按住说话”的鼠标按下时事件：

设置动态面板“语音输入”显示，设置动态面板“语音输入”的状态为next，向后循环，循环间隔为300毫秒，无动画。

设置矩形元件“按住说话”的鼠标松开时事件：

设置动态面板“语音输入”隐藏，设置动态面板“语音输入”状态停止循环，如图5.15所示。

图5.15状态2中矩形元件的交互设置

设置状态1的交互：

设置语音图标的鼠标单击时事件：

移动动态面板“底部栏”到（0,618），动画为线性，时间为200毫秒。

设置等待事件，时间为200毫秒。

设置动态面板“语音与文字切换”为按住说话。

动画为逐渐，时间为100毫秒。

设置动态面板“表情”为隐藏，设置尺寸于矩形“按住说话”，设置宽高为275*35，锚点在左侧，无动画，如图5.16所示。

图5.16状态1中语音图标的交互设置

设置文本元件“文本输入框”的鼠标单击时事件：

设置动态面板“底部键盘组”为键盘，动态面板“语音与文字切换”为输入切换，设置动态面板“表情”为状态1，设置获取焦点于文字元件“文字输入框”。

移动动态面板“底部栏”到（0,410），动画为线性，时间为200毫秒，如图5.17所示。

图5.17状态1中文本输入框的交互设置

步骤5：

制作文字输入效果

可变消息样式的制作：

选中聊天详情页面中的3条信息与头像，右击转换为动态面板，命名为“聊天详细”，如图5.18所示。

图5.18动态面板聊天详细

双击动态面板“聊天详细”进入动态面板内部，删除原页面中的第3条消息及头像。

向页面中添加中继器，制作的中继器内部样式如图5.19所示。

图5.19中继器内部样式

中继器内部的绿色聊天背景气泡的宽高为237*45，上方放置白色矩形元件，作为遮盖条，实现动态显示气泡，设置宽高为294*46。

设置中继器的数据集为两列，第一列命名为neirong,第二列为img。

向数据集的第一行添加第一列数据“好呀好呀，最喜欢逛街了”，向第二列导入图标“自己的头像”，如图5.20所示。

图5.20数据集列的设置

设置中继器元件每项加载时事件：

设置文字于气泡，设置文本为富文本，函数为item.neirong；

对齐方式为靠右，带有空格（为了空出聊天气泡的右侧尖角），如图5.21所示。

图5.21中继器内文本设置

设置尺寸于元件遮盖条，宽为[[311-Item.neirong.length*13]]（其中311代表聊天内容每行的总宽度，Item.neirong.length表示文字的字符数量（中文汉字字符），13代表字体的字号大小），高为45（原型原因，仅支持单行输入），锚点在左侧，无动画，如图5.22所示。

图5.22中继器内元件尺寸设置

撤回消息的制作：

选中消息撤回元件，右击转换为动态面板，命名为“撤回”，设置为隐藏。

设置矩形元件“气泡”在鼠标长按时的交互事件为显示动态面板“撤回”。

选中中继器中的所有元件，转换为动态面板，名命为“消息”。

双击动态面板“消息”添加状态2，拖入矩形元件，设置元件文字为“您撤回了一条消息”，作为消息撤回提示，如图5.23所示。

图5.23消息撤回提示

双击动态面板“撤回”进入动态面板内部，设置矩形元件“撤回”鼠标单击时的交互事件：

设置动态面板“消息”为状态2，等待5000毫秒，从中继器中删除This行。

如图5.24所示，设置其他矩形元件鼠标单击时交互事件为隐藏动态面板“撤回”。

图5.24撤回设置

文字发送的制作：

为动态面板“底部栏”中的动态面板“图片”添加状态3，在状态3中制作文字消息发送按钮。

设置鼠标单击时的交互事件：

向中继器添加一行（如图5.25所示）。

设置文字于“文字输入框”，文字内容为空。

移动动态面板“聊天详细”到（0,-80），动画为线性，时间为300毫秒。

设置尺寸于动态面板“聊天详情”，宽为375，高为[[LVAR1.height+85]]。

锚点为左上角，如图5.26所示。

图5.25添加行的设置

图5.26添加行到中继器

动态面板“聊天详情”的高度[[LVAR1.height+85]]中，LVAR1代表动态面板“聊天详情”，height函数表示面板的高度，数值85为中继器中消息的单行行高，如图5.27所示。

图5.27动态面板“聊天详情”高度设置

为动态面板“底部栏”中的文字元件“文字输入框”添加文本改变时交互事件，用于判断是否显示发送按钮。

如果文字元件“文字输入框”的值不为空，则设置动态面板“图片”的状态为状态3；

如果文字元件“文本输入框”的值为空，则设置动态面板“图片”的状态为状态1，如图5.28所示。

图5.28文字输入框文本改变时的设置

步骤6：

制作聊天记录查看页面

设置动态面板“聊天详细”的拖动时事件：

移动动态面板“聊天详细”时为垂直拖动，动画为线性。

边界设置：

顶部小于等于69，底部大于-[[LVAR1.height-543]]（动态面板“聊天详细”的高度减去初始时的动态面板“聊天详细”的高度。

初始状态下面板只能是向下拖动，所以为负值），如图5.29所示。

图5.29动态面板“聊天详细”的拖动时设置

步骤7：

制作整体交互

在动态面板“聊天详情”内部左上角返回处拖入热区，设置鼠标单击时交互：

隐藏动态面板“聊天详情”，动画为向右滑动，时间为500毫秒，如图5.30所示。

图5.30返回主界面制作

设置动态面板“聊天详情”为隐藏，置于背景图片之上。

在背景图片上拖入热区，设置鼠标单击时交互事件：

显示动态面板“聊天详情”，动画为向左滑动，时间为500毫秒，如图5.31所示。

图5.31显示动态面板“聊天详情”的设置

注意：

由于制作步骤较长，元件较多，容易发生混乱，要整理元件顺序和层级。

知识回顾总结

本案例中应用的主要知识是动态面板和中继器及条件判断。

通过案例中文字输入效果的制作对中继器进行了练习和拓展。

中继器中可以使用动态面板，应注意步骤：

先制作中继器的基础元件，再添加动态面板。

在制作动态效果时要明确逻辑关系及元件层级关系，尤其是制作复杂案例时。

例如本案例中，虽然先制作了动态面板“底部栏”，但是最后整理时动态面板“底部栏”应处于动态面板“聊天详细”上层。