![uiguidelines1](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=)
Os ícones da barra de status servem para representar as notificações que acontecem no sistema operacional ou de seus aplicativos.
Graficamente eles são semelhantes aos ícones do menu, mas são menores e possuiem maior contraste, portanto não se deixe enganar e siga a Guideline.
Não esqueça das dimensões que são sempre pequenas, médias e grandes, tal como descrito nos primeiros posts, e que tem suas resoluções descritas na tabela 1.
.
Estrutura
.
- Os cantos arredondados não devem ser muito extensos, devem respeitar uma margem máxima de 2px, para entender verifique a Figura 9 (o número das figuras não é de acordo os nossos posts e sim de acordo com a Guideline oficial) e perceba no canto direito superior esse detalhe e de como fazer o canto arredondado corretamente.
- Todas as dimensões possuem 25 x 25px, e com um área de segurança (safeframe) de 2px, tal como na Figura 9.
- Detalhe importante, os ícones da barra status podem vazar essa área de segurança na direita e na esquerda caso necessário, mas jamais poderá vazar nos cantos superior e inferior.
- Como você já deve saber, a arte deve ser exportada com um PNG transparente, para isso eu sugiro o Fireworks como ferramenta para desenvolver esses ícones, ele é fácil de mexer para criar ícones com esses padrões.
- Porém, o pacote enviado pela Android é em PSD, e você poderá editar e fazer seus ícones através do Photoshop.
![figura9](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2ODMiIGhlaWdodD0iNTA0IiB2aWV3Qm94PSIwIDAgNjgzIDUwNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=)
.
Luzes, Efeitos e Sombras
.
Observe que os ícones da barra de status são ligeiramente menores, por isso eles possuem um alto contraste, para facilitar a sua visualização, dando um aspecto mais clean e objetivo das suas formas. Eu não sei se você usa um Photoshop ou outro programa gráfico em português, eu espero que não, vide que a maioria dos tutoriais não dão suporte a esses programas, ainda mais que as traduções ficam péssimas, mas, vou procurar deixar alguns detalhes em inglês e fazer comentários, o motivo é um só, imagine Depth, traduzido como profundidade, a gente sabe bem o que é um Depth em um gráfico, mas profundidade pode ter outro sentido, então tome cuidado com isso, as imagens ajudam a você entender o que é cada coisa.
![figura10](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUiIGhlaWdodD0iMzY0IiB2aWV3Qm94PSIwIDAgNzA1IDM2NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=)
![paletadecores](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDAiIGhlaWdodD0iNDY5IiB2aWV3Qm94PSIwIDAgMzQwIDQ2OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=)
.
Passo a Passo
.
1. Em uma ferramenta como o Adobe Photoshop, crie uma forma base em uma imagem de 25×25 px com fundo transparente. Cuidado com o safeframe, e mantenha o superior e inferior de 2 pixels livre, recorde-se do que foi citado acima
2. Adicione cantos arredondados, conforme especificado na Figura 9.
3. Adicione luz, efeitos e sombras, conforme especificado na Figura 10.
4. Exportar o ícone com tamanho 25×25 como um arquivo PNG com fundo transparente.
.
“O que fazer e o que não se deve fazer”
.
Abaixo segue alguns exemplos do que se deve e não se deve fazer, ou seja, seguir os padrões é importante.
![figura](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTMiIGhlaWdodD0iNzUiIHZpZXdCb3g9IjAgMCA0MTMgNzUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+)
[…] Ícone da barra de status […]
quero botar muitos incones em status