Estándares de Interfaz Grafica

Sistema SixPack
Sistema SixPack
Estándares de Interfaz Gráfica
Versión 2
Sistema SixPack Versión: 2
Historia de Revisión
Fecha Versión Descripción Autor

08/09/2007 1 Estándar de Interfaz Gráfica SixPack
23/09/2007 1.1 Correcciones Generales SixPack
18/11/2007 2 Correcciones y se ha añadido el diseño SixPack
de ventanas
Página 2 de 20
Estándares de interfaz Gráfica
Tabla de Contenidos
Estándares de Interfaz Grafica..................................................................................................................4
1. Objetivos...............................................................................................................................................4
2. Alcances................................................................................................................................................4
3. Detalle de los estándares.......................................................................................................................4

3.1 Objetos gráficos disponibles....................................................................................................4
3.1.1. Objetos básicos........................................................................................................................4
3.1.1.1. Etiqueta (JLabel)..................................................................................................................4
3.1.1.2. Caja de Texto (JTextField)...................................................................................................5
3.1.1.3. Text Area (JTextArea) ........................................................................................................5
3.1.1.4. Casilla de Verificación (JCheckBox)...................................................................................6
3.1.1.5. Botones de Opción: Radio Button (JRadioButton)..............................................................6
3.1.1.6. Lista de selección simple: Combo Box................................................................................7
3.1.1.7. Lista de selección múltiple (JList)........................................................................................8
3.1.1.8. Control de Marco (JPanel)...................................................................................................9
3.1.1.9. Botón de Pulsación.............................................................................................................10
3.1.1.10. Control Barra de Menú (JMenuBar)................................................................................12
3.1.1.11. Control Barra de Herramientas (JToolBar)......................................................................12
3.1.1.12. Control de Selección de Fecha y Tiempo (JDatePicker)..................................................13
3.1.2. Objetos compuestos...............................................................................................................13
3.1.2.1. Caja de Diálogo (JDialog)..................................................................................................13
3.1.2.2. Vista de Datos (JTable)......................................................................................................15
3.1.2.3. Formulario..........................................................................................................................15
4. Diseño de ventanas...............................................................................................................................17
4.1 Esquema de Navegación entre pantallas...................................................................................17
4.2 Ejemplo de pantalla de Mantenimiento.....................................................................................18
4.3 Ejemplo de pantalla de Búsqueda.............................................................................................19
4.4 Ejemplo de pantalla de Transacción..........................................................................................19
5. Conclusiones........................................................................................................................................20
Página 3 de 20
Estándares de Interfaz Grafica
1. Objetivos
El objetivo de este documento es de establecer normas y estándares para el diseño de la

interfaz grafica del sistema SixPack, además de tener como propósito fundamental el de
determinar un patrón de diseño en las interfaces de cada módulo para facilitar al usuario el uso
del sistema
2. Alcances
Este documento servirá de guía de referencia para el desarrollo de una aplicación, basada
íntegramente en una interfaz gráfica. Las áreas que abarca el sistema en su totalidad se
dividen en tres grande módulos: Compras, Embalajes, Inventarios y Seguridad.
3. Detalle de los estándares
3.1 Objetos gráficos disponibles
3.1.1. Objetos básicos
3.1.1.1. Etiqueta (JLabel)
• El texto de las etiquetas deben comenzar con mayúscula en la primera letra y el resto en
minúsculas sea una o más palabras.
• El tamaño de las etiquetas estará en función del texto que contengan.
• Su ubicación en las ventanas será en el lado izquierdo del componente a la que refiere.
• Los dos puntos “ : “ van pegados al texto
Etiqueta
Características Estándares
Nombre del objeto lblNombreCampo
Alto 13
Ancho Depende de la longitud
del mensaje
Alineación Alineado a la Izquierda
Color de fondo Control
Color de letra Negro
Página 4 de 20
Estilo de letra Normal

Fuente de letra Sans Serif
Tamaño de letra 11
Borde Sin borde
3.1.1.2. Caja de Texto (JTextField)
• La Caja de Texto permite que el usuario ingrese los datos que el sistema necesita para
generar información útil.
Caja de Edición de Texto

Nombre del objeto txtNombre
Alto Defecto
Ancho Defecto
Alineación Alineado a la izquierda
Tamaño de letra 11
Borde Fixed 3D
3.1.1.3. Text Area (JTextArea)
• Permite el ingreso de datos, una descripción de algún campo de manera más

detallada.
RichTextBox
Nombre del objeto rtxtNombre
Página 5 de 20
Alto Depende de los datos

Ancho Dependiendo de los
datos
Tamaño de letra 11
Borde Fixed 3D
3.1.1.4. Casilla de Verificación (JCheckBox)
• Los botones de selección pueden estar agrupados dentro de un control de marco de

dimensión variable o pueden estar dispersos en forma simple de selección.
• El acceso a los botones de selección se hará con un clic del botón izquierdo del
mouse, pudiendo ser una elección simple o múltiple.
Casilla de Verificación
Nombre del objeto cbxNombre
Alto Defecto
Ancho Dependiendo de los
datos
Tamaño de letra 11
3.1.1.5. Botones de Opción: Radio Button (JRadioButton)
 Se utilizarán para la selección de un dato o un conjunto de datos distintos y excluyentes.
Página 6 de 20
 También indican condiciones a tener en cuenta en las acciones a tomar por el usuario o
por otros controles.
 Se podrán alinear de forma vertical u horizontal.
 Los botones de opción irán en número variable mayor o igual a dos, pudiendo
seleccionarse tan solo uno de ellos.
 El acceso a los botones de opción se hará con un clic del botón izquierdo del mouse o con
las teclas de dirección.
Botones de Opción
Nombre del objeto rbtNombre
Alto Defecto
de la cadena que se
utilizará como opción
Tamaño de letra 11
3.1.1.6. Lista de selección simple: Combo Box
• Se trata de un control que presenta al usuario una lista de opciones en un espacio limitado.
• El tamaño del ComboBox está en función al texto que contengan.
• El largo del ComboBox estará de acuerdo a la frase más larga que contenga.
• Será utilizado cuando el número de las opciones a mostrar es mínimo, siempre mayor o
igual a tres y menor o igual a 100. Se seleccionará una opción que será usada como filtro
en las consultas, así como también para los registros.
• No estará habilitado para modificaciones.
Página 7 de 20
Lista de Selección Simple

Nombre del objeto cbxNombre
Alto Defecto
del item mas ancho
que contenga.
Tamaño de letra 11
3.1.1.7. Lista de selección múltiple (JList)
 Se trata de un control que presenta al usuario un cuadro de opciones en un espacio

limitado.
 Será utilizado cuando el número de opciones es grande y puedes seleccionar más de una
opcion.
 De manera predeterminada se mostrarán verticalmente en una columna única, si el

número de elementos supera a los que pueden mostrar en el cuadro combinado o cuadro
de lista, aparecen automáticamente barras de desplazamiento en el control.
Página 8 de 20
Lista de Selección Múltiple

Nombre del objeto lstNombre
Alto Depende de la
cantidad de items a
mostrar
del item mas ancho
que contenga.
Tamaño de letra 11
3.1.1.8. Control de Marco (JPanel)
 Los menús estarán agrupados de acuerdo a las funcionalidades principales del sistema,
asimismo se usa para agrupar información referente a una misma entidad.
 Es decir, no se puede definir un JPanel dentro de otro JPanel.
 En caso se requiera dividir los elementos contenidos en un control de marco por

secciones, se deberá colocar etiquetas con descripciones adecuadas sobre dichas
secciones.
Página 9 de 20
Control de Marco
Nombre del objeto grbNombre
Alto Depende de los
controles que
contendrá
Ancho Depende de los
controles que
contendrá
Tamaño de letra 11
Borde Establecido por
defecto
3.1.1.9. Botón de Pulsación
Se utilizan para acciones específicas del sistema.
Usaremos botones con imagen y texto
El tamaño de la imagen será de 16x16
Botón de Pulsación
Página 10 de 20
Nombre del objeto btnNombre

Alto Se adecua de acuerdo
al tamaño de la imagen
y texto.
Ancho Se adecua de acuerdo
al tamaño de la imagen
y texto.
Alineación MiddleCenter
Tamaño de letra 11
Ubicación:
• La ubicación depende del diseño de pantalla, y deberán estar alineados a la derecha con
respecto a la ventana.
• Entre los botones de comando más comunes tenemos:
Botones usados
Imgen Nombre
Aceptar
Nuevo
Modificar
Guardar
Eliminar
Ver
Cancelar
Página 11 de 20
Imprimir
Salir
Desplazar
3.1.1.10. Control Barra de Menú (JMenuBar)
 Este control se encontrará en la ventana principal de cada modulo.

 Brindará acceso a las acciones determinadas para cada modulo.
Barra de Herramientas
Nombre del objeto jmbNombre
Alto Defecto
Ancho Depende del ancho de
la ventana
3.1.1.11. Control Barra de Herramientas (JToolBar)
 Este tipo de control permite al usuario trabajar con elementos gráficos que permiten la
accesibilidad a diferentes opciones.
 Su ubicación será debajo de la barra de título de la ventana.
 Se encontrara en las ventanas de acciones de cada modulo.
Barra de Herramientas
Nombre del objeto jtbNombre
Alto Depende del tamaño
de la imagen
Ancho Depende del ancho de
la ventana
Página 12 de 20

ToolTipText Depende de la
funcionalidad del
botón
3.1.1.12. Control de Selección de Fecha y Tiempo (JDatePicker)
 Este tipo de control permite al usuario seleccionar una fecha u hora determinada.
 El formato para las fechas será el formato Corto.
Control de Selección de Fecha y Tiempo

Nombre del objeto dtpNombre
Alto Defecto
Ancho Defecto
Tamaño de letra 11
3.1.2. Objetos compuestos
3.1.2.1. Caja de Diálogo (JDialog)
• Podrá ser mostrada desde una ventana primaria, una secundaria u otra caja de diálogo.
• Será movible pero no cambiará de tamaño ni es escalable.
• No tendrá barra de menú ni barra de herramientas.
• Podrá contener botones de pulsación
Página 13 de 20
• Es de dos tipos:
o Modal: Se utiliza para completar una acción antes de continuar con otra. También es
utilizada para presentar información, para responder preguntas y es removida
inmediatamente después que la interacción con la caja de diálogo Modal es completada.
Caja de diálogo
Tipo de letra Sans Serif
Ícono Depende del tipo del
mensaje
Color de fondo Defecto
Alto De acuerdo a la
cantidad de
información que se
manejará en la caja de
diálogo
Ancho De acuerdo a la
cantidad de
información que se
manejará en la caja de
diálogo
Alineación La caja estará centrada
Página 14 de 20
en la pantalla
3.1.2.2. Vista de Datos (JTable)
 Muestra una cuadrícula con filas y columnas de datos, los cuales son resultado de alguna
búsqueda realizada anteriormente. Dicha salida debe contener en sus columnas todos los
datos descritos en los campos de filtro de búsqueda.
 Todos los campos de la grilla seran no editables.
JTable
Nombre del objeto jgdNombre
Alto Depende de la
cantidad de datos que
contendrá
Ancho Depende de la
cantidad de
columnas(filtros) que
contendrá
Tamaño de letra 11
3.1.2.3. Formulario
 Un formulario se manipula para iniciar la interacción con el usuario y tiene

asociadas una o más ventanas secundarias.
Página 15 de 20
Formulario
Nombre del objeto frmNombre
Título Sans Serif, 12
Contendrá el mismo
nombre que el caso de
uso asociado
Barra de título Color Naranja.
Presentará una
descripción de la
pantalla.
Menú de control Presentará las
opciones Maximizar,
Minimizar y Cerrar.
Color de área de Defecto
trabajo
Alto 800
Ancho 600
Alineación La ventana aparecerá
centrada en la pantalla
Página 16 de 20
4. Diseño de ventanas
El contenido de este apartado corresponde al diseño de pantallas estándar para registrar,

consultas, modificaciones y eliminaciones.
4.1 Esquema de Navegación entre pantallas
La siguiente figura muestra el esquema de navegación entre pantallas.
Pantalla validar
Usuario
Usuario se valida
Pantalla
principal
Selecciona Módulo
Pantalla Pantalla Pantalla Pantalla Pantalla

Área Área Área Área Área
Seguridad Embalajes Compras Ventas Inventario
Página 17 de 20
Selecciona Selecciona Selecciona

Transacción Mantenimiento Búsqueda
Pantalla Pantalla
Pantalla
Transacción Mantenimiento
Búsqueda
Selecciona Selecciona Aceptar

Modificar ó
Eliminar
Selecciona Aceptar
Selecciona Buscar
4.2 Ejemplo de pantalla de Mantenimiento
Página 18 de 20
4.3 Ejemplo de pantalla de Búsqueda
4.4 Ejemplo de pantalla de Transacción
Página 19 de 20
5. Conclusiones
La Interfaz Grafica de Usuario (GUI) es el medio por el cual el usuario interactuará con el sistema,
razón por la cual dicha interfaz facilitará el trabajo al usuario.
Todos los estándares definidos para la interfaz gráfica de usuario serán tomados como base para el
diseño de cada una de las pantallas. Esto no significa necesariamente que sean exactamente iguales a
los ejemplos mostrados, ya que variarán de acuerdo al área y datos que se requieran.
Se ha tratado de definir los estándares del nivel inferior (objetos básicos) al superior (objetos
compuestos) para un mejor entendimiento de parte de aquellas personas que implementarán el
sistema.
Página 20 de 20

Estándares de Interfaz Grafica

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Estándares de Interfaz Grafica

Cargado por

Copyright:

Formatos disponibles

Sistema SixPack

Fecha Versión Descripción Autor

3. Detalle de los estándares.......................................................................................................................4

Estándares de Interfaz Grafica

El objetivo de este documento es de establecer normas y estándares para el diseño de la

3. Detalle de los estándares

3.1 Objetos gráficos disponibles

3.1.1. Objetos básicos

3.1.1.1. Etiqueta (JLabel)

Estilo de letra Normal

3.1.1.2. Caja de Texto (JTextField)

Caja de Edición de Texto

3.1.1.3. Text Area (JTextArea)

• Permite el ingreso de datos, una descripción de algún campo de manera más

Alto Depende de los datos

3.1.1.4. Casilla de Verificación (JCheckBox)

• Los botones de selección pueden estar agrupados dentro de un control de marco de

3.1.1.5. Botones de Opción: Radio Button (JRadioButton)

 Se utilizarán para la selección de un dato o un conjunto de datos distintos y excluyentes.

 Se podrán alinear de forma vertical u horizontal.

3.1.1.6. Lista de selección simple: Combo Box

• El tamaño del ComboBox está en función al texto que contengan.

• No estará habilitado para modificaciones.

Lista de Selección Simple

3.1.1.7. Lista de selección múltiple (JList)

 Se trata de un control que presenta al usuario un cuadro de opciones en un espacio

 De manera predeterminada se mostrarán verticalmente en una columna única, si el

Lista de Selección Múltiple

3.1.1.8. Control de Marco (JPanel)

 Es decir, no se puede definir un JPanel dentro de otro JPanel.

 En caso se requiera dividir los elementos contenidos en un control de marco por

3.1.1.9. Botón de Pulsación

Se utilizan para acciones específicas del sistema.

Usaremos botones con imagen y texto

El tamaño de la imagen será de 16x16

Nombre del objeto btnNombre

3.1.1.10. Control Barra de Menú (JMenuBar)

 Este control se encontrará en la ventana principal de cada modulo.

3.1.1.11. Control Barra de Herramientas (JToolBar)

 Su ubicación será debajo de la barra de título de la ventana.

 Se encontrara en las ventanas de acciones de cada modulo.

Color de fondo Control

3.1.1.12. Control de Selección de Fecha y Tiempo (JDatePicker)

 El formato para las fechas será el formato Corto.

Control de Selección de Fecha y Tiempo

3.1.2. Objetos compuestos

3.1.2.1. Caja de Diálogo (JDialog)

3.1.2.2. Vista de Datos (JTable)

 Todos los campos de la grilla seran no editables.

 Un formulario se manipula para iniciar la interacción con el usuario y tiene

El contenido de este apartado corresponde al diseño de pantallas estándar para registrar,

4.1 Esquema de Navegación entre pantallas

La siguiente figura muestra el esquema de navegación entre pantallas.

Pantalla Pantalla Pantalla Pantalla Pantalla

Selecciona Selecciona Selecciona

Selecciona Selecciona Aceptar

4.2 Ejemplo de pantalla de Mantenimiento

4.3 Ejemplo de pantalla de Búsqueda

4.4 Ejemplo de pantalla de Transacción

También podría gustarte