一、视觉魅力：营造沉浸式数据空间

深色背景是天然的聚焦器，能让亮色数据元素“跳”出来。比如在监控大屏上，红色预警指标、荧光绿的实时数据曲线，在黑色或深灰色背景衬托下，瞬间抓住目光，使关键信息不被繁杂内容淹没。这种高对比度，就像舞台追光灯，把核心数据推到视觉C位，让决策者第一时间捕捉关键。 

同时，深色大屏自带科技感与专业感滤镜。在智慧工厂、航空指挥等场景，深色调契合行业对精准、严谨、前沿的追求，营造出沉浸式工作氛围，仿佛置身数据宇宙，每一个闪烁的数字、流转的图表，都是探索业务规律的星芒，提升用户对数据价值的感知。

 二、设计要点：平衡美观与实用

（一）色彩搭配：精准传递数据含义

色彩是数据的“情绪符号”。除了利用高对比突出重点，还要为不同数据类型定制色彩规则。比如健康医疗大屏，绿色系展示正常生理指标，黄色预警潜在风险，红色标识紧急状况，让医护人员通过颜色快速判读患者状态；金融大屏里，绿色代表收益、红色象征亏损，直观反映资金流向与盈亏情况，形成视觉化“数据语义网” 。

（二）布局逻辑：构建清晰信息层次

大屏数据繁杂，布局要像搭建“信息金字塔”。把最核心、最需高频关注的数据（如总览性指标、实时警报）放在视觉黄金区（通常是中间或上部）；次要的趋势分析、分类数据，有序分布在周边。像智慧交通大屏，中心展示实时拥堵热力图与事故警报，侧边陈列历史通行数据、区域流量对比，既保证决策层抓重点，又满足分析层挖细节，让信息流动符合业务思考路径。

（三）动效与交互：激活数据生命力

适度动效是数据的“动态说明书”。实时更新的数据流、闪烁的新数据点、平滑切换的图表状态，能直观展现数据变化趋势。比如能源监控大屏，电量流动的动态效果，模拟电力传输路径；交互上，支持钻取（点击图表深入查看细分数据）、筛选（按时间/区域等维度过滤），让用户从“看数据”升级为“探索数据”，挖掘隐藏在可视化背后的业务逻辑。 

 三、场景适配：让深色大屏“对症下药”

在不同行业，深色大屏发挥独特价值。军事指挥中，深色降低反光，适应作战室暗光环境，战略地图、兵力部署等数据在深色底上清晰呈现，保障指挥决策高效；能源监控场景，深色调凸显能源数据的精密与严肃，实时电量、管道压力等信息动态更新，助力能源调度精准；文化场馆的大数据展示，深色大屏搭配艺术化可视化设计，将观众流量、互动数据等转化为炫酷视觉作品，兼具科技感与艺术氛围。 

深色大屏页面的大数据可视化设计，是一场平衡美学与功能、贴合场景与需求的创作。它以深色为底，绘就数据的千般模样，让冰冷数字变成可感知、可交互、能驱动决策的“活信息”，在智慧化浪潮中，持续拓宽数据可视化的表达边界，为各行业洞察数据本质、挖掘价值，打造专属的“视觉洞察窗口” ，引领我们在数据深海中，精准捕捞业务增长的“宝藏”。 

按钮组(ButtonGroup)是一个将多个按钮以可视化的方式组合在在一起的组件,帮助用户快速识别并操
作相关操作。在M3Expressive中,按钮组通过增强按钮间的交互、布局适配以及层级表现力,提升
了界面的灵活性。

为什么要分组按钮?
现有的按钮只是简单地并排放置,缺乏任何链接交互或按钮之间的视觉统一。
拼中人。简单
Co
在Material3中,我们将按钮组定义为独立的组件,以实现更丰富的表现力和自适应的布局,并提出
了一种名为Connected Button Group的新形式来取代Segmentted Button的作用。
本文我们将了解新增按钮组的功能和使用方法。如果您想了解更多关于Expressive新增的Split Button

配置按钮组

容器
按钮组可以包含各种元素,例如图标、文本按钮等,但其核心概念是"容器",它是一种更高级的结构,
包裹着这些元素并控制其布局和交互。因此,将按钮组理解为一个充当按钮容器的容器,而不是按钮的
集合,似乎更准确。

按钮组的类型
按钮组分为标准按钮组和联动按钮组。

标准按钮组
使用标准按钮组将独立的操作按钮并排放置。
每个按钮都保持圆润的形状,并且按钮之间有一定的间距。在此组中,选定的按钮可以改变宽度或形
状,并且这种变化通常会影响相邻的按钮。整个按钮组被设计:为一个有机的整体。
一般适合展现保存、取消、删除等主要操作,并且按钮的大小和样式根据上下文灵活调整。

链接按钮组
连接按钮组是一种主要用于允许选择多个选项的组件。现有的分段按钮将被连接按钮组取代。
按钮之间物理连接、共享边框或以一致的高度和宽度对齐。用户可以选择一个或多个按钮,并且只有选中的按钮会在视觉上突出显示。这种设计可以有效地传过达清晰的选择状态,而不会影响其他按钮。

它主要用于替代分段按钮的作用,例如过滤、视图切换和排序选项。

如何使用按钮组

按钮组使您的产品更具表现力。
标准按钮组增加了相邻按钮之间的交互,使它们相互响应。选择标准组内的按钮时,会发生以下变化:
所选按钮的形状和宽度将会改变。
选定的切换按钮也会改变颜色。
相邻的按钮移动并暂时改变宽度。

仅在重要的交互时使用形状变化。
您可以使用不同的按钮类型、宽度和颜色组合来强调重要元素,并在视觉上对相关按钮进行分组。默认
情况下,标准按钮组中的所有按钮应具有相同的尺寸(XS到XL)和形状(圆形或方形)。
·只有在英雄时刻,您才应该在群体中使用不同尺寸。
?混合尺寸并不常用。
仅当选择按钮或需要添加含义或对比时才应使用不同的形状。
区当选择这边以而安添加古文现对比的才应使用个问的形状。

可以使用一组链接的按钮在类似的操作之间切换。
链接按钮组可帮助用户选择选项、切换视图或对齐页面上的元素。它们的行为与标准按钮组类似,但不
会影响相邻的按钮。链接按钮组应取代已弃用的分段按钮。

如果按钮内容彼此关联且可选,请使用链接按钮组。在购物应用中,链接按钮组用于选择商品的容量,
因此,密切相关的操作在链接按钮组中效果更佳。

使用一组链接按钮来实现单选或多选模式。
对于使用切换按钮的单选或多选模式,应使用链接按钮组。如果所有按钮均不可切换,则不应使用链接
按钮组。

一组链接按钮被配置为填充其所在页面或区域的宽度,这会导致内部按钮的宽度也随之增加。在宽屏
上,建议设置最大宽度,以防止按钮组过宽。

可以根据窗口大小手动调整按钮的宽度、大小和填充。
按钮组应在布局中移动到一行,并且不应换行。您可以垂直堆叠多个按钮组,以使项目保持紧密排列,
但按钮组之间不能进行垂直交互。

手动调整图标按钮的宽度时,避免将其拉伸得太宽。

您还可以根据窗口大小手动调整一组按钮的大小、形状和填充。
在小窗口中,最好使用较小、较窄的按钮来容纳按钮组中的所有按钮,而在较大的屏幕上,最好使用较
大、较宽的按钮来有效地填充可用空间。
灵活按钮或按钮组会根据窗口大小自动调整其宽度。

必须在布局和设备之间保持一致的层次结构。
当窗口变大时,您应该利用颜色和大小等属性来确保每个按钮保持其视觉层次。例如,主要操作按钮在
所有窗口尺寸下都应保持最大、最宽且视觉上最突出。

根据屏幕的大小,按钮应该在荣单中隐藏或重新显示。
在小窗口中,您可以将按钮组末尾的按钮设置为折叠成荣单,然后在窗口大小增加时重新显示。建议将
荣单放置在按钮组的末尾。按钮组外部的按钮不受按钮组行为的影响。

在标准组中,当您按下一个按钮时,相邻的按钮也会改变宽度...
按下按钮时,其宽度和形状会发生变化。在标准按钮组中,按皮下按钮也会影响相邻按钮的宽度。相比之
下,在链接按钮组中,只有按下的按钮会改变形状,其他按钮丑不受影响。

所选按钮应改变形状以实现视觉区分。
选定的按钮应从圆形变为方形,或从方形变为圆形。

链接按钮组和分段按钮之间有什么区别?
虽然两者的功能相同,但可以说它们被纳入了一个按钮组,以实现富有表现力的交互。

链接到现有分段按钮的一组按钮。
分段按钮也允许单选或多选,但其配置相对固定,并且视觉呈现受到限制。
链接按钮组在调整按钮的大小、颜色和形状方面提供了更大的灵活性,其视觉交互也得到了增强,例如
根据选择状态改变形状。按钮以连接形式排列,并且只有选中的按钮才会在视觉上突出显示,从而提供
清晰的反馈。
Expressive在这种灵活性和表现力的基础上,逐渐减少分段按钮的的使用,转而采用链接按钮组作为替
代。

综上所述

按钮组是实用的组件,能够直观地将相关操作分组,并为用户提供清晰的上下文。它们旨在直观地展示
按钮之间的关系,并根据屏幕尺寸或具体情况灵活操作,从而在不同界面上提供一致的体验。标准按钮
组有利于实现交互和层级结构,而链接按钮组则有利于清晰的选择结构。然而,形状、尺寸设置以及响
应式设计需要精细的设计。
Material3取代了现有的分段按钮,并提出将一组按钮作为独立组件,以实现富有表现力的UI组合。
这种设计超越了简单的按钮排列,全面考虑了交互、布局和层级,指明了提升整个产品一致性和可用性
的方向。

 “三维图标设计宝典” 方法论，强调从前期构思（分析竞品如马蜂窝与本品飞猪的图标类型、配色、风格及核心辨识点，通过关键词脑暴锁定 “品质、活力、青春” 方向并产出情绪版）、绘制图标（具象功能、简化结构、确定基本形，融入飞猪品牌超级符号，添加毛玻璃质感等细节）到走查图标（从辨识度、统一性、美感度、差异化四方面检查，如类型、风格、体量感统一，融入品牌符号增强差异化）的完整流程，助设计师提升过稿率。