Entrixy — 设计指南

问题

来自 androidx.compose.material.icons.outlined.* 的 Material 图标名义尺寸相同——24×24 的网格——但实际绘制的部分各不相同。若一律给它们简单的 Modifier.size(24.dp)，有的会显得又大又重（Bolt、Delete），有的则小得可怜（Contacts、VpnKey）。必须手工校准。

校准方法

1. 截取图标位于 38 dp 圆圈中的界面截图——那是我们的落位槽。
2. 用 Python 配合 PIL 和 numpy，测量所绘字形的包围盒——像素为单位的最大宽高。
3. 公式： new_size = 24 × 52 / measured_px，并夹取到 [18..28].
4. 然后在 38 dp 的槽内做垂直和水平居中。

52 像素是基准字形 Fingerprint；一切都以它为单位来衡量。

最终的尺寸对照表

AutoMode

用在原先 Bolt 出现的所有位置——密钥卡片上的“自动化”按钮、设置里的分区图标。尺寸 26 dp，与 Bolt 一致。

这张表在代码里的位置

IconsDebugSheet.kt ——对照表 iconSizeByName。调试界面从 SettingsScreen 里的“UI 图标（调试）”按钮打开：上方是一排校准过的图标，下方是名称、尺寸和使用场景的清单。

我们使用 Material 3 的标准角色，并刻意限定为四种：

刻度

我们约定按以下数值的倍数工作： 2 / 4 / 8 / 10 / 14 / 16 / 20。不要忽疏忽密：相同的元素给相同的间距。

主滚动区中的卡片之间

• 底部面板容器： spacedBy(12.dp)。卡片彼此相距 12 dp。
• 面板内容的水平内边距： padding(horizontal=20.dp).

卡片内部（RuleCard）

• 四周内边距：16 dp。
• 标题行——圆圈、标题、折角箭头、开关——是一行：圆圈与标题间 14 dp，标题与开关间 12 dp。
• 展开时从标题行到主体： padding(top=16.dp).
• 主体使用 verticalArrangement = spacedBy(16.dp) ，用于各大块之间。

FieldSection 内部（标签加内容）

• Columnarrangement: spacedBy(2.dp)。加粗标签与其下的状态或提示之间只留 2 dp，好让二者读作“标题＋说明”的一对。
• 同一规则适用于任何成对文本：处处 2 dp，无一例外。以前这里 0 dp、那里 2 dp，看着就别扭。

胶囊按钮与状态

• 从状态或提示到胶囊按钮： Spacer(10.dp)。在“定位”、Wi-Fi 连接和 Wi-Fi 列表中同理。

滑块是特例

由于最小触控区域，Material 3 的滑块在布局中占去约 48 dp，其中可见轨道只有中间约 4 dp，上下各约 22 dp 是空白触控区。因此：

• 在状态文字与滑块之间，我们施加 Modifier.offset(y=-16.dp) ，把滑块拉近文字。
• 在滑块下方，我们施加 Modifier.sliderTrim() （位于 GuestAutomationEditor.kt的辅助函数），它向父级报告 22 dp 而不是 48 dp 的高度。这样卡片的 padding(16.dp) 让滑块到底边的间隙，与以胶囊按钮收尾的卡片保持一致。

对访客的三级信任

每条规则——定位、Wi-Fi、时间、授权、确认——以及“启用”块，都取三个层级之一。开关打开时，卡片的图标圆圈会染上对应颜色。

开关关闭时圆圈变灰（#9AA0A6），无论选了哪个层级。

层级说明的写法规则

• 用第三人称书写，绝不用“我”或“由我”。说“访客”“设置”“数值”。
• 单句不加句号（见“文本规则”）。

带图标的彩色圆圈（38 dp）

全应用统一的 38 dp 落位槽：

• 尺寸：38dp， CircleShape，背景取层级颜色。
• 里面放着按校准尺寸（见第 1 节）绘制的白色图标。
• 内容居中： contentAlignment = Alignment.Center.

单选按钮

把它们包进 Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } ，好让单选圆点的中心与上方彩色圆圈的中心对齐。没有这层包装，单选按钮会水平偏移，因为 RadioButton 自带内边距。

单选按钮与其文字之间： Spacer(14.dp)。同一组单选行之间： Column(spacedBy(4.dp)).

最小触控区域已关闭： CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) ——否则每个单选行都会膨胀到 48 dp，破坏节奏。

Switch

Material 3 的标准开关，位于卡片标题右侧。它把整条规则关掉，此时不显示层级颜色——圆圈变灰。

分段行

用于在规则内切换模式的自制控件——目前只在 Wi-Fi 里：“按指定网络” / “按周围网络”。Row 中放两项，各自带 weight(1f):

• 整体背景： colorScheme.surface, RoundedCornerShape(10.dp)，内边距 4dp。
• 选中态：背景为 primaryContainer, RoundedCornerShape(8.dp)，文字用 SemiBold。
• 未选中态：透明，常规字重。

胶囊按钮

带描边、图标和文字，完全圆角。用于次要操作——“使用当前位置”“采集周围网络”。禁用时描边与文字降到 alpha=0.4.

Slider

关于 offset(y=-16.dp) 与 sliderTrim()，见第 3 节。滑块之前总有一个 StatusLine ，承载状态文字（bodySmall，弱化色）——“74 米 · 上限，访客可下调”。

层级下拉菜单

点击卡片标题行即可打开——除开关外的整行。它出现在标题正下方，横跨卡片内容的整个宽度。为此：

• 把该 Row 包进 Box ，带 onGloballyPositioned，并以 dp 测量其宽度。
• DropdownMenu 通过 DropdownMenuItem 接收该宽度，配合修饰符 Modifier.width(anchorWidthDp).

下拉项是会呼吸的，而非扁平的行：左侧一个色标，标签加粗，其下是小号弱化字体的说明。垂直方向按第一行也就是标签对齐。

“启用”的脉动圆圈

与规则那些普通彩色圆圈不同，“启用”标题处的圆圈会脉动。

• 在 38 dp 的槽内：一个 28 dp 的实心圆，不带图标。
• 其上：两道同心波纹，用 drawBehind + Stroke(width=6dp).
• 波纹半径由 14 dp 线性增长到 19 dp——即 38 dp 的一半。
• 周期为 2000 毫秒，第二道波纹偏移 1000 毫秒。
• 缓动：严格采用 LinearEasing. 不要用 FastOutSlowInEasing ——否则周期重启时会看到一次明显的跳动。
• 透明度遵循曲线 sin(π·p) × 0.6：在 p=0 与 p=1 时透明度为 0，中间达到峰值。重启因此看不出来。

Punctuation

界面文案中的单句不加句号。 只有两句及以上时才用句号来分隔。这适用于所有说明、提示、状态、悬浮提示、标题和独立短语。

以谁的口吻书写

• 不允许：“我设定精确值”“我不做任何限制”。
• 允许：“数值已设定”“访客自行选择设置”。

在上限与精确值之间抉择

在黄色（已设定）模式的滑块状态里，我们直接说明自由的方向：

• 半径：“74 米 · 上限，访客可下调”——越小越严格。
• Wi-Fi 阈值：“7 中 5 · 下限，访客可上调”——越大越严格。

红色（已锁定）：“74 米 · 恰好” / “7 中 5 · 恰好”。

层级名称已定

“由访客决定 / 已设定 / 已锁定”已经固定下来，不再更改。

用开关，还是用“未选择”的单选项

若规则存在关闭态，就用开关表达，而不要用“不需要 / 否 / 关闭”之类的单选项。否则用户有两种方式关掉同一件事，令人困惑。

Examples:

• Authorisation: 开关关闭即表示不作要求。打开后只显示三种真正的方式：PIN、生物识别，或者 PIN 与生物识别二选一。
• Confirmation: 开关关闭表示呼叫自动发出。打开则表示由访客按下按钮。内部无需单选按钮——开关已说明一切。

坐标与右侧的操作

在“坐标”块中，复制与删除图标位于右侧 ，与两行齐平 （标签与状态）。实现方式为 Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }。图标相对整对文本做垂直居中。

展开与收起卡片主体

主体仅在以下情况展开：

• 开关处于打开状态，并且
• 层级不是 OWN——在“由访客决定”下主体毫无意义，因为我们什么都没设定。

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) 用于展开， shrinkVertically(tween(180)) + fadeOut(tween(120)) 用于收起。

何时显示“密钥已添加”对话框

收到访客密钥时——仅当应用在前台且密钥是新的而非重复的。否则静默保存。

• LocationOn 与 LocationOff 图标 ——逐像素敲定过，它们是基准。
• ExpandMore 与 ExpandLess 图标（折角箭头） ——22 dp，不做校准。
• PulsatingCircle 中的透明度公式 — sin(π·p) × 0.6。任何简化都会毁掉观感。
• 波纹中的 LinearEasing。换成 ease-in 或 ease-out 会产生跳动。
• 层级名称 ——“由访客决定 / 已设定 / 已锁定”。说明文字几经变化，名称则已固定。
• FieldSection spacedBy(2.dp) ——刻意收紧，是为了“标题＋说明”这一对。