這是一個趣味的原型案例：如何使用Axure實現(xiàn)One Step的交互效果。

錘子手機(jī)的易用性一向值得稱贊，堅果Pro也在上市以來常常被老羅親自各種曝光，在堅果Pro發(fā)布會上的一度哽咽也讓老羅自己感動的不行。

是的，我們來看看被推崇的三大功能之一的One Step，看看如何使用Axure來實現(xiàn)這樣的交互效果。

點擊這里查看在線演示效果。

界面布局

這里只演示One Step的選中QQ中的文字內(nèi)容，然后拖動，再釋放到指定App圖標(biāo)上的交互效果。

1.添加頭部

為了看起來更真實，我們以截圖代替，放在上方。

2. 添加內(nèi)容區(qū)域

內(nèi)容區(qū)域以QQ對話框為例，添加一個矩形，寬度比頭部稍微小一點（右側(cè)要空出位置放圖標(biāo)列表），高度470，背景顏色為淺灰色。

3. 添加右側(cè)應(yīng)用APP列表

添加一個矩形框作為背景，大小50*470，背景和頭部背景顏色一致。

4. 添加QQ聊天區(qū)域內(nèi)容

分別添加兩個頭像，以及對應(yīng)的文字內(nèi)容，注意第一個人的文字內(nèi)容的氣泡實現(xiàn)方式，是用一個帶有圓角的矩形，和一個三角形的組合，三角形放置一定的角度（為了示意，以紅色形狀表示）。

組后后的內(nèi)容里輸入文字，文字的左邊距設(shè)置大一點：20，這樣文字就在箭頭靠右位置了。

5. 添加右側(cè)App圖標(biāo)列表

因為拖動的目標(biāo)APP的圖標(biāo)不是這個APP列表，而是切換后的分享快捷方式列表，因此我們還是以截圖代替。

選擇右側(cè)黑色矩形背景和圖標(biāo)列表截圖，右鍵轉(zhuǎn)換為動態(tài)面板，取消動態(tài)面板的“自動調(diào)整為內(nèi)容尺寸”勾選，保持動態(tài)面板的固定大小，給動態(tài)面板命名為app_list。

給動態(tài)面板app_list添加一個新的狀態(tài)，雙擊新加的狀態(tài)進(jìn)入編輯。

從錘子手機(jī)One Step的快捷方式列表中截圖一下背景，取一小塊綠色草地，作為動態(tài)面板app_list狀態(tài)2的背景：

然后設(shè)置背景圖片的填充方式為“重復(fù)圖片”，這樣背景就會被重復(fù)填充：

添加各個快捷方式圖標(biāo)，以小圖標(biāo)圖片代替：

分別給圖標(biāo)命名app1~app7，在拖動內(nèi)容到這些圖標(biāo)上時，圖標(biāo)會被放大，移出后圖標(biāo)大小還原。

6. 文字拖動內(nèi)容

在鼠標(biāo)按下QQ聊天中的文字內(nèi)容時，會彈出一個小窗口，內(nèi)容為當(dāng)前的聊天內(nèi)容文字，藍(lán)色背景白色文字，修改形狀為帶有下三角形的，有邊框，稍微粗一點，調(diào)整下方三角形的位置到中間。

然后旋轉(zhuǎn)這個形狀180度，但文字角度不變，右鍵轉(zhuǎn)換為動態(tài)面板，命名為tips。

給動態(tài)面板tips添加一個狀態(tài)2，里面什么內(nèi)容也不用放，并將狀態(tài)2放在上層，作為tips的初始狀態(tài)，設(shè)置動態(tài)面板“自動調(diào)整為內(nèi)容尺寸”為取消勾選狀態(tài)，然后將tips放在第一個聊天記錄內(nèi)容上方。

這樣在初始狀態(tài)時，這個藍(lán)色提示被拖動的文字處于不可見狀態(tài)，因為狀態(tài)2在動態(tài)面板的最上層，而且里什么內(nèi)容也沒有，但是支持響應(yīng)的事件，可以用來處理拖動事件效果。

為了響應(yīng)元件范圍的判斷條件，我們在tips的狀態(tài)箭頭上方再添加一個小的三角形，只有當(dāng)這個小三角形和快捷方式的圖標(biāo)相接觸時才響應(yīng)，命名形狀為sanjiao。

界面內(nèi)容已經(jīng)準(zhǔn)備妥當(dāng)，現(xiàn)在就開始處理事件了。

事件處理

事件的處理流程說明：

1. 鼠標(biāo)在第一條聊天記錄處長按，會響應(yīng)tips的鼠標(biāo)長按事件。
2. 響應(yīng)鼠標(biāo)長按事件后，切換右側(cè)的app_list為第二個狀態(tài)，配合向左滑動動畫。
3. 同時響應(yīng)動態(tài)面板tips的鼠標(biāo)長按事件，切換tips狀態(tài)到狀態(tài)1，即顯示文字提示內(nèi)容。
4. 響應(yīng)動態(tài)面板tips的拖動事件，移動動態(tài)面板tips。
5. 移動動態(tài)面板tips到app_list的圖標(biāo)1上，圖標(biāo)1放大顯示，移出后，圖標(biāo)大小還原。
6. 松開鼠標(biāo)后，app_list還原到狀態(tài)1，同時隱藏tips并移動到初始位置。

整個事件流程完成。

1. 動態(tài)面板tips的鼠標(biāo)長按事件

先設(shè)置當(dāng)前動態(tài)面板狀態(tài)為State1，即顯示藍(lán)底白字的提示文字

再切換動態(tài)面板app_list狀態(tài)為State2，配合向左滑動的動畫效果。

2. 動態(tài)面板tips拖動事件

動態(tài)面板在響應(yīng)鼠標(biāo)長按事件后，同時開始響應(yīng)拖動事件。

添加判斷條件，如果形狀sanjiao接觸到圖標(biāo)app1（即instagram圖標(biāo)）時，繼續(xù)移動動態(tài)面板tips1，然后設(shè)置圖標(biāo)app1的大小為42*42，配合動畫效果為從中心以線性放大。

否則，繼續(xù)移動動態(tài)面板tips1，還原圖標(biāo)app1的大小為37*37，同樣的動畫效果。

3. 動態(tài)面板鼠標(biāo)松開事件

1）鼠標(biāo)松開時，切換圖標(biāo)列表app_list狀態(tài)為State1，配合向右滑動動畫。

2）設(shè)置動態(tài)面板tips為狀態(tài)State2，即空白內(nèi)容，并將tips移動到初始位置（73，109）。

事件處理完成，F(xiàn)5預(yù)覽一下效果，拖動tips到圖標(biāo)app1上時，測試一下移入和移出效果，即響應(yīng)元件范圍判斷條件。

小結(jié)

這是一個趣味的原型案例，總結(jié)一下所應(yīng)用到的知識點如下：

• 多個形狀的組合，實現(xiàn)聊天氣泡形狀，一些特殊形狀的創(chuàng)建技巧
• 動態(tài)面板鼠標(biāo)長按時間、動態(tài)面板拖動事件、松開事件，注意狀態(tài)1中設(shè)置為空白內(nèi)容+動態(tài)面板“自動調(diào)整為內(nèi)容尺寸“也是一個小技巧
• 條件判斷：元件范圍接觸判斷，這是重點哦！
• 動態(tài)面板背景圖片的填充效果
• 動態(tài)面板的狀態(tài)切換
• 通過圖片設(shè)置大小，配合動畫效果，實現(xiàn)圖標(biāo)的放縮

源文件下載

作者鏈接: https://pan.baidu.com/s/1pK7z5k3 密碼: tj85

官方鏈接：http://pan.baidu.com/s/1qYryDly 密碼：t6f8

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