DISEÑO DE PANTALLAS Diseño de Sistemas..

Presentación del tema: "DISEÑO DE PANTALLAS Diseño de Sistemas.."— Transcripción de la presentación:

1 DISEÑO DE PANTALLAS Diseño de Sistemas.

2 Lineamientos para el diseño de pantallas
Hay cuatro lineamientos básicos importantes: Mantener pantallas simples Mantener consistente la presentación de la pantalla Facilitar al usuario el movimiento entre pantallas Crear pantallas atractivas

3 Cómo mantener una pantalla simple
La pantalla debe mostrar solamente lo que es necesario para la acción particular que está siendo realizada La pantalla debe ser estandarizada en tres partes- secciones: La parte superior de la pantalla tiene una sección de encabezado, sirve para describir al usuario en que parte del software se encuentra La sección media llamada cuerpo de la pantalla. Es usada para la captura de datos, y se organiza de izquierda a derecha y de arriba hacia abajo. En esta sección se resaltan los campos, se pueden usar recuadros, colores, separaciones para campos, etc. La tercera sección de comentarios o instrucciones

4 Cómo mantener una pantalla simple
Uso de ventanas: Son aquellas que se sobreponen parcial o totalmente a la pantalla que la llama Por lo general son llamadas a través de botones o teclas funcionales Se las utiliza para ayudas de datos o para continuar el ingreso de información Demasiadas ventanas pueden llegar a complicar- confundir al usuario en los ingresos

5 Al seleccionar este icono saldrá la pantalla de resultados

6 Cómo mantener pantallas consistentes
Si el ingreso por pantallas será a través de formularios, la pantallas deberán seguir el mismo orden. Formatos deben ser iguales en todas las pantallas

7 Cómo facilitar el movimiento de una pantalla a otra
Se le debe hacer pensar al usuario que se mueve físicamente de una pantalla a otra. Hay tres formas en que se lo puede lograr: Desplazamiento Petición de más detalle Diálogo en pantalla

8 Desplazamiento

9 Congelar columnas

10 Petición de más detalle, en la pantalla de Registro,
Se seleccionó el icono de buscar para la matricula del estudiante

11 Diseño de pantallas atractivas
Con pantallas atractivas el usuario puede llegar a ser más productivo Las pantallas deben atraer a los usuarios y conservar su atención Se debe evitar amontonamiento de campos Se recomienda que si la información no entra en una sola pantalla, usar varias que sean fáciles de usar Si la pantalla es necesariamente compleja, el atractivo es resaltado, separando las categorías de información con líneas. Con la interfaz gráfica (GUI) es posible hacer pantallas muy atractivas. Mediante el uso de colores, cuadros, sombreados, gráficos. Se puede usar: Video inverso Uso de diferentes tipos de letras Uso de imágenes en el diseño de pantallas Uso de diferentes tipos de colores

12 Uso de iconos en el diseño de pantallas
Los iconos son representaciones pictóricas que simbolizan las acciones de computadora. Se los selecciona con el uso del ratón Los iconos deben representar a su función No se aconseja tener más de 20 iconos en una aplicación Son de ayuda para usuarios sin experiencia

13 Diseño de la interfaz gráfica de usuario
La interfaz gráfica de usuario aprovecha las características adicionales en el diseño de pantallas tales como cuadros de texto, casillas de verificación, botones de opción, cuadros de listas y cuadros de listas desplegables, deslizadores, mapas de imágenes entre otros

14 Uso de colores en el diseño de pantalla
Negro sobre amarillo Verde sobre blanco Azul sobre blanco Blanco sobre azul Amarillo sobre negro Los campos importantes pueden llevar colores diferentes

15

16

17

18

19 Reporte por criterios (pestaña activa carrera)

20

21

22

23

24

25

26 Sistema de Integración Laboral SIL
Diseño de Pantallas Diseño de entradas y salidas Página: 1/379 Sistema de Integración Laboral SIL Versión 1.0 FENEDIF Autores: Andrés Beltrán Mónica Rojas Nombre de la forma: index.php Fecha: 14/05/2009 Descripción: Pantalla de inicio de sesión Objeto Campo Contenido Formato txt_login login Nombre de inicio de sesión de un usuario del sistema X(15) txt_clave clave Clave de usuario del sistema Observaciones: