Agence 鏈瀏覽器

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

服務公司

Aetheras

擔任角色

UI/UX 設計師

專案期間

2019年六月 – 十一月

負責項目

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

專案背景

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

專案挑戰

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

專案目標

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

設計系統

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

設計產出

區塊卡片

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

數據卡片

呈現鏈當前數據的卡片。

遊戲化圖標

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

頁面展示

open_in_new
瀏覽網站

反思與學習

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