#仪表盘第二章：我们一起重新设计卡片吧！

自从我们宣布 Project Grace 以来，我们每个月都在稳定地发布新仪表盘设计的更新，我们的新网格系统终于成熟到了我们希望我们的贡献者社区参与进来的程度！

如果您是 UX/UI 设计师或自定义按键开发人员，希望为 Home Assistant 项目做出贡献，请注册成为我们的仪表盘工作组的一员，并详细了解如何提高自定义按键的兼容性。

#自上一章以来有哪些新内容？

感谢您的反馈，我们继续构建网格系统和部分布局，具有以下功能：

• 部分的最大列选项 (2024.4)
• 拖放关联功能 (2024.5)
• 部分和动作的可见性选项 (2024.6)
• 仪表盘背景 (2024.6)
• 在剖面视图上可调整大小的交互 (2024.7)

查看相应的博客了解更多详细信息。

#新徽章！

在即将到来的 2024.8，我们将推出重新设计的徽章。

最初的徽章早在 2015 年 8 月的 版本 0.7 就已创建，此后其设计没有太大变化。徽章设计位于仪表盘视图的顶部，一目了然地提供了您需要了解的最重要信息的摘要。

根据我们对用户创建仪表盘的案例研究，我们发现这些徽章未得到充分利用，主要是由于其外观过时、体积庞大以及 UI 中缺乏可配置选项。相反，我们发现许多用户正在使用由同样在 Nabu Casa 工作的 @piitaya 创建的 Mushroom Chip 调整，用于类似的目的。因此，我们决定重新设计徽章以匹配蘑菇片的设计。

新徽章在 UI 中具有多种可配置选项。对于每个单独的徽章，您现在可以指定图标、名称和/或状态是否可见，并且您可以配置每个组件中的内容：状态可以包含要显示的多个属性，并且图标可以替换为人物头像或媒体播放器记录遮盖的实体图片。

新徽章还提供可见性选项，允许您根据谁正在查看仪表盘、显示的屏幕尺寸、实体是否处于某种状态等来显示或隐藏它们。

徽章可以通过拖放轻松重新排序，并且它们还具有新部分视图中的“调整”所具有的复制、粘贴和重复功能。最后但并非最不重要的一点是，新徽章在新剖面视图和旧砖石视图中均有效。

#响应开发者注意事项在默认安装中，我们提供了一种内置徽章，即实体徽章。但是，您不限于此，因为您可以构建和使用自己的！

定义徽章的方式与定义自定义响应的方式非常相似。 更多信息，请查看我们的开发人员文档。

我们很高兴看到您的新创作 - 也许是一个小的迷你图，或者一个迷你进度条怎么样？用户希望在仪表盘上一目了然地快速找到什么，在这么小的空间里可以显示什么来传达信息？让您的创造力尽情发挥！

#仪表盘的下一步是什么？

随着新的剖面视图的功能集日趋成熟，我们希望开始专注于一项更大的任务：改进所有仪表盘配置并使它们达到现代标准。为了实现这一目标，我们需要您——我们贡献者社区的力量！

#我们如何才能实现这一目标？

曾几何时（我的意思是，2018 年夏天），一群开发者聚集在一起创建了 Lovelace 仪表盘。它是有机构建的 - 开发者在他们认为有需要的地方做出贡献，无论是复制以前状态 UI 的功能，还是添加他们个人使用的东西。虽然 Lovelace 附带的动作已经足够，但可用性和美观性还有很多需要改进的地方。为了提高我们的设计标准，我们需要更多具有设计意识的贡献者。

输入（半）开源设计。

传统上，开源项目是围绕 GitHub 等代码存储库构建的。这使得任何会编码的人都可以轻松提交贡献。我们认为我们也可以在产品方向和用户体验设计方面实现同样的目标。

然而，从一张白纸开始并不容易，设计师和开发人员有不同的工作流程。因此，作为 Home Assistant 项目的维护者，我们正在提供产品目标、基本设计框架和促进协作的流程。

#产品目标：我们想要实现什么？

Project Grace 的目标是让家庭中的所有用户都能轻松直观地定制和组织仪表盘。 仪表盘是为了帮助用户监视和控制智能家居而创建的，而调节是仪表盘的组成部分，推而广之，调节也应该实现相同的产品目标：

• 监控：允许用户监控设备和服务实体的状态，数据可视化易于理解。
• 控制：允许用户在智能家居中控制设备，主要通过触摸屏，偶尔在桌面上通过鼠标进行控制。

为了使它们达到现代标准，我们希望您加入我们：

• **改造现有的布局以适应新的网格系统。**这将实现我们希望通过剖面视图实现的模块化和易于定制。
• 标准化设计系统。 新的角色应该在版式、图像、形状、尺寸等方面遵循相同的设计标记。
• **创建新的角色。**这将填补我们尚未解决的当前功能空白。
• **使用反馈功能扩展现有反馈。**反馈功能允许每个反馈更加模块化并始终保持最新状态。
• **合并 HACS 上现有的流行反馈。**这将减少安装自定义反馈的需要，并使它们达到 Home Assistant 前端的 UX 标准。

#设计框架：我们的响应设计将基于什么？

#网格系统新的调整将基于之前定义的设计网格系统，并通过一些调整来最终确定，以获得更好的信息密度和美观性。我们降低了网格上每行的高度，以消除关联内容和关联特征之间的空白空间：

最终确定的网格尺寸如下：

• 行高：66px → 56px
• 装订线：8px
• 图标大小：40px → 36px
• 特征高度：40px → 42px

#设计指南

我们还研究了 Tile 响应的设计，以下是我们从研究中得出的一些指导原则：

• 用于控制的每个动作都应该有一个明确的主要动作。
• 可供性：所有旨在邀请用户交互的内容都应该看起来可点击。
• 功能比图标按钮效果更好。
• 不要把反应弄乱。

至于设计系统的其余部分，我们在过去的一年中逐渐转向 Material 3，但我们尚未在我们的前端上完成并完全适应它。我们希望听到您对如何将其带到我们的反馈中的意见。

#流程：我们如何合作？

由于开源设计的尝试并不多，所以可以参考的先例并不多。我们正在试验我们的流程，并将在了解更多信息后对其进行调整。目前，我们提出以下流程：

1. 工作组，集合！ 如果您是UX设计师、产品人员、前端开发人员，欢迎报名加入仪表盘工作组！我们根据仪表盘和控制器设计和开发的经验进行选择。
2. 见面和问候。 我们将组织介绍研讨会，每个人都聚集在一起了解我们可以提供什么并定义我们的项目目标。
3. 从小事做起。 我们会将每个单独的反馈作为一个项目进行分配。我们先从比较容易的动作开始。每个工作组成员都可以根据自己的喜好进行任意数量的反应。
4. 研究和设计。 我们将一起快速研究、构思、制作原型并验证我们的设计，并在 Figma 上实时分享我们的设计和正在进行的工作。
5. 让我们构建它！ 我们将清理并完成我们的设计，开发关联，并在下一个 HA 发布中推出新的关联！

#动作项目：作为自定义动作开发人员，您现在可以做什么？

如果您已经创建了一些自定义响应，那么现在是开始将您的工作升级到下一个级别的好时机！

#1. 将您的自定义调整适合网格系统

为了使您的自定义调整能够与剖面视图配合良好，您需要指定调整的默认、最小和最大宽度和高度：

• 默认宽度和高度是第一次添加到仪表盘时的尺寸。
• 最小宽度和高度是当其内容无法进一步缩小以适应和可用于所提供的区域时的尺寸。
• 最大宽度和高度是当其内容无法进一步扩展以适应并可用于所提供的区域时的尺寸。

我们的网格系统具有固定的行高，这意味着您可以通过将您的动作高度除以行高和装订线的总和来估计您的动作需要多少行。有关如何实现按钮调整大小逻辑的更多信息，请查看我们的开发人员文档。

#2. 遵循我们的用户研究的可用性指南

如上所述，按照指南 审核您的自定义动作的可用性。

#3. 创建新的反馈功能

响应功能是可以放置在响应内部的小部件，用于显示或控制实体的属性。通过构建自定义反馈功能，您可以扩展许多支持反馈功能的反馈的能力。您还可以允许您的自定义调节使用调节功能，类似于我们对[恒温器调节]所做的操作。

#4. 确保功能在 UI 中可编辑

包含可视化编辑器 是自定义调节的易用性的关键，它允许更多的人能够在仪表盘上编辑和使用它们。确保在可视化编辑器中仅包含必要的选项，同时隐藏 YAML 或折叠式 UI 中较少使用的选项，以避免混乱。

---

这次就是我们的全部了！要了解更多关于仪表盘背后的用户体验研究和设计思维，请务必观看我们的【仪表盘第二章直播】(https://www.youtube.com/watch?v=9zmXLxQPr1o)！