Ícones de aplicativos

Transcrição

1 Ícones de aplicativos

2 Elementos Nós criamos vários aplicativos, tanto para uso interno quanto externo. A fim de manter uma aparência e uso consistentes em todos os ícones de aplicativos, é importante seguir as orientações apresentadas nesta seção. 1. Monograma de assinatura O monograma de assinatura sempre aparece no canto superior esquerdo do ícone. Não altere o seu tamanho ou posição. Visão geral 1. Cor de fundo O monograma de assinatura sempre está em uma área com fundo branco sólido.. Pictograma de uso Estes elementos são diferentes para cada novo aplicativo. Consulte as páginas e 4 para obter orientações sobre como criá-los. 4. Nome do aplicativo O nome do aplicativo deve começar com e ser seguido por um nome descritivo curto, simples e pertinente, que ajude a identificar a função específica do aplicativo. No entanto, as restrições de contagem de caracteres podem impedir que você inclua os dois nomes em cada um deles. Clique para fazer a transferência de um arquivo do Illustrator, que você pode usar como base para desenhar os ícones de aplicativos. Consulte a especificação técnica de cada plataforma, na qual você deseja apresentar o seu aplicativo e ajuste a arte final adequadamente em relação ao dimensionamento, raio do canto e formatos de arquivo. Margem do monograma de assinatura News 4 Margem do monograma de assinatura O monograma de assinatura tem uma margem ao seu redor. Não coloque nenhum elemento de desenho dentro desta margem. Como mostrado pelos pontos cor-de-rosa do diagrama, o espaçamento é igual à largura de dois pontos, desde o ponto exclarrogativo (o interrobang ) no monograma de assinatura. Diretrizes da Marca 016 Ícones de aplicações

3 Criação dos pictogramas de uso Para reconhecimento da marca, o monograma de assinatura deve permanecer consistente em todos os nossos ícones de aplicativos. Para refletir o uso do aplicativo, cada ícone também deve incluir um pictograma do uso; veja aqui como criá-lo. 1 Paleta de cores Fundo Pictograma de uso Desenho de um pictograma de uso 1. Paleta de cores Os pictogramas da função usam a nossas cores primárias, azul-escuro, azul claro e azul-turquesa. Branco R55 G55 B55 #FFFFFF Azul-escuro R00 G48 B87 #00057 Azul claro R1 G4 B8 #D4EAE4 Azul-turquesa R18 G178 B166 #1BA6. Desenho de um pictograma da função O seu pictograma deve ser uma simples representação de um objeto familiar que os usuários poderão identificar facilmente. Usar poucas formas geométricas ajuda a manter os pictogramas simples e consistentes em diferentes ícones de aplicativos. Sempre crie pictogramas que estão voltados para frente, não em perspectiva. Posicionamento de um pictograma de uso em um ícone New. Posicionamento de um pictograma de uso em um ícone Posicionamento central - Coloque o pictograma da função o mais centralmente possível no espaço, com os elementos importantes longe das bordas. Não permita que o pictograma entre na margem em torno do monograma de assinatura. Recorte criativo - Isso dará ao seu ícone um aspeto mais divertido. Certifique-se de não recortar muitos detalhes, parecendo que o pictograma ficou perdido. Além disso, não permita que o pictograma entre na margem em torno do monograma de assinatura. Posicionamento central Área para colocar a imagem Recortes criativos Área para colocar a imagem Diretrizes da Marca 016 Ícones de aplicações

4 Exemplo de ícones de aplicativos 1. Uso dos pictogramas de uso Os ícones de aplicativos apresentam um pictograma simples de uso, que está posicionado totalmente na área de fundo branco, como nos exemplos aqui apresentados. 1 Uso dos pictogramas de uso Recortes criativos. Recortes criativos Para criar um ícone de aplicativo mais dinâmico, procure usar formas interessantes para cortar o pictograma. Ao recortar, sempre assegure de manter o branco como a cor de fundo, atrás do monograma de assinatura. Travel Photo Invent Think. Combinação de textos e gráficos Você também pode combinar textos ou números em seu pictograma da função. Para garantir que permaneçam legíveis em tamanho pequeno, use poucos caracteres e somente as combinações de cores que atenderem aos nossos padrões de acessibilidade. Todos os textos devem ter o tamanho e atipografia da nossa marca, Open Sans ou Playfair Display. 4. Uso de texto somente Às vezes, pode ser mais adequado usar uma única palavra ou números em vez de um pictograma de uso. Nesses casos, use apenas palavras curtas em azul-escuro, para evitar que os caracteres fiquem ilegível em tamanho pequeno. Todos os textos devem ter o tamanho e tipografia da nossa marca, Open Sans ou Playfair Display. Combinação de textos e gráficos 4 Usando somente texto Acessibilidade e legibilidade ABC Data Blog Learn Data Blog Sempre se certifique de que as cores e o texto atendem aos nossos padrões de acessibilidade. As combinações aceitas de texto e cores para os ícones de aplicativos são mostrados aqui, à direita. Azul claro #D4EAE4 Cor de fundo Azul-escuro #00057 Azul-escuro #00057 Cor de fundo Azul claro #D4EAE4 Azul-escuro #00057 Cor de fundo Branco #FFFFFF Diretrizes da Marca 016 4

5 Ícones de aplicações O que não fazer August 016 Aqui estão alguns itens que devem ser evitados durante a criação dos ícones de aplicativos. Orientações para as lojas de aplicativos As lojas de aplicativos de empresas como a Apple ou Google atualizam frequentemente as suas regras e regulamentos relativos ao desenho dos ícones de aplicativos. Certifique-se de verificar as orientações mais recentes dessas empresas antes de apresentar um novo aplicativo a elas. Diretrizes da Marca 016 August 016 August 016 August 016 Não use qualquer outra cor Não use o nosso logotipo primária, de suporte ou de como uma imagem. destaque além daquelas permitidas por estas August 016 orientações. Não use muito texto dentro de seu desenho ou ele pode ficar ilegível. Não altere o tamanho, a cor ou a posição do monograma de assinatura. August 016 August 016 Não coloque imagens dentro da margem em torno do monograma de assinatura. Não use ilustrações complexas nos ícones de aplicativos. Não use padrões nos ícones de aplicativos. Não use fotografias nos ícones de aplicativos. 5