brand-visual-language

品牌视觉语言

视觉形状传达个性。圆角与尖角带给用户的感受不同，而且在用户读到一个字之前，这种感受就已传达。字体、圆角半径和图标中的形状应共同讲述一致的故事。

形状语言

形状	气质	适用领域
圆润、胶囊形	友好、亲切、活泼、现代	消费类应用、健康、儿童、生活方式、社交
柔和圆角（8–12px）	专业、温暖、易用	SaaS、效率工具、通用 B2B
轻微圆角（2–4px）	精准、规整、高效	企业工具、金融、数据平台
尖角 / 无圆角	技术感、严肃、权威	开发者工具、安全、工业

每个组件——卡片、输入框、模态框、徽章——都应遵循相同的圆角逻辑。

大面积表面的圆角半径

元素的感知“圆润度”会随其尺寸而变化。在按钮上显得柔和的圆角半径，放到大型容器上可能看起来很尖锐。

• 大型卡片和模态框： 通常采用比按钮更大的圆角半径（例如，如果按钮为 4px，大型卡片可以采用 8px 或 12px），以保持视觉气质一致。
• 凹槽和背景区域： 对于大面积背景或“凹槽”，通常采用较小的圆角半径（2px–8px），以塑造结构并界定区域，同时避免它看起来像一个“悬浮”组件。这样能让焦点留在其中的内容上，而不是容器本身。

从现有品牌识别形状语言

选择圆角半径之前，先查看品牌现有的素材：

• Logo： 它是圆润的、几何的，还是棱角分明的？Logo 的形状是经过设计的品牌决策。
• 产品摄影或插画风格： 圆润、活泼的插画传达的个性，与尖锐、技术感强的图表不同。
• 字体： 几何无衬线字体（Circular、Futura）的观感，与人文主义无衬线字体（Inter、Söhne）或锐利的编辑风格衬线字体不同。
• 竞争格局： 在一个棱角分明的市场中略显柔和，或在一个活泼的市场中更加规整，有时正是实现差异化的关键。

了解真实的形状语言，不要凭空推断（dembrandt engine，可选）。 对于已推出产品的品牌，不要仅根据 Logo 猜测，而应从其实际网站中提取真实的圆角半径、字体和气质：get_brand_identity 和 get_design_tokens 会从 DOM 中返回计算后的值。参见 extract-design。

字体与形状

字体形状同样传递着气质信号：

字体风格	气质
几何无衬线字体（圆形字母轮廓）	现代、简洁、略带活泼感
人文主义无衬线字体（笔画粗细有变化）	温暖、易读、专业
哥特式无衬线字体（中性、实用）	严肃、高效、简约
衬线字体	权威、成熟、编辑风格
圆角无衬线字体	友好、亲切、随性
等宽字体	技术感、面向开发者、精准

字体与圆角半径不应彼此矛盾。圆润、亲切的字体搭配尖锐的 0px 转角，会造成视觉上的不协调。

扩展品牌字体规范

品牌手册通常会指定一种展示字体或标题字体，却对正文字体语焉不详——只规定一种字重，没有阅读字号，也没有备用字体。这在奢侈品、时尚或历史悠久的品牌中很常见，因为品牌形象是为印刷品而非屏幕打造的。

当品牌手册对 UI 的指导不足时，可以有意识地扩展规范：

适合扩展的情况：

• 品牌字体在小字号下可读性较差（展示字体、装饰性字体）
• 品牌字体缺少构建 UI 层级所需的字重（没有常规字重、没有中等字重）
• 品牌字体未定义正文字体或阅读字体
• 品牌字体加载效果不佳（性能、许可、网页渲染）

扩展方式：

• 标题和展示文字仍使用品牌字体——品牌形象正是体现在这里
• 为正文添加一种辅助字体，要求它在语气上相辅相成，而非彼此竞争
• 保持造型语言一致：几何风格的品牌字体搭配几何风格的正文字体；人文主义风格的展示字体搭配人文主义风格的正文字体

Brand heading font (display, h1–h3): maintains identity
↓
Secondary body font (body, labels, UI copy): legibility and completeness

字体搭配原则：

• 角色上形成对比，个性上保持一致——两种字体应让人觉得属于同一款产品
• 避免将两种展示字体或两种个性鲜明的字体搭配在一起
• 中性、高品质的无衬线字体（Inter、DM Sans、Söhne）与大多数品牌字体搭配都很稳妥
• 如果品牌字体是衬线字体，简洁的无衬线正文字体就是自然的搭配；反之亦然

谨慎使用。 两种字体属于有意为之的扩展。三种字体几乎总是太多。记录这项决策及其理由，避免未来的设计师再添加第三种字体。

图标

图标风格必须符合品牌的造型语言。混用图标风格——有些纤细，有些粗重，有些填充，有些描边——会破坏视觉一致性，即使每个图标单独看都没问题。

图标风格	调性	适用场景
纤细／描边（1–1.5px 线宽）	极简、优雅、精致	奢侈品、编辑出版、高端 SaaS
常规描边（2px 线宽）	均衡、专业	通用 SaaS、效率工具
粗重／加粗（2.5–3px 线宽）	强烈、清晰、易于识别	消费类应用、移动优先产品、重视无障碍体验的产品
填充	扎实、自信、小尺寸下清晰	仪表板指示器、状态图标、移动导航
图标路径采用圆角	友好、亲切	消费类产品、生活方式、健康
图标路径采用尖角	技术感、精确	开发者工具、金融、数据

规则： 全程使用一个图标库和一种字重。如果无法避免混用（例如，所选图标库中没有某个专用图标），则手动匹配线宽和拐角样式。

使用标准图标；对于已有通用方案的概念，切勿自创图标

齿轮 = 设置，人形 = 个人资料，放大镜 = 搜索，房子 = 首页，垃圾桶 = 删除，铃铛 = 通知。另造替代图标只会增加理解成本，没有任何好处。在确定方案前，先搜索“icon [concept]”确认惯例。把设计自由留给没有既定图标的概念。

图标能让视线跳过文字——但只有含义明确的图标才行，而且只应在快速浏览有益的地方使用（导航、状态、行类型）。模糊或装饰性的图标只会增加操作负担，而不是减少负担；每个标签都配图标只会制造噪声。在恰当的位置使用恰当的图标。阅读是耗时过程，参见 [[ui-density]]。

Unicode 用于结构，图标用于表达含义

Unicode 字符（箭头、圆点、V 形符号）可用于辅助布局，即使显示效果有所退化也能保持可用。任何承载含义的内容都应使用随产品发布、渲染效果固定的图标。依赖字体的字符显示在状态栏中时，会因平台不同而有所差异。

表示动词的图标应属于按钮

铅笔、垃圾桶、加号：这些图标都代表一项操作。切勿将它们用于表示被动类型的标记。将铅笔用作行类型图标，会让人以为该行可以编辑，无论实际情况如何。

一个概念，一个图形，全产品系列统一

固定图标集版本。图标集会在不同版本中重绘图形，因此未固定版本的依赖项会在安装时改变产品的图形语言。在同一产品系列中，同一概念应在每款应用中使用相同的图形。

小尺寸时，先看颜色，再看形状

在 16px 下，字母宽约 3px，无法承载识别度。需要区分一组小图标（文件类型、应用磁贴、网站图标）时，应先用色相区分，再用形状区分。

跨元素保持一致

所有具有形状的元素都应遵循相同的视觉逻辑：

元素	通过以下方式应用形状语言
按钮	--radius-button
卡片	--radius-card（与按钮相同或略大）
输入框	--radius-input（通常与按钮相同）
徽章 / 标签	可以比按钮更圆润——常见的是胶囊形
模态框 / 抽屉	--radius-modal（通常为 12–16px）
头像	始终为正圆（--radius-full）
图标	描边粗细和转角样式与品牌相符
插图	形状风格与图标风格一致

执行指南前，先阅读其适用范围

在执行指南中的任何单一规范值之前，先找到指南对自身适用范围的说明。为印刷编写的手册会针对纸面油墨进行优化：浅灰色清晰易读，授权字体只需嵌入一次 PDF。这两点在屏幕上都不成立：同样的灰色与白色之间的对比度可能接近 2:1，而同样的字体通常根本无法通过 Web 字体管线提供。

当指南的媒介与实际工作的媒介不同时，指南是依据，而非铁律。 按字面执行会产出一个无障碍性不足、却符合品牌规范的产品；这也会让工程师对指南失去信任，导致他们不得不忽略指南，进而连其他规范也不再遵守。

将现有产品偏离指南的地方先视为发现，而不是错误。团队如果调整过文本颜色，通常已经遇到了你即将重新遇到的对比度问题。反过来也同样有代价：把每处偏离都当成规范漂移，会丢掉唯一一次对指南的实际审查。

区分两者的检验方法是：能否将这处偏离复现为屏幕上的限制？ 颜色发生变化，是因为原色的对比度只有 2:1；字体发生替换，是因为授权不涵盖 Web 字体；圆角发生调整，是因为原样式在 16px 下显示成一团模糊——这些都是发现，需要更新的是指南。没有任何限制能够解释的偏离，如果原值本来可行，那就是规范漂移，需要修正的是产品。应逐个值进行检验，而不是逐个产品；大多数产品组合中两种情况都有。

将这些差异作为发现反馈给品牌负责人。一本从未面对过屏幕的指南并没有错，只是不完整；最快的补全方式，就是列出它在何处遇到了限制。对比度下限见 [[wcag-accessibility]]。

为无法重写的软件应用品牌规范

大多数品牌工作并不是从干净的代码库开始，而是面对一整套现有系统：包括一个在 2015 年用当时流行的框架构建的门户，以及一个老到够资格投票的内部系统——员工整天盯着这些工具工作，因此这里的品牌体验同样重要。

有两点能让这项工作变得可行。第一，形状语言是最后才引入的，而不是最先。 旧版应用只需使用正确的 Logo、品牌色相和字体，就能令人信服地体现品牌；匹配圆角和图标样式属于第 3 级工作，在这类应用中通常不值得做。第二，逐个应用决定它要沿阶梯走多远——从识别、界面外框、设计令牌到组件，而不是把任何低于重写的做法都视为失败。阶梯和逐个应用的决策见 [[layout-paradigms-and-consistency]]。

旧版应用如果确实有变量——Bootstrap 或 Sass 构建通常都有——将品牌颜色和字体映射到这些变量上，就能以极少的工作换来大部分感知上的一致性。你追求的是辨识度，而不是忠实还原：用户应在软件加载后的一秒内知道这是哪家公司的软件。

审核清单

• 边框圆角令牌是否符合品牌的造型语言（徽标、插画、摄影）？
• 按钮、输入框和卡片是否采用相同的圆角规则？
• 字体风格是否符合整体品牌个性？
• 是否始终一致地使用单一图标库？
• 图标的笔画粗细是否符合品牌风格（精致风格用细笔画，易用性优先的风格用粗笔画）？
• 友好型品牌是否使用圆角图标，技术型品牌是否使用直角图标？
• 标准概念（设置、个人资料、搜索、删除、通知）是否使用惯用图标，而非自创图标？
• 是否只在有助于识别时使用图标，而不是把图标零散地用作每个标签的装饰？
• 承载含义的标记是否使用随产品发布的图标，并仅将 Unicode 用于脚手架？
• 动作图标是否仅用于表示操作，而从不用于标记类型？
• 图标集的版本是否已固定，且同一系列中的每个概念是否都使用同一个字形？
• 边框圆角是否根据表面尺寸进行调整（例如，模态框用较大的圆角，凹槽／背景用较紧凑的 2-8px 圆角）？
• 字体风格与形状选择之间是否不存在视觉矛盾（例如，圆润字体搭配尖锐卡片）？