怎么設計才能讓一個音樂APP看起來夠專業？

所有人都熱愛音樂。尼采也曾說過：“沒有音樂，生活就會是個錯誤?！彼?，不用爭辯，音樂已經是我們生活中不可分割的一個重要組成。

很難說現在到底有多少音樂類的APP、網站和服務，但是我們可以預見到的是，它會繼續發展，設計師依然會持續不斷地收到需求，為不同的音樂類的服務設計界面和體驗。這也是為什么今天我們會專門撰文，來探討音樂類產品的界面設計。

用戶對于流媒體音樂類產品的預期

流媒體音樂類的產品旨在為用戶提供全世界各地不同流派的音樂曲目，不論是收費還是免費，在移動端還是在桌面端，它們的功能往根上講就是兩個字：聽歌。當然，不同的流媒體音樂服務都有各自的個性，獨有的賣點，但是它們在基本的功能和特性上，仍然有著大量的相通的地方。

音樂在線和離線狀態下的播放

現如今的音樂播放器大多都集成了在線音樂播放的功能，確保了用戶可以在不下載音樂的情況下直接聆聽享受。但是網絡不會始終都那么順暢，總會有斷網離線的狀況發生，這個時候，離線下載的音樂就顯得很有必要了。

播放列表

流媒體音樂服務能夠提供成千上萬的音樂曲目，但是即使最狂熱、涉獵最廣泛的音樂愛好者也不會將它們聽遍。播放列表是音樂播放器的核心組件之一，讓用戶能夠按照喜好將音樂編組，按照順序播放，應對不同的情況，貼合不同情緒下的聆聽需求。

隨機音樂

當用戶習慣了甚至厭倦了播放列表的音樂之后，會希望隨機播放一些曲目，隨機音樂通常會基于用戶的喜好，提供隨機的、不重復的隨機音樂。

電臺頻道

現如今的網絡電臺也已經有著非常細致的流派分類，這些電臺音樂同樣是流媒體，雖然現在來看略小眾，但是內容相比單純的音樂，會顯得更加豐富一些，聆聽音樂電臺的用戶也不在少數。

付費購買

并非所有的音樂都可以免費下載和聆聽，付費購買音樂也是一項鋼需。

均衡器

不同人對于音樂風格和效果的偏好各不相同，而不同的音樂風格在均衡器的調節之下也能產生更好的效果。

BeatSync App

UI設計

基于上面所述的用戶基本需求，音樂類服務的APP和網站在UI和體驗設計上，已經有了一套近乎標準的設計。

首頁

絕大多數的數字產品通常都會有一個首頁，每次用戶打開應用的時候，都是從首頁進去，然后開始用戶歷程。也有人將首頁稱為“主頁（Main Page）”。首頁為用戶提供了進入APP和網頁的起點。

音樂流媒體服務類產品通常還會包含諸如個人頁面、播放列表、搜索頁和音樂商店之類的區域。通常，最新、最流行的音樂和相關的新聞會在首頁上呈現，有的還會添加用戶推薦的音樂列表。

通常情況下，音樂應用的首頁會采用簡約的設計風格，推薦的音樂列表和專輯都會用相關的藝術家和專輯的封面，下面搭配相應的名稱。這樣能讓用戶搜索或者瀏覽更加便捷和美觀。

個人頁面

用戶登錄之后，就可以打開相應的個人頁面。在個人頁面中，通常會允許用戶自定義頭像甚至APP的風格，這樣就能讓他們擁有個性化的音樂體驗。對于APP或者音樂服務本身而言，用戶的口味、偏好都能夠作為反哺產品的數據支撐，供開發人員使用。根據這些數據，音樂服務可以更好地為用戶推薦音樂。

除此之外，個人帳號也是讓產品擁有更強社交屬性的基礎，用戶可以在網絡社區中交流，在音樂下方評論和留言。

個人頁面原則上應該同整個產品設計保持一致，盡量保持清晰和簡約直觀，所以需要控制個人頁面中的信息量，否則會讓人覺得復雜而不好用。導航的直觀性對于整個產品同樣重要，不要讓用戶花費時間去猜。

Echo app

搜索頁

找新歌是許多音樂愛好者日常使用中最重要的需求之一。設計師需要確保搜索功能易用，盡量給用戶留下好印象。搜索頁幫助用戶獲取和過濾音樂，通過關鍵詞和不同的排序方式來找到他們想要的特定音樂。通常而言，音樂類服務的搜索頁中，每一首歌都有流派、藝術家、專輯和發布時間這些字段，用戶能夠通過這些字段的篩選更快找到他們想要的音樂。

播放列表頁

很多音樂愛好者會為自己創建不同的音樂列表，它們營造不同的情緒，在不同的時間和場合拿來播放，發揮不同的作用。顯然每個音樂服務都會為用戶提供這樣的功能。音樂播放列表在很多應用當中都長得差不多：歌曲名稱是列表中最主要的字段，后面是歌手名稱、樂隊以及播放時長等。設計師在設計播放列表的時候，可以讓用戶自定義列表封面等。

播放器界面

使用音樂服務來聽音樂，絕大多數時候是在和播放器界面打交道。播放器界面涵蓋了播放音樂時候的絕大多數的操作，暫停、播放、上一首、下一首是最基本的操作，不同的音樂服務的播放界面當中，還可能會集成下載、收藏、更多信息等按鈕。通常相關操作的按鈕會置于屏幕的下半部分，甚至貼近底部，音樂專輯封面常常會置于界面上方。這個界面其實也是展示設計師創意的地方。

Music App

音樂訂閱頁

如果這一音樂服務還提供了關注藝術家、用戶之間互相關注的功能的話，還可以考慮設計一個訂閱頁。在訂閱頁當中，用戶能夠看到哪些藝術家又發布了新專輯，哪些好友點贊了某一首歌，這些新聞或者新信息能夠讓音樂服務的社交屬性更濃。設計師應該盡量讓信息流簡明清晰，讓用戶能夠更好更快速地掃視。

設置和均衡器

每個應用都會有一個設置界面，但是音樂類的產品則會要求更多一些，除了一些基礎的設定之外，音樂類的產品還需要根據用戶的偏好設置均衡器。用戶通?？梢赃x擇內置的流行、搖滾或者古典的風格，還能自定義均衡器中的每一個項目，根據自己的需求達到相應的調節效果。

音樂商店

正如同我們在前文所說的，并不是所有的音樂都是免費的，這樣一來，音樂商店就派得上用場了。音樂商店和首頁、搜索頁當中的設計有許多互通的地方，比如最新上架的音樂的推薦，還有篩選和搜索的設計，都應該是一致或者類似的。

Singify App

音樂無處不在。對于創意工作者而言，音樂甚至是很多靈感的重要來源。趨勢會不斷的變化，但是音樂本身的價值甚至可能比我們現在所熟悉的許多設計更加持久。

原文作者：Tubik Studio

原文地址：https://uxplanet.org/feel-the-beat-ui-design-for-music-streaming-services-7e2232106ecb

譯者：陳子木

譯文地址：優設網

本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。