社会认同Social Proof-Focused
把用户评价、客户 Logo、评分与数字指标放在首屏附近，用他人的选择降低决策风险。需要真实素材，否则反噬信任。
典型场景课程/工具落地页 · 订阅转化（已弃用）
编号24
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
把用户评价、客户 Logo、评分与数字指标放在首屏附近，用他人的选择降低决策风险。需要真实素材，否则反噬信任。
关键词
Testimonials prominentclient logos displayedcase studies sectionsreviews/ratingsuser avatarssuccess metricscredibility markers
效果与动效
Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings
设计系统变量
--avatar-size64px--logo-height40px--star-color#FBBF24--metric-font-size3rem--testimonial-bg#F9FAFB--blockquote-border4px solid accent配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds
辅色 / Secondary
Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors
强调色在页面底色上的对比度约 4.9:1，可用于正文与图标。
适用场景
适合 / Best For
- B2B SaaS
- professional services
- premium products
- e-commerce conversion pages
- established brands
避开 / Do Not Use For
- Startup MVPs
- products without users
- niche/experimental products
框架兼容
tailwindbootstrap
能力矩阵
浅色模式支持
深色模式支持
移动适配原生适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Testimonials with real photos,
- Logo grid 6-12 logos,
- Star ratings accessible,
- Metrics animated on scroll,
- Case studies linked,
- Mobile carousel works
CSS / 技术关键词
testimonial cards with avatar, logo grid (grayscale filter), star rating SVGs, counter animations (count-up), blockquote styling, carousel for testimonials, metric cards
该条目在上游数据中标记为已弃用，插件检索默认排除；查询中包含
legacy 或 deprecated 时才会召回。AI 提示词
Design a social proof landing page. Use: testimonials with photos, client logos grid, case study cards, review ratings (stars), user count metrics, success stories, trust indicators, before/after comparisons.