編輯導語：在使用產品的過程中，往往會有一些人性化的小設計深得用戶的青睞，好的產品可以在內容不變的情況下，通過細節的處理讓之煥然一新。本文作者對蝦米音樂APP中一些優秀的設計細節進行了梳理盤點，希望看后能夠對你有所幫助。

相比于其他音樂APP，蝦米音樂一直在走著小而美的路線，保持著自己具有差異化的設計。不久前，蝦米音樂宣布將在2月5號關停產品，小而美的定位可能不足以支撐平臺長期走下去，他們或是走向商業化而逐漸轉變定位，或是被更大的資本收購并走向各巨頭的懷抱，而蝦米則走向了另外一條道路。

拋開其他因素不談，蝦米音樂中的交互設計、界面設計還是讓很多設計師印象深刻的，這也是很多用戶選擇蝦米的原因之一。

本文將對蝦米音樂APP中一些優秀的設計點進行回顧。本文內容有以下幾個部分：

• 令人舒適的交互
• 情感化的設計
• 界面中的驚喜

一、令人舒適的交互

1.「歌曲進度條」操作可視化

在蝦米播放頁面的前進和后退的進度條設計上，當用戶滑動進度條快進時，進度條上面會出現一個橙色的帶有漸變小尾巴的圖形，具有方向感的圖形將用戶操作行為可視化。

在原本的進度條上，表明時間進度的按鈕可點擊區域較小，當用戶按下時會被手指完全擋住。所以，當用戶按住拖動按鈕操作前進或后退時，橙色小子彈將彈出，以可視化方式告知用戶是否操作成功，同時小子彈上的數字也將幫助用戶清晰的看到當前拖動的時間，這個設計對于有精準操作需求的用戶而言是比較有效的。

2. 界面切換時的「歌曲進度條」

另外在進度條的設計上，還有一點比較有趣，當用戶向右滑動播放頁面進入歌曲信息頁面時，進度條以及下面的播放控件會一起“壓縮”并向下移動。向左進入播放頁面時，則移動到原來的位置，整個交互過程特別流暢。

在產品界面切換或者轉場時，產品需要減少用戶面對大量新內容的陌生感，以及保持一系列相關動作的連續性。在界面切換過程中，蝦米通過保留進度條和播放控件這類核心界面元素，保證了與聽歌相關操作的連貫性，也減少用戶的信息承載負擔，同時舒適的動效也讓用戶忍不住多劃一劃。

3. 「極速試聽」

在進入歌單之后，有多首歌用戶可以點選，但是糾結點哪首歌好呢，極速試聽則可以幫助用戶進行選擇。用戶點擊急速試聽后，會播放歌單中的一首歌的副歌或精選部分，當用戶覺得歌曲聽起來還不錯時，可以點擊歌曲進入播放頁面，進行其他動作。

開啟極速播放模式有點類似歌曲串燒的感覺，一首首支持極速播放的歌曲將輪流播放，也支持用戶點擊任意一首歌進行極速播放。整個交互過程很簡單，同時也不需要多余的頁面跳轉，在歌單頁面中，用戶就有機會大致聽完自己想聽的歌曲，這是一種幫助用戶篩選和選擇的過程，同時保證用戶一定選擇自由度，方便高效。

二、情感化的設計

1. 「樂庫」banner滑動選擇

在首頁的「樂庫」模塊中，用戶可以滑動頂部的banner，這里banner不同于首頁中常見的單圖形式的輪播banner，而是通過將banner縮小，同時給予滑動這一交互手勢的可操縱感。

這里的banner展示的是平臺精選和推薦的歌曲合集，用戶可以拖動banner查看一張張專輯，這種感覺有點像以前在音像店里的貨架上挑選自己喜歡的專輯，簡單的交互方式“拖動選擇，點擊進入”帶來了一定的可用性，同時也帶來了有情感的體驗。

2.「表達心情」音樂評論的新玩法

蝦米中的歌曲評論區，不僅可以用文字來評論，還能夠“表達心情”，也就是選擇一個表情來表示你對這首歌的感受。

在設計上，首先是評論頁面頂部有“聽歌心情”模塊展示其他用戶的心情選擇，以此作為一種內容選擇的引導，明確用戶可操作行為，也以此來提高用戶的參與度。

點擊右下角的“表達心情”后，會彈出『icon+文字說明』的心情選擇，明確了對應表情的含義，減少用戶對表情選擇的糾結感和可能的模糊感，也是一種幫助用戶選擇的設計。這個設計能夠用一種更低成本的方式來鼓勵用戶參與評論，提高評論區的參與率。

3. 「快速登錄」頁面動效

在蝦米音樂登錄頁面上，也可以看的出產品設計的用心。在頁面底部有個持續進行的動效，各種圖案元素擴散又聚合，將用戶的視點聚焦在“一鍵登錄”按鈕上。

“一鍵登錄”功能可以縮短用戶注冊登錄的路徑和操作行為，是用戶使用產品的一個重要環節，而加上動效這樣的趣味化的交互，便能讓這一略微具有強制性的操作行為變的更有人情味。

4. 「趴間」

蝦米音樂中有個比較有趣的玩法，就是趴間，有點類似“一起聽歌”這個功能，網易云音樂的“一起聽歌”是邀請好友來聽歌，而蝦米的“一起聽”則是趴間的形式。

用戶可以“上位”成為DJ，播放相應的歌曲，這個過程也融入了社交和PK的玩法，但是在玩法的可交互性操作上還是比較單薄的。

三、界面中的驚喜

1. 播放界面橫轉變「磁帶」

這個設計對大部分用戶來說應該特別印象深刻，也是我個人特別喜歡的一個設計。將播放頁面橫轉之后，就會變成一個磁帶，磁帶的皮膚也可以選擇。

之前在使用網易云音樂時就有設想過橫屏狀態下的播放頁面應該如何為用戶呈現信息。在手機的使用上，橫屏的狀態下，用戶一般是進入了一個比較專注的使用階段，或者是一種沉浸式的感受，因此，在播放頁面的橫屏狀態下，應該減少其他操作，保留頁面內核心和主要的設計元素。

而磁帶的設計方式即迎合了用戶播放時的獨占狀態，還通過磁帶這一“復古”的設計，為用戶帶來了的不一樣的聽歌體驗。這一設計，也是蝦米音樂相比于其他音樂APP的差異化設計之一，有多少用戶因為這個磁帶的界面，認識了蝦米和使用蝦米。

2. 歌詞效果

蝦米音樂在Mac頂部狀態欄的歌詞顏色會像唱K一樣隨著歌詞變化，左邊的蝦米LOGO也會隨著歌曲的進度被顏色填滿。這些小的細節能夠幫助產品強化品牌形象，通過產品主色和LOGO的使用，將其與用戶的正常需求相結合，從而得到一些有趣的設計和玩法。

3. 彩蛋

產品使用過程中的小彩蛋是引起用戶愉悅體驗的小技巧。在蝦米音樂中，也有比較好玩的小彩蛋出現，比如當天是“大雪”節氣，進入主頁后就會有雪花飄落。

不少的產品也有彩蛋設計，最常見的就是我們在微信聊天窗口發送某個關鍵詞，比如生日快樂，屏幕里落下一堆蛋糕。

還有谷歌瀏覽器，當用戶處于斷網狀態時，瀏覽器頁面中會出現一只小恐龍，按下空格鍵就可以進入游戲狀態，這一設計手法也是應對產品空狀態的一種設計思路，幫助用戶減少空狀態下的焦慮感和沮喪感。

百度搜索關鍵詞也會有相應的彩蛋，比如搜索“黑洞”，很快嘛，頁面中的所以東西就被吸進去了，特別好玩。

最后

蝦米音樂APP中的不少設計都是在滿足用戶使用基本需求上的探索和創新?；ヂ摼W時代下產品更替換代已是常態，但好的設計是很難被忘記的。希望以上的設計點可以為我們后面的設計帶來些許靈感和啟發。

本文由 @薯片uxd 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自pexels，基于CC0協議