編者按：值得視覺設計師們精讀的好文！今天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有兩類通知。與賬號動態相關的通知，顯示在導航欄的一個下拉菜單中。頁面上也有彈出式通知來標示歌曲動態。

賬號動態通知（左側）和歌曲動態通知（右側）

存在的問題

賬號動態通知不易理解。用戶會收到這幾種通知：關注、評論中的@提醒、播放列表的喜歡與轉發、上傳音樂的喜歡和轉發。考慮到Twitter和SoundCloud內容結構相似，我還希望有轉發的喜歡與二次轉發的通知。

歌曲動態通知存在時間太長。導致它們擋住右側邊欄頂部和下拉菜單中的東西。有時候它們會卡在那里，如果我進入個人檔案，通知仍然看得見。

我的頭像被信息流的錯誤提示遮住了

錯誤提示不會自己消失。我不知道什么原因，它們頻繁出現，能夠蓋住頁面的整個右邊（直到超出底部），除非我手動關閉它們，一次還只能關一個。

解決方案概念

點擊通知按鈕時，從右側滑出一個面板，就像我在消息的概念設計中的那樣。這個窗格可以滾動，而且不需要額外的頁面來查看通知。

通知現在包含轉發的喜歡和二次轉發了。這很有用，因為通知使一個平臺具有粘性，并且巧妙地讓人習慣于經常回來看看。另外，知道朋友在聽并且沉醉于相同的內容，是很有趣的。

頁面動態的通知樣式與其余部分的設計統一，會如我所期望漸隱消失，不會妨礙任何重要東西。

結尾的思考

這絕對不是一系列徹底的批評和概念。我考慮重新設計發現界面、個人資料界面、設置面板和播放列表編輯器。如果可以把歌曲拖拽到右側邊欄的播放列表，那該有多酷？

我寫這篇文章的同時，SoundCloud每月服務超過175000000個聽眾。顯然，他們做了很多正確的事情。他們平臺在發現和分發音樂、設計事務方面，仍然扮演重要角色。

我們知道，SoundCloud對于藝人和相似的聽眾而言，是個冷漠的地方。希望他們開始在網頁和移動app上做出出色的改變。我樂于看到更多我認識的人經常使用SoundCloud。

【超級大變身的網站改版實戰好文】

政府網站篇：設計師如何在踩著雷區跳舞？
《推陳出新！政務網站的重設計》

設計網站篇：家喻戶曉的設計網站如何改版？
《案例推薦！BEHANCE上超火的大眾官網重設計》

經典案例篇：非看不可的知名網站的經典改版！
《驚艷！著名網站重新設計的10個經典案例》

原文地址：Medium
譯文地址：colachan
譯者：@十萬個為什麼

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：