Ferramentas do usuário
padroes_desenvolvimento
Diferenças
Aqui você vê as diferenças entre duas revisões dessa página.
|
padroes_desenvolvimento [2016/01/28 13:58] rafael |
padroes_desenvolvimento [2016/02/17 11:50] (atual) rafael |
||
|---|---|---|---|
| Linha 248: | Linha 248: | ||
| | | ||
| {{::screenhunter_22_jan._28_11.53.jpg?nolink|}} | {{::screenhunter_22_jan._28_11.53.jpg?nolink|}} | ||
| + | |||
| + | ===== Tabelas ===== | ||
| + | |||
| + | ==== Cabeçalho ==== | ||
| + | |||
| + | * Fundo: #999999 | ||
| + | * Altura: 30px | ||
| + | * Fonte: Arial 13px Negrito | ||
| + | * Cor da Fonte: #FFFFFF | ||
| + | * Borda: 1px #FFFF | ||
| + | |||
| + | ==== Linhas ==== | ||
| + | |||
| + | * Altura: 30px | ||
| + | * Fonte: Arial 13px | ||
| + | * Cor da Fonte: #999999 | ||
| + | * Zebra: #FFFFFF - #E9E9E9 (Começando a primeira com #FFFFFF) | ||
| + | * Hover: utilizar a cor secundária da aplicação | ||
| + | * Alinhamento: | ||
| + | * Esquerda: Textos alfanuméricos com quantidade ilimitada de caracteres | ||
| + | * Direita: Valores numericos (preços, quantidades) | ||
| + | * Centro: Números de documentos, datas ou códigos com quantidade limitada de caracteres | ||
| + | | ||
| + | {{ ::screenhunter_24_feb._02_15.57.jpg?nolink |}} | ||
| + | |||
| + | ===== Botões ===== | ||
| + | |||
| + | * Cor: Principal da aplicação | ||
| + | * Fonte: Arial 13px | ||
| + | * Cor da Fonte: #FFFFFF | ||
| + | * Altura: 35px | ||
| + | * Ícone branco posicionado à esquerda do texto | ||
| + | * Arredondamento da borda: 5px | ||
| + | | ||
| + | {{ ::screenhunter_25_feb._02_16.25.jpg?nolink |}} | ||
| + | |||
| + | |||
| + | ===== Abas ===== | ||
| + | |||
| + | * Fonte: Arial 13px Negrito | ||
| + | * Cor da Fonte: #333333 | ||
| + | * Borda: 1px #d5d5d5 | ||
| + | * Cor da aba selecionada: #F7F7F7 | ||
| + | * Cor da aba não selecionada: #E9E9E9 | ||
| + | * Arredondamento da borda: 5px (topo) | ||
| + | * Cor do conteúdo da aba selecionada: #F7F7F7 | ||
| + | * Espaçamento entre as abas: 5px a direita | ||
| + | |||
| + | {{ ::screenhunter_28_feb._02_17.19.jpg?nolink |}} | ||
| + | |||
| + | ===== Formulários ===== | ||
| + | |||
| + | * Distância mínima esquerda: 20px | ||
| + | * Distância mínima acima: 20px | ||
| + | |||
| + | ==== Rótulo ==== | ||
| + | |||
| + | * Cor do rótulo: #333333 | ||
| + | * Fonte do rótulo: Arial 13px Negrito | ||
| + | * Posição: Alinhado a esquerda, acima do campo e com margem de 5px abaixo | ||
| + | |||
| + | ==== Campos ==== | ||
| + | |||
| + | * Fonte: Arial 13px | ||
| + | * Cor da fonte: #999999 | ||
| + | * Borda: 1px #D5D5D5 | ||
| + | * Arredondamento da borda: 5px | ||
| + | | ||
| + | {{ ::screenhunter_29_feb._03_10.19.jpg?nolink |}} | ||
| + | |||
| + | |||
| + | * Marcadores de campos do tipo checkbox e radio devem ter seus marcadores na cor principal da aplicação | ||
| + | | ||
| + | {{ ::screenhunter_30_feb._03_10.36.jpg?nolink |}} | ||
| + | |||
| + | ===== Ícones ===== | ||
| + | |||
| + | Para baixar ícones para botões e atalhos, poderá ser utilizado o site https://icons8.com/. | ||
| + | |||
| + | Na página principal, informe o termo a ser procurado em inglês e clique sobre o botão de pequisa. | ||
| + | |||
| + | {{ ::screenhunter_70_feb._17_09.37.jpg?nolink |}} | ||
| + | |||
| + | Para personalizar a cor e o tamanho do ícone, selecione o ícone desejado e clique sobre a paleta de cores localizado no canto superior direito. Informe a cor desejada nas cores padrão ou informando o hexadecimal da cor. | ||
| + | |||
| + | {{ ::screenhunter_71_feb._17_09.41.jpg?nolink |}} | ||
| + | |||
| + | {{ ::screenhunter_72_feb._17_09.43.jpg?nolink |}} | ||
| + | |||
| + | Para alterar o tamanho da imagem, clique sobre o indicativo de formato localizado abaixo da imagem e selecione o tamanho desejado ou personalize o tamanho clicando sobre o item "Custom". | ||
| + | |||
| + | {{ ::screenhunter_73_feb._17_09.46.jpg?nolink |}} | ||
| + | |||
| + | {{ ::screenhunter_74_feb._17_09.48.jpg?nolink |}} | ||
| + | |||
| + | Para realizar o download da imagem, clique sobre o botão localizado logo abaixo. | ||
| + | |||
| + | {{ ::screenhunter_75_feb._17_09.50.jpg?nolink |}} | ||
| + | |||
| + | |||
| + | |||
padroes_desenvolvimento.1453989490.txt.gz · Última modificação: 2016/01/28 13:58 por rafael
Ferramentas da página
