Download - Especificações UX/UI CMA Tablet
![Page 1: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/1.jpg)
Especificações
![Page 2: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/2.jpg)
Índice
Splash Page 3Splash Page Erro 4Erro 404 5Login Autenticação 6Botão Voltar 6Checkbox 6Login Autenticação Erro 7Barra de Títulos 8Lista de Itens (Cotações e Destaques) 8Visão Geral 8Barra de Itens 8Cabeçalho de Tabela 8Lista de Itens Notícias 9Cores Variação dos Índices 10Alinhamento das linhas 10Barra de Operações 11Caixa de Busca de Ativos 11Item de uma Lista Selecionado 11Ícone Toolbar selecionado 11Piscada de Notícias 11Badge Tempo Diferido / Real 11Grid Painel de Cotações 11Item de uma Lista em Edição 12Ícone Toolbar não selecionado 12Toolbar 12Mosaico 13Alertas 14Menus Suspensos 15Alerta de Ativo Inserido 16Ticker Mosaico 17Logotipo indicando notificações 18Pop-up 19Modal 19/20Barra Superior Pop e Modal 19Subtítulo 19Busca 19Botão Pop ou Modal 19Lista de Itens Pop e Modal 20
Largura Colunas e Menu 21Detalhes da Cotação (Modal) 22/23Gráfico 24/25Gráfico (Configurações Pop) 26Badge de Notificações27Menu Slide 27/28/29/30/31Menu Slide ícones 27Lista de Itens (Menu Slide ) 27Ícones de Lista (Menu Slide e Menu) 28Menu Slide Configurações 29Botão Selecionados, Des/habilitados 29Notificações 31Pop up Alerta 32Notícias 33Notícias Íntegra Slide 34Loading Javascript 35Visão Geral - Caixa de Filtros (Toolbar) 36Tema Cinza Simples- Visão Geral 37Tema Cinza – Visão Geral 38
NOTAS25/09/13 – Onde houver fonte OpenSans Light, substituir por OpenSans Regular
![Page 3: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/3.jpg)
SPLASH PAGEfont: "OpenSans-Light“background-color: #949494font-size: 0.9emcolor: #fff
![Page 4: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/4.jpg)
ERROSPLASH PAGEfont: "OpenSans-Regular"font-size: 0.8empadding: 15px 15pxborder: 1px solidborder-radius: 5px-moz-border-radius: 5px-webkit-border-radius: 5px
Cores: as mesmas do AlertasSlide #
![Page 5: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/5.jpg)
ERROfont: "OpenSans-Bold"font: "OpenSans-Regular"font-size: 1em
![Page 6: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/6.jpg)
font: "OpenSans-Regular"font-size: 2em
font: "OpenSans-Regular"font-size: 0.7em
font: "OpenSans-Bold“font: "OpenSans-Light"font-size: 0.8emPadding: 10pxBorder: 1px solid #cacac9
font: "OpenSans-Regular"font-size: 0.9em
font: "OpenSans-Regular"font-size: 1.5emColor: #007affBackground-color: #cacac9
font: "OpenSans-Regular"font-size: 0.8emColor: #007aff
font: "OpenSans-Regular"font-size: 1emColor: #007aff
![Page 7: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/7.jpg)
Color: #eb433a (erro)
Verde checkbox: #4cd964Desligado Cinza: #727272
font: "OpenSans-Regular"font-size: 0.8emColor: #eb433a
![Page 8: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/8.jpg)
BARRA DE TÍTULOSfont: "OpenSans-Light"text-indent: 20pxbackground-color: #bb241cfont-size: 1.3emcolor: #fffheight: 43pxline-height: 43px
BARRA DE ITENSheight: 42pxbackground-color: #e9f1fbdisplay: blockpadding: 0 10pxborder-bottom: 1px #cacac9
LISTA DE ITENSfont: "OpenSans-Light"height: 42pxborder-bottom: 1px #cacac9color: #000font-size: 1emline-height: 41pxtext-indent: 5px
ITEM SELECIONADOfont: "OpenSans-Regular"color: #ffffont-size: 0.8emborder-radius: 5pxbackground-color: #007affheight: 32pxpadding: 0 10pxmargin: 5px 0line-height: 32px
CABEÇALHO DE TABELAheight: 42pxbackground-color: #f6f5f1border-bottom: 1px #cacac9font: "OpenSans-Regular“color: #cacac9font-size: 0.9emline-height: 42pxtext-indent: 5px
ATIVOcolor: #007afffont: "OpenSans-Regular"
![Page 9: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/9.jpg)
LISTA DE NOTÍCIASDUPLAfont: "OpenSans-Light“border-bottom: 1px #cacac9color: #000font-size: 0.8emheight: 85px;padding: 0 10px; line-height: 1.5em
CHAPÉUcolor: #bb241cfont: "OpenSans-Semibold“line-height: 1.5em
DATAcolor: #727272font-size: 0.6empadding-left: 10pxline-height: 1.5em
Interação NotíciaAo receber uma nova notícia,a mesma deve piscar 3 vezes na cor amarela descrita abaixo, com intervalos de 1 segundo em cada piscada e depois desaparecer. O texto também deve estar em Regular, e após as piscadas deve mudar para o padrão Light.
As notícias importantes recebem um badge laranja.
![Page 10: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/10.jpg)
IMPORTANTE!As linhas devem ser alinhadas
ESTÁVELBackground-color / color: #ebba11
ALTABackground-color / color: #12921a
BAIXABackground-color / color: #eb433a
![Page 11: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/11.jpg)
BARRA DE OPERAÇÕESfont: "OpenSans-Regular“color: #ffffont-size: 1.3emline-height: 43px
CAMPO DE BUSCAfont: "OpenSans-Regular“color: #ffffont-size: 0.8emheight: 30pxBackground-color: #c80549
ATUALIZAÇÃOfont: "OpenSans-Light“color: #ffffont-size: 0.5em
ITEM SELECIONADObackground-color: #e9f1fb
PISCO ATUALIZAÇÃObackground-color: #fcf8e3Font: “OpenSans-Semibold”
BADGE TEMPODIFERIDObackground-color: #cacac9Font: “OpenSans-Regular”Font-size: 0.5emColor: #fff
TEMPO REALBackground-color: #007aff
LISTRAS E GRIDSbackground-color: # f3f2f0
ÍCONE TOOLBARcolor: # 007aff
Interação Linha de AtivoAo tocar uma vez sobre a linha de item de um ativo, a barra de títulos na parte superior altera e mostra as opções de interação.
![Page 12: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/12.jpg)
EDIÇÃO DE LINHAbackground-color: # cacac9
TOOLBARbackground-color: #e9f1fb height: 54pxBorder-top: 1px #cacac9
BOTÃO DA TOOLBARpadding-top: 6pxpadding-left: 3pxpadding-right: 3pxtext-align: center
ÍCONEwidth:32pxheight:32px
LABELfont: "OpenSans-Regular"font-size: 0.55em
Interação EdiçãoLinha de AtivoAo tocar e segurar por mais de 1 segundo sobre a linha de item de um ativo, a mesma transforma-se em uma linha editável, possibilitando a exclusão e ordenação.
![Page 13: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/13.jpg)
MOSAICO
ATIVOOpen-sans Regular
Font-size: 1emColor: #007aff
VARIAÇÃOOpen-sans Light
Font-size: 1emCores variadas
ÚLTIMOOpen-sans Semibold
Font-size: 1emColor: #000
VOLUMEOpen-sans LightFont-size: 0.7em
Color: #000
Background-color: #fffPadding do bloco: 15px
Border: 1px #cacac9
Espaçamento entre cada item de mosaico: 1px
Piscadas MosaicoCada item de mosaico pisca na cor de acordo com a variação do último valor, ou seja, se o último valor subiu, pisca verde, se caiu, vermelho, manteve-se estável, amarelo.
![Page 14: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/14.jpg)
ALERTAS
SucessoFundo: #dff0d8Fonte: #468847
AtençãoFundo: #fcf8e3Fonte: #cb9853
ErroFundo: #f2dedeFonte: #b94a48
Bordas: mesma cor da fonte
margin: 10px automargin-right: 10pxmargin-left: 10pxfont: "OpenSans-Regular"font-size: 0.8empadding: 15px 15pxborder: 1px solidborder-radius: 5px-moz-border-radius: 5px-webkit-border-radius: 5px
![Page 15: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/15.jpg)
MENUS SUSPENSOS
min-width: 320pxbackground-color: #fffborder: 1px #cacac9font: "OpenSans-Light"font-size: 1emcolor: #000line-height: 42pxborder-radius: 5pxbox-shadow: 2px 2px 5px #cccheight: 42pxtext-indent: 15px
![Page 16: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/16.jpg)
ALERTA INSERIDObackground-color: #fcf8e3Font: “OpenSans-Regular”Font-size: 0.8emColor: #000height: 42pxborder-top: 1px #cacac9line-height: 41px
Interação AlertaInseridoDeve aparecer através de um slide, vindo de baixo para cima, e ficar visível por 2 segundos e depois desaparecer voltando para baixo.
![Page 17: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/17.jpg)
TICKER MOSAICOHeight: 44pxLine-height: 44px;Background-color: #fffBorder: 1px #cacac9Margin-left / margin-right: 15px;Espaçamento entre cada item de mosaico: 1px
![Page 18: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/18.jpg)
Interação ícone Principal Há NotificaçõesQuando houver notificações do sistema, o ícone troca, e aparece o de cor azul clara.
![Page 19: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/19.jpg)
BARRA SUPERIORBackground-color: #f6f5f1Border-bottom: 1px #cacac9font: "OpenSans-Bold"height: 42pxcolor: #000font-size: 1emline-height: 44px
MODALLargura suficientepara acomodar todosos elementos
Border-radius: 5px;Background-color: #fff
SUBMENUSBackground-color: #f3f2f0 font: "OpenSans-Semibold"height: 36pxcolor: #000font-size: 1emline-height: 36pxText-indent: 15px
BOTÕES MODALBackground-color: #f3f2f0 height: 42pxfont-size: 1emline-height: 42pxBorder: 1px #cacac9Color: #007aff
Link principal: SemiboldLink Secundário: Regular
BUSCABackground-color: #ffffont: "OpenSans-Regular"height: 32pxcolor: #000font-size: 0.8emline-height: 32pxBorder: 1px #cacac9
Link Buscar:Font-size: 1emColor: #007afff
Interação Buscar AtivoModal aparece quando usuário clicar na lupa ao lado esquerdo do campo de busca, ou quando um ativo não for encontrado.
![Page 20: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/20.jpg)
LISTA DE ITENSfont: "OpenSans-Light"height: 42pxborder-bottom: 1px #cacac9color: #000 / #007afffont-size: 1emline-height: 41pxtext-indent: 5px
FUNDO MODALBackground-color: #000Opacity: 0.5
Interação Resultados Buscar AtivoColocar em Semibold os trechos do texto buscado encontrados nos resultados da busca.
![Page 21: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/21.jpg)
Interação ColunasModal aparece quando usuário toca e segura por mais de 1 segundo qualquer item do cabeçalho da tabela.
COLUNASLargura de aproximadamente320px (a mesma largura deUm menu suspenso)
![Page 22: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/22.jpg)
MODAL GERALbackground-color: #fffborder: 1px #cacac9color: #000
BARRA DE TÍTULObackground-color: #f6f5f1height: 44pxfont-size: 1emline-height: 44pxcolor: #000font: "OpenSans-Bold"Border-bottom: 1px #cacac9
BOTÃO VOLTARfont-size: 1emtext-indent: 15pxline-height: 44pxcolor: #007afffont: "OpenSans-Light“
BARRA DE TÍTULObackground-color: #f6f5f1height: 44pxfont-size: 1emline-height: 44pxcolor: #000font: "OpenSans-Bold"
ATIVOfont-size: 2emfont: "OpenSans-Regular"color: #007aff
DESCRIÇÃOfont-size: 2emFont: "OpenSans-Light"color: #727272padding-left: 15px
ÚLTIMOfont-size: 2emfont: "OpenSans-Bold"color: #000padding-left: 15px
VARIAÇÃOfont-size: 1.5emfont: "OpenSans-Regular"padding-left: 15px
STATUS E HORAfont-size: 1emfont: "OpenSans-Light"padding-left: 15px
BLOCO INTERNOPadding: 30px
![Page 23: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/23.jpg)
SUBMENUSBackground-color: #f3f2f0 font: "OpenSans-Semibold"height: 36pxcolor: #000font-size: 1emline-height: 36pxText-indent: 15px
ITENSheight: 42pxborder-bottom: 1px #cacac9color: #000font-size: 1emline-height: 41px
font: "OpenSans-Light"font: "OpenSans-Semibold"
![Page 24: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/24.jpg)
BOTÃO ZOOMBotão desativado. Quando clicado ele fica azul e é possível o usuário dar zoom na tela. Para voltar ao zoom original, clica no botão ao lado direito.
ALTERADO EM 19/09/2013 DANILO
![Page 25: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/25.jpg)
ATIVOfont-size: 1.5emfont: "OpenSans-Regular"color: #007aff
DESCRIÇÃOfont-size: 1emFont: "OpenSans-Light"color: #727272padding-left: 15px
ÚLTIMOfont-size: 1.5emfont: "OpenSans-Bold"color: #000padding-left: 15px
VARIAÇÃOfont-size: 1emfont: "OpenSans-Regular"padding-left: 15px
STATUS E HORAfont-size: 1emfont: "OpenSans-Light"padding-left: 15px
DETALHESheight: 36pxfont-size: 0.8emcolor: #000line-height: 36pxborder-bottom: 1px #cacac9
font: "OpenSans-Light"font: "OpenSans-Semibold"
DETALHE MÓVELfont-size: 0.7emcolor: #000line-height: 1emBorder: 1px #cacac9Background-color: #fff;Padding: 15pxBox-shadow
font: "OpenSans-Light"font: "OpenSans-Semibold"
LEGENDASfont-size: 0.7emcolor: #727272 / #007afffont: "OpenSans-Regular”
PLOTSValor do último (alta, baixa, volume)
GRADEColor: #cacac9
EIXO E CURSORcolor: #727272dashed
![Page 26: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/26.jpg)
ÍCONESPadding: 30pxfont: "OpenSans-Regular"font-size: 0.55em
![Page 27: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/27.jpg)
ÍCONESPadding-top: 30pxPadding-bottom: 30pxPadding-left: 15pxPadding-right: 15px
BADGEFont: “OpenSans-Light”Font-size: 0.8emBackground-color: #eb433a Color: #fffPadding: 2pxBorder-radius: 10px
ITEM DE LISTA CLICÁVELColor: #007aff
![Page 28: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/28.jpg)
ÍCONES DE LISTAPadding: 15px;
Mesmo que haja 2 ícones
Font: “OpenSans-Light”Font-size: 0.8em
![Page 29: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/29.jpg)
ÍCONE ATIVOFont: “OpenSans-Light”Color: #727272
ÍCONE INATIVOFont: “OpenSans-Light”Color: #cacac9
ÍCONE ESCOLHIDOFont: “OpenSans-Light”Color: #007aff
ÍCONE NÃO ESCOLHIDOFont: “OpenSans-Light”Color: #727272
ÍCONE IDIOMA NÃO ESCOLHIDOFont: “OpenSans-Light”Opacity: 0.5
![Page 30: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/30.jpg)
Interação Menu GráficoEste menu com a opção Gráfico e Mosaico só aparece quando o usuário estiver na área de Gráficos.
O mesmo acontece com as opções de Cotações.
![Page 31: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/31.jpg)
LISTA NOTIFICAÇÕESFont: “OpenSans-Light”Height: 60px;Font-size: 1emHora: font-size: 0.8em color: #727272Padding da imagem: 15px
![Page 32: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/32.jpg)
Pop-up AlertBackground-color: #f3f2f0 line-height: 1em
Título: Semiboldfont-size: 1em
Título: Regularfont-size: 0.8em
![Page 33: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/33.jpg)
LISTA DE NOTÍCIAS COM DUAS LINHASHeight: 60px
![Page 34: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/34.jpg)
CHAPÉUcolor: #bb241cfont: "OpenSans-Semibold“Font-size: 1.5em
TÍTULOfont: "OpenSans-Light“color: #000font-size: 2em
HORAfont: "OpenSans-Light“color: #727272font-size: 0.8em
TEXTOcolor: #000font-size: 1emline-height: 1.5em
PAINEL NOTÍCIASPadding: 30pxBackground-color:#fff
![Page 35: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/35.jpg)
Plugin JS:Nprogress.JSouPace.JS
![Page 36: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/36.jpg)
INSERIDA26/09/2013DANILO
VISÃO GERALO menu cotações é desabilitado pois não há configurações para o painel
VISÃO GERAL> DESTAQUESSe houver conteúdos sem opções, seleciona direto
VISÃO GERAL> DESTAQUES > BVSPEscolhe apenas uma das opções (tipo radio button)
VISÃO GERAL> NOTÍCIASSeleciona um ou outro
VISÃO GERAL> NOTÍCIAS > AG CMASeleciona vários (tipo checkbox)
![Page 37: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/37.jpg)
INSERIDA25/09/2013DANILO
BARRA DE ITENSBackground-color: #303236color: #007aff
MENUSbackground-color: #000color: #fff
CABEÇALHO TABELAbackground-color: #545454color: #cacac9
SELEÇÃO DE LINHAbackground-color: #4e4e4ecolor: #fff
FUNDO ESCURObackground-color: #323131color: #fff
PISCADA NOTÍCIAbackground-color: #1e1f1fcolor: #fff
LINHA DIVISÓRIABackground-color: #50504f
LISTRA DO GRIDbackground-color: #2b2a2a
Tema Cinza Simples – Visão Geral
ATENÇÃONeste tema todas as fontes são brancas, com exceção das variações alta, baixa e estável.
![Page 38: Especificações UX/UI CMA Tablet](https://reader036.vdocuments.com.br/reader036/viewer/2022062412/58e862aa1a28ab007c8b4f79/html5/thumbnails/38.jpg)
INSERIDA25/09/2013DANILO
A única diferença entre o tema Escuro Simples é que neste tema algumas fontes continuam coloridas, mas com tonalidades mais claras que nas versões de fundo branco, para facilitar a leitura.
Fontes azuiscolor: #419cff
Fontes vermelhascolor: #ed443b
Tema Cinza – Visão Geral