中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

微信的添加朋友模塊里，有一項面對面建群的功能，讓身邊的朋友可以輸入同樣的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位數字向上移動，顯示待加入群聊的用戶頭像，閃爍頭像最后面的那個矩形框，并在界面下方顯示“進入該群”按鈕

二、實現步驟

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位數字和等待加入群聊的頭像列表，界面下方是一個“進入該群”的綠色按鈕。

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

完成后的效果如下：

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

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

2、數字鍵盤交互事件

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

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

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

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

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

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

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

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

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

（3）選擇按鈕1，添加鼠標移入時事件。

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

（4）選擇退格按鈕，添加鼠標單擊事件。

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

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

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

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

在隱藏事件觸發時，立即顯示當前矩形框。

到這里所有的事件已經處理完畢，可以F5預覽一下效果了。

這是一個內容較多的例子，重點請查看前面的思路，根據思路的指導來閱讀會更容易理解。

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

本文由 @Axure 原型設計工場?原創發布于人人都是產品經理。未經許可，禁止轉載。