ì	  Guía	  Estilos	  Televisión	  Digital	  José	  Alejandro	  Franco	  Calderón	  
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Área	  y	  elementos	  de	  diseño	  Algunos televisores, especialmente los CRT, recortan parte de la imagendebido a ello ...
Área	  y	  elementos	  de	  diseño	  Para ahorrar espacio se procurará que todas las pantallas de la aplicaciónlleven la m...
Área	  y	  elementos	  de	  diseño	  El	  vídeo	  o	  el	  contenido	  es	  el	  REY	  por	  ello	  debe	  estar	  present...
Área	  y	  elementos	  de	  diseño	  SI	            NO	         Para evitar el fliqueo (Parpadeo de                       ...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Colores	  y	  fuentes	                            Para el diseño de los elementos                          se empleará la ...
Colores	  y	  fuentes	                                      Los cambios fuertes de color o                                ...
Colores	  y	  fuentes	                                                           Efecto	  “Moiré”	  En el diseño de losele...
Colores	  y	  fuentes	   En aquellas aplicaciones en las que se representen los botones decolor del mando a distancia, bie...
Colores	  y	  fuentes	   Como fuente para los texto se utiliza Tiresias, una fuentedesarrollada específicamente para la te...
Colores	  y	  fuentes	  La	   pantalla	   del	   televisor	   no	   es	   el	   medio	   más	   adecuado	   para	   la	  p...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Imágenes	  corporativas	  y	  logos	  La línea gráfica de las aplicaciones interactivas de tipo permanente deben    seguir...
Imágenes	  corporativas	  y	  logos	  Las aplicaciones asociadas a un programa concreto seguirán la identidad             ...
Imágenes	  corporativas	  y	  logos	  El logo se sitúa de forma preferente en  la esquina superior izquierda de la        ...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Principios	  de	  navegación	          El Mando a distanciaEn la televisión interactiva el control de laaplicación se real...
Principios	  de	  navegación	  Teclas	  numéricas	  ü  Las teclas numéricas pueden usarse para elegir una entre varias op...
Principios	  de	  navegación	  Teclas	  desplazamiento	  y	  selección	  ü  Los menús de selección deben situarse en form...
Principios	  de	  navegación	  Menús	  simples	          Introducción	                   Texto claro y legible            ...
Principios	  de	  navegación	  Teclas	  desplazamiento	  sin	  selección	  ü  Cuando sea necesario paginar un texto o uti...
Principios	  de	  navegación	        	        	                                                       	        	          ...
Principios	  de	  navegación	  Teclas	  de	  color	  ü  Cuando las opciones estén escritas en el color, utilizar, como mí...
Principios	  de	  navegación	                                                                Teclas	  de	  color	  en	    ...
Principios	  de	  navegación	    Cada aplicación puede hacer el uso que necesite de las teclas de color,     no obstante e...
Principios	  de	  navegación	   Por acuerdo de diseño general y entre operadores, el modo de acceso a las    aplicaciones ...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Disposición	  de	  la	  pagina	           La lectura de una pantalla de televisor se realiza desde la parte               ...
Disposición	  de	  la	  pagina	     Titulo,                                                                               ...
Disposición	  de	  la	  pagina	  Cada aplicación es diferente, presenta sus propios problemas y debe                      ...
Agenda	  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Dispo...
Escritura	  y	  redacción	  La pantalla de un televisor, por la actitud del espectador, la resolución y ladistancia no est...
Escritura	  y	  redacción	  Las	  Trece	  Premisas	  1.  Los contenidos no relacionados deben deben estar en áreas    sepa...
Escritura	  y	  redacción	  Las	  Trece	  Premisas	  9.  Los bloques de texto no debe tener más de 90 palabras, es preferi...
Escritura	  y	  redacción	  Formularios	         En ocasiones necesitaremos que el usuario introduzca una información. Dad...
Escritura	  y	  redacción	  3.  Se empleará los combos para respuestas estándar (provincia, nivel de    estudios, sexo, na...
Escritura	  y	  redacción	       Para la introducción de textos libres se puede emplear los teclados           virtuales r...
¿Preguntas? – GraciasJosé Alejandro Franco Calderón alejo.franco@misena.edu.co
Upcoming SlideShare
Loading in …5
×

Guia-estilos-tv digital

474 views

Published on

Antes del apagón analógico y su implementación en el país, Colombia debe prepararce para afrontar el cambio que traera la televisión digital terreste y para familiarizarnos con ella vamos a conocerla más a fondo.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
474
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Guia-estilos-tv digital

  1. 1. ì  Guía  Estilos  Televisión  Digital  José  Alejandro  Franco  Calderón  
  2. 2. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  3. 3. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  4. 4. Área  y  elementos  de  diseño  Algunos televisores, especialmente los CRT, recortan parte de la imagendebido a ello se han definido unos márgenes de seguridad para asegurarque todo el contenido es visible. Ejemplo: Pal 720 X 576 Pixeles aprox. 10% Área  Segura   Las aplicaciones interactivas deben diseñarse de modo que 600   toda la información relevante esté dentro 476   del los márgenes de seguridad
  5. 5. Área  y  elementos  de  diseño  Para ahorrar espacio se procurará que todas las pantallas de la aplicaciónlleven la misma imagen de fondo Imagen  de  fondo  aplicación  EPG   Diversas  imágenes  de  la  aplicación  
  6. 6. Área  y  elementos  de  diseño  El  vídeo  o  el  contenido  es  el  REY  por  ello  debe  estar  presente  en  todo  momento  durante  el  uso  de  la  aplicación,  salvo  que  la  can?dad  de  información  a  mostrar  lo  haga  inviable.      En   general   se   preferirá   el   vídeo   en   pantalla   completa   al   vídeo   escalado.   En   esta   úl?ma  opción,   se   preferirá   1⁄4   de   pantalla   en   el   margen   superior   derecho.   En   este   caso   no   es  necesario  respetar  el  margen  de  seguridad.   Aplicación     Aplicación     Posición  preferente   video  escalado  a  1⁄4  de  vídeo  en  pantalla  completa   vídeo  en  1⁄4  de  pantalla   pantalla  
  7. 7. Área  y  elementos  de  diseño  SI   NO   Para evitar el fliqueo (Parpadeo de texturas) las líneas y los bordes de los distintos elementos tendrán un mínimo de 3 píxeles y máximo de 8 píxeles En las esquinas de los distintos 3  px   elementos de usarán preferentemente las formas cuadradas, mejor que las redondeadas
  8. 8. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  9. 9. Colores  y  fuentes   Para el diseño de los elementos se empleará la paleta gráfica estándar de MHP de 256 colores.Sin embargo, para el diseñode la imagen de fondo sepodrán utilizar imágenes conuna profundidad de color de24 bits
  10. 10. Colores  y  fuentes   Los cambios fuertes de color o contraste entre dos elementos pueden BOOM ocasionar distorsiones en las fronteras verticales 0,0,0   22,22,22   Deben evitarse el uso del blanco y negro “puros”. En su lugar se utilizará, respectivamente, los valores RGB255,255,255   232,232,232   22,22,22 y 232,232,232.
  11. 11. Colores  y  fuentes   Efecto  “Moiré”  En el diseño de loselementos y los fondosdebe evitarse el uso detramas intrincadas, paraevitar el efecto “Moiré” Fondo  no  deseable   También deben evitarse las amplias zonas de colores muy saturados, especialmente rojas. En general se prefieren las amplias zonas claramente limitadas de colores poco saturados
  12. 12. Colores  y  fuentes   En aquellas aplicaciones en las que se representen los botones decolor del mando a distancia, bien sea como objetos o como palabras coloreadas, estos deberán tener lo siguientes valores ROJO   191,31,0   VERDE   63,255,0   AZUL   63,191,255   AMARILLO   255,255,255  
  13. 13. Colores  y  fuentes   Como fuente para los texto se utiliza Tiresias, una fuentedesarrollada específicamente para la televisión y que ha sido adoptada como estándar para la televisión digitalABCDEFGHIJKLMNÑOPQRSTUVWXYZ Abcdefghijklmnñopqrstuvwxyz 0123456789.,;:?!@ €%&(*)[+]
  14. 14. Colores  y  fuentes  La   pantalla   del   televisor   no   es   el   medio   más   adecuado   para   la  presentación  de  textos.  Por  ello  se  establecen  las  siguientes  reglas  de  legibilidad:    ü  El  cuerpo  de  texto  general  no  debe  ser  inferior  a  24  ppp  ü  No  debe  emplearse,  en  ningún  caso,  tamaños  inferiores  a  18  ppp    ü  La   mayor   legibilidad   se   ob?ene   con   texto   claro   sobre   fondo   oscuro    ü  El  interlineado  debe  ser  superior  al  empleado  en  un  texto  escrito  ü  Los  bloques  de  texto  no  deberían  tener  mas  de  90  palabras  ü  Los  textos  mas  largos  deben  ser  paginados  
  15. 15. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  16. 16. Imágenes  corporativas  y  logos  La línea gráfica de las aplicaciones interactivas de tipo permanente deben seguir la imagen corporativa, en cuanto al logo, paleta de colores y elementos de diseño. Logos   Publicidad   Aplicaciones  
  17. 17. Imágenes  corporativas  y  logos  Las aplicaciones asociadas a un programa concreto seguirán la identidad visual del programaLogo  del  programa  y/o   Decorado  del  programa   Aplicación  Emplea-­‐T    aplicación  
  18. 18. Imágenes  corporativas  y  logos  El logo se sitúa de forma preferente en la esquina superior izquierda de la pantalla En las aplicaciones con vídeo completo o en aquellas en las que otro logo ocupe la zona preferente, éste se ubicará en la parte inferior izquierda, preferentemente dentro de la barra de navegación.
  19. 19. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  20. 20. Principios  de  navegación   El Mando a distanciaEn la televisión interactiva el control de laaplicación se realiza a través del mandoa distancia. Esto limita las funcionesgeneralmente disponibles a:1.  Los controles tradicionales del televisor2.  Las teclas numéricas3.  Las teclas de desplazamiento4.  Las teclas de color
  21. 21. Principios  de  navegación  Teclas  numéricas  ü  Las teclas numéricas pueden usarse para elegir una entre varias opcionesü  Las teclas numéricas se pueden usar como acceso rápido de las opciones de menúü  Los saltos de foco y los menús de navegación deben respetar el orden numérico, no deben saltarse númerosü  Si es posible, se debe mantener la posición de las teclas numéricas en todas las pantallas de la aplicaciónX  No deben usarse palabras para referirse a opciones de navegación numéricasX  Por el color, tamaño o posición hay que evitar que las opciones numéricas se confundan con números de páginaX  No usar las teclas numéricas para mas de 9 opciones
  22. 22. Principios  de  navegación  Teclas  desplazamiento  y  selección  ü  Los menús de selección deben situarse en forma verticalü  El aspecto gráfico de los menús debe ser el mismo en toda la aplicaciónü  La opción enfocada debe distinguirse claramente del resto de opciones del menú, el criterio para señalizar el foco debe mantenerse en toda la aplicación.ü  Las opciones de desplazamiento en cada posición se representan por triángulos sencillos, sin bordes, efectos 3D etc.ü  Los menús deben permitir la navegación circularX  Deben evitarse las distribuciones en diagonal, curvadas etc. de los menús, de modo que hagan poco intuitivo el comportamiento de las teclas de desplazamientoX  No use icono para comportamientos no permitidos u obvios
  23. 23. Principios  de  navegación  Menús  simples   Introducción   Texto claro y legible Ventajas   Opciones   Foco destacado Salir   Icono intuitivo
  24. 24. Principios  de  navegación  Teclas  desplazamiento  sin  selección  ü  Cuando sea necesario paginar un texto o utilizar scroll, por ser éste demasiado largo, se debe usar una sola opción en cada bloque de texto (izquierda/derecha o arriba/abajo)ü  Usar triángulos simples como iconos y etiquetar el comportamiento de la flecha.ü  Mantener la consistencia de los iconos y los comportamiento con los menúsü  Permitir la navegación circularX  No se debe utilizar menús navegables por flechas y bloques de texto con desplazamiento en la misma página
  25. 25. Principios  de  navegación             OK                  Pagina  1  de  2                 MAL     Pagina  1  de  2  
  26. 26. Principios  de  navegación  Teclas  de  color  ü  Cuando las opciones estén escritas en el color, utilizar, como mínimo, fuente 22 ppp.ü  Las opciones deben respetar el orden del control (rojo, verde, amarillo y azul).ü  Las posiciones se deben mantener aún cuando no se utilicen todas las opciones.ü  Se debe procurar que el uso de las teclas de color sea consistente en toda la aplicación.X  No se debe utilizar las teclas de color para las opciones de desplazamiento (arriba, abajo, página siguiente etc.). En ese caso es preferible usar las teclas de desplazamiento.X  No asigne la misma función a dos teclas de color.
  27. 27. Principios  de  navegación   Teclas  de  color  en   disposición  horizontal   (preferiblemente),   respetando  el  orden  del   control  Se  deben  mantener  las  posiciones  de  las  teclas   de  color,  aún  cuando  no  estén  todas  la   opciones  disponibles  
  28. 28. Principios  de  navegación   Cada aplicación puede hacer el uso que necesite de las teclas de color, no obstante existe un uso recomendado para cada una de ellasü  Entrar,  salir     ü  Opciones  destacadas  ü  Lanzamiento  de  otros   ü  Salto  de  pantalla   servicios     ü  Ayuda  ü  Ir  a  pantalla  completa   ü  Personalización  u  opciones  de  la   ü  Despliegue  de  menú  de  contexto     aplicación     ü  Vuelta  al  menú  principal   ü  Comunicación,  canal  de  retorno   ü  Atrás  
  29. 29. Principios  de  navegación   Por acuerdo de diseño general y entre operadores, el modo de acceso a las aplicaciones interactivas es pulsar la tecla roja del mando a distancia.Habitualmente esta tecla se reserva para la función “salir” una vez la aplicación está corriendo. Entrada  y  salida  de   la  aplicación    “lanzadera”     con  botón  rojo  
  30. 30. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  31. 31. Disposición  de  la  pagina   La lectura de una pantalla de televisor se realiza desde la parte superior izquierda a la inferior derechaü  El  logo  y  los  Wtulos  se  situarán  en  la  esquina   superior  izquierda    ü  El  vídeo  en  la  superior  derecha    ü  La  información  relacionada  con  el  ?tulo,   inmediatamente  debajo  de  éste  ü  La  información  de  navegación  en  la  parte   inferior  de  la  página    ü  La  información  está?ca  o  poco  relevante   (fecha,  horas  etc.)  se  situará  en  las  áreas   menos  relevantes  
  32. 32. Disposición  de  la  pagina   Titulo, Información contexto, Visualinformación relevante Información sobreContenido el video principal y controlesInformación Instrucciones, Universal ayudas y de ynavegación avisosLos  servicios  se  aprenden  con  mayor  facilidad  si  la  información  se  distribuye  siguiendo  la   forma  en  que  la  mayoría  de  las  personas  exploran  la  pantalla  
  33. 33. Disposición  de  la  pagina  Cada aplicación es diferente, presenta sus propios problemas y debe tener su propia solución.La coherencia dentro de la propia aplicación es más importante que el seguimiento de las reglas
  34. 34. Agenda  1. Área y elementos de diseño2. Colores y fuentes3. Imagen corporativa y logos4. Principios de navegación5. Disposición de la pagina6. Escritura y redacción
  35. 35. Escritura  y  redacción  La pantalla de un televisor, por la actitud del espectador, la resolución y ladistancia no esta diseñada para la lectura de textos. Por ello es necesario prestar especial cuidado no solo en los aspectos formales, comentados anteriormente, si no en la redacción de los contenidos. La  pantalla  de  un  televisor  no  se  lee  como  un  medio   escrito  tradicional,  sino  que  se  ojea  velozmente  en  busca   de  información  relevante  que  le  pueda  interesar.  Las   páginas  deben  ser  “ojeables”  para  facilitar  ese  fpo  de   lectura.  En  este  fpo  de  lectura  toda  la  información   compite  con  el  resto  para  captar  la  atención  del  usuario.   Por  eso  es  esencial  evitar  presentar  información   superflua  
  36. 36. Escritura  y  redacción  Las  Trece  Premisas  1.  Los contenidos no relacionados deben deben estar en áreas separadas2.  El texto debe organizarse con palabras resaltadas, separadores, listas numeradas etc3.  Los títulos y subtítulos deben ser claramente identificables4.  Cada párrafo debe tener una única idea5.  Utilizar el estilo de la pirámide invertida, comenzando por un resumen de lo esencial y finalizando por los detalles.6.  Deben usarse menos palabras de las que se empelaría en un texto impreso7.  El lenguaje debe ser objetivo, sin exceso de adjetivos o palabras redundantes8.  Lenguaje simple e informal suele ser más adecuado que un lenguaje más elegante o retórico
  37. 37. Escritura  y  redacción  Las  Trece  Premisas  9.  Los bloques de texto no debe tener más de 90 palabras, es preferible paginar textos más largos o utilizar el scroll.10.  Se utilizará preferentemente la alineación a la izquierda.11.  Las negritas se utilizarán para enfatizar algunas palabras, siempre de forma muy restringida. No deben utilizarse como elemento decorativo.12.  Las mayúsculas no debe emplearse ni para la escritura de textos largos, ni de títulos completos. Solo se emplearán para siglas o palabras sueltas que se quieran resaltar.13.  No utilizar cursivas, por ser poco legibles.En cualquier caso será el tipo de contenido, el público al que va dirigido y elpropósito del texto, los que marcará, finalmente, la correcta relación entre la forma y el fondo
  38. 38. Escritura  y  redacción  Formularios   En ocasiones necesitaremos que el usuario introduzca una información. Dado las limitaciones del control remoto como periférico de entrada de datos debemos facilitar al máximo la tarea 1.  Los campos de texto libre deben ser los menos posibles, para su cumplimentación se empelará algún sistema de ayuda. 2.  Los radio buttons se emplearán cuando solo haya una elección permitida entre varias opciones. Es tanto o más importante cuidar la redacción de las respuestas como la de la pregunta ya que muchos usuarios no leen el enunciado.
  39. 39. Escritura  y  redacción  3.  Se empleará los combos para respuestas estándar (provincia, nivel de estudios, sexo, nacionalidad...). Un combo bien planteado debe poder ser respondido mentalmente sin ver las opciones (e.g. País de nacimiento). Si es necesario desplegar para ver las opciones, puede que el combo no sea la opción adecuada.4.  Se utilizarán los check box cuando sea posible más de una respuesta o para seleccionar una opción no obligatoria
  40. 40. Escritura  y  redacción   Para la introducción de textos libres se puede emplear los teclados virtuales representados en pantalla o el control remoto. En este último caso es recomendable representar el comportamiento delas teclas numéricas ya que algunos controles no lo tienen representado.Aplicación  con  teclado  virtual  
  41. 41. ¿Preguntas? – GraciasJosé Alejandro Franco Calderón alejo.franco@misena.edu.co

×