精选 · 开放 · 免费

Umami

Umami 是一个简单的、注重隐私的开源网页分析工具，作为 Google Analytics 的替代方案。

01

设计气质 DNA

一个简洁的网站数据分析仪表盘。

02

色彩

采用干净的高对比度调色板，在中性的白色背景上使用单一的蓝色强调色来标识主要操作。

03

字体

humanist-sans · monospace

• display63px · 800
• heading42px · 700
• body14px · 400
• small11px · 400

标题字体使用粗体的人文主义无衬线字体，字间距紧凑。 · 正文使用常规字重的人文主义无衬线字体以确保可读性。 · 文档中的代码片段使用等宽字体。

04

间距

间距体系基于 7px 的基础单位。

05

表面 (圆角 / 阴影 / 边线)

1px solid rgba(0, 0, 0, 0.05)

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 1px 2px -1px · rgba(0, 0, 0, 0.1) 0px 8px 10px -6px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px · rgba(0, 0, 0, 0.15) 0px 10px 40px 0px

06

布局

主视觉区域采用单列布局，功能与内容区域过渡为多列网格。

07

动效与交互

hover 和 focus 时颜色与背景色的平滑过渡。 · 图表等动态内容的淡入效果。

按钮和链接等交互元素在 hover 时发生颜色与背景色变化。 · 点击时发生细微的背景色变化。

08

组件

• button 主要操作按钮为蓝色圆角矩形，白色文字。
• card 用于展示界面原型的白色卡片，带有细微边框和浅色阴影。
• chip 用于显示指标百分比变化的圆角小标签。
• input 带有细微边框的标准文本输入框。
• hero 大型居中的主视觉区域，包含粗体标题、副标题和主要号召性操作按钮，下方紧跟一个界面原型。

09

文案语气与禁用清单

• 语气 直接、自信且乐于助人，强调简洁与隐私。
• 标题风格 粗体、大号且简洁的陈述，突出核心价值主张。
• 按钮文案 清晰且以行动为导向，使用诸如“免费开始使用”等短语。

• 不要使用深色背景——截图显示的是以白色 (#ffffff) 为主的背景。
• 不要使用多种强调色——截图显示只有单一的蓝色 (#3366FF) 强调色。
• 不要使用半径大于 9.45px 的圆角——截图显示的是保守的圆角处理。
• 不要在所有元素上使用投影——截图显示投影仅用于卡片等特定组件。
• 不要为标题使用衬线字体——截图显示所有标题均使用人文主义无衬线字体。
• 不要使用拥挤狭小的布局——截图显示留有充足的白空和内边距。
• 不要使用内容密集、信息量大的主视觉区域——截图显示的是清晰、聚焦的标题和单一的号召性操作按钮。
• 不要使用深色模式主题——截图显示的是浅色主题。
• 避免: 使用复杂术语或过于技术性的语言。
• 避免: 过度推销或使用夸张词汇。
• 避免: 使用俏皮或过于随意的语气。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko