Voiceflow

在日光下呈现的编辑白板——衬线字体轻声细语,交互控件泛出蓝色光泽。
Voiceflow 以编辑产品画布的形式运作:一个宽敞的近白色表面,其中轻盈的衬线字体(Tiempos Headline 300)承载语气,而人文无衬线字体(Selecta)负责处理技术细节。整个系统以无彩色为主——温暖的米白、石墨色文字、细线边框——仅有一个鲜明的蓝色(#397dff)作为主要操作的“开启开关”,以及一个烧焦的橙色(#f55c15)用于装饰性笔触、徽章轮廓和图标点缀。交互层面采用胶囊形控件(999px 按钮,100px 导航胶囊),表面层级则采用柔和圆角(20px 卡片),形成一种控件触感可及、界面表面可握的语感。整体节奏宽敞、自信且具编辑性——标题字大小在 56–64px 之间,正文文字为 16px,搭配充足的字间距,呈现出杂志与产品结合的审美风格。
查看原始网站使用规范
建议采用
- 所有标题和显示数字均使用 Tiempos Headline 300 字重——切勿加粗,轻盈字重是其标志性特征
- 所有主要操作按钮、激活导航项和公告栏均应使用 Signal Blue(#397dff),且每个视口内仅出现 1-2 处
- 所有 16px 及以下正文与 UI 文字使用 Selecta 正字间距(0.025em);当字号超过 20px 时,转为 Tiempos 负字间距
- 所有交互控件使用胶囊形状(999px),导航项为 100px;仅卡片表面保留 20px 圆角
- 正文文字设为 16px Selecta 400 字重,行高 1.55 作为段落的通用默认值
- 交替使用白色(#ffffff)和 Bone(#f5f5f4)作为区块背景,以营造节奏,无需使用阴影或色彩
- 将产品演示卡片(聊天、分析、工作流)作为浮动叠加层置于满幅摄影背景之上,而非置于有边框的容器内
建议避免
- 切勿加粗 Tiempos Headline——该字体仅提供 300 字重,加粗会破坏编辑性的整体氛围
- 切勿将 Signal Blue 用于装饰元素、大面积表面或超过几词的文本——它的职责仅是标记主要操作
- 切勿在内容卡片上使用阴影——系统偏好使用 1px #e5e5e5 细线边框来定义表面边界;仅在卡片浮于摄影之上时使用阴影
- 切勿引入额外的强调色——色彩方案刻意限定为两种(蓝色用于操作,橙色用于装饰)搭配中性背景
- 切勿将标题尺寸设低于 36px 在 Tiempos 中——衬线字体需要尺度才能体现编辑性;低于 20px 时切换至 Selecta 500 字重
- 切勿对超过两行的正文段落进行居中对齐——仅标题、CTA 和短副标题使用居中对齐
- 切勿在可见表面使用方形角或小圆角(4–8px)——系统的柔和感由 14/20/999px 圆角定义,尖角会显得突兀