Aspeto e identidade visual do quiosque

Passos e definições

Comece por consultar os elementos personalizáveis e o resultado possível. Os números das ilustrações correspondem aos passos abaixo. Todas as opções são facultativas; altere apenas o necessário.

Aspeto do quiosque horizontal e vertical

Ilustração localizada a partir da captura fornecida. Os textos do menu instalado podem ser diferentes.

O mesmo quiosque na horizontal e na vertical. É um desenho de exemplo; o número de aplicações não impõe uma disposição fixa.

Estrutura de um mosaico de aplicação

Convite ao toque no ecrã

Ilustração localizada a partir da captura fornecida. Os textos do menu instalado podem ser diferentes.

O verde representa a camada de aplicações, o azul a de apresentação e o plano transparente frontal o convite ao toque. Os contornos coloridos apenas explicam a organização; não fazem parte da imagem carregada. Configure o convite ao toque no passo 5.

Disposição com galeria de fotografias

A disposição com galeria altera o menu (3). Adicione fotografias e configure o recorte no passo 4. O recorte preenche a área e pode cortar os limites; sem recorte, a fotografia completa aparece sobre um fundo desfocado.

Fundo global e texto da caixa de diálogo

11

Aviso de inatividade

A aplicação vai fechar.

Continuar

Exemplos reais da camada de aplicações: aspeto e conteúdos próprios

Estes exemplos mostram camadas de aplicações em utilização real: menus personalizados com logótipos, cores e conteúdos dos utilizadores. A camada suporta ecrãs horizontais e verticais.

1. Escolha o logótipo da camada de aplicações. Escolha uma imagem de logótipo nos seus conteúdos. Utilize fundo transparente se tiver de se integrar no painel. Alterar a cor do painel não remove um retângulo branco incluído na imagem. O logótipo e as suas cores não são recoloridos automaticamente.
2. Introduza o título do menu. Introduza o título visível aos visitantes, como «Centro de visitantes». O nome do local na administração e o título do menu são campos separados.
3. Escolha a disposição do menu e o tamanho dos ícones.
   • Tipo de disposição das aplicações — Escolha «Com galeria de fotografias» ou «Sem galeria de fotografias». As fotografias alteram o espaço disponível e a disposição. Sem galeria, o espaço é utilizado para aplicações.
   • Tamanho dos ícones das aplicações — O controlo altera o tamanho da imagem dentro do mosaico. Por exemplo, 60 % redimensiona a imagem na sua área, não o número de aplicações nem o tamanho do mosaico. Vai de 0 a 100 %. A 0 %, a imagem não é visível.

   O quiosque escolhe os tamanhos e a disposição consoante o número de aplicações, a orientação e o desenho. As grelhas 5 × 3 e 4 × 5 são exemplos, não uma definição de colunas. Se existir apenas uma aplicação, pode abri-la diretamente sem apresentar o menu.

4. Adicione fotografias e configure o recorte.

   Adicione e remova fotografias no separador «Galeria de fotografias da camada de aplicações». Depois selecione «Com galeria de fotografias» em Imagem de marca. Carregar fotografias não seleciona, por si só, essa disposição.

   • Recorte de conteúdos da galeria da camada de aplicações — Ativado: a fotografia preenche a área e pode ser recortada nos limites. Desativado: aparece a fotografia completa e uma versão desfocada preenche o espaço restante.

   Esta galeria pertence ao menu do quiosque. É separada da aplicação Galeria e das imagens das campanhas.

5. Configure o convite ao toque no ecrã.

   Uma imagem sobreposta à camada de apresentação indica que é possível tocar para abrir a camada de aplicações. É separada do logótipo e das fotografias. Escolha uma imagem para cada orientação utilizada. As áreas transparentes mantêm visíveis os conteúdos por baixo.

   O convite ao toque não substitui a navegação de um website. Se utilizar Website sem controlos do sistema, o programador pode adicionar botões para regressar ao menu ou às campanhas. Consulte o exemplo e as instruções em o guia para controlar as camadas a partir do website.
   • Ecrã horizontal: 16:9
   • Ecrã vertical: 9:16
   • Imagem própria: prepare uma imagem transparente com a resolução de destino para cada orientação utilizada. Carregue-a e selecione-a na definição de sobreposição correspondente.
   • Gráficos e posição: coloque o ícone ou texto em qualquer ponto do ficheiro. As áreas transparentes mantêm os conteúdos visíveis.
   • O que faz a sobreposição: é um complemento sobre a camada de apresentação, não uma terceira camada independente. A posição de um ícone não define a área tátil; a transição depende das definições de camadas e aplicações.

   Também pode utilizar os PNG transparentes originais abaixo. Carregue-os na imagem de marca do local, no campo da orientação correspondente. O padrão axadrezado da pré-visualização indica transparência e não faz parte do ficheiro.

   Horizontal

   

   PNG · 2048 × 1152 px

   Transferir PNG – Horizontal

   Vertical

   

   PNG · 1152 × 2048 px

   Transferir PNG – Vertical

   Nos passos 6–11, define as cores de cada elemento do quiosque. Cada grupo aplica-se a um elemento específico, como o painel principal ou o fundo do ícone.

   Cada grupo tem dois controlos: «Cor de fundo» define o fundo e «Cor do texto e dos símbolos» os elementos correspondentes em primeiro plano. Comece pelos painéis e mosaicos e verifique a legibilidade após cada alteração.

   Clique na amostra junto do campo. Ajuste a tonalidade, o brilho e a transparência e confirme com OK. Se conhecer o código exato da marca, pode introduzi-lo diretamente.

   Assegure contraste suficiente: texto escuro sobre fundo claro ou o inverso. As cores da interface não recolorem fotografias, vídeos, logótipos carregados nem conteúdos de websites externos.
6. Defina as cores do painel principal. O painel com logótipo, título e relógio: à esquerda na horizontal e em cima na vertical.
   • Cor de fundo: O fundo do painel principal.
   • Cor do texto e dos símbolos: Texto e símbolos que utilizam a cor de primeiro plano do painel principal.
7. Defina as cores do painel secundário. A área de conteúdos do menu: à direita na horizontal e abaixo do painel principal na vertical.
   • Cor de fundo: O fundo do painel secundário, também utilizado noutros ecrãs de aplicações.
   • Cor do texto e dos símbolos: Texto e símbolos associados sobre este fundo.
8. Defina o fundo dos ícones das aplicações. A área atrás da imagem de um ícone de aplicação.
   • Cor de fundo: O fundo do ícone, especialmente visível à volta de imagens pequenas ou transparentes.
   • Cor do texto e dos símbolos: Utilizado por outros controlos. Não recolore a imagem do ícone no menu.
9. Defina os fundos dos botões e nomes das aplicações. O fundo dos nomes e botões que utilizam esta cor.
10. Defina as cores do texto e dos símbolos de botões e aplicações. Nomes das aplicações e símbolos dos controlos correspondentes.
11. Defina o fundo global das aplicações.

    O fundo global é utilizado na contagem de inatividade e em aplicações como o leitor USB e Labirinto. Não define o fundo principal do menu de mosaicos. Verifique o contraste e mantenha as predefinições se não precisar de as alterar.

    • Cor de fundo: O fundo dos elementos que utilizam este grupo de cores.
    • Cor do texto e dos símbolos: Texto e símbolos associados, por exemplo no aviso de inatividade.

Guarde as alterações. O servidor coloca a camada atualizada em fila para os dispositivos do local. Têm de estar ligados e as novas imagens têm de terminar a transferência. Verifique o resultado num dispositivo associado; guardar o formulário não confirma o envio concluído.