Linha Datasul

Árvore de páginas

Versões comparadas

Versão antiga 22

changes.mady.by.user Rodrigo Silva Costa

Gravado em

comparado com

Nova versão 23

changes.mady.by.user Rodrigo Silva Costa

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Deck of Cards
width100%
idNEWS
effectTypefade
Card
defaulttrue
idICON
labelConceito
Section
Column
width50%

Column
width50%

Í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. 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 documento.

Card
idTOOLBAR
labelÍcones de Toolbar
Section

Ícones de Toolbar

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.

Aviso

Obs.: Não deverá ser utilizada cor, ou variação de cor, diferente das apresentadas a seguir. 


Estado
colourGreen
titleHABILITADO


HTML
<html>
  <head>
    <style>
      .box {
        width: 70px;
        height: 70px;
        display: inline-block;
        background-color: #000000;
        margin-right: 10px;
      }
      .blue {
        background-color: #0000FF#164659;
      }
      .greenenable {
        background-color: #00FF00#F2F0CE;
      }
      .label {
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="box blue"></div>
    <div class="label">caixa numero 1<><b>Cor de Fundo<br>RGB:</b> 22  70  89<br><b>HEX:</b> #164659</div>
    <br>
       
	<br>
	<div class="box greenenable"></div>
    <div class="label">caixa numero 2<><b>Cor do Ícone<br>RGB:</b> 242  240  206<br><b>HEX:</b> #F2F0C</div>
  </body>
</html>


Estado
colourRed
titleDESABILITADO


HTML
<html>
  <head>
    <style>
      .box {
        width: 70px;
        height: 70px;
        display: inline-block;
        background-color: #000000;
        margin-right: 10px;
      }
      .blue {
        background-color: #0000FF#164659;
      }
      .greendisable {
        background-color: #00FF00#999882;
      }
      .label {
        display: inline-block;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="box blue"></div>
    <div class="label">caixa numero 1<><b>Cor de Fundo<br>RGB:</b> 22   70   89<br><b>HEX:</b> #164659</div>
    <br>    
	<br> 
    <div class="box greendisable"></div>
    <div class="label">caixa numero 2<><b>Cor do Ícone<br>RGB:</b> 153   152   130<br><b>HEX:</b> #999882</div>
  </body>
</html>
Card
idSCREEN
labelÍcones de Tela
Section
Column
width50%
HTML
<html>
  <head>
    <title>Três Caixas com Cor de Fundo #CCCCCC</title>
    <style>
      .boxmenu {
        width: 90px;
        height: 90px;
        background-color: #164659;
        display: inline-block;
		margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
      }
       .boxenable {
        width: 90px;
        height: 90px;
        background-color: #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;
      } 
      .text {
        display: inline-block;
        vertical-align: top;
        font-family: Courier New;
        font-weight: bold;
        }   
	 </style>
  </head>
  <body>
    <div class="boxmenu"></div>
    <div class="text">RGB:  22    70    89<br>HEX: #164659 </div>
    <br>
      <div class="boxenable"></div>
       <div class="text">RGB: 242   240   206<br>HEX: #F2F0CE </div>
    <br>
     <div class="boxdisable"></div>
    <div class="text">RGB: 153   152   130<br>HEX: #999882 </div>
    <br>
   </body>
</html>
Column
width50%

Í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.