States

🔶 = Obrigatório

Sobre este guia

Essas recomendações de uso foram criadas para fornecer orientações sobre a criação de states para componentes interativos do nosso produto, garantido consistência, acessibilidade e usabilidade. Este guia lista os states mais comuns no nosso produto.

Durante a criação de componentes, outros states podem ser necessários. Eles devem ser criados considerando a consistência em relação aos já existentes, além da possível existência desses states em outros componentes do nosso produto. Sendo apenas um guia, as recomendações não são regras imutáveis, mas sim diretrizes que refletem boas práticas a serem seguidas.

À medida que o nosso produto evoluir e amadurecer, é possível que essas recomendações sejam revisadas e atualizadas para atender às necessidades. Não é recomendado que esse guia seja seguido sem considerar as particularidades de cada componente e necessidades especificas de cada contexto onde eles se aplicam.

Recomendações gerais

Por questões de usabilidade, cada state precisa alterar o estado rest do componente em mais do que apenas cor. Outras maneiras de indicar uma mudança de estado são: forma, posição, tamanho, conteúdo, animação, som, resposta tátil, etc.

States devem ser distinguíveis entre si e consistentes através do produto.

User states

User states são states que acontecem através de interações do usuário com elementos interativos, como passar o cursor acima do elemento, clicar, pressionar ou arrastar o elemento.

Criação

Cada User state deve ser documentado como um value de uma variant property nomeada “User state”.

Quando necessária a criação de User states não listados aqui, eles devem seguir o mesmo padrão de nomenclatura, de preferência como um adjetivo em inglês.

Protótipo

Todas as interações que o figma permitir devem ser prototipadas dentro do componente.

States

Rest 🔶

É o estado em que o elemento não está sendo afetado ou manipulado pelo usuário.

Criação

É recomendado que o rest state tenha um frame interno nomeado wrapper com os atributos de autolayout, border, shadows, background, etc. 
Isso facilica a aplicação de states que crescem ou diminuem, como hovered e pressed.

Hovered 🔶

Ocorre quando um usuário move o mouse sobre um item, para fornecer uma indicação visual ao usuário de que o item é interativo. É geralmente sutilmente diferente do rest state.

Comportamento

Para o hovered state, a intenção é causar a impressão de elevação e destaque do componente, como se o usuário estivesse segurando e observando ele.

É recomendado que o hovered state seja representado combinando duas alterações do rest state.

Escurecer

Sempre que possível, uma dessas alterações deve ser escurecer o componente, sendo apenas o background, ou borda e conteúdos.

Hovered background

Aumentar

Para a outra alteração, a mais recomendada é aumentar o tamanho do componente e seus conteúdos.

Hovered and pressed scale

Outras opções

Outras maneiras de indicar uma mudança para o hovered state são:

• Pequena alteração na forma do componente;

• Pequena alteração na posição do componente, como diminuir alguns pixels no Y-axys;

• Exibir CTA dentro do componente;

• Microinterações.

Pressed 🔶

Ocorre quando um usuário está ativamente clicando ou tocando em um elemento interativo e termina quando o usuário solta o elemento.

Comportamento

Para o pressed state, a intenção é causar a impressão de que o elemento foi pressionado, empurrado em direção ao background. Na web desktop, considerar o hovered state do elemento para determinar o comportamento deste estado. Neste contexto eles tendem a acontecer simultaneamente.

É recomendado que o pressed state seja representado combinando duas alterações do rest state.

Transparência

Sempre que possível, uma dessas alterações deve ser diminuir a opacidade do componente para 60%.

Diminuir

Para a outra alteração, a mais recomendada é diminuir tamanho do componente e seus conteúdos.

Outras opções

Outras maneiras de indicar uma mudança para o pressed state são:

• Pequena alteração na forma do componente;

• Pequena alteração na posição do componente, como diminuir alguns pixels no Y-axys;

• Feedback tátil;

• Sons;

• Microinterações.

Focused

Geralmente acontece quando o usuário interage com o elemento usando um teclado ou outro dispositivo de entrada que permite a navegação entre os elementos interativos. Quando um elemento recebe o foco, ele deve exibir algum tipo de destaque visual que demonstre a seleção do elemento.

Comportamento

Apesar de ser o resultado da interação do usuário com o componente, por questões de padronização e facilidade de criação, o focused state é geralmente documentado como um secondary state.

Em casos específicos onde o comportamento padrão não for adequado, o focused state pode ser criado como um user state.

Não é recomendado que o focused state altere a estrutura do componente. Ele deve ter um comportamento próximo do focused state padrão.

Response States

Response States indicam no componente respostas do sistema à uma interação do usuário ou do próprio sistema.

Criação

Cada User state deve ser documentado como um value de uma variant property nomeada “User state”.

Quando necessária a criação de User states não listados aqui, eles devem seguir o mesmo padrão de nomenclatura, de preferência como um adjetivo em inglês.

Protótipo

Todas as interações que o figma permitir devem ser prototipadas dentro do componente.

States

Rest 🔶

É o estado em que o elemento não foi afetado por nenhuma resposta de interação do usuário ou de sistema.

Loading

O loading state de um elemento é um estado de interação que ocorre quando a interface do usuário está recebendo conteúdo ou uma ação está em andamento. Ele informa ao usuário que ele precisa aguardar o carregamento do conteúdo e ajuda a reduzir o tempo de espera percebido.

Comportamento

É recomendado que o estado de loading seja pensado para cada componente. A estrutura do componente pode ser alterada para indicar esse state.

Os dois indicadores mais comuns de carregamento são spinners e barras de progresso. Eles podem substituir o conteúdo do componente ou ser adicionados à ele durante o carregamento.

Além disso, é importante que componentes interativos, como botões, assumam um estado desabilitado durante o carregamento, evitando múltiplos cliques e a execução de ações duplicadas ou conflitantes.

Spinners

• Recomendados para tempos curtos de carregamento;

• Mais adequados para ações de duração indeterminada, como aguardar o buffer de algo ou para que o usuário recupere uma conexão perdida;

• Úteis quando para manter o usuário envolvido enquanto aguarda o carregamento do conteúdo. Um spinner com uma animação interessante pode criar uma experiência de espera mais agradável.

Progress Bar

• Recomendados para tempos de carregamento mais longos;

• Úteis para fornecer feedback ao usuário sobre quanto da ação foi concluída e quanto falta para ser feito;

• Mais adequadas para ações de comprimento determinado, como upload de arquivos ou download de grandes quantidades de dados.

Activated

Indica um estado destacado ou selecionado de um elemento. No Android, o activated state é usado para indicar um destino destacado, seja iniciado pelo usuário ou por padrão. Na web, é usado para indicar um estado selecionado ou clicado de um elemento, como um botão ou um link.

Aqui vamos nos referir aos dois casos.

Comportamento

É recomendado que o activated state seja pensado para cada componente. A estrutura do componente pode ser levemente alterada para indicar esse state.

Borda

A borda é uma maneira comum de indicar um estado ativado e pode ser combinado com outras indicações visuais, como cor ou texto em negrito.

Preenchimento

Preencher um elemento com cor ou padrão é outra maneira de indicar um estado ativado. Isso pode ser feito para botões, caixas de seleção ou outros elementos interativos.

Iconografia

Usar ícones para indicar um estado ativado é outro padrão de design comum. Por exemplo, um sinal de marca de seleção ou uma estrela podem ser usados para indicar que um item foi selecionado ou marcado como favorito.

Error

Indica um estado ou condição em que o aplicativo não consegue fazer o que o usuário deseja, ou quando há um problema com a informação enviada pelo usuário.

Comportamento

É recomendado que error states sejam pensados para cada componente. A estrutura do componente pode ser alterada para indicar esse estado. O estado de erro é muito importante e deve sempre vir acompanhado de uma mensagem descrevendo a causa do erro.

Cor

Utilize uma cor que seja associada ao erro, como vermelho, para destacar o elemento com erro. Pode ser a cor de fundo, a cor do texto ou a cor da borda, dependendo do elemento e do contexto.

Iconografia

Adicione um ícone de erro ao lado do elemento ou dentro dele para chamar a atenção do usuário. Exemplos de ícones de erro incluem um ponto de exclamação ou um X.

Mensagens de texto

Exiba uma mensagem de erro clara e descritiva próxima ao elemento ou abaixo dele, informando ao usuário o que deu errado e como corrigir o problema.

Feedback interativo

Além das indicações visuais, forneça feedback interativo ao usuário, como animações ou microinterações que enfatizem o erro e forneçam orientações para corrigi-lo.

Disabled

O estado "disabled" é um estado em que um elemento ou componente de interface do usuário é desativado, o que significa que ele não pode ser interagido ou usado pelo usuário.

Comportamento

O estado disabled deve deixar claro que o elemento está indisponível, removendo as indicações de interatividade. Diferentemente do estado activated, o disabled não responde a ações do usuário como clique, hover ou interações do teclado.

Preenchimento e Borda

Preennchimentos e bordas devem ser suavizados e quando coloridos, utilizar tons desaturados como os da escala neutral. Sempre que possível configurá-los para a cor neutral100alfa.

Labels e Ícones

O texto e os ícones devem parecer apagados, mas legíveis o suficiente para que o usuário entenda a funcionalidade quando o elemento estiver disponível novamente. Para isso configurá-los para a cor neutral300alfa.

Imagens

As imagens que fazem parte do componente devem ter sua opacidade reduzida a 30% e sua saturação a 0%, deixando-as em tons de cinza.

Example

Secondary States

São states que poderiam se encaixar nas categorias anteriores, mas por serem pouco usados na validação de navegáveis e serem facilmente padronizáveis ficam separados em sua própria categoria.

Comportamento

Secondary States existem em seu próprio componente, que pode ser adicionado acima do conteúdo de novos componentes como uma boolean property.

1 - Adicione uma instância do componente Secondary State na sua variante Rest, Rest

2 - Aplique absolute position no componente Secondary State

3 - Redimensione o Secondary State para que ele fique do tamanho do seu componente.

4 - Aplique constraints no componente Secondary State

5 - Transforme a camada do Secondary State em uma boolean property.

6 - Determine o valor da propriedade como false.

7- Nas propriedades do seu componente, clique em: + > Expose properties from > Nested instances.

8 - Selecione Secondary States.

Skeleton

Em vez de exibir um espaço em branco vazio ou um indicador de carregamento genérico, o skeleton state fornece aos usuários uma ideia visual de como será o layout final da página ou componente antes que o conteúdo real seja carregado.

O skeleton state ajuda a reduzir a percepção de tempo de espera e a melhora a sensação de responsividade do produto.

Comportamento

É recomendado que o skeleton state seja adicionado à componentes sempre que possível.

Ele é representado por um gradiente animado e sem cor que substitui o conteúdo do componente.

Example

Como usar Secondary States

Considere esse tutorial tanto para o skeleton state quanto para o focused state.

1 - Você pode ver o estado em uma instância do seu componente.

2 - Ative a propriedade “Show Secondary State”

3 - Selecione o state desejado no dropdown de Secondary States.

Not found

Histórico de Atualizações