Manual de utilização de

layouts de interface gráfica

Dezembro de 2008
1/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Introdução
Este manual é um guia de aplicação do Design
da Interface gráfica do EPG - Guia Eletrônico de
Programação dos set-top boxes de TV Digital da
Telefonica. em Standard Definition Video.

As soluções aqui apresentadas padronizam os

layouts das telas da interface gráfica, suas cores,
tipologia, formas de destacar informações e de-
vem seguir as indicações de navegação detalha-
das em documentação especifíca (storyboard).

Este documento acompanha um arquivo digital

no formato .psd em layers que representam os
layouts aqui apresentados. As fotos e ilustrações
utilizadas neste arquivo são apenas para posicio-
namento e devem ser subsituídas por imagens
licenciadas.

Introdução
2/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte
Arquivos da fonte:
The Sans Correspondence Bold
TSaCor__.ttf
TSaCorBd.ttf
The Sans Correspondence Regular

Logo
Arquivos do Logo:
logo telefonica.eps

Fundo
Arquivos do Fundo:
Fondo azul ALTA.tif

Cores
Texto: Branco (R0 G0 B0)
Highlight : Amarelo (R215 G252 B0)
Boxes Sólidos: Azul Médio (R0 G85 B164)
Azul Claro (R0 G147 B209)
R0 G0 B0 R215 G252 B0 R0 G85 B164 R0 G147 B209
Opacidade de Opacidade de Opacidade 100% Opacidade 100%
20% a 100% 80% a 100%

Elementos básicos
3/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Box Transparentes
A transparência é obtida
sobrepondo os elementos
do box sobre o fundo azul da
Telefônica
+ =

Elementos Box
Arquivos do box:
BOX_novos.psd

Os elementos estão organizados

em layers em um único arquivo
Adobe Photoshop

Obs. No documentos Master eles

já estão posicionados de acordo
com a navegação

Neste arquivo eles podem ser

utilizados em outras navegações
não detalhadas

Elementos Básicos Transparência

4/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Master PSD
Arquivos do master:
Master_SD_Telefonica_22_12_non_square.psd

Todos elementos necesários para a programação

estão organizados em layers em um único arquivo
Adobe Photoshop (PSD).

Os layers em amarelo:
Logo, Data Hora e TV Telefonca
são utilizados em todas as navegações com
resize vídeo.

O menu e mini guia não utilizam estes layers, pois

o vídeo está full screen, conforme detalhado nas
página especifícas.

Os layers de cada navegação estão organizados em

grupos indicados por cores.

Cada grupo possui sub-grupos com os

elementos relevantes. O texto é editável portanto
requer a instalação da Fonte Thesis para edição.

A resolução do arquivo é
Standard Definition Video
NTSC DV 720 x 480 pixels
OBS: Pixel Aspect Ratio 0,9
Screen Aspect Ratio 3:4

Elementos Básicos Documento Master

5/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Barra Botões Neste exemplo, podemos ver que no Guia
Lista, quando se está navegando nos
Cada tela possui uma barra inferior
canais, este botão é “Confirmar”. Quando
com a legenda explicando a função se está navegando nos programas futuros,
dos botões do controle remoto. Na este botão é “Recordatório”
página seguinte mostraremos como
se organizam esses botões no ar-
quivo Adobe Photoshop. Para verifi-
cação de quais botões constam em
quais telas, verificar o storyboard.

Barra botões
6/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Na tela de navegação do Guia Lista,
coluna Canais, o botão OK na Barra
de botões deve ser “Confirmar”,
portanto no grupo de layers “Guia
Lista”, deve-se abrir o grupo de layers
“botoes”, e então configurar a layer
“Confirma” para ser visível, e a layer
“Recordatório” para invisível, con-
forme a imagem ao lado.

Barra botões Navegação Photoshop

7/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
Na tela de navegação do Guia Lista,
coluna Programas, em um pro-
grama futuro, o botão OK na Barra
de botões deve ser “Recordatório”,
portanto no grupo de layers “Guia
Lista”, deve-se abrir o grupo de lay-
ers “botoes”, e então configurar a
layer “Confirma” para ser invisível,
e a layer “Recordatório” para visível,
conforme a imagem ao lado.

Barra botões Navegação Photoshop

8/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 The Sans Correspondence
Título da página: Bold 24 pt - Opacidade 80% (*)
Data: Bold 16 pt - Opacidade 60%(*)
Hora: Bold 16 pt - Opacidade80%(*)

Canal: Bold 18 pt - Opacidade 100%

Programa: Bold 24 pt - Opacidade 80%
Sinopse: Regular 16 pt - Opacidade 60%
Hora: Regular 16 pt - Opacidade80%

Dia e Hora: Regular 16 pt Opacidade 100%

Número: Bold 16 pt Opacidade 100%

Nome Canal: Regular 16 pt Opacidade 100%
Programas no Grid: Regular 14 pt Opacidade 100%

Obs.: Os itens marcados com (*) estão presentes em

todas as telas, sendo eles o título da tela, dia atual e
hora atual.

Linhas de alinhamento de texto

Tipografia Formatação geral

9/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Imagens
As imagens aqui apresentadas servem apenas
como exemplos de layout e devem ser substit-
tuídas por imagens e/ou fotos licenciadas es-
pecificamente para utilização em cada região.

Categorias
The Sans Correspondence Sans Bold 16pt
Branco Opacidade 100%
Highlight R215 G252 B 0

Mosaico Principal
10/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
Para cada tipo de guia se utiliza um ícone: Quan-
do o ícone está ativc a opacidade é 80% e para os
não ativos a opacidade é 15%

Tipos de guias
11/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Títulos das colunas:
The Sans Correspondence Bold 21pt
Opacidade 100%

Canais e programas:
The Sans Correspondence Regular 16pt
Canais com Opacidade 30%, exceto o highlight

Guia Lista
Neste guia pode-se navegar na lista de
canais e na lista de programas

Guia Lista
12/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
Quando se está navegando na Quando se está navegando na Conforme se navega entre os pro-
coluna de canais, o highlight supe- coluna de programas, o highlight gramas, o highlight superior conti-
rior deve ficar no canal superior deve ficar no programa nua no programa

Quando se altera a navegação da

coluna de canais par aa coluna de
programas, a barra de menu se
altera.

Guia Lista Navegação

13/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
O detaque em azul é está no conjunto
de layers “Ícone recordatório”, dentro
de “Horários / Programas”, e é da cor
R76 GI54 B227, com opacidade 20%.

Recordatório
Quando navegando-se em progra-
mas futuros, é possível marcar um
lembrete, conforme telas ao lado.
O Pop-up está no conjunto de layers “Pop-up Progra-
mar copy”, a fonte do título é de tamanho 15pt bold,
as opções “Sí” e “No” são em tamanho 14pt regular, e
o restante em 15pt regular.

Guia Lista Navegação Programa Futuro

14/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Guia Grid
Neste guia pode-se navegar pela tabela
de canais e programas. Os tamanhos e
cores das tipografias já estão especifica-
dos no item “Tipografia”

Guia Grid
15/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 O destaque no guia grid é
da cor R76 B154 B227, com
opacidade 20%. A fonte é de
tamanho 14pt regular.

É possível, quando navegando-se

no Guia Grid, gravar um lembrete
para algum programa, confome
telas ao lado.

O pop-up se localiza no
conjunto de layers “popup
programar”

Guia Grid Navegação Programa Futuro

16/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 21pt Bold

Fonte tamanho 16pt Regular,

tanto no texto da coluna da
esquerda quanto da direita.

Caso se pressione o botão “Info”

em algum programa no Guia Grid,
é exibida a sinopse do mesmo,
conforme ao lado.

Guia Grid Sinopse

17/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 16pt Bold

Fonte tamanho 25 Bold

Guia Mosaico
Neste guia pode-se navegar
pelos canais.

Guia Mosaico
18/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 24pt Bold
Fonte tamanho 18pt Bold

Transparência 30%
Utilizar o documento fundo
Telefônica

Fonte tamanho 18pt Bold

Fonte tamanho 14pt Regular

Fonte tamanho 14pt Regular

Mini-guia
Guia exibido enquanto se assiste
a um programa em tela cheia

Mini-guia
19/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 18pt Bold

Fonte tamanho 14pt Regular

Fonte tamanho 16pt Regular

Menu Navegação
20/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 21pt Bold

Fonte tamanho 15pt Regular

Fonte tamanho 16pt Regular

Fonte tamanho 16pt Regular, com alinha-

mento de texto centralizado no botão

Menu Configuração Sistema

21/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 21pt Bold

Fonte tamanho 15pt Regular

Fonte tamanho 16pt Regular

Fonte tamanho 16pt Regular, com alinhamento

de texto centralizado no botão

Menu Configuração Usuário

22/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Títulos: Fonte tamanho 18pt Bold

Canais e Programas: Fonte tamanho 16pt Regular

Fonte tamanho 14pt

Regular

Navegação Busca
23/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 21pt Bold

Fonte tamanho 16pt Regular

Fonte tamanho 16pt Regular

Layout básico 2 colunas

Este layout de tela é recorrente nas navegações
de “Favoritos”, “Bloqueio de Canais” e “Controle
de pais”, portanto os tamanhos de fontes acima
indicados são os mesmos nessas três navega-
ções. Nas páginas a seguir exemplificaremos o
“Favoritos” e o “Bloqueio de Canais”

Layout básico 2 Colunas

24/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 14pt
Regular

Fonte tamanho 20pt Bold

Navegação Favoritos
25/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 21pt Bold

Fonte tamanho 16pt Regular

Fonte tamanho 16pt Regular

Navegação Favoritos
26/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Highlight R215 G252 B 0

Bloqueio de Canais
Quando na coluna Función, o
highlight deve estar em Activar.
Quando na coluna Canales, o
highlight deve estar no canal
seleciona, e caso o mesmo mar-
cado, deve ser exibido o X no box.
Quando gravam-se as alterações
de bloqueio, é exibido o pop-up,
conforme tela inferior.
No arquivo do Adobe Photoshop, o
Pop-up é o conjunto de layers de nome
“POPUP Alterados com sucesso”, dentro
do conjunto “Bloqueio de Canais”

Navegação Bloqueio de canais

27/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 18pt Bold

Fonte tamanho 16pt Regular

Recordatório
28/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 Fonte tamanho 30pt Bold

Este número pode aparecer

em qualquer tela em que o
usuário esteja navegando

Número do canal
29/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital
 O volume pode aparecer durante
qualquer navegação, e está no conjunto
de layers “Volume”

Controle de volume
30/30 Guidelines Aplicação Design Interface Gráfica
TV Telefonica Digital