Vinted 介面重新設計：解決二手交易平台的 3 個核心易用性問題

最近在看一個 App 的改造案，Vinted。一個在歐洲蠻紅的二手衣物市集。

我自己是覺得，很多有名的 App，用起來不一定順手。Vinted 就是個例子。概念很好，但實際逛起來總覺得哪裡卡卡的，有點可惜。

先說結論

這次改造不是要整個砍掉重練，UX 什麼的先不動。重點是只靠「視覺設計」的調整，能不能解決那些惱人的「可用性」問題。嗯... 結論是可以的，而且效果比想像中好。

問題到底在哪？從模仿對手開始找靈感

要動手之前，總得先知道自己跟別人的差距。所以就把它跟 Depop、Grailed 這兩個性質很像的 App 擺在一起看。

不看還好，一看就... 嗯，很明顯。對手的 App 就是感覺比較「精緻」。不管是顏色、字體，還是整個畫面的資訊層次感，都處理得比較好。

但 Vinted 那個標誌性的藍綠色，我覺得不能動。那是它的識別色，很有記憶點。所以，方向就不是換顏色，而是怎麼把這個顏色用得更好，例如說，調整對比、留白，讓整個畫面更清晰。

說到這個，拿我們台灣人比較熟的「旋轉拍賣」(Carousell) 來比也很有意思。旋轉的介面給人感覺更...怎麼說，更像一個即時通訊軟體，對話感很重。Vinted 就比較像一個純粹的電商平台。兩者哲學不太一樣。

別被理論綁架，先找出痛點

一開始，我試著把 Vinted 的問題，硬去套上那些教科書裡的「十大啟發式評估原則」（heuristic principles）。你知道嗎？那感覺超怪，而且很挫折，好像為了套公式而找問題。

後來才想通，順序根本錯了。應該是... 先憑直覺把用起來不爽的地方一條條列出來，然後再回頭去歸類，看看這些問題分別對應到哪個設計原則。這麼一轉念，整個思路就清晰了。

最後整理出幾個主要的大方向：

• 系統狀態不明確：我現在到底在哪？這訊息是已讀還未讀？
• 一致性跟標準：這裡的圖示跟那裡的圖示，長得不像，意思也不同。
• 美感與簡約設計：太多雜訊了，找不到重點。
• 說明與文件：...這個好像還好，但前面幾個比較嚴重。

跟幾個主要介面的纏鬥

有了方向，再來就是動手實作了。哦對了，過程中跟 Figma 的 Auto Layout 真的大戰了好幾回合。一開始會覺得它處處跟你作對，但... 當你搞懂它的邏輯後，它就從敵人變成盟友了。這過程蠻有趣的。

好，來講講幾個主要修改的畫面。

第一個：收件匣 (Inbox) ─ 訊息跟通知終於分家了

原本 Vinted 的收件匣，系統通知跟用戶訊息全部混在一起，超級亂。有時候只是想找個對話，卻要在一堆「您的商品已售出」的通知裡撈半天。

新的設計很簡單：

• 把「通知」獨立成一個區塊。
• 用更清楚的留白和排版，區分不同對話。
• 未讀訊息用粗體字標示，一目了然。

老實說，這不是什麼驚天動地的創新，很多 App 都這樣做了。但對使用者來說，這種符合直覺的「標準化」設計，就是最舒服的。

第二個：個人檔案頁 ─ 重要的東西放前面

以前要看自己的個人檔案，要點好幾次才能進到完整的頁面。很不方便。

改過之後，把最重要的資訊，像是個人簡介、刊登中的商品、收到的評價，直接放在第一屏。那些比較次要的設定選項，就全部收進一個「漢堡選單」裡。這樣畫面乾淨很多，使用者也能更快找到自己要看的東西。

第三個：搜尋功能 ─ 圖示不要再讓人猜了

這是我自己覺得原本問題最大的地方之一。搜尋框裡面有個「X」的圖示，但旁邊又有個「取消」的文字按鈕。那...那個「X」到底是清除搜尋文字，還是關閉搜尋頁面？使用者會遲疑。

改法也很直接：

• 搜尋框裡面放一個專門的「清除」按鈕。
• 「取消」按鈕就好好地待在外面，負責關閉整個頁面。
• 還有個不知所云的斜向箭頭圖示，直接拿掉。

一個小小的圖示，意思不清楚，就會增加使用者的認知負擔。這種地方最該改。

各平台介面設計思路比較

說到這個，剛好可以整理一下 Vinted 跟其他平台的差異。可以看出不同產品在設計上的取捨。

回頭看，少即是多是真的

整個案子做完後，有個回饋我覺得很有意思。有人質疑，在搜尋頁多加一個「清除」按鈕，是不是有點笨重、多此一舉？

嗯...這問題很好。或許對某些使用者來說，直接點「X」刪除輸入框所有文字已經是習慣了。這提醒我，設計真的沒有唯一的正確答案，都是在不同使用者習慣之間做取捨。

不過，整體來說，這次的調整方向是對的。把資訊層次拉出來，讓介面呼吸感更重，減少不必要的點擊。就算只是微調，使用者體驗的提升還是蠻明顯的。

這次經驗最大的收穫可能是... 再次確認了一件事：就算是已經很成功、很多人在用的 App，永遠都有可以變得更好的地方。設計真的不是在追求一次到位的「完美」，而是一個持續解決問題、不斷優化的過程。