SOCIAL PROOF
星级评分展示Star Rating Display
大号综合分 + 五星 + 评价数，应用商店同款的信任三件套。
效果预览
4.9
★★★★★
适合用在哪
商品详情页顶部、应用下载页、服务报价旁。
容易踩的坑
- 星星只用颜色区分满星和空星，色弱用户看不出 4.5 和 3.5 的差别。
- 半星用两张图拼接，高 DPR 屏幕出现 1px 缝隙，建议用单个 SVG 裁切。
- 评分元素没有「4.8 分，满分 5 分」这类文字替代，读屏只念出五个星号。
设计提示词 · Prompt
星级评分展示（Star Rating Display）：大号综合分（24-36px、800 字重）+ 一排实心星（16-20px、#F59E0B）+ 评价数（"基于 2,847 条评价"灰色小字）。可与分数分布小柱图组合（5-1 星的占比条）。在商品卡片里用紧凑版：4.8 ★★★★★ (1.2k)。评分必须真实且可点进评价列表——虚假的完美 5.0 分反而降低可信度，4.6-4.9 是最可信区间。结构化数据（schema.org AggregateRating）记得加，搜索结果会显示星级。
Star Rating Display: a large aggregate score (24-36px, weight 800) + a row of solid stars (16-20px, #F59E0B) + review count ("Based on 2,847 reviews" in small gray text). Can be combined with a small distribution bar chart (percentage bars for 5 to 1 stars). Use a compact version inside product cards: 4.8 ★★★★★ (1.2k). Ratings must be genuine and clickable through to the review list — a fake perfect 5.0 actually lowers credibility; 4.6-4.9 is the most believable range. Remember to add structured data (schema.org AggregateRating) so search results show the stars.
常见搭配
同一页面里经常和「星级评分展示」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-starshow">
<div class="d-starshow__row">
<span class="d-starshow__num">4.9</span>
<span class="d-starshow__stars">★★★★★</span>
</div>
<span class="d-starshow__meta">基于 2,847 条真实评价 · 好评率 98%</span>
</div>