Microcópia

Texto

Pode diferir ligeiramente da interface real.

Ponto:
Define o texto auxiliar para exibição acima de Botão (fora de Botão). Adequado para recursos curtos e para a linha de exibição.

O que muda com essa configuração:
Cria uma linha de lead-in que não interfere no texto principal e transmite informações adicionais primeiro.

Dica de ajuste:
Estruture o valor na primeira linha e o suplemento na segunda linha, nessa ordem, para facilitar a leitura.

Itens de configuração.

• Texto (até 2 linhas): colocar o recurso na primeira linha e o suplemento na segunda linha deixa clara a divisão do trabalho.

Nota: O Micro texto é o exibição na parte superior externa do Botão, que está posicionado de forma diferente do Micro texto na parte superior do Botão, portanto, deve ser usado de acordo com a aplicação, A área Micro texto não será exibição.

As alterações durante o Hover devem ser controladas pela unidade principal do Botão (Configurações de estilo, Configurações de fundo, Configurações de ícone etc.).

Estilo

Pode diferir ligeiramente da interface real.

Ponto:
Define o tipo de decoração Estilo. Você pode mudar a forma como o Texto auxiliar é mostrado em um curto espaço de tempo.

O que muda com essa configuração:
O mesmo texto pode ser usado para alterar a impressão de "ênfase" ou "suplemento" com o Estilo.

Dica de ajuste:
Preserve sua função como informação suplementar, assumindo que ela não se destaca mais do que o Botão principal.

Itens de configuração.

• Style (01-05): alterna a força da decoração e a forma como ela é colocada, ajustando visualmente a prioridade das informações Padrão é 01.

Nota: Dependendo do número Estilo, as decorações Predefinição como cores Fundo, bordas e Raio da borda mudam; mesmo após EstiloAplicar, elas podem ser substituídas individualmente com Borda, Raio da borda e Configurações de cor.

Borda

Pode diferir ligeiramente da interface real.

Ponto:
Define a cor, a espessura e o tipo de linha da linha de borda, que define o contorno do Botão e o torna reconhecível como um elemento clicável.

O que muda com essa configuração:
Ela faz com que a borda pareça mais clara, mesmo em designs com cores mais claras do Fundo.

Dica de ajuste:
Uma borda muito grossa enfraquece a insistência do texto, portanto, é mais fácil lidar com ela começando com cerca de 1px.

Opções de configuração.

• Colour + Alpha: cor da borda e grau Transparente; ajuste aqui primeiro se o texto estiver enterrado em Fundo.
• Width: espessura da borda. Comece com uma borda fina para evitar conflitos com o texto principal.
• Style: Tipo de linha (por exemplo, Sólido, Pontilhado). Usado com a finalidade de definir o tom decorativo.

—.

Raio da borda

Pode diferir ligeiramente da interface real.

Ponto:
Define o arredondamento dos cantos do elemento; o tom Marcas (duro/suave) pode ser ajustado no nível de impressão.

O que muda com essa configuração:
o valor de Raio da borda altera a aparência em proporção ao Tamanho do ícone do Botão.

Dica de ajuste:
Procure obter aproximadamente 20-35% de Altura para obter um equilíbrio que não seja nem muito redondo nem muito duro.

Itens de configuração.

• Raio da borda: Arredondamento dos cantos. Um valor ligeiramente menor do que o Botão principal facilita a manutenção da relação principal.

Cor do ícone

Pode diferir ligeiramente da interface real.

Ponto:
Definir a base Cor do ícone. Essa é a cor que forma a base da estrutura da camada.

O que muda com essa configuração:
A impressão final é determinada pela relação com a Sobreposição e a cor do texto.

Dica de ajuste:
Deve-se dar prioridade a cores que possam ser lidas em combinação com o texto e o Fundo, em vez de cores que tenham boa aparência por si só.

Itens de configuração.

• Cor do texto + Alfa: Cor do texto. Use um contraste um nível abaixo do texto principal como guia.
• Background Colour / Gradient + Alpha: Cor Fundo. Ajuste a densidade em um nível que não seja muito assertivo como um elemento auxiliar.

Fonte

Pode diferir ligeiramente da interface real.

Ponto:
Define o tipo de letra e a estrutura do texto de Micro texto. É a chave para criar legibilidade e hierarquia de informações mesmo em textos curtos.

O que muda com essa configuração:
A combinação de Tamanho do ícone, espessura e Altura da linha evita que as informações suplementares sejam "óbvias demais".

Dica de ajuste:
Comece com Tamanho do ícone, que é um ou dois passos menor que o Botão principal e Peso, que é ligeiramente mais leve.

Itens de configuração.

• Font Family: Tipo de letra. A correspondência da linhagem com o corpo do texto ajudará a manter uma sensação consistente em toda a página.
• Font Weight: Peso da fonte. Mais leve que o texto principal transmite naturalmente a prioridade das informações.
• **O valor mínimo que não será esmagado pelo SP deve ser determinado primeiro e, em seguida, o PC deve ser ajustado.
• Altura da linha: Altura da linha; evita o bloqueio quando duas linhas exibição e garante a legibilidade.
• Letter Spacing: espaçamento entre caracteres. O japonês é difícil de ler se for muito largo, portanto, deve ser ajustado apenas ligeiramente.

Sombra do texto

Pode diferir ligeiramente da interface real.

Ponto:
Define a sombra do texto, útil em situações em que você deseja reforçar a legibilidade no Imagem de fundo.

O que muda com essa configuração:
A intensidade da sombra altera o equilíbrio entre a visibilidade e a sensação decorativa.

Dica de ajuste:
É seguro começar com um Blur menor e um Alpha menor e adicionar o quanto for necessário em etapas.

Opções de configuração.

• Colour + Alpha: cor da sombra e grau Transparente, usado para ajudar a visibilidade no Imagem de fundo.
• Blur: quantidade de Desfoque. Se for muito grande, o contorno será quebrado, portanto, uma pequena quantidade é básica.
• Horizontal: Deslocamento horizontal. Defina o valor com moderação, pois ele tende a parecer estranho.
• Vertical: Desvio vertical. Um leve desvio para baixo tende a dar uma aparência mais natural.

Layout

Pode diferir ligeiramente da interface real.

Point:
Define as margens e a posição do Micro texto. A distância até o Botão principal torna as informações coerentes.

O que muda com essa configuração:
As margens adequadas estabilizam a "ordem de leitura" e facilitam a compreensão das informações em um relance.

Dica de ajuste:
Primeiro, use Margin para determinar a distância externa e use Padding e Rotation somente quando necessário para evitar quebras.

Configurações

• Margin: margem externa. Controla a distância até o Botão principal e ajusta a separação dos elementos.
• Padding: margem interna, que elimina o aperto quando o Estilo com o Fundo.
• Transform > Rotation (deg): rotação, usada apenas para fins de Acento e deve ser usada com moderação para facilitar a leitura; o valor de Padrão é 0.

Cada configuração de Micro texto é compatível com Responsivo; lembre-se de verificar Layout quando dobrado em duas linhas com SPExibição; os valores de Margem e Preenchimento podem ser definidos individualmente para cada dispositivo.

Diferenças em relação aos outros Texto auxiliares: O Micro texto tem o maior número de configurações entre os quatro Texto auxiliares (Micro texto, Sub texto, Micro texto e Sub texto).EstiloPredefinição, Borda, Raio da borda, Cor de fundo/Gradiente estão disponíveis somente para Micro texto e não para os outros três tipos. Se for necessário um Texto auxiliar com decoração, selecione Micro texto.