wantsong
/
knowledge-vault
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
knowledge-vault/work/internal/Company/市场营销/强哥市场/成果0.2版/1.3-DeepThink Lab 交互美学定义书.md

5.9 KiB
Raw Blame History

DeepThink Lab 交互美学定义书

1. 品牌与入口 (Brand & Entry)

  • 平台全称: DeepThink Lab | 深渊认知实验室
  • Logo 符号:
    • 主图形: 一个**“彭罗斯三角”或“超立方体”**的线框图。
    • 隐喻: 不可能的结构、多维空间、深层逻辑。
    • 颜色: 渐变色，从深渊黑 (#0A0A0A) 过渡到 高压蓝 (#00FFFF)。

2. Tier 1: 傻瓜工具 (The Vending Machine)

设计哲学: Don't Make Me Think (别让我思考)。极速、无痛、多巴胺。

  • 视觉风格 (Visual Style): Radical Simplism (激进极简主义)。
    • 参考对象: Google 搜索主页、Typeform、iOS 快捷指令。
    • 背景: 纯白 (#FFFFFF) 或 极淡的灰 (#F5F5F7)。
    • 核心交互: 单列流 (Single Column Flow)。
      1. 输入框（大字号）。
      2. 一个巨大的、带有微妙阴影的 “生成”按钮 (主色调 Warning Yellow #FFD700，沿用 IP2 色系)。
      3. 结果直接弹出，伴随彩带特效 (Confetti)。
  • 关键微交互 (Micro-Interactions):
    • 加载动画: 极快。一个简单的旋转圆圈，文案显示“正在窃取高维智慧...”。
    • 复制按钮: 巨大且显眼。点击后，按钮变成绿色“已复制”，手机震动反馈 (Haptic Feedback)。
  • 字体策略:
    • 系统默认无衬线字体 (San Francisco / Roboto)，字重偏粗，确保视力不好的中年人也能看清。

3. Tier 2: 深度工具 (The Cockpit)

设计哲学: Power & Control (力量与掌控)。复杂、精密、赛博格。

  • 视觉风格 (Visual Style): Cyber-Industrial (赛博工业风)。
    • 参考对象: Linear, VS Code (Zen Mode), 彭博终端, 钢铁侠的 HUD。
    • 背景: Deep Dark (#050505)。不是纯黑，是带有极低噪点的深灰，长时间注视不伤眼。
    • 核心交互: 三栏式布局 (Three-Pane Layout)。
      • 左侧: 资产/历史记录 (可折叠)。
      • 中间: 无限画布 (Infinite Canvas) 或 沉浸式对话流。
      • 右侧: 参数检查器 (Inspector)，显示 Token 消耗、逻辑拓扑图。
  • 视觉锤 (Key Elements):
    • Monospace Font (等宽字体): 所有生成的内容默认使用代码字体 (JetBrains Mono)，暗示“这是经过计算的结论，不是文学创作”。
    • Neon Accents (霓虹点缀): 关键数据（如置信度、深度）使用极细的 Electric Blue (#00FFFF) 线条高亮。
    • Glassmorphism (毛玻璃): 浮动面板采用磨砂玻璃效果，增加层级感。
  • 关键微交互:
    • 加载动画: “思维显影”。
      • 不要转圈圈。要像黑客帝国一样，快速滚动绿色的代码流或逻辑节点的连接过程。
      • 目的: 展示“计算过程的复杂性”，让用户觉得这钱花得值（Perception of Value）。

4. 物理隔离与转化通道 (Isolation & Upsell)

  • 隔离: Tier 1 界面中完全不出现 Tier 2 的复杂参数。
  • 转化通道:
    • 在 Tier 1 的结果页底部，设计一个深色的、带有锁形图标的卡片。
    • 文案: “觉得这个结果太浅？解锁 Pro 版深渊模式，获取企业级深度分析。”
    • 交互: 点击后，界面瞬间从“白天模式”切换为“黑夜模式”（Dark Mode Transition），产生“潜入深海”的视觉震撼。

Midjourney Prompt Template (For UI Mockups)

指令: 用于生成产品宣传图、官网配图或给开发者的参考图。

## 🤖 Midjourney Prompt Template (SaaS Interface)

**Template Structure**:
`[UI Type]`, `[Device/Frame]`, `[Content/Elements]`, `[Color & Vibe]`, `[Style Reference]`, --ar 16:9 --v 6.0 --style raw

**Presets (预设)**:

*   **Type A: Tier 1 (Simple)**
    *   `[UI Type]`: Mobile App UI design, minimalist input interface.
    *   `[Content]`: A large bold input field, a massive yellow "Generate" button, clean white space.
    *   `[Style]`: Neumorphism, clean, airy, high key lighting, Dribbble trend.
    *   `[Color]`: White, Light Grey, Warning Yellow accents.

*   **Type B: Tier 2 (Deep)**
    *   `[UI Type]`: Desktop Dashboard UI design, complex data visualization, AI agent workflow.
    *   `[Content]`: Code editor aesthetics, floating holographic data panels, node-based graph editor, chat stream with monospace font.
    *   `[Style]`: Cyberpunk industrial, dark mode, glowing thin lines, translucent glass layers.
    *   `[Color]`: Deep Black background, Electric Blue and Neon Purple thin lines.

**Example Prompts**:
1.  *Tier 1*: "Mobile UI mockup, minimalist tool generator, huge yellow button saying 'START', clean white background, soft shadows, high readability --ar 9:16"
2.  *Tier 2*: "Futuristic dashboard interface on a laptop screen, dark mode, displaying complex cognitive architecture graphs, glowing blue data streams, matrix style code rain background, professional software aesthetic --ar 16:9"

⚠️ 设计师的最终备忘 (Designer's Final Note)

  1. 关于“加载动画”的心理学:

    • Tier 1 的用户没有耐心，加载超过 2 秒他们就会关掉。所以 Tier 1 必须预加载或即时反馈。
    • Tier 2 的用户付了高价，如果结果 0.1 秒就出来，他们会觉得“这不就是个简单的 API 吗？”。所以 Tier 2 甚至要故意人为延迟 (Artificial Latency) 3-5 秒，展示复杂的“正在推理... 正在检索知识库... 正在校准逻辑...”的动画。这叫 Labor Illusion (劳动幻觉)，能极大提升信任感。

  2. 字体即阶级:

    • Tier 1 用无衬线体（平易近人）。
    • Tier 2 必须混入衬线体（标题）或 等宽体（正文）。这是一种视觉隐喻：衬线体代表古典智慧（芒格），等宽体代表现代技术（AI）。