Subtexto

Sub Text Settings
Texto
Cor
Fonte
Sombra do texto
Layout

Pode diferir ligeiramente da interface real.

Previa de alteracoes

Esta configuracao e aplicada ao texto auxiliar.

Texto

Texto
Texto

Pode diferir ligeiramente da interface real.

Ponto:
Defina o Texto auxiliar como exibição na linha inferior dentro do Botão. Pode ser usado para adicionar condições suplementares ou encurtar o Descrição.

O que muda com essa configuração:
Esclarece o significado do texto principal e reduz a mudança de valor esperada após um clique.

Dica de ajuste:
Certifique-se de verificar o foldback e o Altura da linha com o SPExibição, pois é fácil se tornar duas linhas.

Itens de configuração.

  • Sub Texto (até 2 linhas): especifica suplementos e condições para o texto principal para corresponder ao valor esperado após o clique.

Nota: O Sub texto é o exibição na parte inferior interna do Botão (abaixo do Texto principal). O posicionamento é diferente do "Sub texto", que é o exibição na parte inferior externa do Botão, a área Sub texto não será exibição. Adequado para exibição com condições suplementares curtas, como informações de preço ou "primeira vez grátis".

As alterações durante o Hover devem ser controladas pelo próprio Botão (Configurações de estilo, Configurações de fundo, Configurações de ícone etc.).

Cor do ícone

Cor
Cor do texto
Preto
#000000
Editar paletaLimpar
Opacidade
1

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 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 pareçam boas por si só.

Itens de configuração.

  • Cor do texto + Alfa: Cor do texto e grau do Transparente. Um nível mais fraco do que o texto principal para esclarecer a hierarquia de informações.

Fonte

Fonte
Família da fonte
Padrão
Peso
400
Tamanho da fonte
12
Altura da linha
1.4
Espaçamento entre letras
0

Pode diferir ligeiramente da interface real.

Ponto:
Defina Fonte em Sub texto. Esse é um ajuste que faz com que o texto pareça mais discreto do que o texto principal, mantendo a legibilidade.

O que muda com essa configuração:
Otimização de Tamanho do ícone e Altura da linha, tornando menos provável que as informações em Botão fiquem presas.

Dica de ajuste:
A configuração é baseada no estado de duas linhas no SP, e o PC ajusta a aparência principalmente a partir daí.

Itens de configuração.

  • Font Family: Tipo de letra. Essa é a configuração padrão que corresponde ao design geral.
  • Font Weight: Peso. O peso deve ser mais leve que o do texto principal, mas aumentado somente quando necessário.
  • **A prioridade é dada ao limite inferior de legibilidade, pois o texto Tamanho do ícone não será lido se for muito pequeno.
  • Line Height: Altura da linha, ajusta a legibilidade e a rigidez quando duas linhas são usadas.
  • Letter Spacing: espaçamento entre letras. Ajusta uma pequena quantidade para melhorar a legibilidade.

Sombra do texto

Sombra do texto
Sombra do textoOFFON
Cor
Preto
#000000
Editar paletaLimpar
Desfoque
0
Horizontal
0
Vertical
0

Pode diferir ligeiramente da interface real.

Ponto:
Define a sombra do texto, útil em situações em que você deseja reforçar a legibilidade em 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, para compensar a falta de diferença de brilho com o Fundo.
  • Blur: quantidade de Desfoque. Se for muito grande, ele ficará desfocado, portanto, deve ser operado em um nível baixo.
  • Horizontal*: Quantidade de deslocamento horizontal. Use uma configuração baixa, pois ela dá uma forte sensação de decoração.
  • Vertical: Quantidade de deslocamento vertical. Um leve deslocamento para baixo cria uma sombra natural.

Layout

Layout
Margem
0
Preenchimento
0
Rotação (graus)
0

Pode diferir ligeiramente da interface real.

Point:
Define a margem e a posição do Sub texto. Esse é um item de ajuste para ajustar a distância até o texto principal.

O que essa configuração altera: As margens adequadas tornam as informações mais coerentes e reduzem os saltos.

Dica de ajuste:
Fixe a distância externa com Margin e adicione Padding e rotação somente quando necessário.

Configurações

  • Margin: margem externa. Ajuste a distância do texto principal para esclarecer a ordem das informações.
  • Padding: margem interna, para garantir a visibilidade quando exibição com Fundo.
  • Transform > Rotation (deg): Rotação. Evite uma direção forte e AcentoZise-a em um ângulo pequeno.Padrão O valor é 0.

Tamanho da fonte e Margem devem ser verificados no SP para garantir que se encaixem em Botão. Certifique-se de que o Preenchimento seja suficiente devido ao aumento do volume.

Diferenças em relação ao Micro texto: o Sub texto não possui configurações de Estilo, Predefinição, Borda, Raio da borda e Cor de fundo/Gradiente (essas opções só existem em Micro texto). As configurações possíveis são Texto, cor do texto, Fonte, Sombra do texto e Layout (Margem, Preenchimento, rotação). Se precisar de texto auxiliar decorativo, considere usar Micro texto em vez de Sub texto fora do Botão.