especificações ux/ui cma tablet
TRANSCRIPT
Especificações
Í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
SPLASH PAGEfont: "OpenSans-Light“background-color: #949494font-size: 0.9emcolor: #fff
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 #
ERROfont: "OpenSans-Bold"font: "OpenSans-Regular"font-size: 1em
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
Color: #eb433a (erro)
Verde checkbox: #4cd964Desligado Cinza: #727272
font: "OpenSans-Regular"font-size: 0.8emColor: #eb433a
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"
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.
IMPORTANTE!As linhas devem ser alinhadas
ESTÁVELBackground-color / color: #ebba11
ALTABackground-color / color: #12921a
BAIXABackground-color / color: #eb433a
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.
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.
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.
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
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
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.
TICKER MOSAICOHeight: 44pxLine-height: 44px;Background-color: #fffBorder: 1px #cacac9Margin-left / margin-right: 15px;Espaçamento entre cada item de mosaico: 1px
Interação ícone Principal Há NotificaçõesQuando houver notificações do sistema, o ícone troca, e aparece o de cor azul clara.
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.
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.
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)
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
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"
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
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
ÍCONESPadding: 30pxfont: "OpenSans-Regular"font-size: 0.55em
Í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
ÍCONES DE LISTAPadding: 15px;
Mesmo que haja 2 ícones
Font: “OpenSans-Light”Font-size: 0.8em
Í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
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.
LISTA NOTIFICAÇÕESFont: “OpenSans-Light”Height: 60px;Font-size: 1emHora: font-size: 0.8em color: #727272Padding da imagem: 15px
Pop-up AlertBackground-color: #f3f2f0 line-height: 1em
Título: Semiboldfont-size: 1em
Título: Regularfont-size: 0.8em
LISTA DE NOTÍCIAS COM DUAS LINHASHeight: 60px
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
Plugin JS:Nprogress.JSouPace.JS
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)
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.
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