水平排行条（Horizontal Ranking Bar）是什么：效果预览与 AI 设计提示词

效果预览

1自然搜索4,210

2社交媒体2,930

3直接访问1,872

4邮件引流1,004

适合用在哪

销量排行、渠道贡献、关键词排名、团队业绩。

容易踩的坑

条长按最大值归一化后第一名永远 100%，用户误以为第一名已达到某个上限。
排名变化箭头只用红绿色区分升降，色弱用户需要同时依赖 ▲▼ 形状。
名称截断后 tooltip 只在 hover 出现，触屏用户永远看不到完整类别名。

设计提示词 · Prompt

水平排行条（Horizontal Ranking Bar）：每行 = 排名数字 + 名称（固定宽）+ 轨道内按占比填充的条 + 右对齐数值（tabular-nums）。第一名用品牌强调色或渐变，其余统一弱色。条长按最大值归一化。排序必须从高到低，眼睛默认这么读。行高一致（32-40px）、条粗一致（10-14px）。加 rank change 箭头（▲2 ▼1）表达位次变化更带感。类别名超过 6 字截断加 tooltip。数据标签用整数，别带一长串小数。

Horizontal Ranking Bar: each row = rank number + name (fixed width) + a bar filled within a track by share + a right-aligned value (tabular-nums). First place uses the brand accent color or a gradient; the rest use a uniform muted color. Bar length normalized to the maximum value. Sorting must be high to low — that's how the eye reads by default. Consistent row height (32-40px) and bar thickness (10-14px). Adding rank change arrows (▲2 ▼1) to express position changes makes it more engaging. Category names longer than 6 characters are truncated with a tooltip. Use integers for data labels, not long strings of decimals.

常见搭配

同一页面里经常和「水平排行条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

演示 HTML 结构

<div class="s d-rank">
  <div class="d-rank__row"><span class="d-rank__pos">1</span><span class="d-rank__name">自然搜索</span><span class="d-rank__track"><span class="d-rank__fill" style="width:92%"></span></span><span class="d-rank__val">4,210</span></div>
  <div class="d-rank__row"><span class="d-rank__pos">2</span><span class="d-rank__name">社交媒体</span><span class="d-rank__track"><span class="d-rank__fill" style="width:64%;animation-delay:.08s"></span></span><span class="d-rank__val">2,930</span></div>
  <div class="d-rank__row"><span class="d-rank__pos">3</span><span class="d-rank__name">直接访问</span><span class="d-rank__track"><span class="d-rank__fill" style="width:41%;animation-delay:.16s"></span></span><span class="d-rank__val">1,872</span></div>
  <div class="d-rank__row"><span class="d-rank__pos">4</span><span class="d-rank__name">邮件引流</span><span class="d-rank__track"><span class="d-rank__fill" style="width:22%;animation-delay:.24s"></span></span><span class="d-rank__val">1,004</span></div>
</div>