Files
bid-doctor/docs/design/brand-directions.html
YANG JIANKUAN a437b09568 docs(design): 新增品牌策略、视觉方向对比与设计文档索引
- 品牌策略:定位「投前审校员」、性格、语气,口号「标博士,你的AI投标专家」
- 三个视觉方向对比(A 校样 / B 卷宗 / C 检验单),已选 A
- docs/design/README.md:设计文档索引与品牌速查

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-02 20:28:18 +08:00

418 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标博士 品牌方向</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--frame-bg:#ECEDEA; --frame-ink:#22252A; --frame-sub:#5E636B; --frame-line:#D3D6D2;
--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
--serif:"Noto Serif SC","Songti SC","SimSun",serif;
--fangsong:"STFangsong","FangSong","FangSong_GB2312","Noto Serif SC",serif;
--figures:"Barlow Semi Condensed","Noto Sans SC",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--frame-bg);color:var(--frame-ink);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid #2B59C3;outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* ---------- 封面 ---------- */
.intro{padding-top:72px;padding-bottom:40px}
.intro h1{font:900 clamp(40px,7vw,76px)/1.05 var(--serif);letter-spacing:.02em;margin:0 0 20px}
.intro .lede{max-width:40em;font-size:17px;color:var(--frame-sub);margin:0}
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--frame-line);border:1px solid var(--frame-line);margin-top:40px}
.brief div{background:#F7F7F5;padding:18px 20px}
.brief h3{font:700 14px/1.4 var(--sans);margin:0 0 6px;color:var(--frame-sub)}
.brief p{margin:0;font-size:15px}
.brief strong{font-family:var(--serif);font-size:20px;display:block;margin-bottom:2px}
.section-title{font:700 22px/1.4 var(--sans);margin:64px 0 8px}
.section-sub{color:var(--frame-sub);margin:0 0 24px;max-width:46em}
/* ---------- 方向通用骨架 ---------- */
.dir{margin:28px 0 56px;border-radius:2px;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.dir-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:end;padding:36px 40px 28px;border-bottom:1px solid var(--rule)}
.dir-letter{font:900 72px/0.9 var(--serif);color:var(--accent);grid-row:span 2}
.dir-name{font:700 30px/1.2 var(--display);margin:0}
.dir-idea{margin:0;color:var(--sub);max-width:46em}
.dir-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
.dir-ids{padding:32px 40px;border-right:1px solid var(--rule)}
.dir-ui{padding:32px 40px;background:var(--panel)}
.block-title{font:700 13px/1.4 var(--sans);color:var(--sub);margin:0 0 14px}
.block + .block{margin-top:32px}
.logo{display:flex;align-items:center;gap:18px}
.logo svg{flex:none}
.logo .wordmark{font:900 36px/1 var(--display);letter-spacing:.06em}
.logo .en{display:block;font:600 13px/1 var(--figures);letter-spacing:.12em;color:var(--sub);margin-top:8px}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw{font-size:12.5px;line-height:1.45}
.sw i{display:block;height:46px;border-radius:2px;margin-bottom:6px;border:1px solid rgba(0,0,0,.08)}
.sw b{display:block;font-weight:700;font-size:13px}
.sw span{color:var(--sub);font-family:var(--figures);font-size:13px;letter-spacing:.02em}
.type-spec .t1{font:700 26px/1.3 var(--display);margin:0 0 6px}
.type-spec .t2{margin:0 0 6px;font-size:15px}
.type-spec .t3{margin:0;font:600 22px/1 var(--figures);letter-spacing:.01em}
.type-spec small{display:block;color:var(--sub);font-size:12.5px;margin-top:10px}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 40px 32px;border-top:1px solid var(--rule);font-size:14px}
.fit h4{margin:0 0 6px;font-size:14px}
.fit p{margin:0;color:var(--sub)}
/* 迷你界面通用 */
.ui-bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ui-bar h3{margin:0;font:700 17px/1.4 var(--sans)}
.ui-bar .proj{font-size:13px;color:var(--sub)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{font:500 13px/1 var(--sans);padding:8px 12px;border-radius:var(--radius);border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sample-note{font-size:12px;color:var(--sub);margin-top:14px}
/* ---------- 方向 A · 校样 ---------- */
.dir-a{
--paper:#F5F6F3; --panel:#FFFFFF; --ink:#1D2733; --sub:#5C6670; --rule:#D9DDD8;
--accent:#C4122F; --pencil:#2F5BD3; --pencil-soft:#E7EDFB; --ok:#2E6B4F; --amber:#A66300;
--display:var(--serif); --radius:2px; --btn-line:#C9CEC9; --btn-bg:#fff;
}
.dir-a .finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
.dir-a .finding:first-of-type{border-top:0;padding-top:4px}
.dir-a .sev{display:inline-block;font:700 12px/1 var(--sans);padding:4px 7px;border:1.5px solid currentColor;border-radius:2px;margin-right:8px;vertical-align:2px}
.dir-a .sev.fatal{color:var(--accent)}
.dir-a .sev.major{color:var(--amber)}
.dir-a .f-title{font-weight:700;font-size:15px}
.dir-a .f-text{margin:6px 0 0;font-size:14px;color:var(--sub)}
.dir-a .margin-note{position:relative;font:500 13px/1.55 var(--sans);color:var(--pencil);border-left:2px solid var(--pencil);padding:2px 0 2px 12px}
.dir-a .margin-note::before{content:"";position:absolute;left:-22px;top:12px;width:20px;border-top:1.5px dashed var(--pencil)}
.dir-a .margin-note q{display:block;color:var(--ink);quotes:none;background:linear-gradient(transparent 62%,var(--pencil-soft) 62%);margin-top:4px}
.dir-a .cite{font:600 13px/1 var(--figures);letter-spacing:.02em}
.dir-a .confirmed{margin-top:10px;font-size:13px;color:var(--ok)}
.dir-a .confirmed b{font-family:var(--serif)}
.dir-a .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.dir-a .legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px}
/* ---------- 方向 B · 卷宗 ---------- */
.dir-b{
--paper:#FFFFFF; --panel:#F4EFE6; --ink:#22304A; --sub:#636B78; --rule:#E2DBCF;
--accent:#B98B52; --kraft:#B98B52; --cinnabar:#B3261E; --moss:#4F7A55; --amber:#9A6A12;
--display:var(--serif); --radius:3px; --btn-line:#CDBFA8; --btn-bg:#FFFDF8;
}
.dir-b .dossier{display:grid;grid-template-columns:44px minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:3px}
.dir-b .binding{background:var(--kraft);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:18px 0}
.dir-b .binding i{width:12px;height:12px;border-radius:50%;background:var(--panel);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.dir-b .tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--rule);overflow-x:auto}
.dir-b .tab{font-size:13px;padding:10px 12px 8px;color:var(--sub);border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;white-space:nowrap;position:relative;top:1px}
.dir-b .tab.on{color:var(--ink);background:#fff;border-color:var(--rule);font-weight:700}
.dir-b .rows{padding:6px 18px 16px}
.dir-b .row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px dashed var(--rule);align-items:start}
.dir-b .row:last-child{border-bottom:0}
.dir-b .no{font:600 22px/1 var(--figures);color:var(--kraft)}
.dir-b .r-title{font-weight:700}
.dir-b .r-text{font:15px/1.75 var(--fangsong);margin:4px 0 0;color:#3A4352}
.dir-b .tag{font-size:12px;padding:3px 8px;border-radius:3px;white-space:nowrap;font-weight:700}
.dir-b .tag.fatal{background:#F6E1DE;color:var(--cinnabar)}
.dir-b .tag.major{background:#F4EAD3;color:var(--amber)}
.dir-b .cite{font:600 13px/1 var(--figures);color:var(--sub)}
/* ---------- 方向 C · 检验单 ---------- */
.dir-c{
--paper:#FFFFFF; --panel:#F3F6F6; --ink:#20262C; --sub:#5D6870; --rule:#DCE3E5;
--accent:#0B7A75; --teal:#0B7A75; --flag:#C9262F; --amber:#A8650A; --ok:#2F7A45;
--display:var(--sans); --radius:4px; --btn-line:#C8D2D5; --btn-bg:#fff;
}
.dir-c .dir-name{font-weight:700}
.dir-c .labsheet{background:#fff;border:1px solid var(--rule);border-radius:4px;overflow-x:auto}
.dir-c table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.dir-c th{font-weight:700;text-align:left;color:var(--sub);font-size:12.5px;padding:10px 12px;border-bottom:2px solid var(--ink)}
.dir-c td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top}
.dir-c tr:last-child td{border-bottom:0}
.dir-c .num{font:600 15px/1.2 var(--figures);letter-spacing:.01em;white-space:nowrap}
.dir-c .flag{font:700 15px/1 var(--figures);white-space:nowrap}
.dir-c .flag.low{color:var(--flag)}
.dir-c .flag.miss{color:var(--amber)}
.dir-c .flag.high{color:var(--flag)}
.dir-c .item b{display:block}
.dir-c .item small{color:var(--sub)}
.dir-c .cite{font:600 13px/1 var(--figures);color:var(--teal);white-space:nowrap}
.dir-c .sheet-head{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--sub);gap:12px;flex-wrap:wrap}
.dir-c .sheet-head b{color:var(--ink)}
/* ---------- 对比与推荐 ---------- */
.compare{width:100%;border-collapse:collapse;background:#F7F7F5;font-size:14px}
.compare th,.compare td{padding:12px 14px;border:1px solid var(--frame-line);text-align:left;vertical-align:top}
.compare th{background:#E4E6E2;font-weight:700}
.recommend{margin:28px 0 80px;padding:28px 32px;background:#1D2733;color:#F5F6F3;border-radius:2px}
.recommend h3{font:700 22px/1.4 var(--serif);margin:0 0 10px}
.recommend p{margin:0 0 10px;max-width:52em;color:#D5DAE0}
.recommend p:last-child{margin-bottom:0}
footer{padding:0 0 48px;color:var(--frame-sub);font-size:13px}
@media (max-width:860px){
.dir-body{grid-template-columns:1fr}
.dir-ids{border-right:0;border-bottom:1px solid var(--rule)}
.dir-head,.dir-ids,.dir-ui,.fit{padding-left:20px;padding-right:20px}
.dir-a .finding{grid-template-columns:1fr}
.dir-a .margin-note::before{display:none}
.fit{grid-template-columns:1fr}
.dir-letter{font-size:52px}
.wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
</style>
</head>
<body>
<header class="wrap intro">
<h1>标博士</h1>
<p class="lede">品牌方向提案(v0.1,2026-11-02)。三个方向都基于同一套品牌策略,区别只在视觉上的比喻。每个方向都用真实样本里的条款做了一屏「检查结果」示意,请对比着看,选一个继续细化。</p>
<div class="brief">
<div><h3>定位</h3><strong>投前审校员</strong><p>把招标文件的每一条要求和投标文件逐条对上,指明出处,由人确认。</p></div>
<div><h3>性格</h3><strong>较真、有据、沉着</strong><p>逐条不跳过;说什么都带出处;截止前不添乱、不吓人。</p></div>
<div><h3>口号(定稿)</h3><strong>标博士,你的AI投标专家</strong><p>点明身份:懂投标、会查标的 AI 助手。2026-11-02 定稿,见决策 B5。</p></div>
</div>
</header>
<main class="wrap">
<h2 class="section-title">三个视觉方向</h2>
<p class="section-sub">示意界面里的条款文字取自苏采云样本(S02、S10);页码和投标响应值是虚构的示意数据。</p>
<!-- ============ A 校样 ============ -->
<section class="dir dir-a" aria-labelledby="a-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">A</div>
<h3 class="dir-name" id="a-name">校样</h3>
<p class="dir-idea">借用出版社的校对传统:<b>蓝铅笔</b>是机器的批注和待确认的内容,<b>墨笔</b>是人确认后的定稿,<b>红笔</b>只用来标问题。颜色本身就说明了「谁说的、说完没有」。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:带校对圈的标字">
<rect x="1" y="1" width="62" height="62" fill="#1D2733"/>
<text x="32" y="43" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#F5F6F3">标</text>
<path d="M47.5 12.5 C40 6 20 6.5 12 17 C4.5 27 8 47 22 53 C35 58.5 53 53 55.5 38 C57 28 54 20 45 15" fill="none" stroke="#6F93F0" stroke-width="2.4" stroke-linecap="round"/>
</svg>
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#1D2733"></i><b>墨</b><span>#1D2733</span><br>正文、已确认</div>
<div class="sw"><i style="background:#2F5BD3"></i><b>蓝铅笔</b><span>#2F5BD3</span><br>AI 标注、出处</div>
<div class="sw"><i style="background:#C4122F"></i><b>校对红</b><span>#C4122F</span><br>只用于致命问题</div>
<div class="sw"><i style="background:#F5F6F3"></i><b>校样纸</b><span>#F5F6F3</span><br>冷灰白,非米色</div>
<div class="sw"><i style="background:#A66300"></i><b>赭</b><span>#A66300</span><br>重要问题</div>
<div class="sw"><i style="background:#2E6B4F"></i><b>定稿绿</b><span>#2E6B4F</span><br>确认署名</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1">思源宋体,用于标题与标志</p>
<p class="t2">正文用系统黑体(苹方 / 微软雅黑),保证清单密集时也好读。</p>
<p class="t3">第 38 页 ≥512G 132.00 万元</p>
<small>数字用 Barlow Semi Condensed:窄、等宽数字,页码和金额对得齐。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>采购包 2 的检查结果</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
<div class="finding">
<div>
<span class="sev fatal">致命</span><span class="f-title">报价超过采购包 2 的最高限价</span>
<p class="f-text">开标一览表报价 133.60 万元,最高限价 132.00 万元,超出 1.60 万元。这一项会导致投标无效。</p>
<div class="btns"><button class="btn primary">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button></div>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 2 页</span><q>最高限价:184 万元(采购包 1:14 万元,采购包 2:132 万元,采购包 3:38 万元)</q></aside>
</div>
<div class="finding">
<div>
<span class="sev fatal">致命</span><span class="f-title">★ 条款疑似不满足:服务器内存</span>
<p class="f-text">技术偏离表第 12 行响应「内存 256G」,要求「≥512G」。</p>
<p class="confirmed"><b>王敏</b> 于 11 月 2 日 14:20 标记为已修改</p>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 41 页</span><q>★ 2U 机架式服务器,CPU:配置 ≥2 颗海光架构 32C 2.7GHz,内存:≥512G DDR4</q></aside>
</div>
<div class="finding">
<div>
<span class="sev major">重要</span><span class="f-title">缺少 ★ 参数的证明材料</span>
<p class="f-text">已响应「支持硬件 BFD」,但没有找到官网参数截图等证明材料。</p>
</div>
<aside class="margin-note">招标文件 <span class="cite">第 44 页</span><q>★ 支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料</q></aside>
</div>
<div class="legend"><span><i style="background:#2F5BD3"></i>蓝铅笔:系统找到的出处</span><span><i style="background:#1D2733"></i>墨:人工确认后</span><span><i style="background:#C4122F"></i>红:只标致命问题</span></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>颜色规则和「AI 初稿 → 人工确认 → 留痕」是同一件事,用户不需要额外学习。页边批注把「出处」变成界面上最显眼的元素,正好对应我们的核心差异。</p></div>
<div><h4>风险</h4><p>纸张 + 衬线容易让人觉得「文艺」。办法:衬线只用在标题和标志上,界面主体用黑体;纸色用冷灰白。页边批注在窄屏上要改成折叠展开。</p></div>
</div>
</section>
<!-- ============ B 卷宗 ============ -->
<section class="dir dir-b" aria-labelledby="b-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">B</div>
<h3 class="dir-name" id="b-name">卷宗</h3>
<p class="dir-idea">借用标书装订和档案管理:每个投标项目是一份<b>卷宗</b>,左边是装订线,资格、无效条款、评分等是档案夹的分隔页。报告正文用系统自带的仿宋,投标人一看就熟悉。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:卷宗页签上的标字">
<path d="M4 14 h20 l5 -8 h31 v54 h-56 z" fill="#22304A"/>
<rect x="4" y="14" width="9" height="46" fill="#B98B52"/>
<circle cx="8.5" cy="25" r="2.2" fill="#22304A"/><circle cx="8.5" cy="49" r="2.2" fill="#22304A"/>
<text x="37" y="48" text-anchor="middle" font-family="Noto Serif SC, serif" font-weight="900" font-size="30" fill="#FFFFFF">标</text>
</svg>
<div><span class="wordmark">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#22304A"></i><b>深靛</b><span>#22304A</span><br>品牌主色、正文</div>
<div class="sw"><i style="background:#B98B52"></i><b>牛皮纸</b><span>#B98B52</span><br>装订线、编号</div>
<div class="sw"><i style="background:#F4EFE6"></i><b>档案底</b><span>#F4EFE6</span><br>背景层</div>
<div class="sw"><i style="background:#B3261E"></i><b>朱砂</b><span>#B3261E</span><br>致命问题</div>
<div class="sw"><i style="background:#9A6A12"></i><b>赭黄</b><span>#9A6A12</span><br>重要问题</div>
<div class="sw"><i style="background:#4F7A55"></i><b>苔绿</b><span>#4F7A55</span><br>已确认</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1">思源宋体,用于标题</p>
<p class="t2" style="font-family:var(--fangsong);font-size:16px">仿宋用于报告与原文引用,与招标文件的阅读习惯一致。</p>
<p class="t3">第 03 项 第 41 页</p>
<small>仿宋直接用系统字体(macOS 华文仿宋 / Windows 仿宋),不需要额外加载字体文件。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>检查结果</h3><span class="proj">智慧规划资源 2025 标段三 · 采购包 2</span></div>
<div class="dossier">
<div class="binding" aria-hidden="true"><i></i><i></i><i></i></div>
<div>
<div class="tabs" role="tablist" aria-label="清单分类">
<span class="tab on" role="tab" aria-selected="true">全部问题 3</span><span class="tab" role="tab">资格</span><span class="tab" role="tab">无效条款</span><span class="tab" role="tab">技术参数</span><span class="tab" role="tab">报价</span>
</div>
<div class="rows">
<div class="row"><span class="no">01</span><div><span class="r-title">报价超过采购包 2 的最高限价</span><p class="r-text">开标一览表报价 133.60 万元,最高限价 132.00 万元。</p><span class="cite">招标文件 第 2 页</span></div><span class="tag fatal">致命</span></div>
<div class="row"><span class="no">02</span><div><span class="r-title">★ 条款疑似不满足:服务器内存</span><p class="r-text">要求「≥512G DDR4」,偏离表响应「256G」。</p><span class="cite">招标文件 第 41 页 ↔ 投标文件 技术册 第 12 页</span></div><span class="tag fatal">致命</span></div>
<div class="row"><span class="no">03</span><div><span class="r-title">缺少 ★ 参数的证明材料</span><p class="r-text">「支持硬件 BFD,最小报文发送间隔 ≤50ms,提供相关证明材料」</p><span class="cite">招标文件 第 44 页</span></div><span class="tag major">重要</span></div>
</div>
</div>
</div>
<div class="btns"><button class="btn primary">导出检查报告</button><button class="btn">按卷宗归档</button></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>「项目 = 卷宗」和全程留痕、归档、保存的诉求一致,对政企客户显得稳重可靠。仿宋报告拿给老板或归档都很自然。</p></div>
<div><h4>风险</h4><p>容易显得老气、偏后台系统风格;装订线和页签如果做得太具体,会显得像拟物设计。仿宋在小字号下不好读,只能用在报告和引用上。</p></div>
</div>
</section>
<!-- ============ C 检验单 ============ -->
<section class="dir dir-c" aria-labelledby="c-name">
<div class="dir-head">
<div class="dir-letter" aria-hidden="true">C</div>
<h3 class="dir-name" id="c-name">检验单</h3>
<p class="dir-idea">从「博士」引申到体检报告:每条要求是一个<b>检验项目</b>,招标要求是参考值,投标响应是检测结果,偏离用 ↑ ↓ 标出来。数字一目了然,技术参数核对尤其直观。</p>
</div>
<div class="dir-body">
<div class="dir-ids">
<div class="block">
<p class="block-title">标志</p>
<div class="logo">
<svg width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="标博士标志:刻度环绕的标字">
<circle cx="32" cy="32" r="30" fill="#0B7A75"/>
<g stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">
<line x1="32" y1="5" x2="32" y2="10"/><line x1="51.1" y1="12.9" x2="47.6" y2="16.4"/><line x1="59" y1="32" x2="54" y2="32"/><line x1="12.9" y1="12.9" x2="16.4" y2="16.4"/><line x1="5" y1="32" x2="10" y2="32"/>
</g>
<text x="32" y="44" text-anchor="middle" font-family="Noto Sans SC, sans-serif" font-weight="700" font-size="28" fill="#FFFFFF">标</text>
</svg>
<div><span class="wordmark" style="font-family:var(--sans);font-weight:700">标博士</span><span class="en">BID DOCTOR</span></div>
</div>
</div>
<div class="block">
<p class="block-title">色彩</p>
<div class="swatches">
<div class="sw"><i style="background:#0B7A75"></i><b>检验青</b><span>#0B7A75</span><br>品牌主色、出处</div>
<div class="sw"><i style="background:#20262C"></i><b>石墨</b><span>#20262C</span><br>正文</div>
<div class="sw"><i style="background:#F3F6F6"></i><b>化验单底</b><span>#F3F6F6</span><br>背景层</div>
<div class="sw"><i style="background:#C9262F"></i><b>异常红</b><span>#C9262F</span><br>致命、↑↓</div>
<div class="sw"><i style="background:#A8650A"></i><b>琥珀</b><span>#A8650A</span><br>重要、缺项</div>
<div class="sw"><i style="background:#2F7A45"></i><b>正常绿</b><span>#2F7A45</span><br>已确认</div>
</div>
</div>
<div class="block type-spec">
<p class="block-title">字体</p>
<p class="t1" style="font-family:var(--sans)">思源黑体,用于全部界面</p>
<p class="t2">只用一套无衬线字体,强调精确、干净。</p>
<p class="t3">≥512G ↓ 256G</p>
<small>数字用 Barlow Semi Condensed,表格里的数值、单位和判定符号对齐。</small>
</div>
</div>
<div class="dir-ui">
<div class="ui-bar"><h3>检查结果 · 采购包 2</h3><span class="proj">智慧规划资源 2025 标段三</span></div>
<div class="labsheet">
<div class="sheet-head"><span>投标文件 <b>v3</b>,11 月 2 日 14:05 检查</span><span>致命 <b>2</b> 重要 <b>1</b></span></div>
<table>
<thead><tr><th>检查项目</th><th>招标要求</th><th>投标响应</th><th>判定</th><th>出处</th></tr></thead>
<tbody>
<tr><td class="item"><b>报价(采购包 2)</b><small>最高限价</small></td><td class="num">≤132.00 万元</td><td class="num">133.60 万元</td><td class="flag high">↑ 超限</td><td class="cite">第 2 页</td></tr>
<tr><td class="item"><b>★ 服务器内存</b><small>2U 机架式服务器</small></td><td class="num">≥512G</td><td class="num">256G</td><td class="flag low">↓ 不满足</td><td class="cite">第 41 页</td></tr>
<tr><td class="item"><b>★ 硬件 BFD</b><small>证明材料</small></td><td class="num">≤50ms,附证明</td><td class="num">已响应</td><td class="flag miss">缺证明</td><td class="cite">第 44 页</td></tr>
</tbody>
</table>
</div>
<div class="btns"><button class="btn primary">逐项确认</button><button class="btn">导出检查报告</button></div>
</div>
</div>
<div class="fit">
<div><h4>适合</h4><p>技术参数类问题(IT 集成占比最高)用「要求 / 响应 / 判定」三列表达非常直观,和「博士」的名字也呼应。界面现代、干净,容易做好响应式。</p></div>
<div><h4>风险</h4><p>青色 + 表格是常见的 SaaS 面孔,辨识度最低;医疗比喻容易让人联想到「诊断结论」,暗示的确定性比我们承诺的更强。资格、形式类问题不适合放进数值表格。</p></div>
</div>
</section>
<h2 class="section-title">对比</h2>
<div style="overflow-x:auto">
<table class="compare">
<thead><tr><th></th><th>A 校样</th><th>B 卷宗</th><th>C 检验单</th></tr></thead>
<tbody>
<tr><th>和核心差异「可复核」的关系</th><td>最强:出处是界面主角</td><td>中:出处是附注</td><td>中:出处是一列</td></tr>
<tr><th>和「AI 初稿 → 人工确认」的关系</th><td>最强:颜色即状态</td><td>弱</td><td>弱</td></tr>
<tr><th>辨识度</th><td>高</td><td>中高</td><td>低</td></tr>
<tr><th>政企客户的信任感</th><td>中高</td><td>最高</td><td>中</td></tr>
<tr><th>技术参数类问题的表达</th><td>中(可以借用 C 的三列)</td><td>中</td><td>最强</td></tr>
<tr><th>红线风险</th><td>低</td><td>低(避开了红头样式)</td><td>中:诊断暗示确定性</td></tr>
</tbody>
</table>
</div>
<div class="recommend">
<h3>推荐 A「校样」,借用 C 的参数对照表</h3>
<p>标博士和同类产品的根本区别是「每一条都查得到出处、AI 说的和人确认的分得清」。只有 A 把这件事做成了视觉语言本身:蓝铅笔、墨、红笔三种笔迹分别就是机器标注、人工确认和问题。</p>
<p>技术参数核对是 IT 集成项目里数量最多的问题,这一块借用 C 的「要求 / 响应 / 判定」三列表,放在 A 的视觉体系里。B 的「卷宗」可以留作检查报告 PDF 的版式参考:仿宋正文,便于归档。</p>
</div>
</main>
<footer class="wrap">标博士品牌方向 v0.1 · 配套文字说明见 brand-strategy.md</footer>
</body>
</html>