編者按：值得視覺設(shè)計(jì)師們精讀的好文！今天Medium一位國外設(shè)計(jì)師分享了他給一個音樂網(wǎng)站改版的全過程，從整體風(fēng)格到搜索框，每一個細(xì)節(jié)都有相當(dāng)專業(yè)的思考。改版不是簡單的涂涂畫畫，提升用戶體驗(yàn)非常關(guān)鍵，通讀完這篇文章，以后改版就不會毫無頭緒無從下手了，來學(xué)習(xí)咯。

改版前的重要工作，是了解網(wǎng)站的毛病。關(guān)于這一點(diǎn)...

• 《給老羅的公開信！一個設(shè)計(jì)師關(guān)于錘子官網(wǎng)的吐槽》
• 《給李楠的公開信！一個設(shè)計(jì)師關(guān)于魅族官網(wǎng)的吐槽》
• 《給蘋果中國的公開信！一個設(shè)計(jì)師對蘋果官網(wǎng)的微吐槽》

為什么？

@十萬個為什麼?：SoundCloud是個非?？岬牡胤健牨娍梢躁P(guān)注藝人，獲取他們最新的音樂，藝人可以在此發(fā)布單曲甚至完整專輯來吸引粉絲。但通常用戶知道，與這個平臺進(jìn)行互動是很讓人沮喪的。

與其他音樂服務(wù)的簡潔、美觀的設(shè)計(jì)相比，SoundCloud感覺沉重而過時。網(wǎng)站和移動app的體驗(yàn)，都充斥著違反直覺的設(shè)計(jì)和尷尬的使用流程。

盡管如此，我仍然沉浸于這個社區(qū)，因?yàn)槲倚湃嗡峁┑姆?wù)。我想讓SoundCloud變得更好。

作為一個用戶，我關(guān)心的是：

• 干凈、直觀的功能性界面
• 更了解我在聽的藝人，并且發(fā)現(xiàn)新藝人
• 分享并與我的朋友們交流

這些基本功能，網(wǎng)站目前都做的不錯，但都能做得更好?？次襾矸纸馑?/p>

1. 導(dǎo)航條和播放器組件

出現(xiàn)的問題

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

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

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

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

點(diǎn)擊我的用戶名會出現(xiàn)下拉菜單。

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

解決方案概念

他們目前的設(shè)計(jì)（頂部）和我的概念設(shè)計(jì)（底部）

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

重要的鏈接在導(dǎo)航的右邊，不再縮在下拉菜單中。頭像圖片指向用戶的個人資料，右邊的圖標(biāo)分別指向設(shè)置、喜歡、播放列表、消息和通知。上傳鏈接去掉了，因?yàn)樗⒎请S時隨地需要使用。它被歸到個人資料頁面中。

2. 信息流

你關(guān)注的人發(fā)布的歌曲和播放列表展現(xiàn)在這里，最新的在上面，像Twitter的時間軸那樣。

當(dāng)前形式的信息流

出現(xiàn)的問題

很難辨認(rèn)出正在播放哪首歌。除了小小的播放/暫停按鈕，沒有任何樣式突出或強(qiáng)調(diào)當(dāng)前播放歌曲與其他的區(qū)別。過去的音樂仍然保持橙色的波形狀進(jìn)度條，這毫無意義。

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

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

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

有認(rèn)識的人評論了這首歌嗎？

當(dāng)用戶離開信息流，回來時他們會期望什么。

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

解決方案概念

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

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

很明顯，從歌曲的評論數(shù)來看，多數(shù)用戶并不評論。評論會在視覺上讓人分心，于是我增加了一個隱藏它們的選項(xiàng)。

音軌的鼠標(biāo)懸停狀態(tài)和發(fā)布時間標(biāo)示

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

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

3. 分享

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

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

存在的問題

分享視圖并沒有鼓勵站內(nèi)分享。要發(fā)信息，你得移到第三個標(biāo)簽，而且并不明顯。

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

SoundCloud的設(shè)計(jì)如果鼓勵用戶優(yōu)先站內(nèi)社交，會大有好處。

解決方案概念

兩個標(biāo)簽的設(shè)計(jì)優(yōu)先推薦消息，也保留了站外分享。在同一個視圖中包含兩者，有助于帶來新用戶，并讓老用戶回來看看。

4. 消息

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

概念

全部消息（左側(cè)）和一組對話（右側(cè)）

點(diǎn)擊導(dǎo)航欄中的消息圖標(biāo)時，消息視圖從頁面右邊滑出，和OS X Yosemite的通知面板類似。

對話列表以一種熟悉的視覺形式出現(xiàn)，卻不會妨礙左側(cè)的信息流或其他頁面。點(diǎn)擊一則對話，滑動進(jìn)入對話視圖，非常像智能手機(jī)的短信應(yīng)用。

5. 通知

SoundCloud有兩類通知。與賬號動態(tài)相關(guān)的通知，顯示在導(dǎo)航欄的一個下拉菜單中。頁面上也有彈出式通知來標(biāo)示歌曲動態(tài)。

賬號動態(tài)通知（左側(cè)）和歌曲動態(tài)通知（右側(cè)）

存在的問題

賬號動態(tài)通知不易理解。用戶會收到這幾種通知：關(guān)注、評論中的@提醒、播放列表的喜歡與轉(zhuǎn)發(fā)、上傳音樂的喜歡和轉(zhuǎn)發(fā)。考慮到Twitter和SoundCloud內(nèi)容結(jié)構(gòu)相似，我還希望有轉(zhuǎn)發(fā)的喜歡與二次轉(zhuǎn)發(fā)的通知。

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

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

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

解決方案概念

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

通知現(xiàn)在包含轉(zhuǎn)發(fā)的喜歡和二次轉(zhuǎn)發(fā)了。這很有用，因?yàn)橥ㄖ挂粋€平臺具有粘性，并且巧妙地讓人習(xí)慣于經(jīng)?；貋砜纯?。另外，知道朋友在聽并且沉醉于相同的內(nèi)容，是很有趣的。

頁面動態(tài)的通知樣式與其余部分的設(shè)計(jì)統(tǒng)一，會如我所期望漸隱消失，不會妨礙任何重要東西。

結(jié)尾的思考

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

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

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

【超級大變身的網(wǎng)站改版實(shí)戰(zhàn)好文】

政府網(wǎng)站篇：設(shè)計(jì)師如何在踩著雷區(qū)跳舞？
《推陳出新！政務(wù)網(wǎng)站的重設(shè)計(jì)》

設(shè)計(jì)網(wǎng)站篇：家喻戶曉的設(shè)計(jì)網(wǎng)站如何改版？
《案例推薦！BEHANCE上超火的大眾官網(wǎng)重設(shè)計(jì)》

經(jīng)典案例篇：非看不可的知名網(wǎng)站的經(jīng)典改版！
《驚艷！著名網(wǎng)站重新設(shè)計(jì)的10個經(jīng)典案例》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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