跳到主要内容

设计系统

Scoutello 应呈现温暖、可靠且以产品为核心的气质。推荐采用明亮、宽松、圆润并具有编辑感的视觉风格：先确保内容清晰，再加入细微的品牌色彩、柔和的表面和舒缓的动效，让产品显得响应灵敏，同时避免变成装饰性噪音。

营销落地页是当前视觉方向最清晰的公开参考。产品界面应尽可能复用共享设计令牌，只有在界面明确面向品牌或营销场景时，才采用更具表现力的设计。

Logo 和品牌资产​

当代理、集成或生成页面需要可复用的品牌标志时，请使用公共文档资源 URL 中的 Scoutello logo：

优先使用 SVG 版本，以确保在不同屏幕尺寸下都能清晰呈现。当工具或目标环境不支持 SVG 时，使用 PNG 版本。标志周围应保留足够的留白，避免拉伸或重新着色，并将其置于白色、暖奶油色或其他能够保持对比度的平静表面上。

品牌色彩​

主色： #ff8d49

使用主橙色作为 Scoutello 的强调色：主要行动号召、聚焦状态、激活的导航、小型图标背景、强调文本、柔和光晕和暖色渐变。在产品代码中，这对应 --primary: 24 100% 64%，以及 bg-primary、text-primary、border-primary/15 和 shadow-primary/10 等 Tailwind 类。

辅助色： #145466

使用深青绿色作为稳定整体的颜色。它最适合用于与主橙色搭配的渐变、深色行动号召面板、营造视觉层次，以及少量高强调度的品牌场景。不应使用它取代主橙色作为默认操作色。

辅助色彩：

  • 暖奶油色背景：#fff8f1、#fff4ea、#fcf6f1，以及柔和的 orange-50 / amber-50 表面。
  • 产品中性色：白色卡片、深色前景文本、透明度通常为 70–75% 的弱化文本，以及浅色边框。
  • 第三级蓝色：hsl(205 100% 51%) 可作为辅助令牌使用，但应控制使用频率，以确保橙色和青绿色作为品牌配色组合保持辨识度。

视觉风格​

优先采用简洁、精致的 SaaS 风格，同时保留足够的温度感，避免显得千篇一律。落地页结合了奶油色网状背景、白色卡片、大尺寸产品截图、圆角和克制的渐变。

推荐使用：

  • 圆角卡片和面板，圆角通常使用 rounded-2xl 到 rounded-[2rem]。
  • 使用 border-primary/10、border-primary/15、ring-black/5 等柔和边框，以及浅色中性边框。
  • 使用分层的白色或奶油色表面，避免使用大面积厚重的彩色块。
  • 使用 shadow-sm、shadow-lg、shadow-2xl shadow-primary/10 等柔和阴影，或自定义的低透明度阴影。
  • 使用大尺寸产品截图或 UI 模拟图作为证据，尤其适用于营销内容和功能介绍。
  • 使用少量品牌点缀，例如橙色强调文本、图标标签、环形元素、光晕和渐变 CTA。

避免使用：

  • 大面积使用醒目的橙色背景。
  • 在普通控件中过度使用青绿色。
  • 密集、拥挤的布局。
  • 生硬的阴影、锐利的矩形或冷峻的单色仪表板。
  • 干扰阅读或任务完成的装饰性动效。

字体排版​

营销网站使用：

  • 通过 landing-display 类使用 Space Grotesk 作为展示型标题字体。
  • 使用 Manrope 作为营销正文的字体。

共享应用和文档界面使用与系统一致的 UI 字体，目前更接近 Inter。各界面的风格目标保持一致：标题自信有力，标题字距紧凑，正文易读，并具有宽松的行高。

标题指南：

  • 在营销页面使用大而均衡的标题。
  • 仅使用主橙色突出重要短语。
  • 在可用时使用 max-w-* 和 text-balance 控制行长。

正文指南：

  • 保持段落平实直接。
  • 描述文字使用弱化的前景色，通常为 text-foreground/70 或 text-foreground/75。
  • 优先采用便于扫描的分区、简短段落和清晰标签。

布局和间距​

布局应显得宽敞且稳定。落地页使用 max-w-7xl 容器，并配合响应式水平内边距和较大的垂直分区。

常见模式：

  • 分区内边距约为 py-16、py-20；主要营销分区可使用更大的内边距。
  • 使用间距一致的响应式网格排列卡片。
  • Hero 区域采用有力的左侧内容栏，右侧放置产品截图或设备组合图。
  • 对于宽泛的产品价值主张，使用居中的分区标题；对于故事或工作流分区，使用左对齐标题。
  • 采用移动优先布局，在较大屏幕上再整洁地堆叠为多栏布局。

将留白作为设计的一部分。如果某个分区显得不够清晰，应先简化内容并增加呼吸感，再考虑添加更多装饰。

组件和表面​

Scoutello 的界面表面应具有触感，但保持轻盈：

  • 按钮：重要的营销 CTA 使用圆润的胶囊形按钮；其他场景使用标准产品按钮。
  • 卡片：使用白色或奶油色、圆角、带边框并略微抬高的卡片。
  • 图标：在橙色调标签中使用小巧、简洁的线性图标。
  • 数据和信任元素：使用带橙色调边框或渐变的克制卡片。
  • 表单：使用清晰的标签、直接的辅助文本，并为移动端操作保留足够间距。
  • 截图：尺寸较大、清晰，并略微抬高。将其作为产品能力的具体证据。

构建产品 UI 时，应优先使用现有的共享 UI 组件和设计令牌，而不是采用一次性的自定义样式。构建营销 UI 时，在适用的情况下使用落地页基础组件和落地页类名。

动效​

动效应让界面更精致，而不是更繁杂。落地页使用短暂的显现动画、设备上升效果、光晕绽放效果，以及轻微的悬停上浮效果。

推荐的动效：

  • 从 12–24px 的位置向上显现，并搭配柔和的透明度变化。
  • 悬停卡片仅上浮几像素。
  • CTA 悬停状态轻微上浮，同时加深阴影。
  • 在有助于内容叙事式浏览的情况下，采用分段错开的进入动画。

始终遵循减少动效偏好设置。避免使用可能隐藏内容、阻碍交互，或让人感觉必须依赖动效才能理解页面的动画。

语调与内容设计​

这套视觉系统最适合搭配直接、具体的文案。优先使用能够说明组织可在 Scoutello 中发布、管理或自动化哪些内容的语言。

建议使用：

  • 具体到产品的名词：落地页、图块、导览、活动、组织、仪表板、访客、二维码、翻译。
  • 以结果为导向的描述，将访客体验与运营人员的工作流程联系起来。
  • 在德语及其他本地化文案中使用性别中立的语言。

避免使用：

  • 缺乏示例的笼统平台表述。
  • 过于正式的企业术语。
  • 在适合使用易于浏览的分段内容时，采用冗长段落。

实用规则​

  • 使用 #ff8d49 作为主要品牌强调色，使用 #145466 作为次要的平衡色。
  • 在产品界面中，优先使用令牌化类名（primary、secondary、foreground、muted、border），而不是硬编码颜色。
  • 营销页面应保持温暖、宽敞、圆润，以截图为主，并搭配轻量动效。
  • 仪表板和运营界面应更沉稳；仅在必要时提高信息密度，并始终聚焦任务。
  • 如果产品已提供品牌控制项，应让客户自有的访客体验支持组织品牌；同时，Scoutello 自有界面应与这套系统保持一致。

相关概念：路线与界面、落地页与图块、浏览器优先的访客体验。