Card |
---|
default | true |
---|
id | ICONicon |
---|
label | Conceito |
---|
| Section |
---|
Column |
---|
| Image Removed Image Added
|
Column |
---|
| Ícones minimalistas
O novo conceito de ícones minimalistas tem sido cada vez mais popular nos últimos anos. Os novos ícones apresentam um design limpo e moderno, com cores sólidas e monocromáticas, que conferem um visual mais uniforme e organizado ao produto. Além disso, esses ícones têm o objetivo de facilitar o reconhecimento das funcionalidades dos aplicativos de forma rápida e intuitiva. Para criação de novos ícones, poderão ser utilizados os ícones disponíveis na biblioteca PO-UI ou os ícones desenvolvidos no projeto de harmonização. Caso não exista ícone disponível, um novo ícone poderá ser criado respeitando as devidas medidas dos atuais, com as cores apresentadas na aba "Paleta de Cores" deste nas respectivas abas de cada tipo de ícone abordados neste documento. |
|
|
Card |
---|
id | TOOLBARtoolbar |
---|
label | Ícones de Toolbar |
---|
| Section |
---|
Os ícones desenhados para toolbar devem manter o formato de largura 28 pixels e altura 27 pixels para garantir uma aparência uniforme e organizada na barra de ferramentas. Além disso, é importante salvá-los em formato PNG para manter a qualidade da imagem e sem perda de dados. Os botões possuem dois estados, habilitado e desabilitado, que devem ser identificados visualmente por meio de paletas de cores diferentes. As cores adequadas para cada estado estarão disponíveis abaixo.
Avisoinfo |
---|
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. |
Section |
---|
Column |
---|
| Estado |
---|
colour | Green |
---|
title | HABILITADO |
---|
|
HTML |
---|
<html>
<head>
<style>
. |
|
|
boxmenu50px50px#164659 display: inline-block;
margin- |
|
|
left20pxmargin-right: 20px;marginbottom20px#164659;
}
.boxen {
width: |
|
|
vertical-align: middle;
}
.boxenable70px;
height: 70px;
background-color: #F2F0CE;
margin-right: 10px;
display: inline-block;
}
.label {
|
|
|
width50pxheight50pxbackground-color: #f2f0ce;
display: inline-block;
margin-left: 20px; </style>
</head>
<body>
<div class="box blue"></div>
<div class="label"><b>Cor de Fundo<br>RGB:</b> 22 70 89<br><b>HEX:</b> #164659</div>
<br>
|
|
|
margin-right: 20px;<br>
<div class="boxen"></div>
|
|
|
margin-bottom: 20px;
vertical-align: middle;
} <div class="label"><b>Cor do Ícone<br>RGB:</b> 153 152 130<br><b>HEX:</b> #F2F0CE</div>
</body>
</html> |
|
Column |
---|
| Estado |
---|
colour | Red |
---|
title | DESABILITADO |
---|
|
HTML |
---|
<html>
<head>
<style>
|
|
|
boxdisable50px50pxbackground-color#999882displayinline-block20pxmarginbottom20px;verticalalignmiddle textlabel {
display: inline-block;
vertical-align: top;
}
|
|
|
</style>
</head>
<body>
<div class=" |
|
|
boxmenubox blue"></div>
<div class=" |
|
|
text> Corfundo <br> RGB: 22 89 <br> HEX: #164659 div>
<br>
<div class="boxenable"><<div class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>
<br>boxdisablebox disable"></div>
<div class=" |
|
|
text">RGB:label"><b>Cor do Ícone<br>RGB:</b> 153 152 |
|
|
130<br>HEX #999882 < <br>
Aviso |
---|
Os ícones de toolbar deverão ser salvos em:.../progress/src/image/2023/toolbar |
Para criar novos ícones utilize um editor de imagens capaz de manipular vetores, como o InkScape, e siga os seguintes passos: - Criar um novo arquivo com 28 pixels de largura e 27 pixels de altura.
- Adicionar o fundo com a cor da toolbar (Código HEXADECIMAL: #164659).
Image Added
- Desenhar o ícone, respeitando as seguintes medidas: 17,5 pixels de altura, 17,5 pixels de largura e 3,5 pixels de espessura, as bordas deverão estar arredondadas, utilizando a inclinação entre 35~40º.
Image Added - Após finalizar o desenho, é importante verificar se o ícone está alinhado corretamente ao centro e em proporção adequada com as dimensões da imagem.
- Exportar o arquivo como PNG, para manter a qualidade da imagem e sem perda de dados.
|
|
Card |
---|
id | screen |
---|
label | Ícones de Tela |
---|
| Section |
---|
Ícones de Tela
Os ícones de tela devem ser criados de acordo com o tamanho dos botões, para garantir uma proporção adequada e uma boa aparência na interface. Além disso, é necessário salvá-los em formato BMP (24-bits), para que a qualidade da imagem seja mantida.
Informações |
---|
Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. |
RedDESABILITADO
HTML |
---|
<html>
<head>
<style>
. |
|
|
boxmenu50px50px#164659 display: inline-block;
margin- |
|
|
left20px margin-right: 20px; margin-bottom: 20px;verticalalignmiddle .boxenable 50px 50px #f2f0ce;
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
vertical-align: middle;
}
.boxdisable {
width: 50px;
height: 50px;
background-color: #999882;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
vertical-align: middle;
}
.text#F2F0CE;
margin-right: 10px;
display: inline-block;
}
.boxgrey{
width: 70px;
height: 70px;
background-color: #C0C0C0;
margin-right: 10px;
display: inline-block;
}
.label {
display: inline-block;
vertical-align: top;
}
|
|
|
boxmenuboxgrey"></div>
<div class=" |
|
|
text> Corfundo <br> RGB: 22 70 89 <br> HEX: #164659 </div>
<br>
<div class="boxenable"><Fundo<br>RGB:</b> 192 192 192<br><b>HEX:</b> #C0C0C0</div>
|
|
|
<div class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>boxdisablebox blue"></div>
<div class=" |
|
|
text>RGB:153152130<br>HEX #999882 < <br>
|
| card | id | SCREEN | label | Ícones de Tela | sectioncolumnwidth | 50% |
<title>Três Caixas com Cor de Fundo #CCCCCC</title>boxmenu90px90px;
background-color: #16465970px;
display: inline-block |
|
|
;
margin-left: 20pxmarginright20pxbottom20px boxenable
width: 90px;
height: 90px;#f2f0ce display:inline-block;
margin-left: 90px;
margin-bottom: 20px;
boxdisable
width: 90px;height: 90px;
background-color: #999882 |
|
|
;
display: inline-block;
margin-right: 20px margin-bottom:20px;
textlabel {
display: inline-block;
vertical-align: top;
|
|
|
font-family: Courier New;
font-weight: bold;
}
}
</style>
</head>
<body>
<div class=" |
|
|
boxmenuboxgrey"></div>
<div class=" |
|
|
text>RGB:22Fundo<br>RGB:</b> 192 192 |
|
|
70 89<br>HEX: #164659 <192<br><b>HEX:</b> #C0C0C0</div>
<br> |
|
|
<divclass="boxenable"></div>
<div class="text">RGB: 242 240 206<br>HEX: #F2F0CE </div>
<br>
boxdisablebox disable"></div>
<div class=" |
|
|
text">RGB:label"><b>Cor do Ícone<br>RGB:</b> 153 152 |
|
|
130<br>HEX #999882 <
<br> Column |
---|
| Ícones de Tela
Aviso |
---|
Os ícones de tela deverão ser salvos em:.../progress/src/image |
Como criar novos ícones de Tela
Para criar novos ícones utilize um editor de imagens capaz de manipular vetores, como o InkScape, e siga os seguintes passos: Os ícones de tela devem ser criados de acordo com o tamanho dos botões, para garantir uma proporção adequada e uma boa aparência na interface. Além disso, é necessário salvá-los em formato - Criar um novo arquivo com as dimensões de altura e largura do botão.
- Adicionar o fundo com a cor da tela (Código HEXADECIMAL: #C0C0C0).
Image Added
- Desenhar o ícone, respeitando as medidas proporcionais ao botão e 1,5 pixels de espessura, as bordas deverão estar arredondadas, utilizando a inclinação entre 35~40º.
Image Added - Após finalizar o desenho, é importante verificar se o ícone está alinhado corretamente ao centro e em proporção adequada com as dimensões da imagem.
- Exportar o arquivo como
- BMP (24-bits), para
que - manter a qualidade da imagem
seja mantida- e sem perda de dados.
|
|