值得視覺設計師精讀的改版案例！Medium 設計師分享 SoundCloud 完整改版思考：從整體風格到搜尋框、播放器、動態流、分享、訊息、通知，每個細節皆有專業推演。改版非塗鴉，核心在提升用戶體驗。讀懂此文，未來改版不再無從下手。

專案背景：為什麼要改？

SoundCloud 社區價值極高（聽眾追蹤藝人、藝人發布作品），但體驗沉重、過時、違反直覺、流程尷尬。與同類音樂服務的簡潔美觀相比差距明顯。設計師作為深度用戶，決定主動重構。

用戶核心需求：乾淨直觀的功能性介面、深度了解藝人與發現新聲音、分享與好友交流。

1. 導航列與播放器組件：合二為一，歸位核心

現狀問題

• 搜尋框過寬（1240px 寬度下輸入框 668px），實際僅需輸入幾字即觸發自動完成
• 播放器組件固定頁底，深灰色條狀，功能混雜（播放控制、音量、進度、佇列），視覺雜亂且位置不直觀
• 用戶下拉選單無視覺暗示（下箭頭誤導為指向個人資料）

解決方案

• 搜尋框壓縮至 108px，騰出空間給播放器
• 播放器移至導航列正中間，成為全局核心控制台
• 重要鏈接右側直出，不再藏在下拉選單
• 頭像直達個人資料，右側圖標分別指向設定、喜愛、播放清單、訊息、通知
• 上傳入口歸入個人資料頁（非高頻操作）

2. 動態流：資訊密度、當前播放態、自動滾動、側邊欄增值

現狀痛點

• 難辨識正在播放哪首歌（僅微小播放/暫停圖標，過往歌曲仍顯橙色波形）
• 單屏僅見 3~5 首歌，資訊密度低
• 不自動滾動，用戶離開回來需手動找位置（甚至靠 Cmd+F 搜歌名）
• 波形圖頭像太小無識別價值，評論數已在圖標顯示
• 刷新機制笨重：渲染當前歌曲前所有歌曲，佔用大量記憶體且緩慢

概念設計

• 展開尺寸、大幅插圖、可見波形，清晰標示當前播放曲目
• 同等空間顯示更多歌曲
• 可選「播放時自動滾動」：當前曲目移至頂部
• 評論可選隱藏（多數用戶不評論，視覺干擾大）
• 懸停才顯示操作圖標（下載、喜愛、轉發、評論、加入清單、分享），當前曲目常駐顯示
• 右側固定側邊欄：突出當前歌曲藝人、粉絲數、關注入口，不離開動態流即可深度了解

3. 分享：優先站內社交，兼顧站外傳播

• 現狀：分享視圖預設開啟，站內私訊藏在第三個分頁，不顯眼
• 概念：雙分頁設計優先推薦「私訊分享」，保留站外分享，同一視圖兼顧新用戶獲取與老用戶留存

4. 訊息：側滑面板，不打斷主流程

• 點擊導航訊息圖標，訊息視圖從右側滑出（類 macOS 通知中心）
• 對話列表不遮擋左側動態流，點擊進入對話視圖（類手機簡訊）
• 增強動態流與其他頁面流動性

5. 通知：分類管理，減少干擾

• 帳號動態類：導航欄下拉選單
• 歌曲動態類：頁面彈出式通知
• 概念設計中進一步優化分類與呈現時機（原文未完整呈現）

改版方法論總結

1. 從用戶核心任務倒推介面結構
2. 大膽重組全局組件（導航+播放器合一），而非局部修補
3. 用數據與行為觀察驗證痛點（如熱力圖、用戶測試）
4. 克制視覺噪音：懸停顯示、可選隱藏、優先序清晰
5. 保持跨模塊流動性：側滑面板、固定側邊欄、自動滾動

這份改版記錄，不僅是 UI 重設計教科書，更是產品思維與設計執行力結合的標桿案例。