
Mist: 面向 DeFi 用户的虚拟货币数据可视化设计
日期
05/2023 - 08/2023
类别
UI, UX, DeFi (去中心化金融), 区块链数据追踪, 虚拟货币
设计师
屠 正尧(学生设计者)
项目简介
随着 NFT 与 DeFi 的快速发展,链上资产结构与交易行为变得愈发复杂。用户在进行资产管理与投资决策时,往往需要在多个平台之间切换,分别查看价格走势、交易记录与市场信息,信息分散且理解成本较高。
Mist 是一款面向 DeFi 用户的链上资产数据可视化钱包概念设计项目,旨在通过清晰的数据结构与可视化界面,帮助用户更高效地理解资产状况、交易行为与市场变化。
本项目为个人课程中的外部团队项目,整体产品方向与功能框架由多位具有行业经验的导师与专业人员共同制定。我以学生设计者(Student Designer)的身份参与其中,主要负责低保真原型设计、货币价格与交易历史主界面探索,并协助完成设置模块的设计支持工作。
项目背景|Background
当前市面上的 NFT / DeFi 辅助工具多以单一功能为核心,例如价格监控、交易查询或市场分析。但在实际使用过程中,用户往往需要同时关注多个维度的信息,频繁在不同工具之间切换,难以形成对自身资产的整体认知。
通过前期调研发现,用户在链上资产管理过程中普遍面临以下问题:
-
链上交易数据分散,缺乏统一视角
-
数据维度复杂,新手用户理解成本较高
-
缺乏直观的资产结构与交易行为反馈
因此,本项目尝试通过整合链上交易数据与市场信息,探索一种以用户决策为导向的 DeFi 数据可视化钱包设计方案。
设计目标|Objectives
-
以用户为中心的数据设计
通过清晰的信息层级与可视化表达,降低不同经验水平用户理解链上数据的门槛。 -
高可读性的链上数据可视化
将复杂的交易记录、价格变化与资产分布转化为直观、易比较的图表与界面反馈。 -
流畅且直觉化的使用体验
优化信息结构与导航逻辑,使用户能够快速完成资产查看与交易行为追溯。
核心功能|Key Features
-
资产总览 Dashboard
从全局视角展示用户资产规模、币种分布与近期交易情况,帮助用户快速掌握整体资产状态。 -
市场趋势与价格分析
通过交互式图表呈现历史价格走势与市场变化,辅助用户进行数据驱动的判断。 -
链上交易记录追踪
以结构化表格与时间维度展示链上交易记录,支持用户快速回溯资金流向。
我的设计职责|My Contribution
在本项目中,我主要参与了以下设计工作:
-
主流 DeFi 数据平台的竞品调研与信息结构对比分析
-
货币价格与交易历史主界面的低保真原型设计
-
数据信息分组与基础交互逻辑探索
-
设置模块的部分结构与交互协助设计
竞品分析|Cross-product Analysis
在进入具体界面设计之前,我对当前主流的 DeFi / 加密资产数据平台 进行了系统性调研,重点关注它们在价格展示、数据结构、交互方式与信息层级方面的设计特点。
本次调研主要选取了以下产品作为分析对象:
-
CoinMarketCap
-
CoinGecko
-
CoinDesk
-
Kraken
通过对这些产品的横向对比,我总结了它们在信息呈现与用户体验上的优势与不足,并以此作为后续原型设计的重要参考依据。
Coin Market Cap
核心特征
-
提供完整的时间区间选择、时间滑块、价格总览、数据表格与快速查询入口
-
信息维度丰富,覆盖价格、成交量、市值等关键数据
优势
-
数据内容全面,覆盖用户常用的核心信息
-
整体界面风格简洁,专业感强
不足
-
信息密度较高,界面相对紧凑
-
初次使用时,用户较难快速定位到所需模块


Coin Gecko
核心特征
-
提供时间区间选择、价格趋势、数据总览与补充信息说明
-
页面布局相对宽松
优势
-
信息分区相对清晰
-
相关信息集中在页面底部,便于连续浏览
不足
-
表格信息较长,缺乏分页机制
-
不同信息模块之间的区隔不够明显,影响快速扫描
Coin Desk
核心特征
-
采用明显的分区结构,包含价格趋势、时间筛选、相关资讯等模块
优势
-
页面层级清晰,信息一目了然
-
适合快速了解单一资产的整体状况
不足
-
时间轴滑动交互不够顺畅
-
缺乏结构化的数据表格,不利于深度分析


Kraken
核心特征
-
页面结构简洁,信息模块划分明确
优势
-
视觉风格统一,界面整洁
-
适合快速查看基础行情数据
不足
-
信息维度相对有限
-
用户仍需配合其他平台才能完成全面分析
技术需求分析
在项目早期,我通过对 CoinMarketCap、CoinGecko 等平台的横向分析,总结出交易历史页中高频出现且对用户决策最关键的功能模块,并将其作为后续 History 页面低保真设计的参考依据。

调研总结与设计启发
通过本次竞品分析,我提炼出以下对后续设计具有指导意义的要点:
-
需要在“信息完整度”与“界面可读性”之间取得平衡
-
清晰的模块划分与信息分组有助于用户快速理解复杂数据
-
时间维度与交易行为是用户高频关注的核心信息,应被优先呈现
这些结论直接影响了我在后续低保真原型设计阶段对于页面结构、模块优先级与交互方式的决策。
流程图|Flow Chart
该流程图用于明确 History 页面在整体信息结构中的位置,帮助我判断用户从资产概览进入历史分析的路径。

核心模块设计|交易历史(History)
在整体设计中,我主要参与并完成了 History(交易历史)模块 的信息结构与低保真界面设计。
登录、首页等模块由团队其他成员完成,我主要基于整体信息结构参与基础框架讨论,以确保 History 页面在用户使用路径中的合理位置。
在本项目中,我主要参与并完成了 History(交易历史)模块 的信息结构梳理与低保真界面设计。
该模块是用户进行交易复盘、趋势分析与决策的重要入口,也是整个产品中信息密度最高、设计难度最大的部分之一。
在项目早期,通过对 CoinMarketCap、CoinGecko 等主流平台的竞品分析,我发现现有交易历史页面普遍存在信息层级不清、关键数据难以快速定位的问题。
在团队成员与导师的指导下,我将交易历史页面拆解为多个关键功能模块,包括:
-
时间区间选择
-
价格与趋势概览
-
交易明细表格
-
辅助市场信息(如成交量、涨跌幅等)
设计过程中,我重点关注 数据层级的清晰度 与 用户快速获取关键信息的效率,通过模块化布局与信息弱化策略,降低高频交易数据带来的认知负担。
该页面最终以低保真原型形式呈现,作为后续视觉设计与开发阶段的重要参考。

History 页面在整体信息结构中的位置示意:用户从资产概览进入交易历史分析页面。
核心模块详细设计|交易历史(History)
在整体设计阶段,我主要参与并负责 History(交易历史)模块 的信息结构与交互逻辑设计。
该模块是用户进行交易复盘、趋势分析与决策判断的核心入口,同时也是产品中信息密度最高、设计复杂度最大的页面之一。
在设计过程中,我结合前期竞品分析与用户使用路径,重点解决 信息层级混乱、关键数据难以快速定位 的问题,并通过模块化拆解与层级弱化策略,降低高频交易数据带来的认知负担。
History 模块在整体流程中的位置

该流程图用于说明 History 页面在整体产品结构中的位置,以及用户从资产概览进入交易分析的主要路径。
登录、首页与探索模块由团队其他成员完成,我主要基于整体信息架构参与讨论,并重点负责 History 模块的设计与拆解。
History 模块界面演进(低保真 → 高保真)
在确认 History 页面信息结构后,我将低保真结构逐步转化为高保真界面设计。
重点在于保持模块层级清晰的前提下,提高关键数据(价格、时间、交易结果)的可读性,并确保高频信息在视觉上不过度干扰用户判断。


设计拆解

设计反思与改进方向
在项目完成后,我邀请了10 位用户参与体验测试,并对其使用路径与反馈进行了整理与分析。整体来看,用户对页面的信息清晰度与功能完整性给予了较为积极的评价,本次测试的整体接受度约为 80%。
在测试过程中,用户的主要反馈集中在以下两个方面:
80%
接受率
10
参与者
问题一:数据安全与隐私顾虑(Safety)
问题说明:
部分用户对交易浏览记录的存储方式表示担忧,认为可能存在信息泄露的风险。
改进方向:
交易浏览相关数据仅保存在本地,不进行云端同步;同时提供可选的身份验证机制,用户在重新进入系统前需进行身份确认,以进一步提升安全感。
问题二:信息推荐的同质化风险(Feeding)
问题说明:
部分用户认为系统推荐的信息可能导致内容趋同,从而错过更多潜在的投资机会。
改进方向:
引入推荐策略的可控选项,允许用户自主选择是否开启系统推荐功能,以在效率与信息多样性之间取得平衡。
总结
本项目通过对交易历史模块的深入设计,探索了在高信息密度场景下,如何通过清晰的信息结构与模块化布局,帮助用户更高效地理解交易数据并辅助决策。
该项目也为我后续在数据可视化、金融产品设计与复杂系统界面设计方向的实践提供了重要经验。

