Configuração de imagens e ícones de aplicativos no AppKit do MemberPress

Logotipos, telas iniciais e ícones personalizados melhoram a identidade da marca e a experiência do usuário em aplicativos móveis. O MemberPress AppKit suporta a personalização de imagens para telas iniciais, páginas de login, ícones de aplicativos e telas de inicialização.

Este documento explica as especificações de imagem recomendadas, as diretrizes de marca e as etapas de configuração de todos os ativos visuais.

Entendendo os ativos visuais do aplicativo

Os ativos visuais criam experiências de marca nas plataformas iOS e Android. Diferentes tipos de ativos servem a propósitos específicos, incluindo branding de navegação, telas de autenticação, animações de inicialização e ícones da tela inicial do dispositivo. A configuração adequada dos ativos garante a consistência da marca em todas as interações dos membros com o aplicativo.

Especificações de imagem recomendadas

Diferentes elementos visuais exigem dimensões e formatos específicos para uma exibição ideal.

Elemento	Tamanho (pixels)	Formato
Logotipo da tela inicial	1200 × 180	PNG ou PSD
Logotipo de login	1200 × 774	PNG ou PSD
Histórico de login	2732 × 2732	PNG ou PSD
Histórico do registro	2732 × 2732	PNG ou PSD
Plano de fundo da tela de inicialização	2732 × 2732	PNG ou PSD
Ícone de aplicativo iOS	1024 × 1024	PNG
Ícone de aplicativo Android	1024 × 1024	PNG
Ícone adaptável do Android	1024 × 1024	PNG
Ícone de notificação do Android	256 × 256	PNG

Observação: Todas as imagens devem usar PNG formato com 32 bits profundidade de cor e sRGB para uma exibição consistente em todos os dispositivos.

Entendendo os requisitos dos ícones do AppKit

Ícone padrão do AppKit do MemberPress (iOS e Android)

• Tamanho: 1024 × 1024 px
  
• Zona segura: 682 × 682 px centro
  
• Formato: PNG (32 bits), sRGB
  
• iOS: Sem transparência
  
• Android: Transparência permitida

Ícone adaptável do Android

Necessário no Android 8+ para flexibilidade de forma e paralaxe.

• Primeiro plano: Logotipo transparente, 1024 × 1024 px
  
• Histórico: Imagem opaca, 1024 × 1024 px
  
• Zona segura: 683 × 683 px no centro (margem de 170 px)

Lançamento / Tela inicial

Exibido instantaneamente na inicialização do aplicativo MemberPress.

• Tamanho: 2732 × 2732 px
  
• Zona segura: 1200 × 2732 px central
  
• Formato: PNG (32 bits), sRGB

Tela de login

• Logotipo: Máximo de 200 × 150 px dentro do plano de fundo
  
• Histórico: 2732 × 2732 px
  
• Formato: PNG (32 bits), sRGB

Acesso às configurações de marca

Toda a configuração de imagens e ícones ocorre na interface de configurações de marca.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.

2. Verifique se todas as seções de configuração aparecem:
   • Tela inicial para o logotipo de navegação;
   • Telas de login para autenticação de marca;
   • Telas de registro para a marca de registro;
   • Tela de abertura para configuração da tela inicial;
   • Ícones de aplicativos para os ícones da tela inicial;
   • Ícones adaptáveis para Android para camadas de ícones adaptáveis;
   • Ícone de notificação para a exibição da bandeja de notificações.

Observação: Todas as seções devem ser configuradas antes de enviar o aplicativo para as lojas de aplicativos.

Configuração do logotipo da tela inicial

O logotipo da tela inicial é exibido nos cabeçalhos de navegação do aplicativo.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Tela inicial seção.
   
3. Clique em Carregar imagem.

4. Selecione o arquivo de logotipo no dispositivo ou na biblioteca de mídia.
   
5. Redimensione a imagem usando a ferramenta de corte, se necessário.

6. Clique em Finalizar para concluir o upload.
   
7. Revise o logotipo em modelos de visualização para iOS e Android.

O logotipo da tela inicial aparece de forma consistente em todas as páginas de aplicativos no cabeçalho de navegação.

Configuração dos ativos da tela de login

Os ativos da tela de login incluem o logotipo e as imagens de fundo das páginas de autenticação.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Telas de login seção.
   
3. Clique em Carregar imagem ao lado do logotipo de login.

4. Selecione o arquivo do logotipo e clique em Finalizar após qualquer ajuste.
   
5. Clique em Carregar imagem.
   
6. Selecione o arquivo de plano de fundo e clique em Finalizar após os ajustes.
   
7. Alternar entre as opções Login e Esqueci minha senha visualizações de página.

Os ativos de login são exibidos nas páginas de autenticação, inclusive nas telas de login, de esquecimento de senha e de redefinição de senha.

Configuração dos ativos da tela de registro

Os ativos da tela de registro incluem imagens de fundo para páginas de criação de conta.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Telas de registro seção.
   
3. Clique em Carregar imagens.

4. Selecione o arquivo de plano de fundo e clique em Finalizar após os ajustes.
   
5. Revise o plano de fundo na visualização da página de registro.

O uso da mesma imagem para os planos de fundo de login e registro cria uma marca de autenticação consistente.

Configuração dos ativos da tela de abertura

Os ativos da tela de inicialização são exibidos durante a inicialização do aplicativo antes do carregamento do conteúdo.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Tela de abertura seção.
   
3. Clique em Carregar imagem.
   
4. Selecione o arquivo de plano de fundo.
   
5. Verifique o Mostrar botão giratório para ativar a animação de carregamento.
   
6. Selecione Cor do spinner usando o seletor de cores.

7. Analise a visualização animada que mostra o comportamento do spinner.

Observação: A cor do spinner deve contrastar bastante com a cor do plano de fundo para garantir uma visibilidade clara durante o carregamento.

Configuração de ícones de aplicativos

Os ícones de aplicativos são exibidos nas telas iniciais dos dispositivos e nas lojas de aplicativos.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Ícones de aplicativos seção.
   
3. Clique em Carregar imagem.
   
4. Clique no botão Carregar imagem ao lado do ícone do aplicativo Android.

5. Redimensione, se necessário, e clique em Finalizar.
   
6. Revisar ícones em modelos de dispositivos iPhone e Android.

Ícones separados para iOS e Android permitem o manuseio de transparência específico para cada plataforma.

Configuração dos ícones adaptáveis do Android

Os ícones adaptáveis do Android oferecem camadas de primeiro e segundo plano para exibição flexível.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Ícone adaptável do Android seção.
   
3. Clique em Carregar imagem.

4. Clique em Finalizar após qualquer ajuste.
   
5. Analise a visualização do ícone adaptável que mostra o comportamento da camada.

Observação: Os ícones adaptativos aparecem somente em dispositivos Android 8 e posteriores. As versões anteriores do Android exibem o ícone padrão do aplicativo Android.

Configuração do ícone de notificação do Android

Os ícones de notificação são exibidos na bandeja de notificações do Android.

1. Navegue até Painel de controle > MP AppKit > Branding > Imagens.
   
2. Localize o Ícone de notificação seção.
   
3. Clique em Carregar imagem.

4. Clique em Finalizar após qualquer ajuste.
   
5. Revise o ícone na visualização da bandeja de notificações.

Os ícones de notificação devem usar designs simples e reconhecíveis, visíveis em tamanhos pequenos.

Salvando alterações de configuração

Todos os uploads de imagens e ícones devem ser salvos antes de entrarem em vigor.

1. Role até o final da página. Painel de controle > MP AppKit > Branding > Imagens página.
   
2. Clique em Salvar alterações.

3. Aguarde a mensagem de confirmação indicando que o salvamento foi bem-sucedido.

Observação: Navegar para fora da página sem salvar faz com que todos os uploads não salvos sejam perdidos. As alterações devem ser salvas explicitamente para persistirem.