企业官网建设流程全解析

• 前端
• 智能家居
• UI组件

作为社区成员，我们为 Home Assistant 的 Logo 感到自豪。这是一份面向开发者、设计师与社区贡献者的完整品牌规范指南，覆盖 Logo 的设计内核、布局变体、颜色与背景选择、排他区、动画与最小尺寸等全部规则，并结合当前前端仓库中真实的 SVG 实现与调用场景进行源码级佐证。读完本文，你将能准确判断在任何界面、印刷物或深色主题下该使用哪一种 Logo 变体，并了解项目内 Logo 组件的底层实现方式。

我们的 Logo：概览与商标声明

Home Assistant 的 Logo 是项目与社区身份认同的核心视觉符号。它由一个**图标（logomark）与文字标识（wordmark）**组成：图标是"带天线的蓝色房子"（Blue House with Antenna），文字标识则是 "Home Assistant" 的品牌字标。二者既可以组合使用，也可以单独出现，但规则上有一条不可违背的铁律——logomark（图标）可以脱离 wordmark 独立存在，wordmark 却永远不能脱离图标单独使用。

重要声明：本 Logo 是 Open Home Foundation（开放家居基金会）的注册商标与资产，未经基金会书面明确许可，不得用于商业用途。所谓"商业使用"，指任何以推广或营销待售产品、软件或服务为目的的使用。如有相关需求，请联系 partner@openhomefoundation.org。这一点在仓库内同样有配套说明——品牌资源目录 中明确注明：该目录下的资产不属于本仓库所附的 CC 许可范围，所有权利保留（All rights reserved）。

设计理念：蓝色、房子与天线

Logo 的核心在于 "Blue House with Antenna"——带天线的蓝色房子，它源自过去十年中前版 Logo 最鲜明、最易识别的三个特征，被完整保留并进一步凝练。

蓝色（Blue）

蓝色传递稳定与本质感。明亮的天蓝色（sky blue）令人愉悦、清澈、万里无云。在项目实际代码中，这个蓝色被精确地固化为#18BCF2——见 ha-logo-svg.ts 中 SVG 路径的fill="#18BCF2"，配合fill="#F2F4F9"的浅色前景，构成了品牌的标准配色。

房子（House）

在所有可能的形状组合中，"家"最理想的抽象形态是一座带人字屋顶（pitched roof）的结构。在极大量同类 Logo 都采用这一外形的前提下，设计上做了进一步简化：没有山墙（gable）、没有烟囱（chimney），最终凝练为正交几何形状，并配以优雅、经过精心推敲的比例。从代码可以看出，整体图形被放置在一个viewBox="0 0 240 240"的正方形画布中，主体色块由一个房顶与一个带镂空天线的房身路径构成。

天线（Antenna）

你可以叫它树、节点集合、PCB 电路板或天线。天线是旧版 Home Assistant Logo 中最具辨识度、最令人难忘的部分，也是一个易于理解的符号——它传达着"智能、互联、常青生长"的技术意象。在 SVG 实现中，它体现为房身中央那条贯穿的白色竖线与其顶端分叉结构，简单、抽象且高度可记忆。

使用规范：默认形态与四种布局变体

默认形态是静态彩色 wordmark、横向布局、深色文字置于浅色背景。在此基础上，规范定义了四种布局变体，你需要根据上下文严格选择：

规范还给出了一个重要的正误判定：logomark 可以在没有 wordmark 的情况下单独存在，但 wordmark 永远不能脱离图标单独使用。

颜色变体、背景与放置规则

默认配色是彩色版本 + 浅色背景 + 深色文字。具体场景对照如下：

• 深色背景（例如深色主题的页面）：使用彩色版本 + 深色背景 + 浅色文字。
• 印刷材料无彩色条件：使用单色（monochrome）颜色变体。
• 深色或照片类背景：使用"深色背景上的浅色单色"变体。
• 浅色或照片类背景：使用彩色版本，不要使用单色变体。

同时必须遵守以下禁止事项：

• 不要将 logomark 放入方形色块或任何受限背景中，除非是受其他公司应用市场规则强制要求的场景（例如 iOS 的 App 图标）。
• 不要给 logomark 或 wordmark 添加投影（drop shadow）。若因背景导致可读性受损，应更换背景以增强对比度；万不得已时才可添加重度模糊的投影。
• Logo 只应与黑白照片及非双色调（non-duotone）摄影搭配使用。
• 与旧版 Logo 不同，当前版本不提供描边（outline）变体；需要描边形态的场合一律改用单色变体。

排他区（Exclusion Zone）：Logo 的个人空间

Logo 需要呼吸空间。其排他区（安全留白）等于图标高度的四分之一——即图标四周至少保留icon_height / 4的空白，任何其他元素、文字或图形都不得侵入该区域。这是保证 Logo 视觉完整性与辨识度的最低要求，也是页面排版、物料制作中最容易被忽视的一条硬性规则。

动画使用规则

• 默认形态是静态变体。
• 带动画变体仅用于开场/介绍性场合，例如视频片头或加载屏。
• 带声音的动画变体仅当当前语境下声音是合理预期时才可使用：例如视频开头（视频中本就期待声音）可以使用，但加载屏不可以（用户界面中不应突然出声）。
• 动画不得循环重复播放。

尺寸与 App 图标变体

针对极小空间，规范提供了专用的 tiny（微缩）变体：当 logomark 需要在非常小的空间（16×16 dp）中使用时，例如 Home Assistant 网站的 favicon、Android 上的通知图标、macOS 的菜单栏图标，应使用 tiny 变体，以保证在小尺寸下的可识别性。

仓库内的真实实现：ha-logo-svg 组件

以上规范在前端仓库中有着直接的代码落地。核心实现位于 src/components/ha-logo-svg.ts，它以 LitElement 封装了一个内联 SVG：

• 画布为viewBox="0 0 240 240"；
• 主体屋顶与房身使用品牌蓝#18BCF2，前景与天线细节使用#F2F4F9；
• 组件通过--mdc-icon-size（默认 24px）控制渲染尺寸，可像普通图标一样被主题变量缩放，这正对应了品牌规范中"不同场景用不同尺寸变体"的设计意图；
• 填充色使用currentcolor继承上下文，便于在深色主题等场景下做色彩适配。

该组件已被实际应用于 ha-config-info.ts 的"关于/信息"页面头部，点击后跳转到官方文档——这是"上下文清晰时可直接使用 logomark"这一规则在 App 内的典型体现。此外，在 gallery 侧边栏配置 中，Brand 分类使用mdiPalette图标，收录了本规范（logo）、品牌故事 与 品牌个性 三份文档，而本页面则通过 logo.ts 引入ha-alert组件来渲染商标提示框。

快速自查清单

在正式提交使用 Logo 的设计或代码前，对照以下清单逐项检查：

1. 场景上下文是否已明确是 Home Assistant？不明确则用横向 wordmark；明确（如 App 内）才可只用 logomark。
2. 空间宽高比是否小于 4:3？是则用纵向 wordmark。
3. 背景是深色还是照片类？深色用浅色单色或深底浅字，浅色用彩色版本。
4. 四周是否保留了至少图标高度 1/4 的排他区？
5. 是否添加了投影、描边或色块底？一律去除。
6. 是否使用了动画？仅在视频片头等介绍性场景使用且不循环。
7. 是否用于 16×16 dp 的极小微缩空间？是则改用 tiny 变体。
8. 用途是否涉及商业推广？若是，需先取得 Open Home Foundation 的书面许可。

• 前端
• 智能家居
• UI组件