Diseño Gráfico de la Pantalla



Descargar 18,86 Kb.
Fecha de conversión05.08.2017
Tamaño18,86 Kb.

Diseño Gráfico de la Pantalla

  • CRAP – contraste, repetición, alineación, proximidad
  • Las Mallas (Grids) son esenciales para el diseño gráfico
  • Otros conceptos de diseño visual:
  • consistencia relaciones
  • claves organizacionales claridad y legibilidad y navegacionales uso de imágenes apropiado
  • nomenclatura familiar
  • Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
  • Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

CRAP

  • Contraste
    • Hacer que las cosas diferentes se vean diferentes
    • Resaltar los elementos dominantes
    • Opacar elementos no importantes
    • Crea dinamismo
  • Repetición
    • Repetir el diseño por toda la interfaz
    • consistencia
    • crea unidad
  • Alineación
  • Proximidad
    • Agrupar elementos relacionados
    • Separar los no relacionados
  • Robin Williams Non-Designers Design Book, Peachpit Press
  • Original
  • Proximidad
  • Alineación
  • Contraste
  • Repetición

Mallas (Grids)

  • Líneas horizontales y verticales para ubicar los componentes de las ventanas
  • Organización
    • Contraste para elementos dominantes
    • Grupos de elementos por proximidad
    • Estructura organizacional
    • Alineación
  • Consistencia
    • Ubicación
    • Formato
    • Repeticón de elementos
    • Organización
  • Separación entre componentes y borde de la ventana
  • Espacios entre componentes
  • No
  • Ok
  • Standard icon set
  • Componentes fijos
  • Formato de contenidos variables
  • No
  • Ok
  • Message text in Arial 14, left adjusted
  • Standard icon set
  • No
  • Ok
  • Do you really want to delete the file “myfile.doc” from the folder “junk”?
  • ?
  • Ok
  • Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.
  • !
  • Apply
  • Cancel
  • The file was destroyed
  • Jerarquía de dos niveles
  • sangrías
  • contraste
  • La alineación conecta los elementos visuales en una secuencia
  • Lógica de flujo organizacional

Consistencia visual (repetición)

  • Consistencia interna
    • Los elementos siguen las mismas convenciones y reglas
    • Se usa un conjunto de mallas específicas para la aplicación
  • Consistencia externa
    • Se siguen convenciones de la plataforma y del estilo de interfaz
    • Utilizar mallas propias de la plataforma y de los componentes
  • Sólo desviarse de esto cuando haya un claro beneficio para el usuario
  • Warning
  • mmmm mmm
  • mmm
  • Okay
  • !
  • Help
  • mmmm mmm
  • mmm mmm
  • Okay
  • ?
  • Tip of the day: Monday, Mar 12
  • mmmm mmm
  • mmm
  • Dismiss

Relacionar elementos de la pantalla

  • Grupos por proximidad
  • Alineación
  • Espacio en blanco (negativo)
  • Estructura explícita
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:
  • Mmmm:

Terrible alineación

  • Webforms
  • Terrible alineación
    • no hay flujo
  • Mal contraste
    • No se puede distinguir las etiquetas de color de los campos editables
  • Mala repetición
    • Los botones no parecen botones
  • Mala estructura explícita
    • Los bloques compiten con la alineación
  • IBM's Aptiva Communication Center
  • No se fijaron en el orden y la organización
  • Mullet & Sano
  • Arreglo de la distribución
  • Mullet & Sano
  • Tensión espacial
  • Mullet & Sano
  • Aquí se usa la estructura explícita como apoyo
  • Mullet & Sano
  • El uso excesivo de efectos 3-d hacen que la ventana se vea
  • innecesariamente amontonada
  • WebForms
  • ¿Cómo se puede escoger algo si no se puede discernir entre un elemento y otro?
  • GIF Construction Set
  • Microsoft Access 2.0

Pistas de navegación

  • Se rediseñó la distribución utilizando alineación y agrupamiento
  • Mullet & Sano
  • La importancia del espacio negativo y la alineación
  • Mullet & Sano

La economía de los elementos visuales

  • Minimizar el número de controles
  • Incluir sólo aquellos que son necesarios
    • Eliminar o relegar otros a ventanas secundarias
  • Minimizar el amontonamiento
    • De tal manera que no se oculte información
  • NNNN
  • MMMM
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • xxx: ____
  • MMMM
  • NNNN
  • Mullet & Sano

Las Pestañas (Tabs)

  • Las Pestañas (Tabs)
    • Una forma excelente de agrupar elementos relacionados
    • Pero puede ser sobreutilizada

Claridad y legibilidad

  • Los caracteres, símbolos y elementos gráficos deben ser fácilmente perceptibles y distinguibles
  • Text set in Braggadocio
  • Text set in Courier
  • TEXT SET IN CAPITOLS
  • Text set in Times Roman

Claridad y legibilidad

  • Uso apropiado de la tipografía
    • Sólo 1-2 tipos de letra (3 máximo)
    • Normales, itálicas, negritas
    • 1-3 tamaños máximo
  • Large
  • Medium
  • Small
  • Large
  • Medium
  • Small
  • Readable
  • Design components to be
  • inviting and attractive
  • Unreadable
  • Design components to be
  • inviting and attractive
  • Design components to be
  • inviting and attractive

Claridad y legibilidad

  • Uso del tipo de letra
    • El tamaño en puntos
    • Espaciado de palabras y líneas
    • Longitud del renglón
    • Sangrías
    • Color
  • Legible
  • Design components to be
  • inviting and attractive
  • Design components to be
  • inviting and attractive
  • Ilegible: Design components
  • to be easy to interpret and
  • understand. Design components to
  • be inviting and attractive
  • Popkin Software’s System Architect
  • Por como se ven, estas opciones deberían ser muy importantes, pero no lo son
  • Time & Chaos
  • Estos ejemplos en gris son difíciles de leer, ¿porqué no hacerlos de una vez negros?
  • Regional preferences in Windows 95
  • Esta orientación del texto es difícil de leer
  • Microsoft Word

Uso de imágenes

  • Signos, íconos, símbolos
    • La correcto es escoger algo entre concreto y abstracto
  • El diseño de íconos es muy difícil
    • A excepción de los más familiares, siempre conviene etiquetarlos
  • La posición de la imagen y su tipo siempre deben estar relacionados
    • Uso de “familias” de imágenes
  • Uso consistente y relevante de imágenes
  • Familia parcial de íconos
  • Distintos niveles de abstracción
  • Mullet & Sano
  • Metáforas refinadas contra excesivamente literales
  • Mullet & Sano
  • ¿Qué significan estas imágenes?
  • No hay etiquetas para los íconos
  • Curiosamente, una de las pestañas es un glosario que las explica, ¿pero cual?
  • Novell GroupWise 5.1

Convenciones

  • Formas familiares de usar componentes gráficos
    • Apropiado para usuarios casuales y expertos
    • Se fundamenta en literatura computacional
    • Se debe usar con cuidado en sistemas de demostración (tipo kiosko)
  • Menús tradicionales
  • Menú de cascada
  • Elemento de caja de diálogo
  • Barras de herramientas
  • Manipulación de la ventana
  • Controles tipográficos estándar
  • Archivo
  • Pantallas WYSIWYG
  • Microsoft Powerpoint

Cómo escoger los componentes apropiados

  • ¿Qué componentes deben estar en la pantalla?
    • Acciones frecuentes
      • Manipulación directa para actividades básicas
      • Botones/formas/barras de herramientas/herramientas especiales para acciones frecuentes/inmediatas
      • Menús/ventana de propiedades para acciones menos frecuentes
      • Ventanas secundarias para acciones poco frecuentes
  • ¿Cómo relacionar los componentes?
    • Organizar los elementos relacionados en “bonches” o grupos
  • Se muestra la funcionalidad básica
  • Apple MacPaint & Macwrite, from mullet & Sano

Componentes y complejidad

  • ¿Cómo se puede reducir la navegación?

Ejercicio

  • Rediseño Gráfico
  • Crear un grid enfatizando:
    • Consistencia visual
    • relationes entre elementos de la interfaz
    • Señales de navegación
    • economía
    • legibilidad y disponibilidad
    • imagenes

Construyendo un grid

  • Construyendo un grid
    • Manteniendo la consistencia con el estilo de la GUI
      • Ubicar componentes estándares – barra de título, controles de ventana, …
    • Decidir la distribución navegacional + epacios en blanco + legibilidad + tipografía
      • El grid muestra la ubicación de componentes genéricos
      • Dichos componentes genéricos pueden tener sus propios grids.

Usando el grid

  • Usando el grid
    • Determinar relaciones, estructura navegacional
      • Asociar la estructura navegacional con el grid
    • Economía
      • Juntar dos ventanas en una
      • Cortar ventana de sonido
  • Usando el grid
    • Evaluar desplegando ejemplos actuales
    • Economizar más
      • Decida cual prefiere
  • vs


La base de datos está protegida por derechos de autor ©absta.info 2016
enviar mensaje

    Página principal