教你如何打造全新的SOUNDCLOUD網站

 　　值得視覺設計師們精讀的好文!今天Medium一位國外設計師分享了他給一個音樂網站改版的全過程，從整體風格到搜索框，每一個細節都有相當專業的思考。改版不是簡單的塗塗畫畫，提升用戶體驗非常關鍵，通讀完這篇文章，以後改版就不會毫無頭緒無從下手了，來學習咯。

　　為什麼?

　　@十萬個為什麽 ：SoundCloud是個非常酷的地方——聽眾可以關注藝人，獲取他們最新的音樂，藝人可以在此發布單曲甚至完整專輯來吸引粉絲。但通常用戶知道，與這個平台進行互動是很讓人沮喪的。

　　與其他音樂服務的簡潔、美觀的設計相比，SoundCloud感覺沉重而過時。網站和移動app的體驗，都充斥著違反直覺的設計和尴尬的使用流程。

　　盡管如此，我仍然沉浸於這個社區，因為我信任它所提供的服務。我想讓SoundCloud變得更好。

　　作為一個用戶，我關心的是：

　　干淨、直觀的功能性界面

　　更了解我在聽的藝人，並且發現新藝人

　　分享並與我的朋友們交流

　　這些基本功能，網站目前都做的不錯，但都能做得更好。看我來分解它……

　　1. 導航條和播放器組件

　　出現的問題

　　我通常會搜索藝人或歌曲名稱,但搜索欄太寬了。最寬狀態下，網站有1240像素寬，搜索欄輸入框就有668像素。通常輸入幾個字後，自動補全功能就可以完成查詢。

　　深灰色的這條就是播放器組件，令人困惑的一團亂麻。

　　播放器組件在頁面的底部。

　　導航條用來提供入口，可以在所需的任何時候打開某些鏈接和功能。在音樂流媒體網站中，包括暫停當前歌曲、下一首和上一首。盡管播放器組件在每個頁面都能看見，但它位置在底部並不能直觀地傳達出它的功用。

　　點擊我的用戶名會出現下拉菜單。

　　沒有任何視覺指示告訴我這下面(也就是下箭頭)有下拉菜單，這樣展現很古怪。這網站我用了好幾年，我的直覺仍然告訴我，它應該指向我的個人資料。我通常點這裡去我的個人資料、喜歡和播放列表。

　　解決方案概念

　　他們目前的設計(頂部)和我的概念設計(底部)

　　搜索欄輸入框的寬度減少到108像素，為播放器組件騰出空間，加在正中間。

　　重要的鏈接在導航的右邊，不再縮在下拉菜單中。頭像圖片指向用戶的個人資料，右邊的圖標分別指向設置、喜歡、播放列表、消息和通知。上傳鏈接去掉了，因為它並非隨時隨地需要使用。它被歸到個人資料頁面中。

　　2. 信息流

　　你關注的人發布的歌曲和播放列表展現在這裡，最新的在上面，像Twitter的時間軸那樣。

　　當前形式的信息流

　　出現的問題

　　很難辨認出正在播放哪首歌。除了小小的播放/暫停按鈕，沒有任何樣式突出或強調當前播放歌曲與其他的區別。過去的音樂仍然保持橙色的波形狀進度條，這毫無意義。

　　每次只能看見3到5首歌。一個音樂流媒體網站，一頁應該能顯示更多。

　　信息流不會自動滾動。我通常在浏覽器中開著信息流，讓它播放歌曲，同時去做其他事情。當我回到頁面時，我不得不向下滾動，浏覽波形圖來找到當前播放的歌曲。我通常依靠播放器組件了解歌名，然後執行頁面搜素(Cmd + F)來找到我的位置。這樣的流程效率低，而且投機取巧。

　　波形圖上的頭像實際上沒有意義。它們太小，無法從視覺上分辨留言者。它們唯一的價值，就是讓用戶知道音樂上有留言，而留言的數量已經顯示在波形圖下方的評論圖標處了。

　　有認識的人評論了這首歌嗎?

　　當用戶離開信息流，回來時他們會期望什麼。

　　信息流的刷新緩慢而笨重。當我離開信息流再返回時，SoundCloud試圖給我展示當前播放的歌曲，這很棒。但不是每次都正常。通常情況下，它通過渲染當前歌曲前面的每一首歌來做到這一點，這占用大量內存，這方法比普通的頁面加載(這看起來很糟)還要慢。對此肯定有軟件上的解決辦法。

　　解決方案概念

　　信息流概念圖，我在SoundCloud上找到一些超贊的歌來模擬界面，右邊欄是固定式的。展開的尺寸、大幅的插圖和可見的波形圖，清晰地標示了當前播放的歌曲。另外，相同空間裡可以顯示更多歌曲。

　　有個選項可以使信息流在播放時自動滾動。開啟這個功能會讓一首歌在播放時移動到頁面的頂部，像上面圖中的那首歌Goldroom。

　　很明顯，從歌曲的評論數來看，多數用戶並不評論。評論會在視覺上讓人分心，於是我增加了一個隱藏它們的選項。

　　音軌的鼠標懸停狀態和發布時間標示

　　下載、喜歡、轉發、評論、添加到播放列表和分享按鈕被圖標替代。這些圖標已經充分傳達了它們的功能，不需要再轉譯為其他語言。為了保持界面簡潔，圖標只在鼠標懸停狀態顯示(但當前歌曲會一直顯示)

　　我之前提過，我想更了解我在聽的藝人，並且發現新藝人。概念設計中的側邊欄突出顯示了當前歌曲的藝人，鏈接指向他們的個人資料。這部分非常有用，尤其當你聽的歌來自一條你不熟悉的歌手的轉發。它讓你一窺他們的檔案，卻不需要離開信息流。也顯示了他們的粉絲數，還有一個選項讓你選擇是否要關注他們。

　　3. 分享

　　分享是SoundCloud用戶文化和音樂探索中的重要部分。就目前而言，轉發可能是最普遍和有效的功能，讓你分享一首歌給你的朋友和粉絲。

　　我喜歡轉發功能，不過我覺得SoundCloud如果更注重私密分享和私信，會受益良多。更多的站內分享，意味著更多時間在這個網站中度過，還有推薦內容的更多曝光(Spotify在這方面做得相當好)。還有，用戶會頻繁回到一個有朋友分享交流的平台。

　　存在的問題

　　分享視圖並沒有鼓勵站內分享。要發信息，你得移到第三個標簽，而且並不明顯。

　　首先彈出的是分享視圖(左側)，而不是消息視圖(右側)。嵌入的視圖(沒有顯示出來)目前表現不錯。

　　SoundCloud的設計如果鼓勵用戶優先站內社交，會大有好處。

　　解決方案概念

　　兩個標簽的設計優先推薦消息，也保留了站外分享。在同一個視圖中包含兩者，有助於帶來新用戶，並讓老用戶回來看看。

　　4. 消息

　　目前的消息系統功能齊備。不過，它還能再簡化，來增強信息流和其他頁面之間的流動性。

　　概念

　　全部消息(左側)和一組對話(右側)

　　點擊導航欄中的消息圖標時，消息視圖從頁面右邊滑出，和OS X Yosemite的通知面板類似。

　　對話列表以一種熟悉的視覺形式出現，卻不會妨礙左側的信息流或其他頁面。點擊一則對話，滑動進入對話視圖，非常像智能手機的短信應用。

　　5. 通知

　　SoundCloud有兩類通知。與賬號動態相關的通知，顯示在導航欄的一個下拉菜單中。頁面上也有彈出式通知來標示歌曲動態。