1 · QR Code Monkey qrcode-monkey.com — 免费生成器交互标杆
┌ 绿色页头（logo + About/API）─────────────────────────────┐
│ 码类型标签行：URL TEXT EMAIL PHONE SMS VCARD … MORE▾（15+）│
├──────────────────────────────┬───────────────────────────┤
│ 左 · 折叠手风琴（一次一开） │ 右 · 常驻预览卡 │
│ ▸ ENTER CONTENT │ 大图预览（实时） │
│ ▸ SET COLORS（单色/渐变/眼色│ 尺寸滑杆 1000×1000 px │
│ ▸ ADD LOGO IMAGE │ [Create QR Code]绿 │
│ ▸ CUSTOMIZE DESIGN │ [Download PNG]蓝 │
│ 体形×22 眼框×15 眼球×N │ .SVG .PDF* .EPS* │
└──────────────────────────────┴───────────────────────────┘
下方浮动按钮：QR Code Templates
DOM/CSS 审查
- 字体 Open Sans 16px；正文色 #5F676D；页面底 #FFF，生成器区浅灰 #EEF0F1
- 品牌绿 #1E8C6E 页头大底色；CTA 绿 #7EC141 / 下载蓝 #63B8E8；按钮几乎无圆角（0–2px）
- 手风琴：面板头 48px，左侧 48px 色块图标位 + 标题 + 右侧 +/- 号；展开互斥
- AngularJS 单页应用；预览列 sticky；滑杆控制导出尺寸并即时反馈数值
可借鉴点
- ✅ 单屏折叠面板流：内容/颜色/Logo/样式四段，专业用户效率最高 → 版本A主骨架
- ✅ 「创建（刷新预览）」与「下载」双按钮分离，下载格式一排小按钮
- ✅ 体形/眼框/眼球图形选择矩阵（缩略图按钮阵列）
- ⚠️ 反面教材：类型标签 15+ 一排放不下、视觉老旧（无圆角、低对比灰字）、广告位干扰
2 · QR Tiger qrcode-tiger.com — 类型卡片墙 + 引导流
┌ 深蓝页头（Products/Solutions/Learn/Pricing + REGISTER）──┐
│ H1「Explore All QR Code Types — Choose What Works Best」 │
│ ┌────┬────┬──────┬────┬────┐ 码类型 bento 卡片墙 │
│ │URL │定位│vCard │Link│WiFi│ · 20+ 类型，图标+名称+箭头 │
│ │IG │Text│(大卡)│Page│社媒│ · 热门类型占大卡（vCard/ │
│ │File│GS1 │MP3 │Menu│App │ MP3/LandingPage 配插画） │
│ └────┴────┴──────┴────┴────┘ │
│ 选类型 → 进入该类型专属生成页（步骤引导：填内容→定制→下载）│
└───────────────────────────────────────────────────────────┘
DOM/CSS 审查
- 标题 Poppins 600 36px，正文系统栈 16px #212529；Bootstrap 栅格
- 主蓝 #166DD4 / 深蓝底 #17418A / 橙色 CTA #FF9312（4px 圆角）——高饱和撞色
- 卡片墙：白卡 + 8px 圆角 + 悬停阴影；大小卡混排（bento），大卡内嵌手机壳插画预览
- 选中卡片高亮蓝描边；类型选择与表单填写分步分页
可借鉴点
- ✅ 「先选类型」作为独立首步：卡片墙可视化每种码的用途 → 版本B第1步
- ✅ 热门类型大卡 + 内嵌效果预览，降低选择成本
- ✅ 选中态 = 高亮描边 + 箭头指示「下一步」
- ⚠️ 反面教材：类型过多（20+）造成选择瘫痪；营销内容与工具混排页面过长
3 · Uniqode uniqode.com — 企业级简洁 SaaS 风
┌ 暗紫黑 hero：像素风大标题「FREE QR CODE GENERATOR」──────┐
│ ┌ 白色生成器卡（圆角浮层）───────────────────────────────┐│
│ │ 类型标签行：Website Pdf App Contact vCard Location … ▸ ││
│ │ ┌ 内容行：URL 输入 + [Generate QR] ┬ 右 · 预览列 ││
│ │ │ 开关行：Update Later/Analytics/GPS│ 大预览 ││
│ │ ├ 定制标签组：Templates|Logo|Design │ email 输入 ││
│ │ │ |Frame → 模板缩略图横滑 │ [Sign up to save]││
│ │ └───────────────────────────────────┴ 下载格式下拉 ─┘│
└───────────────────────────────────────────────────────────┘
DOM/CSS 审查
- 正文 Inter 16px #0C0D10 / 底 #FCFCFC；标题 UniSans + 像素风展示字体
- 品牌蓝 #0044F5（4px 圆角按钮）；黑白灰为主、蓝色只做强调——克制的企业级配色
- 生成器 = 独立白卡浮在暗底 hero 上；卡内再分「内容区/定制区/预览区」三块
- 定制项组织成 Templates / Logo / Design / Frame 四个平级标签（非折叠）
- 模板缩略图横向滑动列表，一键套用整套样式
可借鉴点
- ✅ 定制四标签组（模板/Logo/样式/边框）信息架构最清晰 → 版本B第3步、版本C定制区
- ✅ 模板先行：缩略图一键套用，比逐项调参快 → 三版都含模板起步
- ✅ 克制配色 + 大留白 + 少即是多，与 HonestQR「Honest Precision」气质最接近
- ✅ 像素风标题字体呼应二维码像素属性（HonestQR 已有像素艺术方向，天然契合）
- ⚠️ 反面教材：下载前强制留 email（sign up to save）与 HonestQR「无套路」主张相反，不采用
4 · qr-code-generator.com（QRCG · Bitly 系）— 三步教学 + 双折叠卡
┌ 深蓝 hero「CREATE YOUR QR CODE FOR FREE」────────────────┐
│ ┌ 生成器浮层卡 ────────────────────────────────────────┐ │
│ │ 类型 pill 行：WEBSITE|BUSINESS CARD|TEXT|WIFI|PDF|APP │ │
│ │ ┌ CONTENT 折叠卡（默认开）─┬ 右 · 预览列 │ │
│ │ │ URL 输入 + Scan tracking│ 预览（低饱和占位） │ │
│ │ ├ DESIGN 折叠卡 ───────────│ [DOWNLOAD JPG ▾]格式 │ │
│ │ │ Frame | Logo | Color & │ 下拉合一按钮 │ │
│ │ │ Shape 三个内嵌标签 │ │ │
│ └─┴──────────────────────────┴──────────────────────────┘ │
│ 下方：三步教学（1 Select type / 2 Fill details / 3 DL） │
└────────────────────────────────────────────────────────────┘
DOM/CSS 审查
- 自有字体 Bitly Display；正文 #53678C / 深蓝 #1B294B / 亮蓝 CTA #00BFFF（深色字）
- 类型 pill 行放在卡片顶部深蓝条内，选中 pill 白底反色
- CONTENT / DESIGN 两张独立折叠白卡（16px 圆角、柔和投影），DESIGN 内再分 Frame/Logo/Color&Shape 标签
- 下载按钮 = 格式下拉合一（DOWNLOAD JPG ▾）；预览在未输入时低饱和置灰
- 教学区：1/2/3 序号角标 + 配图卡片，Grid 三列
可借鉴点
- ✅ 类型 pill 行收敛到 6 个高频类型 + More，避免 Monkey 式 15+ 溢出 → 三版类型行
- ✅ CONTENT/DESIGN 大分区折叠卡：比 Monkey 四段更粗粒度、认知负担低 → 版本A分组
- ✅ 下载格式下拉合一按钮 → 版本C下载区；预览未就绪置灰状态
- ✅ 三步教学卡放生成器下方（教育与工具分离）→ 版本B步骤命名
- ⚠️ 反面教材：免费下载实为 14 天试用套路（HonestQR 反其道主张，绝不采用）
四家对比表 + 设计结论
| 维度 | QR Code Monkey | QR Tiger | Uniqode | QRCG (Bitly) |
|---|---|---|---|---|
| 页面骨架 | 左折叠面板 + 右预览（单页） | 类型卡片墙 → 分步页 | 暗底 hero + 白卡（左表单右预览） | 双折叠卡 + 右预览 |
| 码类型切换 | 顶部标签行 15+ / MORE▾ | bento 卡片墙 20+ | 图标标签行 8+ 横向滚动 | pill 行 6 个 + 教学引导 |
| 定制面板组织 | 互斥手风琴 4 段 | 分步页内分区 | 平级标签 4 个（模板/Logo/Design/Frame) | DESIGN 卡内 3 标签 |
| 实时预览 | 右列 sticky，滑杆控尺寸 | 大卡内嵌手机壳预览 | 右列 + email 门槛 | 右列，未输入置灰 |
| 下载区 | 创建/下载双按钮 + 格式小按钮 | 下载在最后一步 | 格式下拉（要求注册） | 格式下拉合一按钮 |
| 移动端形态 | 单列，预览沉底 | 卡片墙 2 列 | 单列竖排 | 单列，卡片堆叠 |
| 配色/字体 | 绿 #1E8C6E · Open Sans（老旧） | 蓝 #166DD4/橙 #FF9312 · Poppins（高饱和） | 蓝 #0044F5 黑白灰 · Inter+UniSans（最克制） | 深蓝 #1B294B/亮蓝 #00BFFF · 自有字体 |
| 套路点（我们反着做） | 广告位 | 免费试用到期 | 下载需留 email | 「免费」实为 14 天试用 |
设计结论 → 三版原型的取材映射
- 版本A（单页折叠面板流）：骨架取 Monkey 手风琴 + 右列 sticky 预览；分组粒度取 Bitly（内容/设计两大段）；类型行收敛为 6+More 取 Bitly；视觉全部换 HonestQR「Honest Precision」token。
- 版本B（四步引导流）：第 1 步类型卡片墙取 Tiger（收敛到 8 张 + 像素艺术特色卡）；第 3 步定制四标签取 Uniqode；步骤命名与教学口吻取 Bitly 三步卡；全程右侧预览常驻。
- 版本C（现有布局增强）：保留现有单卡 + 右预览骨架，注入 Uniqode 定制标签组、Bitly 下载下拉、模板起步横滑；改动成本最低。
- 共同差异化：无注册墙/无 email 门槛/无假免费——下载永远直接可用；「永不过期 · 浏览器本地生成」作为信任条常驻预览下方；像素艺术作为 HonestQR 独有类型入口。
附：整页长截图（桌面 1440 / 移动 390）
