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

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

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

面对面建群有两个步骤：

1、输入4位数字

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

2、进入该群，加入群聊

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

单击这里先睹为快。

一、原型设计思路

1. 在数字输入界面，用4个独立的文本标签表示要显示的数字，文本标签的样式为黑色背景，绿色发光文字。
2. 定义一个全局变量保存当前输入的数字
3. 单击数字按钮时，将当前按钮上的数字追加到全局变量后面
4. 判断全局变量的长度，如果为1，显示第1个数字，隐藏其他3个数字，如果为2，显示第1、2两个数字，隐藏第3、4两个数字，以此类推。
5. 当全局变量长度为4时，隐藏数字键盘，将4位数字向上移动，显示待加入群聊的用户头像，闪烁头像**面的那个矩形框，并在界面下方显示“进入该群”按钮

二、实现步骤