Especificações UX/UI CMA Tablet

Índice
Splash Page 3
Splash Page Erro 4
Erro 404 5
Login Autenticação 6
Botão Voltar 6
Checkbox 6
Login Autenticação Erro 7
Barra de Títulos 8
Lista de Itens (Cotações e Destaques) 8
Visão Geral 8
Barra de Itens 8
Cabeçalho de Tabela 8
Lista de Itens Notícias 9
Cores Variação dos Índices 10
Alinhamento das linhas 10
Barra de Operações 11
Caixa de Busca de Ativos 11
Item de uma Lista Selecionado 11
Ícone Toolbar selecionado 11
Piscada de Notícias 11
Badge Tempo Diferido / Real 11
Grid Painel de Cotações 11
Item de uma Lista em Edição 12
Ícone Toolbar não selecionado 12
Toolbar 12
Mosaico 13
Alertas 14
Menus Suspensos 15
Alerta de Ativo Inserido 16
Ticker Mosaico 17
Logotipo indicando notificações 18
Pop-up 19
Modal 19/20
Barra Superior Pop e Modal 19
Subtítulo 19
Busca 19
Botão Pop ou Modal 19
Lista de Itens Pop e Modal 20
Largura Colunas e Menu 21
Detalhes da Cotação (Modal) 22/23
Gráfico 24/25
Gráfico (Configurações Pop) 26
Badge de Notificações 27
Menu Slide 27/28/29/30/31
Menu Slide ícones 27
Lista de Itens (Menu Slide ) 27
Ícones de Lista (Menu Slide e Menu) 28
Menu Slide Configurações 29
Botão Selecionados, Des/habilitados 29
Notificações 31
Pop up Alerta 32
Notícias 33
Notícias Íntegra Slide 34
Loading Javascript 35
Visão Geral - Caixa de Filtros (Toolbar) 36
Tema Cinza Simples- Visão Geral 37
Tema Cinza – Visão Geral 38
NOTAS
25/09/13 – Onde houver fonte OpenSans Light, substituir por OpenSans Regular

SPLASH PAGE
font: "OpenSans-Light“
background-color: #949494
font-size: 0.9em
color: #fff

ERRO
SPLASH PAGE
font: "OpenSans-Regular"
font-size: 0.8em
padding: 15px 15px
border: 1px solid
border-radius: 5px
-moz-border-radius: 5px
-webkit-border-radius: 5px
Cores: as mesmas do Alertas
Slide #

ERRO
font: "OpenSans-Bold"
font-size: 1em

font-size: 2em
font-size: 0.7em
font: "OpenSans-Bold“
font: "OpenSans-Light"
font-size: 0.8em
Padding: 10px
Border: 1px solid #cacac9
font-size: 0.9em
font-size: 1.5em
Color: #007aff
Background-color: #cacac9
font-size: 0.8em
Color: #007aff
font-size: 1em
Color: #007aff

Color: #eb433a (erro)
Verde checkbox: #4cd964
Desligado Cinza: #727272
font-size: 0.8em
Color: #eb433a

BARRA DE TÍTULOS
text-indent: 20px
background-color: #bb241c
font-size: 1.3em
color: #fff
height: 43px
line-height: 43px
BARRA DE ITENS
height: 42px
background-color: #e9f1fb
display: block
padding: 0 10px
border-bottom: 1px #cacac9
LISTA DE ITENS
height: 42px
color: #000
font-size: 1em
line-height: 41px
text-indent: 5px
ITEM SELECIONADO
color: #fff
font-size: 0.8em
border-radius: 5px
background-color: #007aff
height: 32px
padding: 0 10px
margin: 5px 0
line-height: 32px
CABEÇALHO DE TABELA
height: 42px
background-color: #f6f5f1
font: "OpenSans-Regular“
color: #cacac9
font-size: 0.9em
line-height: 42px
text-indent: 5px
ATIVO
color: #007aff

LISTA DE NOTÍCIAS
DUPLA
color: #000
font-size: 0.8em
height: 85px;
padding: 0 10px;
line-height: 1.5em
CHAPÉU
color: #bb241c
font: "OpenSans-Semibold“
line-height: 1.5em
DATA
color: #727272
font-size: 0.6em
padding-left: 10px
line-height: 1.5em
Interação Notícia
Ao 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ÁVEL
Background-color / color: #ebba11
ALTA
Background-color / color: #12921a
BAIXA
Background-color / color: #eb433a

BARRA DE OPERAÇÕES
color: #fff
font-size: 1.3em
line-height: 43px
CAMPO DE BUSCA
color: #fff
font-size: 0.8em
height: 30px
Background-color: #c80549
ATUALIZAÇÃO
color: #fff
font-size: 0.5em
ITEM SELECIONADO
PISCO ATUALIZAÇÃO
background-color: #fcf8e3
Font: “OpenSans-Semibold”
BADGE TEMPO
DIFERIDO
background-color: #cacac9
Font: “OpenSans-Regular”
Font-size: 0.5em
Color: #fff
TEMPO REAL
Background-color: #007aff
LISTRAS E GRIDS
background-color: # f3f2f0
ÍCONE TOOLBAR
color: # 007aff
Interação Linha de
Ativo
Ao 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 LINHA
background-color: # cacac9
TOOLBAR
height: 54px
Border-top: 1px #cacac9
BOTÃO DA TOOLBAR
padding-top: 6px
padding-left: 3px
padding-right: 3px
text-align: center
ÍCONE
width:32px
height:32px
LABEL
font-size: 0.55em
Interação Edição
Linha de Ativo
Ao 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
ATIVO
Open-sans Regular
Font-size: 1em
Color: #007aff
VARIAÇÃO
Open-sans Light
Font-size: 1em
Cores variadas
ÚLTIMO
Open-sans Semibold
Font-size: 1em
Color: #000
VOLUME
Open-sans Light
Font-size: 0.7em
Color: #000
Background-color: #fff
Padding do bloco: 15px
Border: 1px #cacac9
Espaçamento entre cada
item de mosaico: 1px
Piscadas Mosaico
Cada 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
Sucesso
Fundo: #dff0d8
Fonte: #468847
Atenção
Fundo: #fcf8e3
Fonte: #cb9853
Erro
Fundo: #f2dede
Fonte: #b94a48
Bordas: mesma cor da fonte
margin: 10px auto
margin-right: 10px
margin-left: 10px
font-size: 0.8em
padding: 15px 15px
border: 1px solid
border-radius: 5px
-moz-border-radius: 5px
-webkit-border-radius: 5px

MENUS SUSPENSOS
min-width: 320px
background-color: #fff
border: 1px #cacac9
font-size: 1em
color: #000
line-height: 42px
border-radius: 5px
box-shadow: 2px 2px 5px #ccc
height: 42px
text-indent: 15px

ALERTA INSERIDO
background-color: #fcf8e3
Font: “OpenSans-Regular”
Font-size: 0.8em
Color: #000
height: 42px
border-top: 1px #cacac9
line-height: 41px
Interação Alerta
Inserido
Deve 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 MOSAICO
Height: 44px
Line-height: 44px;
Border: 1px #cacac9
Margin-left / margin-right: 15px;
Espaçamento entre cada item de mosaico: 1px

Interação ícone Principal Há
Notificações
Quando houver notificações do sistema, o
ícone troca, e aparece o de cor azul clara.

BARRA SUPERIOR
Background-color: #f6f5f1
Border-bottom: 1px #cacac9
height: 42px
color: #000
font-size: 1em
line-height: 44px
MODAL
Largura suficiente
para acomodar todos
os elementos
Border-radius: 5px;
SUBMENUS
font: "OpenSans-Semibold"
height: 36px
color: #000
font-size: 1em
line-height: 36px
Text-indent: 15px
BOTÕES MODAL
height: 42px
font-size: 1em
line-height: 42px
Border: 1px #cacac9
Color: #007aff
Link principal: Semibold
Link Secundário: Regular
BUSCA
height: 32px
color: #000
font-size: 0.8em
line-height: 32px
Border: 1px #cacac9
Link Buscar:
Font-size: 1em
Color: #007afff
Interação Buscar Ativo
Modal aparece quando usuário clicar na lupa
ao lado esquerdo do campo de busca, ou
quando um ativo não for encontrado.

LISTA DE ITENS
height: 42px
color: #000 / #007aff
font-size: 1em
line-height: 41px
text-indent: 5px
FUNDO MODAL
Background-color: #000
Opacity: 0.5
Interação Resultados Buscar Ativo
Colocar em Semibold os trechos do texto buscado encontrados nos
resultados da busca.

Interação Colunas
Modal aparece quando usuário toca e segura
por mais de 1 segundo qualquer item do
cabeçalho da tabela.
COLUNAS
Largura de aproximadamente
320px (a mesma largura de
Um menu suspenso)

MODAL GERAL
background-color: #fff
border: 1px #cacac9
color: #000
BARRA DE TÍTULO
height: 44px
font-size: 1em
line-height: 44px
color: #000
Border-bottom: 1px #cacac9
BOTÃO VOLTAR
font-size: 1em
text-indent: 15px
line-height: 44px
color: #007aff
BARRA DE TÍTULO
height: 44px
font-size: 1em
line-height: 44px
color: #000
ATIVO
font-size: 2em
color: #007aff
DESCRIÇÃO
font-size: 2em
Font: "OpenSans-Light"
color: #727272
padding-left: 15px
ÚLTIMO
font-size: 2em
color: #000
padding-left: 15px
VARIAÇÃO
font-size: 1.5em
padding-left: 15px
STATUS E HORA
font-size: 1em
padding-left: 15px
BLOCO INTERNO
Padding: 30px

SUBMENUS
height: 36px
color: #000
font-size: 1em
line-height: 36px
Text-indent: 15px
ITENS
height: 42px
color: #000
font-size: 1em
line-height: 41px

BOTÃO ZOOM
Botã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

ATIVO
font-size: 1.5em
color: #007aff
DESCRIÇÃO
font-size: 1em
Font: "OpenSans-Light"
color: #727272
padding-left: 15px
ÚLTIMO
font-size: 1.5em
color: #000
padding-left: 15px
VARIAÇÃO
font-size: 1em
padding-left: 15px
STATUS E HORA
font-size: 1em
padding-left: 15px
DETALHES
height: 36px
font-size: 0.8em
color: #000
line-height: 36px
DETALHE MÓVEL
font-size: 0.7em
color: #000
line-height: 1em
Border: 1px #cacac9
Background-color: #fff;
Padding: 15px
Box-shadow
LEGENDAS
font-size: 0.7em
color: #727272 / #007aff
font: "OpenSans-Regular”
PLOTS
Valor do último (alta, baixa,
volume)
GRADE
Color: #cacac9
EIXO E CURSOR
color: #727272
dashed

ÍCONES
Padding: 30px
font-size: 0.55em

ÍCONES
Padding-top: 30px
Padding-bottom: 30px
Padding-left: 15px
Padding-right: 15px
BADGE
Font: “OpenSans-Light”
Font-size: 0.8em
Background-color: #eb433a
Color: #fff
Padding: 2px
Border-radius: 10px
ITEM DE LISTA
CLICÁVEL
Color: #007aff

ÍCONES DE LISTA
Padding: 15px;
Mesmo que haja 2 ícones
Font-size: 0.8em

ÍCONE ATIVO
Color: #727272
ÍCONE INATIVO
Color: #cacac9
ÍCONE ESCOLHIDO
Color: #007aff
ÍCONE NÃO ESCOLHIDO
Color: #727272
ÍCONE IDIOMA
NÃO ESCOLHIDO
Opacity: 0.5

Interação Menu Gráfico
Este 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ÇÕES
Height: 60px;
Font-size: 1em
Hora: font-size: 0.8em color: #727272
Padding da imagem: 15px

Pop-up Alert
line-height: 1em
Título: Semibold
font-size: 1em
Título: Regular
font-size: 0.8em

LISTA DE NOTÍCIAS
COM DUAS LINHAS
Height: 60px

CHAPÉU
color: #bb241c
font: "OpenSans-Semibold“
Font-size: 1.5em
TÍTULO
color: #000
font-size: 2em
HORA
color: #727272
font-size: 0.8em
TEXTO
color: #000
font-size: 1em
line-height: 1.5em
PAINEL NOTÍCIAS
Padding: 30px
Background-color:#fff

Plugin JS:
Nprogress.JS
ou
Pace.JS

INSERIDA
26/09/2013
DANILO
VISÃO GERAL
O menu cotações é
desabilitado pois não há
configurações para o painel
VISÃO GERAL>
DESTAQUES
Se houver conteúdos sem
opções, seleciona direto
VISÃO GERAL>
DESTAQUES > BVSP
Escolhe apenas uma das
opções (tipo radio button)
VISÃO GERAL>
NOTÍCIAS
Seleciona um ou outro
VISÃO GERAL>
NOTÍCIAS > AG CMA
Seleciona vários (tipo
checkbox)

INSERIDA
25/09/2013
DANILO
BARRA DE ITENS
Background-color: #303236
color: #007aff
MENUS
color: #fff
CABEÇALHO TABELA
color: #cacac9
SELEÇÃO DE LINHA
background-color: #4e4e4e
color: #fff
FUNDO ESCURO
color: #fff
PISCADA NOTÍCIA
background-color: #1e1f1f
color: #fff
LINHA DIVISÓRIA
Background-color: #50504f
LISTRA DO GRID
background-color: #2b2a2a
Tema Cinza Simples – Visão Geral
ATENÇÃO
Neste tema todas as fontes são
brancas, com exceção das
variações alta, baixa e estável.

INSERIDA
25/09/2013
DANILO
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 azuis
color: #419cff
Fontes vermelhas
color: #ed443b
Tema Cinza – Visão Geral

Especificações UX/UI CMA Tablet

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Mais de Dan Vitoriano

Mais de Dan Vitoriano (20)

Especificações UX/UI CMA Tablet