心理咨询工作室「栖野心理」HTML 单页源码（雾蓝 + 暖米 + 鼠尾草绿，含咨询方向 + 预约流程 + 费用说明 + 隐私承诺）

本源码是一款为心理咨询工作室、心理诊所、心理健康平台打造的「信任建立 + 预约转化」单页模板，采用雾蓝 + 暖米 + 鼠尾草绿主调，视觉上冷静、温柔，与「慢下来、不评判」的咨询氛围高度契合。首屏左侧用大字标题「把心里的重量，先放在这里」降低来访者戒备，右侧可视化小卡片用 92% 复访率、48 小时回访等数据建立专业感。

页面结构按来访者心理路径设计：四大咨询方向（个体情绪 / 伴侣关系 / 家庭与青少年 / 职业探索）说明适用场景；四步预约流程从填问卷、免费初谈到正式咨询清晰透明；三位咨询师小卡片展示资历与风格；三档费用说明（含免费首次访谈）消除价格顾虑；FAQ 解答「保密 / 几次能见效 / 是否可以随时结束」等高频疑问；末段「关于保密」用三块独立卡片郑重承诺数据加密、最小记录、知情同意。

适合心理咨询工作室、心理治疗师个人执业、心理健康平台、社工机构作为官网或线上预约落地页。替换工作室名、咨询师介绍、费用与联系方式后即可上线，也可作为心理服务行业的品牌展示模板。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

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>栖野心理 · 一间让你慢下来的心理咨询工作室</title>
<style>
  :root{
    --mist:#eef3f6;
    --mist-2:#e3ecf1;
    --ink:#33414d;
    --ink-l:#6c7c89;
    --blue:#5b7a99;
    --blue-d:#3f5d78;
    --sage:#8aa78f;
    --sage-d:#6f8c75;
    --sand:#f3ede3;
    --line:#d7e0e7;
    --card:#ffffff;
    --warn:#b06a55;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;background:var(--mist);color:var(--ink);line-height:1.85}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  a{text-decoration:none}

  header{border-bottom:1px solid var(--line);background:var(--mist);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:80px}
  .logo{font-size:22px;font-weight:600;letter-spacing:3px}
  .logo small{display:block;font-size:10px;letter-spacing:3px;color:var(--blue);font-weight:400;margin-top:2px}
  .nav ul{display:flex;gap:30px;list-style:none;font-size:15px}
  .nav ul a{color:var(--ink-l);transition:.25s}
  .nav ul a:hover{color:var(--blue-d)}
  .join{background:var(--blue);color:#fff;padding:10px 24px;font-size:14px;letter-spacing:2px;transition:.25s}
  .join:hover{background:var(--blue-d)}

  .hero{padding:70px 0 78px;background:linear-gradient(160deg,var(--mist) 0%,var(--sand) 100%)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
  .tag{display:inline-block;font-size:12px;letter-spacing:3px;color:var(--sage-d);border:1px solid var(--sage);padding:4px 14px;margin-bottom:22px}
  .hero h1{font-size:40px;line-height:1.5;font-weight:600;margin-bottom:20px;letter-spacing:1px}
  .hero h1 em{font-style:normal;color:var(--blue)}
  .hero p{color:var(--ink-l);font-size:16px;max-width:460px;margin-bottom:30px}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:13px 30px;font-size:15px;letter-spacing:2px;display:inline-block;transition:.25s}
  .b-solid{background:var(--blue);color:#fff}
  .b-solid:hover{background:var(--blue-d)}
  .b-line{border:1px solid var(--blue);color:var(--blue-d)}
  .b-line:hover{background:var(--blue);color:#fff}

  .card-visual{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 28px;box-shadow:0 18px 40px rgba(63,93,120,.08)}
  .cv-h{font-size:13px;color:var(--ink-l);letter-spacing:2px;margin-bottom:18px}
  .mood{display:flex;gap:10px;margin-bottom:20px}
  .m{flex:1;text-align:center;padding:14px 6px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--ink-l)}
  .m b{display:block;font-size:22px;color:var(--blue-d);margin-bottom:2px;font-weight:600}
  .bars{display:flex;align-items:flex-end;gap:9px;height:110px;padding-top:6px;border-top:1px dashed var(--line)}
  .bars span{flex:1;background:linear-gradient(180deg,var(--sage),var(--sage-d));border-radius:4px 4px 0 0;opacity:.85}
  .cv-f{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-l);margin-top:8px}

  section{padding:72px 0}
  .st{text-align:center;margin-bottom:46px}
  .st .k{color:var(--blue);letter-spacing:6px;font-size:12px;margin-bottom:12px}
  .st h2{font-size:29px;font-weight:600;letter-spacing:3px}
  .st .dv{width:56px;height:3px;background:var(--sage);margin:16px auto 0;border-radius:3px}

  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .sv{background:var(--card);border:1px solid var(--line);padding:30px 28px;border-radius:12px;transition:.28s}
  .sv:hover{transform:translateY(-4px);border-color:var(--sage);box-shadow:0 14px 30px rgba(111,140,117,.12)}
  .sv .ic{font-size:30px;margin-bottom:12px}
  .sv h3{font-size:19px;font-weight:600;margin-bottom:8px;letter-spacing:1px}
  .sv p{font-size:14.5px;color:var(--ink-l);line-height:1.9}
  .sv .t{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--blue);letter-spacing:1px}

  .flow{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
  .step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 22px;position:relative}
  .step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-16px;left:22px;background:var(--blue);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600}
  .step h4{font-size:17px;margin:8px 0 8px;font-weight:600}
  .step p{font-size:13.5px;color:var(--ink-l);line-height:1.85}

  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .tm{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:center}
  .tm .av{height:150px;display:grid;place-items:center;font-size:46px}
  .a1{background:linear-gradient(135deg,#dfe9ef,#cdddea)}
  .a2{background:linear-gradient(135deg,#e6ece1,#d3e0d6)}
  .a3{background:linear-gradient(135deg,#f1e9df,#e8dccb)}
  .tm .bd{padding:20px 22px 26px}
  .tm h4{font-size:17px;font-weight:600}
  .tm .role{font-size:12.5px;color:var(--blue);letter-spacing:1px;margin:4px 0 12px}
  .tm p{font-size:13.3px;color:var(--ink-l);line-height:1.8}

  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 30px;position:relative}
  .pc.rec{border:1px solid var(--blue)}
  .pc.rec::before{content:"首次优先";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11.5px;padding:3px 16px;letter-spacing:2px}
  .pc h3{font-size:19px;letter-spacing:2px;margin-bottom:6px;font-weight:600}
  .pc .pr{font-size:32px;color:var(--blue-d);font-weight:600;margin:12px 0 3px}
  .pc .pr small{font-size:13px;color:var(--ink-l);font-weight:400}
  .pc .yr{font-size:12.5px;color:var(--ink-l);margin-bottom:20px}
  .pc ul{list-style:none;font-size:13.8px;color:var(--ink-l);line-height:2.25;margin-bottom:22px}
  .pc ul li::before{content:"○　";color:var(--sage-d)}
  .pc a{display:block;text-align:center;padding:12px;font-size:14.5px;letter-spacing:2px;border:1px solid var(--blue);color:var(--blue-d);transition:.25s}
  .pc a:hover{background:var(--blue);color:#fff}

  .faq{max-width:800px;margin:0 auto}
  .q{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin-bottom:14px}
  .q b{font-size:15.5px;font-weight:600;color:var(--ink)}
  .q p{font-size:14px;color:var(--ink-l);line-height:1.9;margin-top:8px}

  .privacy{background:var(--blue-d);color:#eef3f6}
  .privacy .st h2{color:#fff}
  .privacy .st .k{color:var(--sage)}
  .privacy .st .dv{background:rgba(255,255,255,.3)}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pv{border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:26px 24px}
  .pv .ic{font-size:28px;margin-bottom:10px}
  .pv h4{font-size:17px;margin-bottom:8px;color:#fff}
  .pv p{font-size:13.5px;line-height:1.85;color:rgba(238,243,246,.78)}

  footer{background:#2b3742;color:rgba(238,243,246,.62);padding:50px 0 26px;font-size:14px}
  .f3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:32px}
  footer h5{color:#fff;font-size:16px;letter-spacing:2px;margin-bottom:14px;font-weight:600}
  footer ul{list-style:none;line-height:2.15}
  .cp{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;text-align:center;font-size:12.5px;color:rgba(238,243,246,.4);letter-spacing:1px}

  @media(max-width:900px){
    .nav ul,.join{display:none}
    .hero-grid,.svc-grid,.steps,.team-grid,.price-grid,.pgrid,.f3{grid-template-columns:1fr}
    .hero h1{font-size:27px}
    section{padding:52px 0}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">栖 野 心 理<small>QIYE COUNSELING STUDIO</small></div>
    <ul>
      <li><a href="#svc">咨询方向</a></li>
      <li><a href="#flow">预约流程</a></li>
      <li><a href="#team">咨询师</a></li>
      <li><a href="#price">费用说明</a></li>
    </ul>
    <a class="join" href="#flow">预约首次访谈</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tag">专业 · 保密 · 不评判</span>
      <h1>把心里的重量，<br>先<em>放在这里</em></h1>
      <p>栖野是一间开在闹市边上的心理咨询工作室。我们不急着给答案，先陪你把混乱理顺——无论是情绪、关系，还是说不清的疲惫。</p>
      <div class="hero-btns">
        <a class="btn b-solid" href="#flow">预约首次访谈</a>
        <a class="btn b-line" href="#svc">了解咨询方向</a>
      </div>
    </div>
    <div class="card-visual">
      <div class="cv-h">每周到访人数 · 近八周</div>
      <div class="mood">
        <div class="m"><b>92%</b>愿意再来</div>
        <div class="m"><b>1.5 次</b>平均见效</div>
        <div class="m"><b>48h</b>回访跟进</div>
      </div>
      <div class="bars"><span style="height:40%"></span><span style="height:55%"></span><span style="height:48%"></span><span style="height:68%"></span><span style="height:72%"></span><span style="height:60%"></span><span style="height:80%"></span><span style="height:88%"></span></div>
      <div class="cv-f"><span>第 1 周</span><span>第 8 周</span></div>
    </div>
  </div>
</div>

<section id="svc">
  <div class="wrap">
    <div class="st">
      <div class="k">WHAT WE OFFER</div>
      <h2>咨 询 方 向</h2>
      <div class="dv"></div>
    </div>
    <div class="svc-grid">
      <div class="sv"><div class="ic">🌿</div><h3>个体情绪咨询</h3><p>针对焦虑、低落、长期紧绷等状态，用认知行为与人本取向帮你看见情绪背后的需求，慢慢找回生活的掌控感。</p><span class="t">单次 50 分钟</span></div>
      <div class="sv"><div class="ic">💞</div><h3>伴侣与关系咨询</h3><p>沟通卡住、反复争吵、信任动摇时，提供一个安全的对话空间，练习表达与倾听，重新建立彼此的理解。</p><span class="t">双人 80 分钟</span></div>
      <div class="sv"><div class="ic">👨‍👩‍👧</div><h3>家庭与青少年</h3><p>面向亲子冲突、学业压力、青春期疏离，以家庭为单位工作，把问题放回家的关系里去看，而不是只盯着孩子。</p><span class="t">家庭 90 分钟</span></div>
      <div class="sv"><div class="ic">🧭</div><h3>职业与意义探索</h3><p>倦怠、迷茫、想转又不敢转——在职业议题里，也往往藏着你对自己的期待。我们一起把它谈清楚。</p><span class="t">单次 50 分钟</span></div>
    </div>
  </div>
</section>

<section class="flow" id="flow">
  <div class="wrap">
    <div class="st">
      <div class="k">HOW TO START</div>
      <h2>预 约 流 程</h2>
      <div class="dv"></div>
    </div>
    <div class="steps">
      <div class="step"><h4>填写问卷</h4><p>在页面底部留下联系方式与大致困扰，2 分钟内完成，信息仅咨询师可见。</p></div>
      <div class="step"><h4>免费初谈</h4><p>15 分钟电话初谈，互相了解是否合适，不收费也不承诺效果。</p></div>
      <div class="step"><h4>确定咨询师</h4><p>根据议题匹配擅长方向的咨询师，确认时间与频率（通常每周一次）。</p></div>
      <div class="step"><h4>正式咨询</h4><p>线下或视频进行，每次结束留 5 分钟小结，并约定下次时间。</p></div>
    </div>
  </div>
</section>

<section id="team">
  <div class="wrap">
    <div class="st">
      <div class="k">OUR THERAPISTS</div>
      <h2>咨 询 师 团 队</h2>
      <div class="dv"></div>
    </div>
    <div class="team-grid">
      <div class="tm"><div class="av a1">🧑‍⚕️</div><div class="bd"><h4>林知遥</h4><div class="role">国家二级心理咨询师</div><p>擅长情绪与焦虑议题，风格温和坚定，相信改变先从被理解开始。</p></div></div>
      <div class="tm"><div class="av a2">👩‍⚕️</div><div class="bd"><h4>沈念</h4><div class="role">家庭治疗师 / 硕士</div><p>聚焦亲子与伴侣关系，常用系统视角，帮助家庭重新学会对话。</p></div></div>
      <div class="tm"><div class="av a3">🧑‍💼</div><div class="bd"><h4>周屿</h4><div class="role">生涯与职业咨询师</div><p>陪伴倦怠与转型中的人，把模糊的念头变成可执行的一小步。</p></div></div>
    </div>
  </div>
</section>

<section id="price" style="background:var(--sand);border-top:1px solid var(--line)">
  <div class="wrap">
    <div class="st">
      <div class="k">FEES</div>
      <h2>费 用 说 明</h2>
      <div class="dv"></div>
    </div>
    <div class="price-grid">
      <div class="pc">
        <h3>首次访谈</h3>
        <div class="pr">￥0<small> / 15 分钟</small></div>
        <div class="yr">电话初谈，互相确认是否合适</div>
        <ul><li>了解你的困扰</li><li>介绍咨询方式</li><li>无费用、无承诺</li></ul>
        <a href="#flow">预约初谈</a>
      </div>
      <div class="pc rec">
        <h3>个体咨询</h3>
        <div class="pr">￥380<small> / 50 分钟</small></div>
        <div class="yr">适合大多数情绪与议题工作</div>
        <ul><li>固定咨询师</li><li>线下 / 视频可选</li><li>每次结束小结</li><li>48 小时回访</li></ul>
        <a href="#flow">开始预约</a>
      </div>
      <div class="pc">
        <h3>伴侣 / 家庭</h3>
        <div class="pr">￥560<small> / 80–90 分钟</small></div>
        <div class="yr">关系议题，建议固定频率</div>
        <ul><li>双人 / 家庭参与</li><li>系统视角工作</li><li>可约定阶段性目标</li></ul>
        <a href="#flow">咨询详情</a>
      </div>
    </div>
  </div>
</section>

<section id="faq">
  <div class="wrap">
    <div class="st">
      <div class="k">FAQ</div>
      <h2>常 见 问 题</h2>
      <div class="dv"></div>
    </div>
    <div class="faq">
      <div class="q"><b>咨询内容会被别人知道吗？</b><p>不会。所有记录仅咨询师与督导在保密原则下可见，未经你同意不会向任何人透露，法律规定的例外情形除外。</p></div>
      <div class="q"><b>一次就能解决问题吗？</b><p>多数议题需要 4–8 次才能看到稳定变化，但我们会在首次访谈后和你一起约定一个可观察的小目标。</p></div>
      <div class="q"><b>线上和线下有区别吗？</b><p>效果差异不大，你更放松的方式就是更好的方式。视频咨询使用加密会议室，链接仅对你有效。</p></div>
      <div class="q"><b>可以随时结束吗？</b><p>当然。你可以任何时候提出暂停或结束，我们会在最后一次做个简单的回顾与告别。</p></div>
    </div>
  </div>
</section>

<section class="privacy">
  <div class="wrap">
    <div class="st">
      <div class="k">CONFIDENTIALITY</div>
      <h2>关 于 保 密</h2>
      <div class="dv"></div>
    </div>
    <div class="pgrid">
      <div class="pv"><div class="ic">🔒</div><h4>数据加密</h4><p>预约表单与视频链接全程加密，服务器不留存任何可识别的对话内容。</p></div>
      <div class="pv"><div class="ic">📒</div><h4>最小记录</h4><p>我们只记录必要的议题标签与进展，不用真实姓名建档，你可以用化名。</p></div>
      <div class="pv"><div class="ic">🤝</div><h4>知情同意</h4><p>任何涉及第三方的沟通（如家属联络）都需你先明确同意，绝不私下联系。</p></div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f3">
      <div>
        <h5>栖 野 心 理</h5>
        <p>一间开在闹市边上的心理咨询工作室。<br>不急着给答案，先陪你把混乱理顺。</p>
      </div>
      <div><h5>咨询方向</h5><ul><li>个体情绪</li><li>伴侣关系</li><li>家庭与青少年</li><li>职业探索</li></ul></div>
      <div><h5>联系我们</h5><ul><li>预约：栖野小程序</li><li>电话：0571-8866-0208</li><li>地址：文一西路 88 号 · 2 楼</li><li>邮箱：hello@qiye.example</li></ul></div>
    </div>
    <div class="cp">© 2026 栖野心理工作室　本页为 HTML 模板演示，机构名、咨询师与数据均为虚构</div>
  </div>
</footer>

</body>
</html>

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