Serase
  • Olá 👋
  • 🧰Caixa de Ferramentas
  • Tutoriais
    • 🌐Quick Start
    • 🧩Soluções
  • Níquel
    • Guias de Uso
      • Logo
      • Ícones
    • Componentes
      • Indicador de Localização
      • Botões
      • Inputs
  • 📜Updates
Powered by GitBook
On this page
  • Variações de Logo
  • Quando utilizar cada Logo
  • Tamanhos
  • Desenvolvimento
  • Fontes

Was this helpful?

  1. Níquel
  2. Guias de Uso

Logo

Em quais tamanhos e com que espaçamento utilizar a logo do aplicativo, dentro do mesmo ou em momentos relacionados.

PreviousGuias de UsoNextÍcones

Last updated 4 years ago

Was this helpful?

Variações de Logo

Quando utilizar cada Logo

Logo Primária

  • Ícone do .pkg do aplicativo.

  • Ícone do aplicativo na Play Store (o aplicativo vai pra Play Store?)

  • Imagem utilizada na Tela Inicial

Logo Secundária

  • Utilizada nas notificações do aplicativo (o aplicativo terá notificações?)

Logo Monocromática

  • Utilizada nas páginas internas do aplicativo, frequentemente no componente de localização interna para o usuário.

    • Para diretrizes de espaçamento em relação ao texto, favor checar o componente de localização interna.

Essa logo é monocromática especialmente para não captar a atenção do usuário em relação ao que está acontecendo na tela; e preta para criar contraste com o fundo branco, suficientemente legível mesmo em casos de disparidade visual.

Tamanhos

Todas as logos estão disponíveis no arquivo Figma, na página de Assets, nas seguintes resoluções:

  • 512x512

  • 182x192

  • 144x144

  • 96x96

  • 88x88

  • 72x72

  • 64x64

  • 48x48

  • 36x36

Nem todos os tamanhos são utilizados atualmente. Seguem os valores em uso para as respectivas imagens:

  • Logo Primária

    • Na tela inicial do aplicativo, utilizada em 144x144

  • Logo Secundária

    • [Previsão] Em notificações: 24x24, 36x36, 48x48, 72x72, 96x96 (para ícones pequenos) e 256x256 para ícones grandes de notificação.*

  • Logo Monocromática

    • Em componentes de localização interna, utilizada em 36x36.

Desenvolvimento

Caso necessite de uma logo em tamanho não encontrado na pasta de assetsda Branch operada, mas que esteja listado como utilizado aqui, faça a exportação da imagem pelo Figma.

  • A imagem deve ser exportada em .png

  • A imagem deve ser colocada na pasta de assets

  • O nome da imagem deve ser composto, nessa ordem, por:

    nomedalogo + tamanhoempixels

    Onde nomo da logo poder ser: primarylogo,secondarylogo e monologo

    Por exemplo: logosecundaria64x64.png

Fontes

  • Página com recursos utilizados em notificações de aplicativos nativos do android.

Variações da Logo (Primária, Secundário e Monocromática)