拆解 Uniswap 的網站設計
有用的網站研究從體驗開始,而非預設截圖數量。我會先探索產品,再選擇最能說明運作方式的片段。
這次針對 Uniswap Web App的桌面研究,我探索首頁、Explore、Launches、Pool 與 Portfolio,選出九個具代表性的畫面。它們共同展示產品如何維持一致,同時讓不同頁面各有作用。
先讓人使用產品,再解釋產品


首頁直接展示兌換介面。柔和漂浮的代幣圖像在背景增添動感,同時保持表單為視覺焦點。下方才出現協議數據與產品卡片:先互動,再展示規模與能力。
數據在設計中充當信任線索。錄影中的數字是研究當時的快照,並非即時市場數據。
讓每一頁都有明確目的


Launches 結合熱門卡片、橫向動態資訊與密集排行表格。 Pool 連結建立倉位、錢包連接空白狀態與市場表格。 Portfolio 提供示範錢包畫面,配有圖表與清晰操作入口。
這次瀏覽時,Explore 一直停留在載入狀態,因此沒有納入精選畫面。有用的參考應反映實際看得到的內容。
研究動態,而不只是截圖
第一次錄影移動太快,之後又停頓太久。我改用較長的捲動、漸入漸出的過渡,以及較短的閱讀停頓。直接錄製瀏覽器,保留了網站本身的動畫。
參考庫中的每個區塊先展示靜態封面,游標移入時才播放片段。這樣可以安靜地比較版面,再於有需要時觀察動態。

