垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 价格表 ​

价格表是展示产品或服务定价方案的常用组件。本章将介绍如何使用 Foundation 创建美观的价格表。

基本价格表 ​

使用卡片组件创建基本价格表：

html
<div class="card text-center">
    <div class="card-divider">
        <h4>基础版</h4>
    </div>
    <div class="card-section">
        <h3>¥29<small>/月</small></h3>
        <ul class="no-bullet">
            <li>5GB 存储空间</li>
            <li>100 个用户</li>
            <li>邮件支持</li>
            <li>基础功能</li>
        </ul>
        <a class="button hollow" href="#">选择方案</a>
    </div>
</div>

三栏价格表 ​

创建常见的三栏对比价格表：

html
<div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <!-- 基础版 -->
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>基础版</h4>
            </div>
            <div class="card-section">
                <h2 class="pricing">¥29<small>/月</small></h2>
                <ul class="no-bullet">
                    <li>5GB 存储空间</li>
                    <li>100 个用户</li>
                    <li>邮件支持</li>
                    <li>—</li>
                    <li>—</li>
                </ul>
                <a class="button hollow expanded" href="#">选择</a>
            </div>
        </div>
    </div>

    <!-- 专业版 - 推荐 -->
    <div class="cell">
        <div class="card text-center" style="border: 2px solid #1779ba;">
            <div class="card-divider" style="background: #1779ba; color: white;">
                <h4>专业版 <span class="label">推荐</span></h4>
            </div>
            <div class="card-section">
                <h2 class="pricing">¥99<small>/月</small></h2>
                <ul class="no-bullet">
                    <li>50GB 存储空间</li>
                    <li>1000 个用户</li>
                    <li>电话支持</li>
                    <li>API 访问</li>
                    <li>—</li>
                </ul>
                <a class="button expanded" href="#">选择</a>
            </div>
        </div>
    </div>

    <!-- 企业版 -->
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>企业版</h4>
            </div>
            <div class="card-section">
                <h2 class="pricing">¥299<small>/月</small></h2>
                <ul class="no-bullet">
                    <li>无限存储空间</li>
                    <li>无限用户</li>
                    <li>专属客服</li>
                    <li>API 访问</li>
                    <li>自定义功能</li>
                </ul>
                <a class="button hollow expanded" href="#">联系我们</a>
            </div>
        </div>
    </div>
</div>

突出显示推荐方案 ​

html
<style>
    .pricing-card.featured {
        transform: scale(1.05);
        z-index: 1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    }
    .pricing-card.featured .card-divider {
        background: #1779ba;
        color: white;
    }
</style>

<div class="card pricing-card featured text-center">
    <div class="card-divider">
        <h4>最受欢迎</h4>
    </div>
    <div class="card-section">
        <!-- 内容 -->
    </div>
</div>

年付/月付切换 ​

html
<div class="text-center" style="margin-bottom: 30px;">
    <div class="button-group">
        <button class="button" id="monthly-btn">月付</button>
        <button class="button hollow" id="yearly-btn">年付 <small>省20%</small></button>
    </div>
</div>

<div class="grid-x grid-margin-x small-up-1 medium-up-3" id="pricing-cards">
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>基础版</h4>
            </div>
            <div class="card-section">
                <h2 class="pricing">
                    <span class="monthly">¥29</span>
                    <span class="yearly" style="display: none;">¥279</span>
                    <small>/月</small>
                </h2>
                <p class="yearly-note" style="display: none; color: #3adb76;">
                    相当于每月 ¥23.25，节省 ¥69
                </p>
                <!-- 其他内容 -->
            </div>
        </div>
    </div>
</div>

<script>
$('#monthly-btn').on('click', function() {
    $(this).removeClass('hollow');
    $('#yearly-btn').addClass('hollow');
    $('.monthly').show();
    $('.yearly, .yearly-note').hide();
});

$('#yearly-btn').on('click', function() {
    $(this).removeClass('hollow');
    $('#monthly-btn').addClass('hollow');
    $('.yearly, .yearly-note').show();
    $('.monthly').hide();
});
</script>

功能对比表 ​

html
<table class="hover">
    <thead>
        <tr>
            <th>功能</th>
            <th class="text-center">基础版</th>
            <th class="text-center" style="background: #e8f4fc;">专业版</th>
            <th class="text-center">企业版</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>存储空间</td>
            <td class="text-center">5GB</td>
            <td class="text-center" style="background: #e8f4fc;">50GB</td>
            <td class="text-center">无限</td>
        </tr>
        <tr>
            <td>用户数量</td>
            <td class="text-center">100</td>
            <td class="text-center" style="background: #e8f4fc;">1000</td>
            <td class="text-center">无限</td>
        </tr>
        <tr>
            <td>API 访问</td>
            <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
            <td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
            <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
        </tr>
        <tr>
            <td>优先支持</td>
            <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
            <td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
            <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
        </tr>
        <tr>
            <td>自定义域名</td>
            <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
            <td class="text-center" style="background: #e8f4fc;"><i class="fi-x" style="color: #cc4b37;"></i></td>
            <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td class="text-center">
                <a class="button hollow small" href="#">选择</a>
            </td>
            <td class="text-center" style="background: #e8f4fc;">
                <a class="button small" href="#">选择</a>
            </td>
            <td class="text-center">
                <a class="button hollow small" href="#">联系我们</a>
            </td>
        </tr>
    </tfoot>
</table>

带图标的价格表 ​

html
<div class="card text-center">
    <div class="card-section" style="padding-top: 30px;">
        <i class="fi-star" style="font-size: 48px; color: #1779ba;"></i>
        <h4 style="margin-top: 15px;">专业版</h4>
        <h2>¥99<small>/月</small></h2>
    </div>
    <div class="card-section">
        <ul class="no-bullet">
            <li><i class="fi-check" style="color: #3adb76;"></i> 50GB 存储空间</li>
            <li><i class="fi-check" style="color: #3adb76;"></i> 1000 个用户</li>
            <li><i class="fi-check" style="color: #3adb76;"></i> 电话支持</li>
            <li><i class="fi-check" style="color: #3adb76;"></i> API 访问</li>
        </ul>
        <a class="button expanded" href="#">立即订阅</a>
    </div>
</div>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 价格表示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 60px;
        }
        .demo-section h2 {
            text-align: center;
            margin-bottom: 30px;
        }

        .pricing-card {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .pricing-card.featured {
            border: 2px solid #1779ba;
            transform: scale(1.02);
        }
        .pricing-card.featured .card-divider {
            background: #1779ba;
            color: white;
        }

        .pricing-card .price {
            font-size: 3rem;
            font-weight: bold;
            color: #1779ba;
        }
        .pricing-card .price small {
            font-size: 1rem;
            color: #666;
        }

        .pricing-card ul {
            margin: 20px 0;
        }
        .pricing-card ul li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .pricing-card ul li:last-child {
            border-bottom: none;
        }

        .pricing-card .feature-icon {
            margin-right: 8px;
        }

        .billing-toggle {
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1 class="text-center" style="margin: 40px 0;">选择适合您的方案</h1>

        <!-- 付款周期切换 -->
        <div class="billing-toggle text-center">
            <div class="button-group">
                <button class="button" id="monthly-btn">月付</button>
                <button class="button hollow" id="yearly-btn">年付 <span class="label success">省20%</span></button>
            </div>
        </div>

        <!-- 价格卡片 -->
        <div class="demo-section">
            <div class="grid-x grid-margin-x small-up-1 medium-up-3">
                <!-- 基础版 -->
                <div class="cell">
                    <div class="card pricing-card text-center">
                        <div class="card-divider">
                            <h4>基础版</h4>
                        </div>
                        <div class="card-section">
                            <div class="price">
                                <span class="monthly">¥29</span>
                                <span class="yearly" style="display: none;">¥279</span>
                                <small>/月</small>
                            </div>
                            <p class="yearly-note text-muted" style="display: none;">
                                每月仅 ¥23.25
                            </p>
                            <ul class="no-bullet">
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>5GB 存储空间</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>100 个用户</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>邮件支持</li>
                                <li><i class="fi-x feature-icon" style="color: #ccc;"></i>API 访问</li>
                                <li><i class="fi-x feature-icon" style="color: #ccc;"></i>优先支持</li>
                            </ul>
                            <a class="button hollow expanded" href="#">选择基础版</a>
                        </div>
                    </div>
                </div>

                <!-- 专业版 - 推荐 -->
                <div class="cell">
                    <div class="card pricing-card featured text-center">
                        <div class="card-divider">
                            <h4>专业版 <span class="label">最受欢迎</span></h4>
                        </div>
                        <div class="card-section">
                            <div class="price">
                                <span class="monthly">¥99</span>
                                <span class="yearly" style="display: none;">¥949</span>
                                <small>/月</small>
                            </div>
                            <p class="yearly-note text-muted" style="display: none;">
                                每月仅 ¥79.08
                            </p>
                            <ul class="no-bullet">
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>50GB 存储空间</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>1000 个用户</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>电话支持</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>API 访问</li>
                                <li><i class="fi-x feature-icon" style="color: #ccc;"></i>专属客服</li>
                            </ul>
                            <a class="button expanded" href="#">选择专业版</a>
                        </div>
                    </div>
                </div>

                <!-- 企业版 -->
                <div class="cell">
                    <div class="card pricing-card text-center">
                        <div class="card-divider">
                            <h4>企业版</h4>
                        </div>
                        <div class="card-section">
                            <div class="price">
                                <span class="monthly">¥299</span>
                                <span class="yearly" style="display: none;">¥2869</span>
                                <small>/月</small>
                            </div>
                            <p class="yearly-note text-muted" style="display: none;">
                                每月仅 ¥239.08
                            </p>
                            <ul class="no-bullet">
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>无限存储空间</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>无限用户</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>24/7 支持</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>API 访问</li>
                                <li><i class="fi-check feature-icon" style="color: #3adb76;"></i>专属客服</li>
                            </ul>
                            <a class="button hollow expanded" href="#">联系销售</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能对比表 -->
        <div class="demo-section">
            <h2>功能对比</h2>
            <table class="hover">
                <thead>
                    <tr>
                        <th>功能</th>
                        <th class="text-center">基础版</th>
                        <th class="text-center" style="background: #e8f4fc;">专业版</th>
                        <th class="text-center">企业版</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>存储空间</strong></td>
                        <td class="text-center">5GB</td>
                        <td class="text-center" style="background: #e8f4fc;">50GB</td>
                        <td class="text-center">无限</td>
                    </tr>
                    <tr>
                        <td><strong>用户数量</strong></td>
                        <td class="text-center">100</td>
                        <td class="text-center" style="background: #e8f4fc;">1000</td>
                        <td class="text-center">无限</td>
                    </tr>
                    <tr>
                        <td><strong>API 请求/月</strong></td>
                        <td class="text-center">1,000</td>
                        <td class="text-center" style="background: #e8f4fc;">100,000</td>
                        <td class="text-center">无限</td>
                    </tr>
                    <tr>
                        <td><strong>SSL 证书</strong></td>
                        <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
                        <td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
                        <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
                    </tr>
                    <tr>
                        <td><strong>自定义域名</strong></td>
                        <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
                        <td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
                        <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
                    </tr>
                    <tr>
                        <td><strong>高级分析</strong></td>
                        <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
                        <td class="text-center" style="background: #e8f4fc;"><i class="fi-check" style="color: #3adb76;"></i></td>
                        <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
                    </tr>
                    <tr>
                        <td><strong>优先支持</strong></td>
                        <td class="text-center"><i class="fi-x" style="color: #cc4b37;"></i></td>
                        <td class="text-center" style="background: #e8f4fc;"><i class="fi-x" style="color: #cc4b37;"></i></td>
                        <td class="text-center"><i class="fi-check" style="color: #3adb76;"></i></td>
                    </tr>
                    <tr>
                        <td><strong>SLA 保证</strong></td>
                        <td class="text-center">99%</td>
                        <td class="text-center" style="background: #e8f4fc;">99.9%</td>
                        <td class="text-center">99.99%</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><strong>价格</strong></td>
                        <td class="text-center"><strong>¥29/月</strong></td>
                        <td class="text-center" style="background: #e8f4fc;"><strong>¥99/月</strong></td>
                        <td class="text-center"><strong>¥299/月</strong></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="text-center">
                            <a class="button hollow small" href="#">选择</a>
                        </td>
                        <td class="text-center" style="background: #e8f4fc;">
                            <a class="button small" href="#">选择</a>
                        </td>
                        <td class="text-center">
                            <a class="button hollow small" href="#">联系我们</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- FAQ -->
        <div class="demo-section">
            <h2>常见问题</h2>
            <ul class="accordion" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">可以随时更换套餐吗？</a>
                    <div class="accordion-content" data-tab-content>
                        <p>是的，您可以随时升级或降级您的套餐。升级立即生效，降级将在下一个计费周期生效。</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">有免费试用吗？</a>
                    <div class="accordion-content" data-tab-content>
                        <p>所有套餐都提供 14 天免费试用，无需信用卡。</p>
                    </div>
                </li>
                <li class="accordion-item" data-accordion-item>
                    <a href="#" class="accordion-title">如何取消订阅？</a>
                    <div class="accordion-content" data-tab-content>
                        <p>您可以在账户设置中随时取消订阅，取消后将在当前计费周期结束时生效。</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();

        // 月付/年付切换
        $('#monthly-btn').on('click', function() {
            $(this).removeClass('hollow');
            $('#yearly-btn').addClass('hollow');
            $('.monthly').show();
            $('.yearly, .yearly-note').hide();
        });

        $('#yearly-btn').on('click', function() {
            $(this).removeClass('hollow');
            $('#monthly-btn').addClass('hollow');
            $('.yearly, .yearly-note').show();
            $('.monthly').hide();
        });
    </script>
</body>
</html>

价格表最佳实践 ​

  1. 突出推荐方案：使用视觉效果突出最佳选择
  2. 清晰的对比：让用户容易比较不同方案
  3. 简洁的功能列表：列出最重要的功能差异
  4. 明确的 CTA：使用清晰的行动按钮
  5. 灵活的计费选项：提供月付/年付切换

总结 ​

本章我们学习了：

  • 基本价格表的创建
  • 三栏对比价格表
  • 突出显示推荐方案
  • 年付/月付切换
  • 功能对比表
  • 完整的价格页面设计

下一章，我们将学习 Foundation 顶部导航栏。

提示：好的价格表设计能够帮助用户快速做出决策，清晰展示各方案的价值差异是关键。