8 种前台视觉方向：设计风格参考留存
做前台视觉升级时探索了 8 种设计方向，每种都做了完整的首页、详情页、关于页、归档页 mockup。从工程蓝图到故障艺术，从报纸排版到像素 RPG，附完整交互预览链接。
做前台视觉升级时，探索了 8 种完全不同的设计方向，每种都做了完整的首页、详情页、关于页和归档页的 mockup。最后还做了一个混搭版把最好的元素融合在一起。
这里做个归档留存，方便以后回来参考，或者在其他项目里复用。
完整交互预览（可以 hover 看动效）：
1 — Blueprint · 工程蓝图
深蓝底 + 网格线 + 工程标注。折叠线角标、旋转指北针、坐标轴、尺寸标注线、审核章。像一张真正的工程蓝图铺在桌上，每张卡片是一个零件，hover 菱形标记高亮，卡片有编号分区。
关键词：深蓝底、白色网格、工程标注线、零件编号、指北针
适合场景：技术项目展示、开发者个人站、架构文档
2 — Pixel Quest · 像素游戏
8-bit RPG 道具系统。闪烁星空背景、旋转金币计数器、成就弹窗、物品稀有度等级（Legendary / Epic / Rare）、多条属性条（HP/MP/XP）、道具子标题、hover 滑动效果。每篇文章是背包里的一个道具。
关键词：像素字体、星空背景、金币动画、稀有度标签、RPG 属性条
适合场景：独立开发者站、游戏化内容平台、个人成长记录
3 — Mech HUD · 机甲仪表盘
驾驶舱 HUD。六边形网格背景、开机引导文字、三路能量表（引擎/武器/护盾）、雷达带闪烁光点、角落装饰支架、威胁等级指示条、target-lock hover 动画、橙色警告条。坐在机甲里看信号。
关键词：六边形网格、HUD 支架、能量表、雷达光点、橙色警告
适合场景：数据监控面板、硬核技术站、赛博朋克风格项目
4 — Broadsheet · 报纸头版
真正的报纸排版。Breaking News 滚动条、纸张纹理、咖啡渍、首字母下沉、分类广告栏、天气角标、Playfair Display 报头字体。像摊开一张真正的早报。
关键词：衬线字体、多栏排版、纸张纹理、首字母下沉、咖啡渍
适合场景：长文阅读站、编辑精选型媒体、内容策展
5 — Retro OS · 复古操作系统
Win95 窗口管理器。桌面图标（回收站/我的电脑）、地址栏、进度条对话框动画、底部任务栏 + 开始按钮 + 时钟、点击凹陷按钮效果。内容是「文件浏览器」里的条目，带文件类型图标。
关键词：Win95 窗口、任务栏、凹陷按钮、文件图标、进度条对话框
适合场景：怀旧风格项目、工具型产品展示、创意作品集
6 — Data Grid · 数据仪表
GitHub Dark + Grafana 混合风格。贡献热力图、终端日志流、统计卡片侧边色条、每张卡片内嵌迷你柱状图、sparkline 趋势线。Hover 卡片上浮 + 蓝色边框。极客向。
关键词：暗色主题、热力图、迷你柱状图、终端日志、Sparkline
适合场景：开源项目展示、数据驱动型站点、开发者仪表盘
7 — Glitch Wave · 故障艺术
赛博朋克故障美学。VHS 跟踪线动画、画面撕裂效果、RGB 通道分离持续动画、数据腐蚀条、频道切换器、卡片 hover 微倾斜 + glitch 抖动、信号强度指示器。标题文字持续闪烁故障。
关键词：RGB 分离、画面撕裂、VHS 噪点、故障抖动、频道切换
适合场景：创意工作室、实验性项目、音乐/视觉艺术
8 — Isometric Fab · 等距工厂
现代工厂流水线隐喻。圆点底纹、Pipeline 进度条（Draft → Review → Published）、传送带动画 + 彩色方块滑过、旋转齿轮、机械臂摇摆、卡片内嵌 Build 进度条、底部产量计数器。「智造」就是流水线。
关键词：传送带动画、齿轮旋转、Pipeline 进度、产量计数器、圆点底纹
适合场景：CI/CD 可视化、生产力工具、项目管理型站点
混搭版：Signal Press
最终还做了一版混搭方案，把多个方向的优势元素融合到一起：
- 首页：报纸版面 + 道具稀有度 + 工厂状态
- 详情页：特稿排版 + 任务卷轴 + 构建进度
- 关于页：主编寄语 + 角色面板 + 工厂简介
- 归档页：往期索引 + 物品清单 + 产品目录