微信面對面建群系一個十分實用方便的功能，今天我們就來聊一聊微信面對面建群原型設(shè)計的具體操作方法。

微信的添加朋友模塊里，有一項面對面建群的功能，讓身邊的朋友可以輸入同樣的4位數(shù)字進(jìn)入同一個群聊，很實用方便的功能，特別是在一些聚會、活動場景下，大家不用加好友就可以快速建群，以下為微信界面的截圖：

我們來看看如何實現(xiàn)這樣的功能的原型設(shè)計。

面對面建群有兩個步驟：

1、輸入4位數(shù)字

界面上默認(rèn)有4個圓點，表示等待輸入的4位數(shù)字。該界面提供了一個數(shù)字鍵盤，單擊數(shù)字鍵，顯示數(shù)字，單擊退格鍵，刪除最后輸入的數(shù)字。

2、進(jìn)入該群，加入群聊

4位數(shù)字輸入完成后，隱藏數(shù)字鍵盤，4位數(shù)字向上移動，并顯示當(dāng)前已經(jīng)正確輸入4位數(shù)字的身邊朋友列表，最后一位朋友的頭像后面邊一個閃爍的矩形框，表示下一個即將加入的朋友。

單擊這里先睹為快。

一、原型設(shè)計思路

1. 在數(shù)字輸入界面，用4個獨立的文本標(biāo)簽表示要顯示的數(shù)字，文本標(biāo)簽的樣式為黑色背景，綠色發(fā)光文字。
2. 定義一個全局變量保存當(dāng)前輸入的數(shù)字
3. 單擊數(shù)字按鈕時，將當(dāng)前按鈕上的數(shù)字追加到全局變量后面
4. 判斷全局變量的長度，如果為1，顯示第1個數(shù)字，隱藏其他3個數(shù)字，如果為2，顯示第1、2兩個數(shù)字，隱藏第3、4兩個數(shù)字，以此類推。
5. 當(dāng)全局變量長度為4時，隱藏數(shù)字鍵盤，將4位數(shù)字向上移動，顯示待加入群聊的用戶頭像，閃爍頭像最后面的那個矩形框，并在界面下方顯示“進(jìn)入該群”按鈕

二、實現(xiàn)步驟

1、界面布局

先來看一下輸入界面的布局。

（1）添加一個無邊框矩形，大小為454*790，背景為深黑色（從手機上截取微信界面后，通過取色工具設(shè)置背景）

（2）添加一個文本標(biāo)簽，命名為tip1，顏色為深灰色（#999999），內(nèi)容為“和身邊的朋友輸入同樣的四個數(shù)字，進(jìn)入同一個群聊”。添加兩個大小為15*15的圓形，背景分別為深綠色（#006600）和黑色（#000000）

（3）為了體現(xiàn)圓形的立體感，將綠色圓形放在下方，黑色圓形放在上方并向上移動一個像素位置，將這兩個圓形選中右鍵轉(zhuǎn)換為動態(tài)面板，并復(fù)制4個，水平分布排列好

（4）添加文本標(biāo)簽，文本背景保持和界面背景一樣的深黑色，大小為48，綠色字體，文字居中，大小為33*52，文字陰影效果為綠色發(fā)光（偏移位置為0，模糊效果為6，顏色為亮綠色），然后放在第一個立體圓形的上方，蓋住圓形。復(fù)制3個，分別蓋住其它三個圓形，將4個文本標(biāo)簽分別命名為n1、n2、n3和n4，右鍵設(shè)置4個數(shù)字為隱藏狀態(tài)

下面開始來設(shè)計數(shù)字鍵盤，它由10個數(shù)字按鈕和一個退格按鈕組成。

（1）添加一個有邊框矩形，背景顏色和界面背景一致，大小為151*60，深灰色文字，文字大小為28

（2）選擇矩形，設(shè)置文字內(nèi)容為“1”，右鍵設(shè)置交互樣式，按鈕在按下時顯示綠色發(fā)光邊框，通過設(shè)置鼠標(biāo)按鈕時的外部陰影實現(xiàn)，陰影設(shè)置為偏移0，模糊10，顏色為綠色，不透明度為100

（3）復(fù)制上面的矩形框9個，修改文字內(nèi)容分別為2、3、4、5、6、7、8、9、0，排列好，再復(fù)制一個矩形作為退格按鈕，刪除掉文字內(nèi)容，并截取一下退格圖標(biāo)，放在退格矩形上方

（4）選中數(shù)字按鈕和退格按鈕，右鍵轉(zhuǎn)換為動態(tài)面板，命名為keyboard，放在界面最下方

接下來，我們來添加輸入4位數(shù)字后的界面布局。

這個界面上，顯示了4位數(shù)字和等待加入群聊的頭像列表，界面下方是一個“進(jìn)入該群”的綠色按鈕。

1. 在4個數(shù)字下方添加一個文本標(biāo)簽，命名為tip2，內(nèi)容設(shè)置為“這些朋友也將進(jìn)入群聊”
2. 在上面文字下面添加一條水平線，寬度為416
3. 水平線下方添加一個頭像圖片，大小為60*60
4. 添加一個矩形，邊框為深灰色，無背景顏色，命名為rect
5. 添加一個矩形框作為按鈕，大小為435*50，綠色背景白色文字，文字大小為18
6. 為了移動4個數(shù)字，我們將它們以及后面的四個立體圓形一起選中，轉(zhuǎn)換為動態(tài)面板，命名為four_num。

完成后的效果如下：

為了能在輸入完4位數(shù)字后移動它們的位置，以及數(shù)字下面的文本標(biāo)簽、顯示頭像列表和按鈕，我們將水平線、文本標(biāo)簽、顯示頭像和按鈕一起選中，右鍵轉(zhuǎn)換為動態(tài)面板，命名為view2，并右鍵先隱藏。然后將數(shù)字鍵盤置于頂層，放在view2的上方，完成后的效果如下：

到這里界面布局部分已經(jīng)完成，接下來就是來處理交互事件了。

2、數(shù)字鍵盤交互事件

這里的事件主要就是數(shù)字鍵盤上的交互事件，單擊按鈕和退格鍵，要顯示對應(yīng)的數(shù)字，或者刪除最后的數(shù)字。

（1）添加全局變量nums，用來保存輸入的數(shù)字。

（2）選擇按鈕1，添加單擊事件。

事件有兩個分支，一個是當(dāng)前全局變量的長度小于3時，以及相反的條件。

按鈕事件分支一，在小于3時：

• 設(shè)置全局變量值，nums=[[nums]][[LVAR1]]，其中LVAR1是局部變量，指的是當(dāng)前被按下的按鈕上的數(shù)字，這個表達(dá)式意思就是后面追加當(dāng)前按鈕上的數(shù)字
• 觸發(fā)一個熱區(qū)組件的單擊事件，事件里處理了全局變量nums在不同長度時的數(shù)字內(nèi)容顯示和隱藏（例如顯示第1個隱藏后3個，顯示前2個隱藏后2個），并設(shè)置4個文本標(biāo)簽上的顯示內(nèi)容，通過字符串函數(shù)substr截取全局變量的第1位到第4位

這里為什么通過觸發(fā)的方式？因為直接在按鈕事件上添加上面的多個事件分支，無疑不好處理，因此熱區(qū)上的事件相當(dāng)于自定義了一個函數(shù)一樣，只需要觸發(fā)一下就行，這是一個非常重要的技巧，用于處理多分支的情況。

按鈕事件分支二，在小于3的相反情況，即大于等于3時：

• 設(shè)置全局變量值，nums=[[nums]][[LVAR1]]
• 觸發(fā)熱區(qū)組件的單擊事件
• 等待1秒鐘
• 顯示view2，內(nèi)容包括了水平線，頭像列表，文字提示tip2和綠色按鈕
• 移動4個數(shù)字所在的動態(tài)面板four_num到指定位置

（3）選擇按鈕1，添加鼠標(biāo)移入時事件。

為什么這里又要添加這個事件呢，原來我們在單擊數(shù)字按鈕時，按鈕周邊是有綠色發(fā)光效果的，因為放置的層級關(guān)系，后面放置的按鈕會擋住前面的按鈕，因此我們在鼠標(biāo)移入到按鈕上時，需要將當(dāng)前鼠標(biāo)下的按鈕移到最頂層，這樣就不會被其它按鈕擋住了。

（4）選擇退格按鈕，添加鼠標(biāo)單擊事件。

• 使用字符串截取函數(shù)substr，獲取0到最后一位之前的字符串：[[nums.substr(0,nums.length-1)]]，重新設(shè)置給全局變量nums
• 觸屏熱區(qū)的單擊事件，用來顯示和隱藏數(shù)字

（5）矩形框rect的閃爍效果事件處理

頭像最后面的矩形框是一個在不斷閃爍的動畫效果，我們通過矩形框的顯示和隱藏事件相互觸發(fā)來實現(xiàn)循環(huán)動畫效果。

• 在顯示時，隱藏當(dāng)前矩形框，配合淡出動畫效果，時長1秒
• 等待1秒種，配合上面的動畫時長

在隱藏事件觸發(fā)時，立即顯示當(dāng)前矩形框。

到這里所有的事件已經(jīng)處理完畢，可以F5預(yù)覽一下效果了。

這是一個內(nèi)容較多的例子，重點請查看前面的思路，根據(jù)思路的指導(dǎo)來閱讀會更容易理解。

源文件下載：https://pan.baidu.com/s/1pKMSoXH

本文由 @Axure 原型設(shè)計工場?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。