Entrixy — Gestaltungsleitfaden

Das Problem

Material-Symbole aus androidx.compose.material.icons.outlined.* haben eine nominale Größe — ein 24×24-Raster —, doch der gezeichnete Teil unterscheidet sich von Symbol zu Symbol. Gib allen schlicht Modifier.size(24.dp), und die einen wirken groß und schwer (Bolt, Delete), die anderen winzig (Contacts, VpnKey). Sie müssen von Hand kalibriert werden.

Die Kalibriermethode

1. Einen Screenshot des Bildschirms mit den Symbolen in ihren 38-dp-Kreisen machen — unser Landeplatz.
2. Mit Python, PIL und numpy den Begrenzungsrahmen des gezeichneten Glyphs messen — maximale Breite und Höhe in Pixeln.
3. Die Formel: new_size = 24 × 52 / measured_px, begrenzt auf [18..28].
4. Danach im 38-dp-Platz senkrecht und waagerecht zentrieren.

52 px ist der Referenzglyph Fingerprint; alles wird an ihm als Einheit gemessen.

Die resultierende Größenkarte

AutoMode

Wird überall dort verwendet, wo früher Bolt stand — die Schaltfläche „Automatisierung“ auf der Schlüsselkarte, das Abschnittssymbol in den Einstellungen. Größe 26 dp, wie bei Bolt.

Wo die Tabelle im Code liegt

IconsDebugSheet.kt — die Zuordnung iconSizeByName. Der Debug-Bildschirm wird geöffnet aus SettingsScreen mit der Schaltfläche „UI-Symbole (Debug)“: oben eine FlowRow kalibrierter Symbole, unten eine Liste von Namen, Größen und Kontexten.

Wir nutzen die Standardrollen von Material 3, bewusst auf vier begrenzt:

Die Skala

Wir arbeiten vereinbarungsgemäß in Vielfachen von 2 / 4 / 8 / 10 / 14 / 16 / 20. Kein Mal üppig, mal karg: gleiche Elemente bekommen gleiche Abstände.

Zwischen Karten im Hauptscroll

• Der Container des Bottom Sheets: spacedBy(12.dp). Karten stehen 12 dp auseinander.
• Waagerechte Innenabstände des Sheet-Inhalts: padding(horizontal=20.dp).

Innerhalb einer Karte (RuleCard)

• Innenabstand auf allen Seiten: 16 dp.
• Die Kopfzeile — Kreis, Titel, Chevron, Schalter — ist eine Reihe: 14 dp zwischen Kreis und Titel, 12 dp zwischen Titel und Schalter.
• Von der Kopfzeile zum Körper im ausgeklappten Zustand: padding(top=16.dp).
• Der Körper verwendet verticalArrangement = spacedBy(16.dp) zwischen den großen Blöcken.

Innerhalb einer FieldSection (Beschriftung plus Inhalt)

• Columnarrangement: spacedBy(2.dp). Nur 2 dp zwischen der fetten Beschriftung und dem Status oder Hinweis darunter, damit sie als Paar aus Titel und Bildunterschrift gelesen werden.
• Dieselbe Regel gilt für jeden Textpaarung: überall 2 dp, ohne Ausnahme. Früher waren es an einer Stelle 0 dp und an anderer 2 dp, und das störte.

Pillen-Schaltflächen und Status

• Vom Status oder Hinweis zur Pillen-Schaltfläche: Spacer(10.dp). Ebenso bei Geo, der WLAN-Verbindung und der WLAN-Liste.

Schieberegler sind ein Sonderfall

Ein Material-3-Schieberegler belegt im Layout wegen der Mindest-Berührfläche rund 48 dp, wovon die sichtbare Spur nur etwa 4 dp in der Mitte ausmacht, mit je rund 22 dp leerer Berührfläche darüber und darunter. Daher:

• Zwischen Statustext und Schieberegler wenden wir Modifier.offset(y=-16.dp) an, um den Regler an den Text heranzuziehen.
• Unter dem Schieberegler wenden wir Modifier.sliderTrim() an (ein Helfer in GuestAutomationEditor.kt), der dem Elternelement eine Höhe von 22 dp statt 48 dp meldet. So ergibt der padding(16.dp) denselben Abstand vom Regler zur Unterkante wie bei Karten, die mit einer Pillen-Schaltfläche enden.

Drei Stufen des Vertrauens in einen Gast

Jede Regel — Geolokalisierung, WLAN, Zeit, Autorisierung, Bestätigung — und der Aktivierungsblock nehmen eine von drei Stufen an. Der Symbolkreis der Karte erhält die passende Farbe, wenn der Schalter an ist.

Bei ausgeschaltetem Schalter wird der Kreis grau (#9AA0A6), gleich welche Stufe gewählt ist.

Regeln für die Stufenbeschreibungen

• In der dritten Person schreiben, nie „ich“ oder „von mir“. Sagen: „der Gast“, „die Einstellung“, „der Wert“.
• Ein einzelner Satz bekommt keinen Punkt (siehe „Textregeln“).

Der farbige Kreis mit Symbol (38 dp)

Ein einheitlicher 38-dp-Landeplatz in der ganzen App:

• Größe: 38dp, CircleShape, der Hintergrund erhält die Stufenfarbe.
• Darin sitzt das Symbol in seiner kalibrierten Größe (siehe Abschnitt 1), in Weiß.
• Der Inhalt wird zentriert: contentAlignment = Alignment.Center.

Optionsfelder

In Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } einwickeln, damit die Mitte des Optionskreises mit der Mitte des farbigen Kreises darüber fluchtet. Ohne Hülle wandert das Optionsfeld waagerecht, weil RadioButton mit eigenen Innenabständen zeichnet.

Zwischen Optionsfeld und seinem Text: Spacer(14.dp). Zwischen Optionszeilen einer Gruppe: Column(spacedBy(4.dp)).

Die Mindest-Berührfläche ist deaktiviert: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — sonst schwillt jede Optionszeile auf 48 dp an und zerstört den Rhythmus.

Switch

Ein Standard-Schalter von Material 3, rechts vom Kartentitel. Er schaltet die ganze Regel ab, die Stufenfarbe wird dann nicht gezeigt — der Kreis wird grau.

Segmentierte Reihe

Ein eigenes Bedienelement zum Wechseln der Modi innerhalb einer Regel — derzeit nur im WLAN: „Nach einem bestimmten Netz“ / „Nach den Netzen ringsum“. Zwei Elemente in einer Row, jedes mit weight(1f):

• Der Hintergrund des Ganzen: colorScheme.surface, RoundedCornerShape(10.dp), Innenabstand 4dp.
• Ausgewählt: ein Hintergrund von primaryContainer, RoundedCornerShape(8.dp), Text in SemiBold.
• Nicht ausgewählt: transparent, normaler Schnitt.

Pillen-Schaltflächen

Umriss, Symbol und Text, vollständig abgerundet. Für zweitrangige Aktionen — „Aktuelle Position verwenden“, „Netze in der Umgebung erfassen“. Im deaktivierten Zustand fallen Umriss und Text auf alpha=0.4.

Slider

Siehe Abschnitt 3 zu offset(y=-16.dp) und sliderTrim(). Vor einem Schieberegler steht stets ein StatusLine mit Statustext (bodySmall, gedämpft) — „74 m · Maximum, der Gast darf verringern“.

Das Aufklappmenü der Stufen

Wird durch Tippen auf die Titelzeile der Karte geöffnet — die ganze Row außer dem Schalter. Es erscheint direkt unter der Kopfzeile, über die volle Breite des Karteninhalts. Dafür:

• Die Row wird eingewickelt in Box mit onGloballyPositioned, und wir messen ihre Breite in dp.
• Das DropdownMenu erhält diese Breite über DropdownMenuItem mit dem Modifier Modifier.width(anchorWidthDp).

Die Menüeinträge atmen, statt flache Zeilen zu sein: links ein Farbmarker, die Bezeichnung fett, darunter die Beschreibung in kleiner, gedämpfter Schrift. Senkrecht richten sie sich an der ersten Zeile aus, der Bezeichnung.

Der pulsierende Aktivierungskreis

Anders als die gewöhnlichen farbigen Kreise der Regeln pulsiert der Kopfkreis der Aktivierung.

• Im 38-dp-Platz: ein voller Kreis von 28 dp, ohne Symbol.
• Darüber: zwei konzentrische Wellen, gezeichnet mit drawBehind + Stroke(width=6dp).
• Der Wellenradius wächst linear von 14 dp auf 19 dp — die Hälfte von 38 dp.
• Der Zyklus dauert 2000 ms, die zweite Welle ist um 1000 ms versetzt.
• Easing: streng LinearEasing. Nicht FastOutSlowInEasing — sonst zeigt der Zyklusneustart einen sichtbaren Ruck.
• Die Deckkraft folgt der Kurve sin(π·p) × 0.6: bei p=0 und p=1 ist Alpha 0, das Maximum liegt in der Mitte. Der Neustart bleibt unsichtbar.

Punctuation

Ein einzelner Satz in einer Oberflächenzeile bekommt keinen Punkt. Punkte erscheinen nur bei zwei oder mehr Sätzen, um sie zu trennen. Das gilt für alle Beschreibungen, Hinweise, Status, Tooltips, Überschriften und einzelnen Sätze.

In wessen Stimme wir schreiben

• Nicht erlaubt: „Ich setze den genauen Wert“, „Ich schränke nichts ein“.
• Erlaubt: „Der Wert ist gesetzt“, „Der Gast wählt die Einstellung selbst“.

Die Wahl zwischen Maximum und exaktem Wert

In Schieberegler-Status im gelben Modus (Vorgegeben) nennen wir die Richtung der Freiheit unverblümt:

• Radius: „74 m · Maximum, der Gast darf verringern“ — kleiner heißt strenger.
• WLAN-Schwelle: „5 von 7 · Minimum, der Gast darf erhöhen“ — größer heißt strenger.

In Rot (Gesperrt): „74 m · genau“ / „5 von 7 · genau“.

Die Bezeichnungen der Stufen stehen fest

„Der Gast entscheidet / Vorgegeben / Gesperrt“ haben sich eingebürgert; wir ändern sie nicht.

Ein Schalter oder eine Optionswahl „nicht ausgewählt“

Hat eine Regel einen Aus-Zustand, drücke ihn mit einem Schalter aus, nicht mit einer Optionswahl wie „Nicht erforderlich / Nein / Aus“. Sonst hat der Nutzer zwei Wege, dasselbe abzuschalten, und das verwirrt.

Examples:

• Authorisation: Schalter aus heißt: wird nicht verlangt. Schalter ein zeigt nur die drei echten Methoden: PIN, Biometrie oder PIN beziehungsweise Biometrie.
• Confirmation: Schalter aus heißt: Der Anruf geht automatisch hinaus. Ein heißt: Der Gast drückt eine Taste. Optionsfelder braucht es darin nicht — der Schalter trägt alles.

Koordinaten und die Aktionen rechts

Im Block „Koordinaten“ stehen die Symbole zum Kopieren und Löschen rechts auf Höhe beider Zeilen (Beschriftung und Status). Umgesetzt als Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. Die Symbole werden senkrecht am Paar als Ganzem zentriert.

Den Kartenkörper zeigen und verbergen

Der Körper klappt nur auf, wenn:

• der Schalter an ist und
• die Stufe nicht OWN ist — bei „Der Gast entscheidet“ ist der Körper sinnlos, denn wir setzen nichts.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) beim Öffnen, shrinkVertically(tween(180)) + fadeOut(tween(120)) beim Schließen.

Wann der Dialog „Schlüssel hinzugefügt“ zu zeigen ist

Beim Empfang eines Gastschlüssels — nur wenn die App im Bild ist und der Schlüssel neu und keine Wiederholung ist. Sonst speichern wir still.

• Die Symbole LocationOn und LocationOff — Pixel für Pixel abgestimmt; sie sind die Referenz.
• Die Symbole ExpandMore und ExpandLess (die Chevrons) — 22 dp, nicht kalibriert.
• Die Alpha-Formel in PulsatingCircle — sin(π·p) × 0.6. Jede Vereinfachung verdirbt das Bild.
• LinearEasing in den Wellen. Ease-in oder Ease-out lassen es ruckeln.
• Die Bezeichnungen der Stufen — „Der Gast entscheidet / Vorgegeben / Gesperrt“. Die Beschreibungen haben sich mit der Zeit geändert; die Bezeichnungen stehen fest.
• FieldSection spacedBy(2.dp) — absichtlich eng, für das Paar aus Titel und Bildunterschrift.