Agence 鏈瀏覽器

Agence Explorer 讓使用者能夠瀏覽鏈上的運行資訊，並提供統計和分析。

服務公司

Aetheras

擔任角色

UI/UX 設計師

專案期間

2019年六月 – 十一月

負責項目

Logo 設計。
研究競品並梳理產品架構。
發想並制定網站的外觀風格。
設計和製作 Icon、Mockup、Prototype。
溝通 Dev Handoff，協助工程師理解設計稿。
參與 QA 測試，記錄問題，與工程師討論修正、迭代。

專案背景

為了支援 Agence 區塊鏈的運行和透明度，打造了這個區塊鏈瀏覽器，讓使用者能夠觀察和查詢鏈上的交易、區塊和其他數據。我負責設計這個瀏覽器的 UI/UX，目標是透過活潑有趣的介面，讓使用者能夠輕鬆、直觀地探索區塊鏈上的資訊。

專案挑戰

因為是支援遊戲NFT的區塊鏈，如何將遊戲元素融入區塊鏈數據的呈現，既要保留網站的趣味性，又要確保數據清晰易懂。

專案目標

遊戲化的數據體驗：將遊戲元素融入區塊鏈數據，讓使用者在輕鬆有趣的氛圍中探索數據，提升參與度。
強化品牌形象：通過遊戲化設計，展示區塊鏈技術的創新性，提升品牌的活力與前瞻性。

設計系統

整理了顏色、字級、格柵等 UI 樣式，幫助工程師更好地理解設計。

設計產出

區塊卡片

每個氣泡卡片代表一個區塊，以動態冒出的方式模擬區塊的生成。

數據卡片

呈現鏈當前數據的卡片。

遊戲化圖標

由我設計的 Icon，利用奇幻元素如水晶球、城堡等，來突顯鏈與遊戲 NFT 相關的特性。

頁面展示

反思與學習

（2019 年）第一次設計內容數據較多的網站，在專案告一段落時，對過程的踩雷進行了一些反思：

客製化組件：為了減少時間成本，應該先確定工程師將使用的框架，避免設計與該框架衝突的行為邏輯，進而減少後續修改的必要。
字級決定：不實用的字級設定可能會導致開發困惑，應該針對網頁架構制定更合理的字級大小，明確定義 13 到 16px 等常用字級的使用情境。
盒模型溢出：應該多加注意文字在容器中的溢出問題，盡可能加以標註，以避免開發中的誤解，也可以在 UI kits 或文件中清楚說明設計細節。
設計稿中的數值：應該事先與團隊討論，確定數據的來源和呈現方式，並提供給工程師，以確保一致性和準確性。
Table 設計：應該多收集資料，從最基本的元素開始設計，並考慮不同寬度的介面，以避免後續與工程師之間的溝通問題。