# DeFi仪表盘设计：青蓝色如何区分数据与操作

原网页：https://www.jvds.cn/share/ui-design/ardentis-market-position-action-u044
语言：zh-CN
发布：2026-10-13
作者：界达设计工作室（JVDS）

Ardentis的DeFi仪表盘设计把青蓝色放在曲线、选中项和主要按钮上，大部分底色保持接近黑色。总览先用大趋势和小金额卡说明范围，下方资产列表再提供具体对象。色彩统一，阅读密度却有变化。

## 核心结论

- 大趋势与四张摘要卡并排，整体变化和具体总量各有位置。
- 资产行把名称、数量、估值和动作横向对应，便于逐行查找。
- 市场与个人切换靠近图表，提交面板集中在右侧。

## 总览先给一个大的观看范围

Yield Overview占据左侧大卡，曲线下面铺很浅的青蓝渐变，当前点用圆形和浮动金额强调。轴线、刻度和其他资料都比较克制，读者容易先看到一段变化，再读到选中位置。

右边四张卡没有完全复制大图。抵押总量用进度线，借入总量用小柱，存入总量用小曲线，可领取金额旁直接放Claim。相近的外框把它们归为摘要，不同图形再表达各自内容。

界达设计认为，这种大小分配适合总览和明细同时出现的工作台。大图负责看变化，小卡负责找主题，但金额的账户、网络与时间范围仍需文字说明。图里的数值是展示内容，不能作为实际账户或收益结果。

![Ardentis黑色总览：左侧青蓝收益趋势、右侧四金额卡，下方资产行与存取动作](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i1.webp)

桌面概览上下两层｜先看趋势与总量，再逐行定位资产。

## 明细的动作跟着一行对象

Earn列表把资产标志和名称放在左边，数量与美元值放在同一栏，管理者及动作继续向右排开。图标提供快速辨认，文字则把一行完整地指向某个对象。Deposit和Withdraw没有漂在列表之外，读者能看到它们属于哪一行。

代币数量和美元估值需要分别标明单位，管理者也应有清楚身份。这样的表格适合重复对象较多的后台，重点是[行对应准确](https://www.jvds.cn/share/ui-design/saas-data-table-design)，再考虑局部图标多漂亮。若进入操作，确认摘要最好重复资产和方向，减少返回列表后重新判断的负担。

## 范围切换与操作面板是两种控件

详情页把Market和My position放在图表上方，周期下拉留在右上角。资产对名称位于页头，数据卡再排列总量与比例。读者从上往下能依次确认对象、数据范围和时间，比只看一个大百分比更有方向。

右側操作面板另用边框圈起，输入、Max、当前状态和长条主按钮都在这一列。浏览数据与执行动作的区域区别很清楚，是深色金融界面值得借鉴的安排。

不过，图中选中Repay/Withdraw时，输入与按钮仍写Supply及Borrow。建议先让标签、输入名称和[提交动词一致](https://www.jvds.cn/share/ui-design/cognitive-accessibility-clear-content-ux)，再补预计变化摘要。颜色能指出当前选择，却无法解释相互冲突的动作词。这里是对示例界面语义的检查，不讨论资产选择。

![Ardentis资产详情：Market与My position切换、青蓝趋势、右侧输入摘要和Supply & Borrow按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i2.webp)

详情上部与右列｜范围控件靠近图表，执行动作留在独立面板。

## 手机把卡片排成一条阅读线

移动版把摘要卡纵向堆叠，另一张手机则先展示收益趋势再接抵押总量。标题和青蓝图形继续沿用，卡片没有被简单缩成桌面里的小方块。

连接钱包、网络选择、设置和菜单仍在顶部。关键操作页可以进一步保留所选资产和方向摘要，让滚动时的判断依据不退到上一屏。现有图片只说明布局，连接入口旁同时出现金额，不能据此判断已经处于连接状态。

![Ardentis两张黑色手机概览：顶部钱包入口与网络控件，纵向金额卡和青蓝收益趋势](https://www.jvds.cn/upload/2026/1008/d187-tp/u044-i3.webp)

移动概览｜卡片纵排后保留标题，钱包与网络入口仍在顶部。

## 常见问题

### 深色数据工作台怎样使用强调色？

可以给曲线、当前选择和主要动作建立一致规则，再用标题与单位解释具体含义。强调色并不能替代范围与操作名称。

## 设计检查清单

- 核对资产行中的数量与估值单位。
- 切换Market和My position后检查标题与口径。
- 逐一比对选中标签、输入名称和提交动词。

## 资产工作台的资料和动作需要重新梳理？

如果你的产品同时有市场数据、个人状态和多种操作，可以从对象、范围与确认摘要开始整理。界达设计提供UI/UX设计与网站设计、开发服务，欢迎带着流程来讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可以一起梳理界面、内容和开发需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)