Entrixy — guia de design

O problema

Os ícones Material de androidx.compose.material.icons.outlined.* partilham um tamanho nominal — uma grelha de 24×24 — mas a parte desenhada difere de um para outro. Dê a todos um simples Modifier.size(24.dp)e uns parecerão grandes e pesados (Bolt, Delete) enquanto outros parecerão minúsculos (Contacts, VpnKey). É preciso calibrá-los à mão.

O método de calibração

1. Tirar uma captura do ecrã com os ícones nos seus círculos de 38 dp — o nosso lugar de assentamento.
2. Com Python, PIL e numpy, medir o retângulo delimitador do glifo desenhado — a sua largura e altura máximas em píxeis.
3. A fórmula: new_size = 24 × 52 / measured_px, limitado a [18..28].
4. Depois centrá-lo no espaço de 38 dp, na vertical e na horizontal.

52 px é o glifo de referência, Fingerprint; tudo se mede em relação a ele como unidade.

O mapa de tamanhos resultante

AutoMode

Usa-se onde antes estava o Bolt — o botão Automatização no cartão da chave, o ícone da secção nas definições. Tamanho 26 dp, igual ao Bolt.

Onde a tabela vive no código

IconsDebugSheet.kt — o mapa iconSizeByName. O ecrã de depuração abre-se a partir de SettingsScreen com o botão Ícones da interface (depuração): em cima uma FlowRow de ícones calibrados, em baixo uma lista de nomes, tamanhos e contextos.

Usamos os papéis padrão do Material 3, limitados de propósito a quatro:

A escala

Combinámos trabalhar em múltiplos de 2 / 4 / 8 / 10 / 14 / 16 / 20. Nada de festim ou fome: elementos iguais recebem espaços iguais.

Entre cartões no deslocamento principal

• O contentor da folha inferior: spacedBy(12.dp). Os cartões ficam a 12 dp uns dos outros.
• Preenchimento horizontal do conteúdo da folha: padding(horizontal=20.dp).

Dentro de um cartão (RuleCard)

• Preenchimento em todos os lados: 16 dp.
• O cabeçalho — círculo, título, seta, interruptor — é uma linha: 14 dp entre o círculo e o título, 12 dp entre o título e o interruptor.
• Do cabeçalho ao corpo quando expandido: padding(top=16.dp).
• O corpo usa verticalArrangement = spacedBy(16.dp) entre os blocos grandes.

Dentro de uma FieldSection (rótulo mais conteúdo)

• Columnarrangement: spacedBy(2.dp). Apenas 2 dp entre o rótulo a negrito e o estado ou dica por baixo, para se lerem como um par título-legenda.
• A mesma regra vale para qualquer texto emparelhado: 2 dp em toda a parte, sem exceções. Antes havia 0 dp num sítio e 2 dp noutro, e isso destoava.

Botões cápsula e estados

• Do estado ou dica para o botão cápsula: Spacer(10.dp). O mesmo em Geo, na ligação Wi-Fi e na lista de Wi-Fi.

Os cursores são um caso à parte

Um cursor do Material 3 ocupa cerca de 48 dp de disposição por causa da área tátil mínima, dos quais a pista visível são apenas uns 4 dp ao centro, com cerca de 22 dp de zona tátil vazia acima e abaixo. Daí que:

• Entre o texto de estado e o cursor aplicamos Modifier.offset(y=-16.dp) para puxar o cursor até ao texto.
• Por baixo do cursor aplicamos Modifier.sliderTrim() (um auxiliar em GuestAutomationEditor.kt), que reporta ao pai uma altura de 22 dp em vez de 48 dp. Assim o padding(16.dp) dá o mesmo intervalo do cursor à margem inferior que nos cartões que acabam num botão cápsula.

Três níveis de confiança no convidado

Cada regra — Geolocalização, Wi-Fi, Tempo, Autorização, Confirmação — e o bloco de Ativação assumem um de três níveis. O círculo do ícone do cartão fica com a cor correspondente quando o interruptor está ligado.

Com o interruptor desligado o círculo fica cinzento (#9AA0A6), seja qual for o nível escolhido.

Regras para as descrições dos níveis

• Escrever na terceira pessoa, nunca eu ou por mim. Dizer o convidado, a definição, o valor.
• Uma única frase não leva ponto (ver Regras do texto).

O círculo colorido com ícone (38 dp)

Um único lugar de assentamento de 38 dp em toda a aplicação:

• Tamanho: 38dp, CircleShape, com o fundo na cor do nível.
• Lá dentro fica o ícone no seu tamanho calibrado (ver secção 1), a branco.
• O conteúdo fica centrado: contentAlignment = Alignment.Center.

Botões de opção

Envolvê-los em Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } para que o centro do círculo do botão coincida com o centro do círculo colorido acima. Sem o invólucro o botão desloca-se na horizontal, porque RadioButton se desenha com preenchimentos próprios.

Entre o botão de opção e o seu texto: Spacer(14.dp). Entre linhas de botões de opção de um grupo: Column(spacedBy(4.dp)).

A área tátil mínima está desativada: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — caso contrário cada linha de opção incha até 48 dp e quebra o ritmo.

Switch

Um interruptor padrão do Material 3, à direita do título do cartão. Desliga a regra inteira e a cor do nível deixa de ser mostrada — o círculo fica cinzento.

Linha segmentada

Um controlo próprio para trocar de modo dentro de uma regra — hoje só no Wi-Fi: Por uma rede específica / Pelas redes em redor. Dois elementos numa Row, cada um com weight(1f):

• O fundo do conjunto: colorScheme.surface, RoundedCornerShape(10.dp), preenchimento 4dp.
• Selecionado: fundo de primaryContainer, RoundedCornerShape(8.dp), com texto SemiBold.
• Não selecionado: transparente, peso normal.

Botões cápsula

Um contorno, um ícone e texto, totalmente arredondados. Para ações secundárias — Usar a posição atual, Capturar as redes em redor. Quando desativados, o contorno e o texto descem para alpha=0.4.

Slider

Ver a secção 3 sobre offset(y=-16.dp) e sliderTrim(). Antes de um cursor vai sempre um StatusLine com texto de estado (bodySmall, atenuado) — 74 m · máximo, o convidado pode reduzir.

O menu pendente de níveis

Abre-se tocando na linha de título do cartão — toda a Row exceto o interruptor. Aparece logo abaixo do cabeçalho, a toda a largura do conteúdo do cartão. Para isso:

• a Row é envolvida em Box com onGloballyPositioned, e medimos a sua largura em dp.
• O DropdownMenu recebe essa largura através de DropdownMenuItem com o modificador Modifier.width(anchorWidthDp).

Os itens do menu respiram em vez de serem linhas achatadas: um marcador de cor à esquerda, o rótulo a negrito e por baixo a descrição em letra pequena e atenuada. Alinham-se na vertical pela primeira linha, o rótulo.

O círculo pulsante da Ativação

Ao contrário dos círculos coloridos normais das regras, o círculo do cabeçalho da Ativação pulsa.

• Dentro do espaço de 38 dp: um círculo cheio de 28 dp, sem ícone.
• Por cima: duas ondas concêntricas desenhadas com drawBehind + Stroke(width=6dp).
• O raio da onda cresce linearmente de 14 dp para 19 dp — metade de 38 dp.
• O ciclo dura 2000 ms, com a segunda onda desfasada 1000 ms.
• Suavização: estritamente LinearEasing. Não FastOutSlowInEasing — caso contrário o reinício do ciclo mostra um solavanco.
• A opacidade segue a curva sin(π·p) × 0.6: em p=0 e p=1 a opacidade é 0, com o pico a meio. O reinício é invisível.

Punctuation

Uma única frase numa cadeia da interface não leva ponto. Os pontos só aparecem quando há duas frases ou mais, para as separar. Vale para toda a descrição, dica, estado, balão de ajuda, cabeçalho e frase solta.

Em que voz escrevemos

• Não é permitido: Defino o valor exato, Não restrinjo nada.
• É permitido: O valor está definido, O convidado escolhe ele próprio a definição.

Escolher entre um máximo e um valor exato

Nos estados do cursor em modo amarelo (Predefinido) indicamos sem rodeios a direção da liberdade:

• Raio: 74 m · máximo, o convidado pode reduzir — menor significa mais estrito.
• Limiar Wi-Fi: 5 de 7 · mínimo, o convidado pode aumentar — maior significa mais estrito.

A vermelho (Bloqueado): 74 m · exatamente / 5 de 7 · exatamente.

Os nomes dos níveis estão assentes

Decide o convidado / Predefinido / Bloqueado pegaram; não os mudamos.

Um interruptor ou uma opção de rádio não selecionado

Se uma regra tem estado desligado, exprima-o com um interruptor e não com uma opção de rádio do tipo Não é preciso / Não / Desligado. Caso contrário o utilizador tem duas maneiras de desligar a mesma coisa, e isso confunde.

Examples:

• Authorisation: interruptor desligado significa que não é pedido. Ligado mostra apenas os três métodos reais: PIN, biometria, ou PIN ou biometria.
• Confirmation: interruptor desligado significa que a chamada sai automaticamente. Ligado significa que o convidado carrega num botão. Lá dentro não são precisos botões de opção — o interruptor diz tudo.

As coordenadas e as ações à direita

No bloco Coordenadas os ícones de copiar e apagar ficam à direita ao nível das duas linhas (o rótulo e o estado). Implementado como Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. Os ícones centram-se na vertical em relação ao par inteiro.

Mostrar e ocultar o corpo de um cartão

O corpo abre-se apenas quando:

• o interruptor está ligado, e
• o nível não é OWN — com Decide o convidado o corpo não faz sentido, pois não definimos nada.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) ao abrir, shrinkVertically(tween(180)) + fadeOut(tween(120)) ao fechar.

Quando mostrar o diálogo Chave adicionada

Ao receber uma chave de convidado — só se a aplicação estiver no ecrã e a chave for nova e não repetida. Caso contrário guardamos em silêncio.

• Os ícones LocationOn e LocationOff — acertados píxel a píxel; são a referência.
• Os ícones ExpandMore e ExpandLess (as setas) — 22 dp, não calibrados.
• A fórmula de opacidade em PulsatingCircle — sin(π·p) × 0.6. Qualquer simplificação estraga o aspeto.
• LinearEasing nas ondas. Ease-in ou ease-out provocam um solavanco.
• Os nomes dos níveis — Decide o convidado / Predefinido / Bloqueado. As descrições mudaram com o tempo; os nomes estão fixos.
• FieldSection spacedBy(2.dp) — deliberadamente apertado, para o par título-legenda.