# 信用看板设计：分数、来源与趋势并排看

原网页：https://www.jvds.cn/share/ui-design/spendex-score-source-tasks-u023
语言：zh-CN
发布：2026-10-11
作者：界达设计工作室（JVDS）

Spendex的信用看板设计把大评分放进半环，也把三家机构的小卡直接留在下面。看完一个醒目的数字，视线还能继续看到来源差别。浅色背景、细线曲线与红绿提示，让总览保持轻盈，信息却没有只剩一个仪表。

## 核心结论

- 评分旁的更新时间和三机构卡提供继续核对的线索。
- 三色曲线与时间事件同处一张图，方便对照变化位置。
- 因素卡采用不同图形表达数量与比例，适合在总览之后补充解释。

## 半环下面的三张卡很关键

手机首页用细体大字显示评分，半环从浅灰逐渐加深，末端再出现绿色。数值是第一眼，刻度和小变化标记留在外围，视觉没有被粗重的仪表盘占满。更新时间紧贴分数下方，也给这张总览加上一条重要线索。

TransUnion、Equifax和Experian各有一张等宽卡。标志在下方，数字和方向标记在上方，读者可以横向比较。它们与大分数很近，因此一眼看到总览之后，也能意识到这里有不同来源。

界达设计更看重这种“主值旁保留来路”的安排。大数值负责快速阅读，小卡负责说明差异。进一步打磨时，还应给主分数补上[明确口径](https://www.jvds.cn/share/ui-design/dashboard-metric-selection)，说明对应哪个来源或哪种汇总；位置居中并不能替代这个解释。

![Spendex手机信用首页：半环评分、更新时间、三张机构卡和底部导航](https://www.jvds.cn/upload/2026/1008/d187-tp/u023-i1.webp)

手机首页中央｜大分数下方保留来源卡，读者能继续看差异。

## 曲线旁边安排事件，比单独列任务具体

Financial plans用红、蓝、绿三条曲线对应机构，图例也写着机构名称。线条保持细而清楚，末端小标签又重复当前读数。颜色帮助追踪一条线，[名称负责确认身份](https://www.jvds.cn/share/ui-design/data-visualization-color-accessibility)，二者配合比只靠颜色记忆稳妥。

时间轴下面排列视频、信封和提醒等小图标，选中事件旁弹出Review strategy卡，里面有Later和红色Appoint。事件没有离开趋势另做一张长清单，看计划时可以同时看到它落在哪个时间位置。

右半区用斜线纹理与前半区区分，视觉上已经提示有边界。但正式产品仍应说明哪段是已记录数据、哪段是计划或目标，并解释浮层的Potential growth。本文只讨论这组示例的表达，不能把图中的上升或潜在增长当成真实结果。

![Financial plans三色机构趋势、下方事件时间轴与Review strategy浮层，右半区域有斜线底纹](https://www.jvds.cn/upload/2026/1008/d187-tp/u023-i2.webp)

计划图中部｜事件靠近时间位置，斜线区提示另一段信息。

## 因素卡不必都画成同一种图

Insights下四张卡的标题和说明位置相近，底部形式却不同。账户与查询采用大数字，信用年限与使用率采用分组柱；来源标志跟着具体数值出现。这使每张卡既能被当成同一类摘要，又保留自身指标的特点。

High和Medium小标签放在标题上方，箭头留在右上角。它们提示还可进入下一层，页面不需要把全部记录一次铺开。类似多来源数据看板可以先让摘要回答“看哪一项”，详情再解释具体记录和更新时间。

内容校对仍很重要。图里部分不同指标用了相近的available credit说明，建议按账户数、查询、年限与使用率分别写准释义和单位。文字准确之后，这些简洁卡片才能帮助理解；再精致的柱形也解释不了一条不对应的说明。

![Spendex Insights因素卡：账户和查询大数字、年限和使用率分组柱、机构标志及右上箭头](https://www.jvds.cn/upload/2026/1008/d187-tp/u023-i3.webp)

因素区｜卡片版式一致，指标图形按数量与比例分别安排。

## 常见问题

### 多来源评分应该合成一个数字吗？

页面可以突出一个主值，但要说明口径，同时保留各来源与更新时间。Spendex把三机构卡放在主仪表下，适合借鉴这种邻近关系，是否汇总仍需要产品定义。

### 计划曲线怎样与历史数据区分？

可以用纹理辅助，但还应标出时间边界与文字说明。目标、计划和已记录值各自命名，才不会把视觉上的延长线理解成结果承诺。

## 设计检查清单

- 确认每一个评分都有来源与更新时间。
- 沿图例追踪一条曲线，检查末端标签与事件位置。
- 逐张因素卡核对名称、释义、单位和分母。

## 需要把多来源数据讲得更清楚？

评分、趋势和因素经常来自不同资料。若你正在规划信息工具或金融产品界面，可以带着数据结构与现有看板来讨论，先把来源和阅读层次安排清楚。

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

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