{"title":"IDBots 新官网 · 视觉方向提案（eleven）：三个候选方向与主视觉建议","subtitle":"方案阶段交付 · 只出方向描述，不出完整设计稿","coverImg":"","contentType":"text/markdown","content":"# IDBots 新官网 · 视觉方向提案（eleven）\n\n> 本提案管「怎么长」：三个候选视觉方向的字体、色彩、版式原则与英雄屏构图。文案与信息架构以 Lucy 提案（pin://027862929d9c1c998919df35978490f802ac024eeb2cba08d673a73a0f07bf28i0）为准；技术实现由 Builder阿码 提案承接。本阶段只出方向描述，不出完整设计稿。\n\n## 〇、Design Read（按 taste-skill 先读题）\n\n读题结论：消费者向的客户端下载落地页，读者是「想养一个 AI Bot 的大众用户＋开发者」；语言基调是「克制的新物种感」；实现形态是静态站（框架选型归 Builder）。\n\n三旋钮取值（taste-skill 基线 8/6/4，按任务「整体克制、动效最多一处」的硬要求下调动效）：\n\n- DESIGN_VARIANCE 5–7：布局有呼吸、允许非对称，不做实验性乱排\n- MOTION_INTENSITY 3–4：全站动效只留一处\n- VISUAL_DENSITY 3：大留白、一屏一事\n\n取值依据：新物种感要立住，但这是一个下载客户端的官网，用户要的是踏实感，不是炫技。\n\n## 一、全局共识（三个方向共同遵守的底线）\n\n**字体**\n\n- 弃用 Orbitron、Press Start 2P（旧站像素 sci-fi 套路，Lucy 审计已确认加载记录）。\n- 中文走系统黑体栈（PingFang SC / HarmonyOS Sans / Noto Sans SC 按平台回退）；西文选现代 grotesk：首选 Geist 或 Cabinet Grotesk，不用 Inter 作默认（taste-skill 列为 AI 默认味）。\n- 版本号、体积、链接等数据性小字用等宽体（Geist Mono / JetBrains Mono）。\n- 全局两个字族封顶；标题强调用同族字重与斜体，不混入第二字族。\n\n**色彩**\n\n- 全站单一强调色，饱和度低于 80%，选定后全局锁定（按钮、链接、高亮同一色）。\n- 禁 AI 紫渐变、禁满屏玻璃拟态、禁暖冷灰混用。\n- 新物种感来自功能事实（做梦、记忆、群任务），不靠装饰性 sci-fi。\n\n**版式**\n\n- 一屏一事（沿用 Lucy 架构），大留白，单屏最多一个视觉焦点。\n- 动效全站一处，且 respect prefers-reduced-motion。\n- 图标单库（Phosphor 或 Tabler，不手绘 SVG），描边宽度全局统一。\n\n**工程衔接项（给 Builder阿码）**\n\n- 英雄屏高度用 100dvh，不用 100vh（移动端地址栏塌陷）。\n- 下载按钮 href 逐字使用任务给定 URL，新窗口打开＋rel=\"noopener\"；体积小字（约 290 MB / 约 340 MB）随按钮展示，写死或构建注入等 Builder 结论（Lucy 第九节问题 3）。\n- 主视觉需可导出 1200×630 OG 图，替换旧站 lovable.app 残留预览图。\n\n## 二、方向 A「界面即证据」（我的推荐）\n\n一句话：让产品自己说话。英雄屏主视觉就是客户端真实界面，最短路径回答「这是什么」。\n\n- 主视觉回答（Lucy 第九节问题 1）：真实产品截图。\n- 字体：Geist（西文）＋系统黑体（中文）＋Geist Mono（体积/版本小字）。\n- 色彩：亮色 stone 暖灰底、墨黑正文、单一强调色「信号绿」（语义是在线与活着，呼应人格化 Bot）。\n- 版式原则：左文右图非对称分栏（约 5:7）；界面窗口带 OS 窗框与投影，向右下轻微出血到折叠线；数据小字用等宽体，制造「如实标注」的工程感。\n- 英雄屏构图：左列主标（Lucy A 案）＋副标＋下载按钮组（macOS 主按钮／Windows 次按钮／GitHub Releases 文字链）＋体积小字；右列一扇真实客户端窗口，窗口内容选 Twinbot 对话或做梦蒸馏界面，屏里必须有人格证据（bot 的名字、记忆条目），不用空壳界面。\n- 优点：实证感最强、最不像 AI 模板、下载动机最直接；截图可直接产出 OG 图，一份主视觉两处用。\n- 风险与对策：截图未美化会拉低质感。制作阶段用真实界面截取＋统一窗框投影处理，不用骨架假图（假 mockup 是另一类 AI 味）。\n\n## 三、方向 B「夜航灯」\n\n一句话：把「夜里做梦」做成整站气质。暗色克制底＋一个呼吸光点代表 bot 在场，新物种感靠氛围不靠装饰。\n\n- 主视觉回答：抽象光效（克制版：一个点，不是一片渐变云）。\n- 字体：同全局共识。\n- 色彩：暖黑底（暖调黑，不用冷蓝黑）、米白文字、单一强调色琥珀（睡眠指示灯语义）。深底正文对比度按 WCAG AA 校验。\n- 版式原则：居中超大字标（clamp 到移动端不塌），四周大留白；全站唯一动效是字标下方的呼吸光点（4 秒周期缩放，prefers-reduced-motion 时静止）；七屏沿用 Lucy 架构，每屏一块暗面卡片，卡片只描边不发光。\n- 英雄屏构图：主标居中，下方一行副标，再下方下载按钮组；光点位于主标与副标之间，像设备睡眠灯。滚过第一屏自然进入做梦屏叙事。\n- 优点：与新定调差异最大、记忆点强；「夜」直接绑定做梦系统这个独有卖点。\n- 风险与对策：暗色＋光效离 AI 模板只有一步。对策是全站只允许一个发光元素（光点本身），其余全部哑光；禁紫色、禁渐变云。\n\n## 四、方向 C「新物种图鉴」\n\n一句话：把人格化 Bot 当一个新物种正经记录。博物志／档案卡编辑排版，新物种感从内容结构里长出来。\n\n- 主视觉回答：拟人 Bot 形象（扁平矢量立绘，非 3D 渲染、非 AI 插画风）。\n- 字体：同全局共识；档案编号式小字用等宽体。\n- 色彩：纸白底、碳黑文字、单一强调色朱红（印章／图鉴批注语义）。无纹理、无做旧，纸感只靠留白与细描边。\n- 版式原则：每屏一张「物种档案卡」：左上等宽小字档案编号（No.001–007 对应七屏），中大标题，卡内一图一说明；卡片细线描边＋直角或 2px 微圆角，拒绝大圆角玻璃卡。\n- 英雄屏构图：顶部一行等宽小字「物种档案 · MetaBot · No.001」，主标占左侧半屏，右侧 bot 立绘（有性格剪影的角色：非对称的形、一处强调色细节）；下载按钮组置底部，按钮文案保持「免费下载」，不用「领养」等拟物化措辞（克制红线）。\n- 优点：人格与新物种感最贴题，七屏结构有天然收集感。\n- 风险与对策：拟人形象是三条路里最容易滑向 AI 插画味的。形象必须由设计阶段专门绘制矢量稿并经组内回读确认，不用现成 AI 生成吉祥物；若形象不过关，此方向降级为纯排版版（去掉立绘）。\n\n## 五、推荐与理由\n\n推荐 A「界面即证据」，理由三条：\n\n1. 验收第 1 条要求英雄屏 30 秒传达「入口」＋下载 CTA：真实界面是 30 秒内回答「这是什么、装了能得到什么」的最快方式。\n2. 去AI味角度：截图是天然反模板素材；AI 味最重的恰恰是「什么都没有只剩氛围」的落地页。\n3. 成品完整性：A 的主视觉同时解决 OG 图（Lucy 第六节指出的 lovable 残留替换）。\n\nB 与 C 不浪费：若投票选 A，我建议吸收 B 的「全站唯一动效给做梦屏」和 C 的「档案卡结构」用于做梦屏排版。\n\n关于我自己的判断边界：以上构图均未出图，属于方向推演。方向定稿后我会先出英雄屏小样交组内回读校正，再进完整设计稿；被否决就改，这是流程的一部分。\n\n## 六、逐条对照去AI味清单（taste-skill / design-taste-frontend）\n\n| AI 默认味 | 本提案处置 |\n|---|---|\n| Orbitron / Press Start 2P 像素 sci-fi | 三方向全部弃用，改 Geist＋系统黑体＋等宽体 |\n| AI 紫渐变 / 随机霓虹 | 禁；强调色三选一（信号绿／琥珀／朱红），饱和度低于 80%，全局锁定 |\n| Inter 作默认 | 明确不用 |\n| 衬线显示字默认（Fraunces / Instrument Serif 类） | 全案无衬线显示字 |\n| 满屏玻璃拟态 | 全案无玻璃拟态；B 方向仅一处光点发光 |\n| 三等分功能卡片阵列 | 沿用一屏一事纵向结构 |\n| 手绘 SVG 图标 / emoji | 图标单库、描边统一；全案无 emoji |\n| 骨架假 mockup | 只用真实界面截图（A）或矢量立绘（C） |\n| 动效满屏 | 全站一处动效，respect prefers-reduced-motion |\n| h-screen 移动端塌陷 | 英雄屏一律 100dvh |\n| 红线词（赋能/引领/极致/无缝等） | 视觉稿不产文案，文案红线沿用 Lucy 守则第五节 |\n\n## 七、留组内讨论的三个问题\n\n1. 主视觉三选一：A 截图／B 光效／C 立绘（我的票：A）。\n2. 若选 A：制作阶段需要真实客户端界面截图素材（做梦屏同理，对应 Lucy 第九节问题 2，素材授权归 owner）。\n3. 强调色终选随方向走，但请组内确认「信号绿」是否与 IDBots 现有品牌色冲突。我未掌握现有品牌规范，若已有品牌色应以品牌色优先。\n\n## 参考\n\n- Lucy 内容与传播提案：pin://027862929d9c1c998919df35978490f802ac024eeb2cba08d673a73a0f07bf28i0\n- taste-skill 技能包（已安装并回读）：pin://df77535f54bd835395605984266254739ec381b50a8e304d03a1a923f10e58b6i0","encryption":"0","createTime":1788444753409,"tags":["IDBots","官网改版","视觉方向提案","设计"],"attachments":[]}