GUI Stencil para la construcción modular de app corporativas

Visión de la UxP está hecha de Árboles o diagramas de plantillas Donde se ensamblan componentes construidos con elementos la experiencia de uso de una aplicación

Visión de la UxP ,[object Object],[object Object],[object Object]

Modelo de ejemplo de casos de uso Para definir el flujo de pantallas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],Retícula Luego se definen las plantillas Área de contenido

[object Object],Cursores ‹ › « » Las variantes de interacción

[object Object],Cursores Y finalmente, los componentes y elementos

[object Object],Área de Navegación Quinto nivel Seleccionada Mouse over Opción en reposo Seleccionada Mouse over Opción en reposo   Segundo nivel Tercer nivel Cuarto nivel Quinto nivel seleccionado S i la etiqueta de una opción de menú es extensa y dos filas no son suficiente, se utiliza punto suspensivo y un tooltip. 1 Primer paso de un proceso 2 Pasos intermedios del proceso 3 Fin de la tarea 1 Primer paso activo 2 Pasos intermedios activo 3 Fin de la tarea activo Pasos de una tarea Menú vertical para niveles sucesivos

[object Object],Área operativa Inicio > Primer nivel > Segundo nivel de navegación > Nivel actual Título de la página Texto introductorio si se quiere incluir al inicio del módulo Título del grupo de datos Entrada de texto I * Campo obligatorio I Fecha Inicio I 13 caracteres máx. dd/mm/aaaa Código I * Campo erróneo I Hora Fin I dd/mm/aaaa Grupo de checkboxes Etiqueta de radio button Buscador de campo I Grupo de radio buttons Segundo radio button Tercera opción con mouse over y clic Título del grupo de datos Combo box Campo inactivo Drop down menú Seleccionar una o varias opcio… Alternativa primera de la lista Segunda opción mouse over Tercer ítem para seleccionar Cuarta opción con el texto ext… Alternativa primera de la lista Segunda opción mouse over Tercer ítem para seleccionar Cuarta opción con el texto extenso Etiqueta de checkbox x Checkbox seleccionado (formato alternativo) Checkbox inactivo  Checkbox seleccionado 07 06 05 04 03 02 01 14 13 12 11 10 09 08 21 20 19 18 17 16 15 28 27 26 25 24 23 22 31 30 29 L M X J V S D « Noviembre » 2010  … Botón múltiple Primer ítem de opciones Segunda alternativa Acción tres mouse over Cuarta operativa Activo Inactivo Mouse over y click

[object Object],Área operativa       250 Registros encontrados « Anterior 1 2 3 4 5 6 Siguiente » Título de la tabla de resultados Mostrar 10/ pág Título del detalle de la fila expandida Otro dato de salida Campo de salida de dos textos Primer dato de detalle Dato 1 Segundo dato Código envío Situación del envío Reembolso Referencia del envío Importe pagado Tramo del envío Ab PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí  Página 1 de 13 Limpiar Modificar PE900549917658797543 Entregado Sí Alfanumérico cincuenta carac… 987542,00 KPG453698 Sí

[object Object],Área operativa Datos de salida Primer campo de salida Campo de salida de dos textos Primer campo de salida AD ANDORRA Otro dato de salida Campo de salida de dos textos Primer campo de salida Combo Segundo campo Checkboxes seleccionados « Volver  Checkbox seleccionado (formato alternativo) Label de checkbox  Checkbox seleccionado

[object Object],Ejemplo aplicado Título del grupo de datos Entrada de texto Filtro | 13 caracteres máx. 1 2 Completar búsqueda avanzada 3 Búsqueda avanzada colapsada 1 Completar criterios de búsqueda 1 2 Completar búsqueda avanzada 3 Búsqueda avanzada colapsada 1 Completar criterios de búsqueda Título del grupo de datos Entrada de texto Filtro completado 13 caracteres máx. Módulo de bandejas para selección de varios ítems de una lista larga Listado inicial Alternativa primera de la lista Segunda opción mouse over Tercer ítem para seleccionar Cuarta opción con el texto ext… Listado final Añadir todos >> Añadir > < Quitar << Quitar todos Alternativa primera de la lista ampliar búsqueda » Limpiar Buscar ampliar búsqueda » plegar » Limpiar Buscar

[object Object],Ejemplo aplicado 2 Completar búsqueda avanzada 3 Búsqueda avanzada colapsada 1 Completar criterios de búsqueda Inicio > Primer nivel > Segundo nivel de navegación > Nivel actual Título de la página Título del grupo de datos Entrada de texto Filtro completado 13 caracteres máx. Limpiar Buscar ampliar búsqueda » Segundo nivel Tercer nivel Cuarto nivel Segundo nivel Segundo nivel Segundo nivel Seleccionada Mouse over Opción en reposo Opción en reposo Opción en reposo

GUI Stencil para la construcción modular de app corporativas

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

En vedette

En vedette (20)

Similaire à GUI Stencil para la construcción modular de app corporativas

Similaire à GUI Stencil para la construcción modular de app corporativas (20)

Dernier

Dernier (20)

GUI Stencil para la construcción modular de app corporativas