文章分享了網易雲音樂唱片機播放效果的原型設計過程，希望對你有所受用。
申明：本文僅僅是探索學習網易雲音樂App的樣式和互動設計，和網易雲音樂App本身無關。
網易雲音樂App在播放音樂時，擬物化地顯示一個唱片機。開始播放時，音樂響起，唱片開始旋轉，唱臂輕輕旋轉後搭在唱片上，暫停時，唱片漸漸停下來，唱臂也從唱片上移走。
我們可通過Axure的互動設計動作的設置，精確控制它的交互操作，例如在暫停時，讓唱片再次旋轉一點角度，等待停下來後，再將唱臂移走，請注意後面設置交互動作的順序。
01 界面布局
唱片機由一個唱片和一個唱臂組成，先準備好兩張圖片。
兩張圖片都是PNG格式的透明背景，將兩張圖片拖動到設計界面上，調整好位置。添加一個「開始」按鈕和一個「結束」按鈕。
02 交互處理
這次主要看看交互事件的處理步驟。
1. 定義一個全局變量running，用來控制播放還是暫停
running=0表示暫停，running=1表示播放狀態，初始值為0。
2. 給唱片機添加載入事件，載入事件裡處理循環操作
1）判斷running是否等於1，如果等於1繼續下面的操作
2）順時針旋轉0.1度
3）等待1毫秒
4）觸發當前元件的載入事件，實現循環操作
這裡每次旋轉了很小的角度，並且等待很短的時間，目的是為了讓旋轉看起來更平滑。
3. 給唱臂添加單擊事件，處理移入和移出唱片的旋轉效果
1）判斷當前是否處於播放狀態，即running等於1，如果是，繼續下一步
2）順時針旋轉唱臂20度，時長為0.5秒，注意旋轉的錨點是在圖片的左上角
3）如果不是處於播放狀態，則
4）逆時針旋轉20度，時長為0.5秒
4. 「開始」按鈕的控制
1）設置變量running為1，表示開始播放
2）禁用當前按鈕，防止誤點擊；同時啟用「暫停」按鈕
3）觸發唱片的載入事件，旋轉唱片
4）觸發唱臂的單擊事件，旋轉唱臂到唱片上
5. 「暫停」按鈕的控制，該按鈕事件和「開始」按鈕正好相反
1）設置變量running為0，表示暫停
2）啟用「開始」按鈕，同時禁用「暫停」按鈕
3）為了體驗更好，我們讓唱片旋轉一個小角度後再停下來，順時針旋轉了5度，時長0.5秒
4）等待0.5秒，等待上面的旋轉停止
5）觸發唱臂回到原處
所有交互已經處理完畢，可以預覽一下效果了。
03 小結
唱片機的原型主要應用了元件的旋轉操作，需要注意如何處理循環操作，同時也需要注意全局變量在這裡是如何控制播放的暫停的邏輯的。
留個小問題，這個原型裡有一個值得改進的地方，你知道是哪裡麼？歡迎在下方留言說出你發現的問題。
本文由 @Axure原型設計工場 原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議