JohnBuilds 的 Logo 不是一开始就有明确成品。最早我只是想给个人网站一个更完整的视觉入口，让它不像临时页面，也不像只有文字的简历。后来真正做下来才发现，Logo 设计不只是“好不好看”，还要回答三个更实际的问题：它能不能代表 JohnBuilds，它放进网页后是否协调，它能不能拆成不同尺寸继续使用。
这篇复盘记录的不是专业品牌公司的完整设计流程，而是一次个人网站里更真实的 Logo 落地过程：先确定方向，再用 AI 图像工具快速探索视觉可能性，然后筛选、裁切、导出，最后放进 HTML、CSS 和真实页面里反复检查。
1. 为什么这个网站需要 Logo
JohnBuilds 本身不是一个单篇博客，也不是一次性作品集。它更像一个长期项目入口，用来放 AI 网站、知识库系统、自动化流程、产品原型和制作复盘。这样的站点如果只有文字标题，虽然能用，但品牌感会比较弱。
我希望 Logo 解决两个问题。第一，让访问者进入首页时马上知道这是一个有明确名字和方向的个人项目。第二，让网站在导航栏、浏览器标签页、首页视觉区这些地方都有统一识别，而不是每个位置都临时拼一套样式。
Logo 在这里不是装饰，而是网站身份的一部分。
2. 先定方向：个人品牌感和 AI 科技感
一开始最容易犯的错误，是直接让 AI 生成“一个很酷的科技 Logo”。这种结果通常会很炫，但未必适合个人网站。JohnBuilds 需要表达的不是大型科技公司，而是“John 持续把想法做出来”的个人项目感。
所以我给 Logo 定了几个约束：
- 要有个人品牌感，不能太像通用 AI 公司标志。
- 要保留一点科技感，和 AI 网站、工具、自动化这些内容匹配。
- 要适合白底网页，不能只在黑色背景或海报里好看。
- 要能拆出一个简单图形，用在导航栏和 favicon。
- 不能太复杂，因为小尺寸显示时会丢细节。
这些约束看起来简单，但它们直接影响后面的筛选。不是每张好看的图都适合做网站 Logo，尤其是当它要同时出现在首页大图、导航小图标和浏览器标签页里的时候。
3. 用 AI 图像工具快速探索方案
这次 Logo 探索里，AI 图像工具主要负责生成视觉方向。它的价值不是一次给出最终答案，而是快速把不同可能性摆出来，让我能比较：哪种更像 JohnBuilds，哪种太重，哪种太普通，哪种放进网站以后会更协调。
早期方向里有一些金属质感比较强的方案，看起来更像游戏、硬件或者科幻海报。它们单独看很有冲击力，但放到 JohnBuilds 的白底页面里会显得太重，也会抢走正文和项目内容的注意力。
后来方向逐渐收敛到更轻的科技感：保留立体、发光、未来感这些元素，但整体不要太暗、太复杂。最后再从完整 Logo 里单独拆出 J 图形，用作导航栏的小标识和 favicon。
4. 筛选标准：不是最炫，而是最能落地
筛选 Logo 时，我没有只看第一眼冲击力，而是把它放回网站场景里判断。一个方案如果只适合做封面图，但放在导航栏里看不清，或者缩小后完全没有识别度，就不适合作为最终 Logo。
我主要按这几个标准筛：
- 首页大尺寸展示时，是否能撑住第一视觉。
- 导航栏 32px 小尺寸下，是否还能看出是一个独立标识。
- 浏览器标签页里是否不会糊成一团。
- 和 JohnBuilds 的页面颜色、字体、网格背景是否协调。
- 是否能同时服务“个人作品集”和“AI 项目入口”两个定位。
最后留下来的方案并不是最复杂的一版，而是更适合网页系统的一版。它能在首页作为完整 Logo 出现，也能拆出一个单独图形，进入更小的使用场景。
5. 从一张图拆成网站可用资产
Logo 设计真正落地时，不能只保留一张大图。网站至少需要三类资产：完整 Logo、图形标识和浏览器图标。它们的用途不同，尺寸也不同。
assets/logo.png：早期方形素材，保留为原始视觉资产
assets/logo-full.png：首页主视觉使用的完整 Logo
assets/logo-mark.png：导航栏和页面 favicon 使用的 J 图形
favicon.svg：浏览器图标的矢量版本这一步很关键。很多设计如果只停留在一张大图，真正放进网站时会很难用。完整 Logo 适合首页大视觉，但导航栏需要更简洁的图形。favicon 更极端，它只占很小一块区域，必须尽量清楚。
6. 放进 HTML 和 CSS 里检查真实效果
成品素材准备好后，下一步是把它放进真实页面。首页使用 assets/logo-full.png，导航栏和浏览器图标使用 assets/logo-mark.png。这样用户进入网站时能先看到完整品牌，再在浏览过程中持续看到小标识。
CSS 里也做了对应控制。导航 Logo 固定在 32px，使用 object-fit: contain，避免图形被拉伸。首页 Logo 则放在视觉卡片里，限制最大宽度和高度，让它在大屏和小屏上都不会撑坏布局。
这一步让我意识到：Logo 不是设计完就结束，它必须进入页面系统接受检查。文字会不会挤，导航是否平衡，首页视觉是否太重，手机端是否还能看清，这些都只能在真实页面里判断。
7. 用到的工具和分工
这次 Logo 从设计到落地，实际用到的是一组工具组合，而不是单一工具。
ChatGPT：梳理品牌定位、命名含义、文章复盘结构
AI 图像工具：快速生成 Logo 视觉方向和候选方案
Codex：处理网站文件、接入 Logo、调整页面链接和文章
HTML / CSS：把 Logo 放进首页、导航栏和浏览器图标
浏览器预览：检查 Logo 在真实页面里的比例和清晰度
Obsidian：保存项目过程、任务状态和长期复盘材料
Cloudflare：部署网站，让 Logo 最终在线上页面展示其中 AI 图像工具负责“探索可能性”，Codex 和 HTML/CSS 负责“把素材变成网站的一部分”，浏览器和 Cloudflare 负责“验证最终效果”。真正的判断仍然需要我自己做：哪一版符合 JohnBuilds，哪一版太重，哪一版适合长期使用。
8. 落地后的检查清单
Logo 上线前后，我更关心的是它在不同位置是否都稳定。因为网站 Logo 不是只给首页看的，它会出现在多个入口里。
- 首页主视觉是否显示完整 Logo。
- 导航栏左侧小图形是否清楚。
- 浏览器标签页 favicon 是否正常显示。
- 白底页面里是否不会显得太暗或太重。
- 移动端导航是否不会因为 Logo 和文字过宽而拥挤。
- 发布目录里的素材是否和本地页面一致。
这些检查不复杂，但很必要。Logo 一旦接入全站，如果路径错了、尺寸不合适，或者本地和发布目录不同步，线上看到的就可能不是最终版本。
9. 这次复盘给我的经验
第一，个人网站的 Logo 不需要一开始追求完整品牌系统，但要先有清楚的使用场景。首页、导航栏、favicon 是最基本的三个场景，只要这三个位置稳定，Logo 就已经从“图片”变成了“网站资产”。
第二，AI 很适合做视觉探索，但不适合替我做最终判断。AI 可以快速给出很多方向，可是哪些方向符合网站定位、哪些在网页里太重、哪些缩小后不可用，还是要回到实际页面里看。
第三，成品要拆分保存。保留原始大图、完整横版 Logo、小图形和 favicon，比只留一张图片更可靠。以后网站改版、做社媒图、做项目封面时，也能继续复用这些资产。
Logo 的落地标准不是生成成功，而是在网站里长期可用。
10. 总结
JohnBuilds Logo 的过程，可以概括成一句话：先用 AI 快速探索，再用人的判断收敛方向，最后用网页工程把它变成可复用的品牌资产。
它不是一次完美设计，而是一次实际落地。对 JohnBuilds 来说，这个 Logo 现在承担了三个角色：它是首页的第一视觉，是导航里的品牌识别，也是浏览器标签页里的小入口。只要这个网站继续更新，它就会继续作为 JohnBuilds 的视觉起点存在。
返回记录页