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

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

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

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

界面布局

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

1.添加頭部

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

2. 添加內容區域

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

3. 添加右側應用APP列表

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

4. 添加QQ聊天區域內容

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

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

5. 添加右側App圖標列表

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

選擇右側黑色矩形背景和圖標列表截圖，右鍵轉換為動態面板，取消動態面板的“自動調整為內容尺寸”勾選，保持動態面板的固定大小，給動態面板命名為app_list。

給動態面板app_list添加一個新的狀態，雙擊新加的狀態進入編輯。

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

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

添加各個快捷方式圖標，以小圖標圖片代替：

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

6. 文字拖動內容

在鼠標按下QQ聊天中的文字內容時，會彈出一個小窗口，內容為當前的聊天內容文字，藍色背景白色文字，修改形狀為帶有下三角形的，有邊框，稍微粗一點，調整下方三角形的位置到中間。

然后旋轉這個形狀180度，但文字角度不變，右鍵轉換為動態面板，命名為tips。

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

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

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

界面內容已經準備妥當，現在就開始處理事件了。

事件處理

事件的處理流程說明：

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

整個事件流程完成。

1. 動態面板tips的鼠標長按事件

先設置當前動態面板狀態為State1，即顯示藍底白字的提示文字

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

2. 動態面板tips拖動事件

動態面板在響應鼠標長按事件后，同時開始響應拖動事件。

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

否則，繼續移動動態面板tips1，還原圖標app1的大小為37*37，同樣的動畫效果。

3. 動態面板鼠標松開事件

1）鼠標松開時，切換圖標列表app_list狀態為State1，配合向右滑動動畫。

2）設置動態面板tips為狀態State2，即空白內容，并將tips移動到初始位置（73，109）。

事件處理完成，F5預覽一下效果，拖動tips到圖標app1上時，測試一下移入和移出效果，即響應元件范圍判斷條件。

小結

這是一個趣味的原型案例，總結一下所應用到的知識點如下：

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

源文件下載

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

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

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