Axure教程：微信面对面建群原型设计

微信面对面建群系一个十分实用方便的功能，今天我们就来聊一聊微信面对面建群原型设计的具体操作方法。

微信的添加朋友模块里，有一项面对面建群的功能，让身边的朋友可以输入同样的4位数字进入同一个群聊，很实用方便的功能，特别是在一些聚会、活动场景下，大家不用加好友就可以快速建群，以下为微信界面的截图：

我们来看看如何实现这样的功能的原型设计。

面对面建群有两个步骤：

1、输入4位数字

界面上默认有4个圆点，表示等待输入的4位数字。该界面提供了一个数字键盘，单击数字键，显示数字，单击退格键，删除最后输入的数字。

2、进入该群，加入群聊

4位数字输入完成后，隐藏数字键盘，4位数字向上移动，并显示当前已经正确输入4位数字的身边朋友列表，最后一位朋友的头像后面边一个闪烁的矩形框，表示下一个即将加入的朋友。

单击这里先睹为快。

一、原型设计思路

在数字输入界面，用4个独立的文本标签表示要显示的数字，文本标签的样式为黑色背景，绿色发光文字。

定义一个全局变量保存当前输入的数字

单击数字按钮时，将当前按钮上的数字追加到全局变量后面

判断全局变量的长度，如果为1，显示第1个数字，隐藏其他3个数字，如果为2，显示第1、2两个数字，隐藏第3、4两个数字，以此类推。

当全局变量长度为4时，隐藏数字键盘，将4位数字向上移动，显示待加入群聊的用户头像，闪烁头像最后面的那个矩形框，并在界面下方显示“进入该群”按钮

二、实现步骤 1、界面布局

先来看一下输入界面的布局。

（1）添加一个无边框矩形，大小为454*790，背景为深黑色（从手机上截取微信界面后，通过取色工具设置背景）

（2）添加一个文本标签，命名为tip1，颜色为深灰色（#999999），内容为“和身边的朋友输入同样的四个数字，进入同一个群聊”。添加两个大小为15*15的圆形，背景分别为深绿色（#006600）和黑色（#000000）

（3）为了体现圆形的立体感，将绿色圆形放在下方，黑色圆形放在上方并向上移动一个像素位置，将这两个圆形选中右键转换为动态面板，并复制4个，水平分布排列好

（4）添加文本标签，文本背景保持和界面背景一样的深黑色，大小为48，绿色字体，文字居中，大小为33*52，文字阴影效果为绿色发光（偏移位置为0，模糊效果为6，颜色为亮绿色），然后放在第一个立体圆形的上方，盖住圆形。复制3个，分别盖住其它三个圆形，将4个文本标签分别命名为n1、n2、n3和n4，右键设置4个数字为隐藏状态

下面开始来设计数字键盘，它由10个数字按钮和一个退格按钮组成。

（1）添加一个有边框矩形，背景颜色和界面背景一致，大小为151*60，深灰色文字，文字大小为28

（2）选择矩形，设置文字内容为“1”，右键设置交互样式，按钮在按下时显示绿色发光边框，通过设置鼠标按钮时的外部阴影实现，阴影设置为偏移0，模糊10，颜色为绿色，不透明度为100

（3）复制上面的矩形框9个，修改文字内容分别为2、3、4、5、6、7、8、9、0，排列好，再复制一个矩形作为退格按钮，删除掉文字内容，并截取一下退格图标，放在退格矩形上方

（4）选中数字按钮和退格按钮，右键转换为动态面板，命名为keyboard，放在界面最下方

接下来，我们来添加输入4位数字后的界面布局。

这个界面上，显示了4位数字和等待加入群聊的头像列表，界面下方是一个“进入该群”的绿色按钮。

在4个数字下方添加一个文本标签，命名为tip2，内容设置为“这些朋友也将进入群聊”

在上面文字下面添加一条水平线，宽度为416

水平线下方添加一个头像图片，大小为60*60

添加一个矩形，边框为深灰色，无背景颜色，命名为rect

添加一个矩形框作为按钮，大小为435*50，绿色背景白色文字，文字大小为18

为了移动4个数字，我们将它们以及后面的四个立体圆形一起选中，转换为动态面板，命名为four_num。

完成后的效果如下：