设计思路
从策划到产品的完整设计历程
六个关键决策，让「吃瓜命理盘」从概念变成可玩、可传播的娱乐工具
◎ 四层同心圆架构
整盘是「固定底盘 + 可替换中层 + 中心指针」的嵌套结构
架构理念
东西方逻辑完全不同，但只换中间两层、外圈与圆心共用，所以「切系统」对用户来说只是盘面变色变字，不是换一个工具。
最外层：吃瓜标语装饰圈
功能：固定不变，定调「仅供娱乐」
设计：环绕文字，强化产品定位
技术：SVG 文本路径，自动环绕
元素环：五行/四象
东方：五行（木火土金水）5 色块
西方：四象（火土风水）4 色块
切换：系统切换时整环替换，带过渡动画
主盘环：核心交互层
东方：12 地支生肖（子鼠、丑牛...）
西方：12 黄道星座（白羊、金牛...）
交互：可点选、可旋转、高亮选中态
动画：入场动画 + 旋转效果
圆心：品牌标识
东方：阴阳符号（黑白太极）
西方：银河核（星云渐变）
指针：双金色指针，分别指向两位选手
为什么这样设计？
- 降低认知成本：用户只需切换系统，盘面自动适配
- 视觉一致性：两套系统共用框架，品牌感统一
- 技术复用：同一套 SVG 渲染逻辑，代码简洁
- 扩展性好：未来加新体系只需替换中间层
⬡ 配色语义化：不只是好看
颜色即信息，用户看颜色就懂关系
三套配色体系
☯ 东方体系：国风马卡龙
✦ 西方体系：星云渐变
🌌 统一底盘：银河夜色
🎯 关系连线：颜色即语义
真正干活的是三条线的颜色规则，用户不用读字，看连线颜色就懂这对行不行：
六合、三合、相生、三分相 → 甜蜜、和谐、互补
相冲、相克、对冲、刑相 → 冲突、竞争、拉扯
无明显关系 → 普通、无感、各走各路
🎁 彩蛋设计
东方盘：五行相克连成的红色五角星，既准确又好看，是东方体系的签名彩蛋。
西方盘：银河核的星云渐变，营造神秘感和科技感。
⟲ 关系算法：把命理写成代码
确定性算法，同一对永远同一分
东方体系算法
计算冲（相隔6位）、六合（6对）、三合（4组）
相生 +8 分，相克 -11 分，比和 ±0 分
基础分 ± 微调，限制在 12-98 之间
东方评分标准
| 关系类型 | 基础分 | 说明 |
|---|---|---|
| 六合 | 90 | 最佳配对，如子鼠+丑牛 |
| 三合 | 84 | 优质配对，如申子辰 |
| 相生 | +8 | 木生火、火生土等 |
| 比和 | ±0 | 同五行，无加减 |
| 相克 | -11 | 木克土、土克水等 |
| 相冲 | 30 | 最差配对，如子鼠+午马 |
西方体系算法
计算合（0°）、三分（120°）、六分（60°）、刑（90°）、冲（180°）
同象 +10 分，相性元素 +5 分，异象 ±0 分
基础分 ± 微调，限制在 12-98 之间
西方评分标准
| 相位类型 | 角度 | 基础分 |
|---|---|---|
| 三分相（Trine） | 120° | 90 |
| 六分相（Sextile） | 60° | 78 |
| 同星座 | 0° | 70 |
| 对冲相（Opposition） | 180° | 44 |
| 刑相（Square） | 90° | 34 |
🎯 算法设计原则
- 确定性：同一对永远算出同一个分，避免「一眼假」
- 有起伏：不同对之间有差异，有高分有低分
- 可解释：每个分数都有明确的算法依据
- 双体系独立：东方和西方算法完全独立，互不影响
✦ 话术全部翻译成「娱乐圈语」
不出现一句封建命理话术
翻译原则
所有结论只落在营业、荧幕CP、绯闻舆论、二搭搭档这些吃瓜场景里。
命犯凶煞
资源对家、绯闻翻车
天作之合
官配预定、荧幕天选
桃花劫
绯闻争议、舆论翻车
贵人相助
二搭搭档、资源互补
🎭 人设化表达
每个元素/星座都有对应的「吃瓜人设」，让用户一看就懂：
火象 · 热搜体质
易爆恋情、撕逼上头、三天一小吵五天一大吵
土象 · 低调隐恋
不公开、长期稳定、细水长流型
风象 · 营业拉扯
社交暧昧多、营业感重、思想碰撞型
水象 · 狗血情感
情绪纠葛、爱恨一体、灵魂共鸣型
⇄ 双体系互译：给「双解」找台阶
让用户产生「五行和星座都这么说」的双重盖章感
互译逻辑
🎯 传播价值
- 双重盖章：五行和星座都这么说，增加可信度
- 话题性：双解石锤 or 双解矛盾，都是好话题
- 分享欲：用户更愿意分享「两边都准」的结果
- 传播点：这正是吃瓜内容最爱的传播点
⚖ 合规前置：不当真是设计的一部分
让「理性吃瓜」不是免责声明，而是产品定位本身
三重保障
标语点题
页面顶部、轮盘外圈反复强调「仅供娱乐」
弹窗提醒
首次使用时弹出免责声明弹窗
页脚声明
页脚固定显示「理性吃瓜，请勿当真」
🚫 规避内容
- ❌ 人生祸福预测
- ❌ 婚姻成败判断
- ❌ 职业发展建议
- ❌ 健康风险提示
- ❌ 财务投资决策
✅ 聚焦内容
- ✅ CP 热度分析
- ✅ 舆论走向预测
- ✅ 荧幕搭配建议
- ✅ 绯闻概率评估
- ✅ 娱乐八卦解读
🛠 技术架构
前后端分离，零依赖，高性能
前端技术栈
纯 CSS3
变量系统、渐变、动画、响应式
原生 JavaScript
零依赖，ES6+，模块化设计
SVG 矢量
轮盘、图标、动画全部矢量化
响应式设计
完美适配桌面、平板、手机
后端技术栈
PHP 7.4+
轻量级，高性能，易部署
Redis + 文件
Redis 缓存 + 文件降级方案
JSON 数据
数据配置化，易于维护和扩展
一键启动
php server.php 即可运行
架构优势
- 零依赖：前端不依赖任何框架或库
- 高性能：首屏加载 < 1s，流畅运行
- 易部署：一个命令启动，无需复杂配置
- 可扩展：模块化设计，易于添加新功能
- 离线可用：前端完全静态，支持离线访问
🎯 用户体验设计
让每次点击都有反馈，每次交互都有惊喜
交互设计原则
即时反馈
每次点击都有视觉反馈，悬停、选中、动画
流畅动画
转盘旋转、分数跳动、弹窗滑入，所有过渡都丝滑
视觉层次
重要信息突出，次要信息弱化，引导用户注意力
状态保持
切换系统不丢失选择，历史记录持久化
🎁 惊喜设计
- 转盘动画：点击「开转」时盘面旋转 3-5 圈
- 呼吸光晕：轮盘底部有缓慢脉动的光晕
- 粒子漂浮：20 个光点漂浮，营造神秘感
- 海报二维码：真实可扫的二维码，便于分享
- 双解石锤：东西方结果一致时的特殊提示
- 历史记录：自动保存，随时回顾
📊 数据可视化
将抽象的命理关系转化为直观的视觉表达：
- 分数环：环形进度条，直观显示适配度
- 关系线：金线/红线/灰线，颜色即语义
- 标签云：关系类型、元素属性，一目了然
- 对比模式：东西方结果并排，方便对比