拾步 SHIBU 新用户引导页 HTML 单页源码

拾步 SHIBU 新用户引导页是一份面向轻量效率工具 / SaaS 产品的新用户引导（Onboarding）单页模板，采用青柠绿、深墨蓝、暖白与珊瑚橘构成的清新活力配色，定位为「把复杂的效率方法论拆成三个最小动作」。页面以顶部 sticky 导航 + 进度条开场，Hero 区左文右卡（右侧用纯 CSS 步骤卡呈现三步引导），向下依次是三步引导卡片、核心能力双栏亮点、深色 CTA 引导条与页脚，结构完整覆盖一个新用户引导落地页该有的全部模块。

设计亮点在于用「引导感」贯穿全页：顶部细进度条暗示步骤推进，Hero 右侧三步迷你卡与正文三步大卡呼应，数字徽标用绿/珊瑚/墨蓝三色区分阶段，核心能力区用图标 + 短句讲清价值。配色以青柠绿为主、珊瑚橘做行动强调、深墨蓝压沉，全程单文件、内嵌 CSS、响应式——移动端自动隐藏导航、多栏折叠为单栏，PC 与手机浏览体验一致，且无需任何图片或外部依赖即可预览。

适用人群广泛：SaaS / 工具类产品的增长或市场团队可直接套用这套结构做新用户引导页或落地页，独立开发者能用它快速搭出产品介绍页，前端初学者也能通过这份源码学习单文件 HTML + CSS 的 sticky 顶栏、进度条、卡片徽标与响应式栅格写法。复制即用，二次修改成本极低。

使用教程

第一步：下载保存
将本页完整 HTML 源码（见文末代码块）保存为 index.html 文件，注意使用 UTF-8 编码，避免中文乱码。

第二步：本地预览
直接双击用浏览器打开 index.html，即可看到与本站预览图一致的效果，无需任何服务器或依赖。

第三步：自定义修改
替换品牌名「拾步 SHIBU」、引导三步文案、能力亮点与 CTA 链接；如需换色，修改 <style> 中的 --green / --coral / --ink 等 CSS 变量即可一键换肤。

第四步：上线部署
把修改后的 index.html 上传到虚拟主机或对象存储，绑定域名即可对外访问；也可作为引导流程的子页面嵌入现有产品站点。

HTML 源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拾步 SHIBU · 新用户引导页</title>
<style>
  :root{
    --green:#1fab89;
    --green-d:#138a6c;
    --ink:#16202e;
    --ink-soft:#46566b;
    --cream:#fbfaf6;
    --coral:#ff7a59;
    --line:#e7e3d8;
    --card:#ffffff;
    --shadow:0 12px 34px rgba(22,32,46,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
    color:var(--ink);background:var(--cream);line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  .wrap{width:min(1140px,92vw);margin:0 auto}

  /* 顶栏 */
  header{
    position:sticky;top:0;z-index:30;
    background:rgba(251,250,246,.86);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.5px}
  .logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green-d));
    display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:var(--shadow)}
  .nav-links{display:flex;gap:26px;font-size:15px;color:var(--ink-soft);font-weight:600}
  .nav-links a:hover{color:var(--green)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--green);color:#fff;font-weight:700;
    padding:11px 22px;border-radius:999px;border:none;cursor:pointer;
    transition:.2s;font-size:15px;box-shadow:0 8px 20px rgba(31,171,137,.30);
  }
  .btn:hover{background:var(--green-d);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--green);color:var(--green);background:transparent}

  /* 进度条 */
  .progress{height:4px;background:var(--line);position:relative}
  .progress span{position:absolute;left:0;top:0;height:100%;width:33%;
    background:linear-gradient(90deg,var(--green),var(--coral));border-radius:0 4px 4px 0;
    transition:width .4s}

  /* Hero */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 0 60px}
  .tag{display:inline-flex;align-items:center;gap:8px;background:#eafaf4;color:var(--green-d);
    font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:18px}
  .tag b{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
  .hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.18;letter-spacing:-.5px;margin-bottom:18px}
  .hero h1 em{font-style:normal;color:var(--green);position:relative}
  .hero p.lead{font-size:18px;color:var(--ink-soft);max-width:480px;margin-bottom:28px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
  .stat{display:flex;gap:30px;flex-wrap:wrap}
  .stat div b{display:block;font-size:26px;color:var(--ink);font-weight:800}
  .stat div span{font-size:13px;color:var(--ink-soft)}

  .hero-art{
    background:linear-gradient(160deg,#ffffff,#f1f8f5);
    border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);
    position:relative;overflow:hidden;
  }
  .hero-art::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;
    background:radial-gradient(circle,rgba(255,122,89,.18),transparent 70%)}
  .step-mini{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
  .step-mini:last-child{border-bottom:none}
  .num{width:34px;height:34px;border-radius:10px;background:var(--green);color:#fff;font-weight:800;
    display:grid;place-items:center;flex:none;font-size:15px}
  .step-mini:nth-child(2) .num{background:var(--coral)}
  .step-mini:nth-child(3) .num{background:var(--ink)}
  .step-mini .t b{display:block;font-size:15px}
  .step-mini .t span{font-size:13px;color:var(--ink-soft)}

  /* 引导步骤 */
  .section{padding:64px 0}
  .sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
  .sec-head .k{color:var(--coral);font-weight:800;font-size:14px;letter-spacing:2px;text-transform:uppercase}
  .sec-head h2{font-size:clamp(26px,3.2vw,38px);margin:10px 0 12px;letter-spacing:-.5px}
  .sec-head p{color:var(--ink-soft);font-size:16px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px;
    box-shadow:var(--shadow);position:relative;transition:.25s}
  .step-card:hover{transform:translateY(-6px);border-color:var(--green)}
  .step-card .badge{position:absolute;top:-14px;left:26px;width:40px;height:40px;border-radius:12px;
    background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;font-weight:800;
    display:grid;place-items:center;box-shadow:var(--shadow)}
  .step-card:nth-child(2) .badge{background:linear-gradient(135deg,var(--coral),#ff5a35)}
  .step-card:nth-child(3) .badge{background:linear-gradient(135deg,var(--ink),#2c3b52)}
  .step-card h3{font-size:20px;margin:14px 0 10px}
  .step-card p{color:var(--ink-soft);font-size:15px}
  .step-card ul{list-style:none;margin-top:16px;display:grid;gap:9px}
  .step-card li{font-size:14px;color:var(--ink);display:flex;gap:9px;align-items:flex-start}
  .step-card li::before{content:"✓";color:var(--green);font-weight:800;flex:none}

  /* 亮点 */
  .features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .feat{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:22px;align-items:flex-start}
  .feat .ic{width:44px;height:44px;border-radius:12px;background:#eafaf4;color:var(--green-d);
    display:grid;place-items:center;font-size:20px;flex:none}
  .feat h4{font-size:17px;margin-bottom:4px}
  .feat p{font-size:14px;color:var(--ink-soft)}

  /* CTA 条 */
  .cta-band{background:linear-gradient(135deg,var(--ink),#223047);color:#fff;border-radius:24px;
    padding:48px;text-align:center;position:relative;overflow:hidden}
  .cta-band::after{content:"";position:absolute;left:-30px;bottom:-40px;width:200px;height:200px;
    background:radial-gradient(circle,rgba(31,171,137,.35),transparent 70%)}
  .cta-band h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px;position:relative}
  .cta-band p{color:#c8d2de;max-width:520px;margin:0 auto 24px;position:relative}
  .cta-band .btn{background:var(--coral);box-shadow:0 10px 26px rgba(255,122,89,.4);position:relative}
  .cta-band .btn:hover{background:#ff5a35}

  /* 页脚 */
  footer{border-top:1px solid var(--line);padding:34px 0;color:var(--ink-soft);font-size:14px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}

  @media(max-width:880px){
    .hero{grid-template-columns:1fr;gap:30px;padding:48px 0 40px}
    .steps{grid-template-columns:1fr}
    .features{grid-template-columns:1fr}
    .nav-links{display:none}
    .cta-band{padding:34px 22px}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><span class="dot">步</span>拾步 SHIBU</div>
    <nav class="nav-links">
      <a href="#guide">引导流程</a>
      <a href="#feat">核心能力</a>
      <a href="#start">开始使用</a>
    </nav>
    <a class="btn" href="#start">免费开始</a>
  </div>
  <div class="progress"><span></span></div>
</header>

<section class="wrap hero">
  <div>
    <span class="tag"><b></b>新用户引导 · 3 步上手</span>
    <h1>把每一件待办，<br>走成<em>清晰的一步</em></h1>
    <p class="lead">拾步是一款为个人与团队打造的轻量效率工具。跟着下面的引导，30 秒完成第一步，今天就能把混乱的清单理顺。</p>
    <div class="cta">
      <a class="btn" href="#start">开始引导 →</a>
      <a class="btn btn-ghost" href="#guide">先看流程</a>
    </div>
    <div class="stat">
      <div><b>30s</b><span>完成入门</span></div>
      <div><b>12 万+</b><span>活跃用户</span></div>
      <div><b>4.9</b><span>应用商店评分</span></div>
    </div>
  </div>
  <div class="hero-art">
    <div class="step-mini"><div class="num">1</div><div class="t"><b>创建空间</b><span>新建你的第一个工作台</span></div></div>
    <div class="step-mini"><div class="num">2</div><div class="t"><b>放入任务</b><span>拖动或粘贴，自动归类</span></div></div>
    <div class="step-mini"><div class="num">3</div><div class="t"><b>每日复盘</b><span>一步看清今日重点</span></div></div>
  </div>
</section>

<section class="section wrap" id="guide">
  <div class="sec-head">
    <div class="k">ONBOARDING</div>
    <h2>三步引导，零门槛上手</h2>
    <p>我们把复杂的效率方法论拆成了三个最小动作，跟着做就不会卡住。</p>
  </div>
  <div class="steps">
    <div class="step-card">
      <div class="badge">1</div>
      <h3>创建你的空间</h3>
      <p>一个空间 = 一条清晰的工作线。给团队或自己起个名字即可。</p>
      <ul>
        <li>支持工作 / 生活多空间切换</li>
        <li>一键导入已有清单</li>
        <li>邀请伙伴实时协作</li>
      </ul>
    </div>
    <div class="step-card">
      <div class="badge">2</div>
      <h3>放入你的任务</h3>
      <p>把脑子里的事都倒进来，拾步会自动按优先级与时间排好。</p>
      <ul>
        <li>拖拽排序，所见即所得</li>
        <li>自然语言识别「明早 9 点」</li>
        <li>重复任务自动生成</li>
      </ul>
    </div>
    <div class="step-card">
      <div class="badge">3</div>
      <h3>每天一步复盘</h3>
      <p>每天打开「今日」，只看见该做的事，做完即归档。</p>
      <ul>
        <li>专注视图屏蔽干扰</li>
        <li>周报自动汇总</li>
        <li>进度可视化一目了然</li>
      </ul>
    </div>
  </div>
</section>

<section class="section wrap" id="feat" style="background:#f4f7f4;border-radius:24px">
  <div class="sec-head">
    <div class="k">WHY SHIBU</div>
    <h2>引导之外，它真的好用</h2>
    <p>不只是把用户领进门，更让每天的效率看得见。</p>
  </div>
  <div class="features">
    <div class="feat"><div class="ic">⚡</div><div><h4>极速捕获</h4><p>全局快捷键随时记录灵感，0.2 秒落盘不丢失。</p></div></div>
    <div class="feat"><div class="ic">🔗</div><div><h4>灵活关联</h4><p>任务、笔记、文件互相链接，形成你的第二大脑。</p></div></div>
    <div class="feat"><div class="ic">📊</div><div><h4>数据看板</h4><p>完成率、耗时、趋势自动统计，复盘有依据。</p></div></div>
    <div class="feat"><div class="ic">🔒</div><div><h4>隐私优先</h4><p>端到端加密同步，数据只属于你自己。</p></div></div>
  </div>
</section>

<section class="section wrap" id="start">
  <div class="cta-band">
    <h2>准备好了吗？现在就走第一步</h2>
    <p>无需信用卡，注册即用。跟着引导页，30 秒拥有属于你的清爽工作台。</p>
    <a class="btn" href="#start">免费创建空间 →</a>
  </div>
</section>

<footer>
  <div class="wrap foot">
    <div class="logo"><span class="dot">步</span>拾步 SHIBU</div>
    <div>© 2026 拾步科技 · 让每一步都清晰可循</div>
  </div>
</footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/2201.html