Vinted視覺設計優化實例解析：品牌與UI比較帶來哪些用戶體驗新啟示？

這次計劃主要目標，其實就是幫一個大家都認識的App做視覺重新設計。簡單來講，不只換顏色那麼膚淺，而是要從整體美感到結構邏輯全部翻新，思考每一細節。有些人以為只要改個icon或主題色就算了，其實完全不是啦。

嗯，特別一點是，這次不用搞那些繁複UX調查流程，也不必數據驗證。就是專注外觀升級，自由挑選自己想重設的App下手。目標畫面也定得很清楚 - 就四個最重要的界面，其他暫時不用理會。

最後決定選Vinted來當練習。Vinted本身定位在二手時尚服飾社群，我之前唸過服裝相關，正好興趣搭配啦。不過它操作上很多地方還蠻讓人困惑，有時按來按去找不到東西。

剛好藉著這個機會，可以用自己設計經驗和審美，把Vinted做一波視覺大翻新，順便再釐清它資訊顯示跟導航上的一些小問題吧。之前覺得卡卡的那些地方，也想一起整理掉喔！

你知道嗎，我那時真的超好奇，什麼才叫做讚的二手購物體驗！所以我就直接把Vinted、Depop還有Grailed拿出來瘋狂對比啦，就是一直看啊、切換著用、比設計細節。結果馬上發現欸，他們那些競爭對手的UI整個就精緻多了，從配色、字型挑選，到畫面的層次和組合感 - 每個小地方都更講究，很有統一風格，老實說真的差蠻多。

講到重點啦，那個Vinted標誌性色調你懂吧，就是那個超級吸睛的綠藍色（teal green），我說什麼都不想改掉。因為，看到這顏色一秒就能認出是Vinted啊，也算品牌的靈魂！所以直接捨不得動它～

然後咧，其實我重設計時思路就是這樣：既然核心色調那麼代表性，不如讓其他部分變得更美、更舒服一點。例如微調整體對比度，把字間距加大一些，再讓版面呼吸起來、更簡潔乾淨。其實剛發現他們之間的落差時，我馬上就決定了新的改善方向，要的是保留亮點又能優化操作感啦！

其實我一開始看 Vinted 有什麼問題，就是很直白先列了一堆用起來卡住的地方啦。原本本來還打算，每看到一個狀況就直接硬去對應哪個設計規範，結果超不順手，也覺得煩，然後搞了半天根本行不通。

說起來，那天後來有點懶，就跑去問我們課堂那個老師啦。她蠻快的就說，其實可以不要這樣執著規則，把比較明顯、最容易察覺的困難先記下來，再查那些到底對應哪些 Heuristic 標準。喔，聽完我真的覺得輕鬆很多，像是繞過某種奇怪卡關吧，有比較抓到重心。

最後我是直接排出時段，把主要找到的幾個痛點整理，總共六個，全部都能連到 Jacob Nielsen 的那幾條設計啟發式：什麼系統狀態要夠明確啦、一致性、標準、然後介面最好單純點跟美觀還有一些幫助資訊這些東西。在裡面，我選了四項最關鍵、一定要優先處理的核心問題，就想先全力弄好這幾個再說吧。

欸，我想了一下，喔 - 那個關於我把整個視覺規範訂下來這件事情，其實是糾結滿久的。然後真正確定好之後，才開始正式動手重新設計啦。老實講，有一段讓我有點意外啦，就是Figma它那個Auto Layout的功能啊，一開始真的有點折磨人。我搞了大半天，都還是在重複調位置，那種卡卡的感覺一直沒消失。

接著，嗯，是我朋友吧，他陪著我慢慢研究了一下，再加上一些耐心，其實...應該說有種突然想開的感覺？以前都覺得Auto Layout跟我作對，可是那時候反而發現，如果你順著它，用對方法，它超級可以幫忙省事！自從這麼一想，很多地方就不會卡住，設計也順很多喔。

基本上到後面，有一點像抓到訣竅那種愉快？反正最後我做出了四個全新頁面，每一頁都比原本漂亮滿多，也變得很順手操作啦。所以算是一次收穫不少的新體驗，大概就這樣吧。

嗯，其實說到Vinted以前的收件匣啦，真的有點亂欸，就是你一打開很常搞不清楚是聊天訊息還是系統通知，兩種東西整個擠在一起，感覺就像東西都堆成一坨。你想要找人講話、有時候又跳出個提醒，你就容易直接晃神不知道自己在看哪個內容。

現在的話，他們好像借鑑其他同類App的排版方式吧，所以分區上變蠻明顯了。專門有一個通知頁，聊天訊息也整理得更乾淨，你一眼看誰發話、一秒能抓重點，其實變得更直觀～這次未讀訊息還特地加粗體，基本上重要東西不容易再被你漏掉。

另外，人像跟商品照片也是有更新啊，你基本上滑一下畫面立刻辨識得到哪位聯絡人或哪個產品給你的新消息，就不用一直往下滑眼睛快花掉才發現關鍵。嗯，新版介面我真的覺得差蠻多的啦，找資料或回訊息爽度直接提升很多欸，你是不是也覺得比較輕鬆？

其實這次啊，他們介面大改最大重點就是讓整個東西變得直觀一點，用戶操作起來比較不會迷糊。欸，以前你如果想看個人檔案，真的要多點好幾下，有時候還會卡住，不太順啦。有時明明只是想找自己資訊，卻被搞得好像在闖迷宮。現在新版就不一樣，重要資訊像是個人基本資料、正在賣什麼東西，還有別人留的評價，一進去就馬上看到，很方便。

再來講，呃，那些平常很少動的設定功能，其實全都塞到右上角的那顆小漢堡選單了，所以螢幕看起來特別乾淨俐落喔，你專注想找重要資料的話，不會被其他雜項干擾到。偶爾只需要看一下自己的檔案，現在流程快很多，而且我覺得新版介面還挺美型，比以前耐看不少呢！

然後喔，有一個細節就是之前搜尋列那邊不是有個「叉叉」嗎？老實講，那圖示放那裡原本是給你用來清除輸入內容，但是，好像不少人都以為它是在「關閉」頁面或者「取消」動作。結果常常點了之後反而困惑，不曉得系統到底做了什麼。所以這次微調滿細膩的啦，少了一層誤會，就不用每次看到都遲疑說，到底按下去會怎樣。

1. 這次最大差異，其實就加了一個「清除」鍵在Vinted搜尋列裡。嗯，說真的，這下點來很直觀，腦袋不需要再想到底怎麼清空關鍵字。取消那顆原本在搜尋欄內的按鈕也搬到外面了，手直接戳，比較快，也沒那麼容易按錯啦。斜角箭頭那東西被移除了 - 老實講，好像大家以前都搞不懂要幹嘛吧。

2. 還有個蠻有感的小優化：搜尋結果現在排在商品建議底下，視覺上舒服很多，不亂。有在用Vinted的人大概知道，之前有些重複或奇怪資訊會卡著，看起來很煩，但這版好像改善不少。

3. 講到產品頁，美學極簡設計嘛…商品照換成正方形，其實第一眼就覺得欸，看起來順眼多了。導航條旁邊空間變大了，一整個鬆很多，不擁擠。那些重要資訊被醒目標記，其他內容淡出，所以什麼該看很明確。不過底下出價跟立即購買兩個主按鈕還在原地，只是下面那條導覽工具列位置調了一點，更好摸啦。

4. 最後我拿設計去給老師們看的時候，其實…有點累而且蠻忐忑啦，一直想會不會哪裡miss掉brief要做的事。不過他們回饋挺正面，他們說確實做到了改善。我本來一直懷疑自己是不是真的弄對，但回頭看努力沒有白費吧。

哇這次新版真的有感升級！有評論直接講得很明白，他們覺得在清楚度還有用起來的簡單程度，甚至連整個品牌形象的一致性，都比前一版進步很多啊！價格跟評分資訊現在完全一目了然，說真的要找資料完全不用費力，大家都說讓購物動線滑順超多、真的差好多喔！

對了，那個訊息介面的設計評價也很不錯，就是現場大家看到都覺得蠻直觀的，好像操作更有那種新產品的味道 - 嗯，不過，也有人特別提到一點：搜尋頁面右邊那顆「清除」按鈕，欸這到底要不要放啊？他們會說搞不好其實有點多餘？看起來用不到反而怪怪的，這部分還是有人糾結了一下啦。

整體來講，反饋偏正向！欸對，現場其實感覺得到我的簡報把那些設計背後的原因講明白啦。用比較挑剔、批判的視角再看一次自己搞出來的作品，好像才突然發現，有時候做越多越不對味，搞不好「少一點」主題就會跳出來。有些事真的不用硬加一堆，你懂那種「少即是多」嗎？

然後～這次我學到最大的一個感受，真的要說啊，就是，不管那個app本身已經成熟到什麼程度、人氣超高還是怎樣，肯定都還能挖到優化點喔！這project當下真有卡住我的地方，不開玩笑；幾個關鍵地方完全沒預期有困難，那時候只能死咬著自己腦袋下決定。其實吧，有時候你要放下完美主義，把犯錯看成必經過程，別一直糾結跟其他人作品PK誰高誰低，反而學更快！

設計到底是在幹嘛？老實說，就是解決問題，不是要追求那種看起來很厲害的完美啦。嗯……這想法其實之前沒有那麼明確，最近有點累才想到。每次卡住，其實真的會覺得自己在亂猜 - 欸方向也沒頭緒，好像什麼都不會喔。可是啊，就剛好是在這種搞不懂又糊里糊塗的時候，你忽然就學到東西了。

說實在的，有一點衝突感吧？反正設計讓人著迷，大概就是一直跌跌撞撞慢慢摸索，突然某天開竅了那種。不是結果多厲害，而是一路上的煩躁、胡思亂想還有小突破—哈，其實現在也還沒覺得自己多強，只是好像開始比較喜歡這過程了呢。