PONTIFICIA UNIVERSIDAD CATLICA DEL PER

FACULTAD DE CIENCIAS E INGENIERA

SECCIN DE INGENIERA INFORMTICA
Grupo 03
ALRAZ
Estndares de Interfaz Grfica
Versi! 1.0
PROPUESTO POR" Manuel Tupia tupia.mf@pucp.edu.pe
ELA#ORADO POR"
Rodd !el "armen R#os Acosta $0000%&'
(aren Marlene )ancor*o M+ndez $001,0'%
Marco Tulio Rodr#-uez Ro.as $00$,1/$
0uan "arlos Guzmn Rodr#-uez $00/,0''
"arlos Eduardo "ampos 1era $00%$0%%
!ennis Ale2ander Risco Mr3uez $00%$1&$
4os5i A*el 1i6anco 7rtiz $00%,$1/
REVISADO POR"
Mar#a del "armen El#as maria.elias@pucp.edu.pe
Lima8 09 de septiem*re del $009
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
$is%ori&' (e Re)isio!es
$is%ori&' (e re)isio!es
%e* Fe+,& Versi! Des+rip+i! E-uipo
1 10;0%;$009 1.0 1ersi:n inicial. Grupo 0/
$ $&;11;$009 1.1 Re6isi:n actualizaci:n Grupo 0/
Grupo 0/ $
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
T&.'& (e Co!%e!i(o
1. 7*.eti6os %
$. Alcance %
/. )rincipios Generales de la Interfaz %
/.1. Es3uema de la pantalla principal %
/.$. Especificaci:n de colores %
/./. Especificaci:n de fuentes <
%. !etalle de los estndares <
%.1. 7*.etos -rficos disponi*les <
%.1.1. =>in- "ontrols ? "ontroles "omunes <
%.1.1.1. 0@utton A @ot:n de )ulsaci:n <
%.1.1.$. 0"5ecB@o2 ? "asilla de 1erificaci:n &
%.1.1./. 0"om*o@o2 ? Lista de selecci:n simple &
%.1.1.%. 0La*els ? Eti3uetas ,
%.1.1.<. 0Te2t)ane A "a.a de Te2to Multil#nea ,
%.1.1.&. 0Te2tCield ? "a.a de Te2to 9
%.1.1.,. 0Te2tCield LocBed ? "a.a de Te2to Do Edita*le 9
%.1.$. =>in- "ontainers A "ontenedores 10
%.1.$.1. 0)anel E Titled @order ? "ontrol de Marco 10
%.1./. MenusFTool*ars 11
%.1./.1. Tool=trip ? @arra de Gerramientas 11
%.1.%. !ata ? !atos 11
%.1.%.1. 0Ta*le ? 1ista de !atos 11
%.$. 7*.etos "ompuestos 1$
%.$.1.1. Cormulario 1$
%.$.1.$. "a.a de !ilo-o 1/
<. "onclusiones 1%
&. !atos adicionales 1<
Grupo 0/ /
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
Es%/!(&res (e I!%er0&1 Gr/0i+&
23 O.4e%i)os
El o*.eti6o principal del presente documento es esta*lecer estndares 5e!er&'es para el
diseHo de los componentes -rficos en la aplicaci:n a desarrollar.
Todos los m:dulos en los 3ue se 5a di6idido el proecto tra*a.arn de acuerdo a los estndares
esta*lecidos en este documento8 para de esta manera poder inte-rarlos fcilmente de
manera correcta. "a*e resaltar 3ue en el producto final8 al-unos elementos pueden 6ariar8 ms
no las con6enciones para nom*res tamaHos adems las im-enes mostradas son
referenciales no refle.an el producto final.
Cinalmente8 una 6ez cumplido todo lo anterior permitir 3ue el usuario final del sistema se
familiarice mu fcilmente en un corto tiempo sin per.udicar su tra*a.o por el contrario 5acerlo
ms li-ero.
63 A'+&!+e
El presente documento nos ser6ir como referencia de estandarizaci:n de las interfaces
-rficas para facilitar el desarrollo de la aplicaci:n para simulaci:n de cortes8 en este sentido se
tra*a.ar de manera 3ue se pueda uniformizar las formas el uso de los nom*res.
Las ilustraciones mostradas en el presente documento son referenciales fueron 5ec5as so*re
Mac7= I8 los e3ui6alentes en Jindo>s K*untu no sufren cam*ios considera*les -racias al
uso de inno6adoras t+cnicas para mantener el mismo estilo 6isual en todas las plataformas.
33 Pri!+ipios Ge!er&'es (e '& I!%er0&1
A continuaci:n se presentarn los estndares 3ue se 5an definido para la Interfaz Grfica de
Ksuario del =istema de =imulaci:n de "ortes ALRAZ.
3323 Es-ue*& (e '& p&!%&''& pri!+ip&'
La 6entana principal tendr dos zonasE el rea de @otones Grficos el rea de "liente.
En el rea de @otones Grficos irn los *otones de las principales funcionalidades del
sistema.
El rea "liente siempre *uscar presentarse de forma minimalista8 solo mostrados las
opciones 3ue realmente son necesarias en ese momento.
Las 6entanas para funciones espec#ficas no contendrn un rea de menL8 si no una
*arra de *otones con #conos descripti6os 6isualmente a-rada*les.
=e 5ar uso e2tensi6o de paneles 3ue se irn superponiendo uno a uno para e6itar la
cantidad de 6entanas emer-entes.
3363 Espe+i0i+&+i! (e +o'ores
Los colores 3ue se utilizarn en las 6entanas estarn *asados en el si-uiente es3uemaE
Espe+i0i+&+i! (e Co'ores
C&r&+%er7s%i+& Es%/!(&r
"olor de fondo de 6entanas RG@ M&18&<8,&N
"olor de fuentes RG@ M$0&8 $0$8 $0&N
Grupo 0/ %
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
3333 Espe+i0i+&+i! (e 0ue!%es
La fuentes 3ue se utilizarn ser Lucida Grande8 en estilo @old normal tamaHo de 1$ puntos
Mriad )ro8 en estilo =emi@old tamaHo 1/.
83 De%&''e (e 'os es%/!(&res
8323 O.4e%os 5r/0i+os (ispo!i.'es
A continuaci:n se detallarn los controles -rficos proporcionados por la 5erramienta de
pro-ramaci:n8 de la misma forma orden como se muestran en ella.
832323 S9i!5 Co!%ro's : Co!%ro'es Co*u!es
83232323 ;#u%%o! < #o%! (e Pu's&+i!
Este control se utilizar para realizar acciones espec#ficas en la aplicaci:n8 permitiendo al
usuario interactuar con el sistema.
#o%! (e Pu's&+i!
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto .%!Dom*re
Alto )redeterminado
Anc5o !epende del te2to en el *ot:n.
Alineaci:n Middle"enter
Ima-en de Condo *tnOnom*re@otonP.pn-
@orde Din-uno
K*icaci:nE
=u u*icaci:n depender del diseHo de pantalla8 de*ern estar alineados a la
iz3uierda con respecto a la 6entana.
Grupo 0/ <
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
Entre los *otones de comando ms comunes tenemosE
El *ot:n Aceptar;Guardar tendr la tecla Enter como tecla por defecto8 se-uidamente
e.ecutara la acci:n determinada. 7rdenara el -ra*ado o re-istro de uno o ms datos
especificados.
El *ot:n "ancelar tendr la tecla Esc como tecla por defecto8 se-uidamente retornara a
la pantalla anterior o e.ecuta la instrucci:n de salida.
El *ot:n @uscar8 ordenara la *Ls3ueda de uno o ms datos.
El *ot:n Limpiar8 ser usado en las 6entanas de mantenimiento de informaci:n.
7rdenara el *orrado de todos los datos di-itados en la 6entana en curso.
El *ot:n =# 3ue confirmara una petici:n del usuario o del sistema.
El *ot:n Do 3ue representara la ne-aci:n 5acia una petici:n.
83232363 ;C,e+=#o> : C&si''& (e Veri0i+&+i!
Estos componentes estarn a-rupados dentro marco de control de dimensi:n 6aria*le o
pueden estar dispersos en forma simple de selecci:n.
=e podr realizar una selecci:n mLltiple o simple mediante un clic del *ot:n iz3uierdo del
mouse.
C&si''& (e Veri0i+&+i!
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto +.>Dom*re
Alto )redeterminado
Anc5o )redeterminado
Alineaci:n MiddleLeft
"olor de fondo "ontrol
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1/
83232333 ;Co*.o#o> : Lis%& (e se'e++i! si*p'e
Este control presentara al usuario una lista de opciones en un espacio limitado.
=er utilizado cuando el nLmero de las opciones a mostrar es m#nimo8 siempre maor o i-ual a
tres menor o i-ual a 100.
=e seleccionar una opci:n 3ue ser usada como filtro en las consultas8 as# como tam*i+n para
los re-istros.
CuncionalidadE
)ara seleccionar opciones directamente.
"uando el usuario puede encontrar ms prctico o prefiere seleccionar la informaci:n
ms 3ue di-itarla.
=e car-aran automticamente desde un arc5i6o.
Grupo 0/ &
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
Lis%& (e Se'e++i! Si*p'e
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto +*.Dom*re
Alto )redeterminado
Anc5o !epende de la lon-itud de los #tems a mostrar.
"olor de fondo Jindo>
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
83232383 ;L&.e's : E%i-ue%&s
La finalidad de uso de este componente es el nom*rar los controles por medio de te2to
mostrarlos al usuario8 esta eti3ueta forma parte del diseHo de la 6entana por lo 3ue no es
edita*le por parte del usuario mientras tra*a.e con la aplicaci:n.
E%i-ue%&
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto '.'Dom*re
Alto )redeterminado
Anc5o Gasta $ l#neas
Alineaci:n Alineado a la Iz3uierda
Ima-en de Condo l*lOnom*re@otonP.pn-
@orde Din-uno
832323?3 ;Te>%P&!e < C&4& (e Te>%o Mu'%i'7!e&
Este componente permitir el in-reso de datos o al-una descripci:n de al-uno de los campos
3ue re3uiera maor detalle.
Grupo 0/ ,
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
Ri+,Te>%#o>
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto r%.Dom*re
Alto !epende de los datos
Anc5o !ependiendo de los datos
Alineaci:n Alineado a la iz3uierda
"olor de fondo Jindo>
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
Ga*ilitado 1erdadero
832323@3 ;Te>%Fie'( : C&4& (e Te>%o
La finalidad de uso de este componente permitir 3ue el usuario in-rese los datos 3ue el
sistema necesita para procesar informaci:n Ltil.
C&4& (e E(i+i! (e Te>%o
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto %>%Dom*re
Alto )redeterminado
Anc5o 1aria*le
Alineaci:n Alineado a la iz3uierda
"olor de fondo Jindo>
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
Ga*ilitado 1erdadero
832323A3 ;Te>%Fie'( Lo+=e( : C&4& (e Te>%o No E(i%&.'e
El uso de este componente ser6ir para mostrar los campos cuo contenido ser -enerado
automticamente por el sistema de manera 3ue el usuario no podr modificar.
C&4& No E(i%&.'e
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto %>%Dom*re
Grupo 0/ 9
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
Alto )redeterminado
Anc5o 1aria*le
Alineaci:n "entrado
"olor de fondo "ontrol
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
Ga*ilitado Calso
Grupo 0/ '
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
832363 S9i!5 Co!%&i!ers < Co!%e!e(ores
83236323 ;P&!e' " Ti%'e( #or(er : Co!%ro' (e M&r+o
Este control se utilizara para a-rupar di6ersos o*.etos 3ue est+n relacionados entre si para dar
maor claridad en relaci:n a los datos a mostrar en cada 6entana.
Lle6ara un nom*re relacionado con la a-rupaci:n de los o*.etos dentro del mismo.
)odr 5a*er marcos dentro de otros marcos siempre cuando lle6en nom*res adecuados a
cada secci:n para distin-uirlas con6enientemente.
Co!%ro' (e M&r+o
C&r&+%er7s%i+&s Es%/!(&res
Dom*re del o*.eto 5.>Dom*re
Alto !epende de los controles 3ue contendr
Anc5o !epende de los controles 3ue contendr
"olor de fondo "ontrol
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
@orde Titled @order
Grupo 0/ 10
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
832333 Me!usBToo'.&rs
83233323 Too'S%rip : #&rr& (e $err&*ie!%&s
Este control se utilizar para tener accesi*ilidad a diferentes opciones se-Ln el perfil del
usuario8 su u*icaci:n ser de*a.o de menL principal mostrar elementos -rficos 3ue estarn
relacionados a la acci:n a realizar en la 6entana en cuesti:n.
832383 D&%& : D&%os
83238323 ;T&.'e : Vis%& (e D&%os
Este control mostrara los datos en filas columnas8 los cuales pueden ser el resultado de
al-una *Ls3ueda realizada o mostrar listados -enerales antes de la *Ls3ueda.
D&%&Gri(Vie9
C&r&+%er7s%i+& Es%/!(&r
Dom*re del o*.eto (5ri(Dom*re
Alto !epende de la cantidad de datos 3ue contendr
Anc5o !epende de la cantidad de columnasMfiltrosN 3ue
contendr
"olor de fondo @lanco
"olor de letra De-ro
Estilo de letra Dormal
Cuente de letra Lucida Grande
TamaHo de letra 1$
@orde Ci2ed=in-le
Grid"olor De-ro
Ga*ilitado 1erdadero
Grupo 0/ 11
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
8363 O.4e%os Co*pues%os
83632323 For*u'&rio
Kn formulario se manipula para iniciar la interacci:n con el usuario tiene asociadas una o ms
6entanas secundarias.
For*u'&rio
C&r&+%er7s%i+&s Es%/!(&res
Dom*re del 7*.eto 0r*Dom*re
T#tulo Lucida Grande 98 color @lanco
@arra de t#tulo !epende del =istema 7perati6o
MenL de control )resentar las opciones Ma2imizar8 Minimizar
"errar.
MenL de acciones )resentar las opciones de -uardar8 limpiar salir
"olor de fondo Inacti6e"aptionTe2t
"olor de rea de tra*a.o Inacti6e"aptionTe2t
Alto !epende de la cantidad de controles contenidos
Anc5o !epende de la cantidad de controles contenidos
Alineaci:n La 6entana aparecer centrada en la pantalla
Grupo 0/ 1$
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
83632363 C&4& (e Di/'o5o
=e tra*a.arn con tres tipos de ca.as de dilo-oE ca.a de dilo-o de error8 ca.a de dilo-o de
ad6ertencia ca.a de dilo-o de confirmaci:n.
836323632 C&4& (e Di/'o5o (e Error
El nom*re del t#tulo ser QErrorR.
"ontendr un *ot:n de pulsaci:nE QAceptarR.
=e podr mo6er8 pero no cam*iar el tamaHo.
Mostrar un mensa.e informati6o so*re el moti6o puntual del error8 la
ad6ertencia o la confirmaci:n.
El formato de te2to del t#tulo serE Lucida Grande 1/8 color @lanco.
El formato de te2to del mensa.e serE Lucida Grande 1/8 color De-ro.
)resentar s:lo la opci:n "errar MIN en la ca*ecera.
Tanto el alto el anc5o dependern de la cantidad de informaci:n 3ue se
mane.ar.
Estar centrada en la pantalla.
836323636 C&4& (e Di/'o5o (e A()er%e!+i&
El nom*re del t#tulo ser QAd6ertenciaR.
"ontendr un *ot:n de pulsaci:nE QAceptarR.
=e podr mo6er8 pero no cam*iar el tamaHo.
Mostrar un mensa.e informati6o so*re el moti6o puntual del error8 la
ad6ertencia o la confirmaci:n.
El formato de te2to del t#tulo serE Lucida Grande 1/8 color @lanco.
El formato de te2to del mensa.e serE Lucida Grande 1/8 color De-ro.
)resentar s:lo la opci:n "errar MIN en la ca*ecera.
Tanto el alto el anc5o dependern de la cantidad de informaci:n 3ue se
mane.ar.
Estar centrada en la pantalla.
836323633 C&4& (e Di/'o5o (e Co!0ir*&+i!
El nom*re de la ca*ecera ser Q"onfirmaci:nR.
"ontendr dos *otones de pulsaci:nE Q=iR8 QDoR.
=e podr mo6er8 pero no cam*iar el tamaHo.
Mostrar un mensa.e informati6o so*re el moti6o puntual del error8 la
ad6ertencia o la confirmaci:n.
El formato de te2to del t#tulo serE Lucida Grande 1/8 color @lanco.
El formato de te2to del mensa.e serE Lucida Grande 1/8 color De-ro.
)resentar s:lo la opci:n "errar MIN en la ca*ecera.
Tanto el alto el anc5o dependern de la cantidad de informaci:n 3ue se
mane.ar.
Estar centrada en la pantalla.
Grupo 0/ 1/
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
?3 Co!+'usio!es
La finalidad principal de la interfaz -rafica es el de -uiar a los usuarios de manera ami-a*le e
intuiti6a a tra6+s del sistema permitirle interactuar con el mismo8 de manera 3ue le facilite le
permita en corto tiempo poder conocer usar el sistema. En este sentido la se mane.ara por
medio de interfaces la informaci:n necesaria para poder procesar de manera eficiente en
corto tiempo la respuesta a los re3uerimientos del usuario8 mane.ando adems los errores en
los 3ue este pueda incurrir.
Los estndares definidos en este documento para la interfaz -rfica de usuario8 sern tomados
como *ase para el diseHo de los m:dulos de manera 3ue se cada modulo podr realizar sus
diseHos de acuerdo a la necesidad8 pero tomando como *ase los estndares de este
documento.
)ara maor entendimiento se 5a definido en este documento primero estndares de los o*.etos
*sicos lue-o los compuestos solo con la finalidad de me.orar el entendimiento de este
documento.
Grupo 0/ 1%
ALRAZ
Estndares de Interfaz Grfica 1ersi:n 1.0
@3 D&%os &(i+io!&'es
"on respecto a las pantallas se de*en tener en cuenta las si-uientes consideraciones acerca
de sus propiedadesE
Las 6entanas se centrarn en la pantalla.
Las 6entanas no podrn ser ma2imizadas.
A3uellas pantallas 3ue contienen campos o*li-atorios de*ern contener una
descripci:n en la parte inferior de esta8 antes de los *otones de pulsaci:n en caso los
tu6iera8 como se muestraE CDE C&*pos o.'i5&%orios
Grupo 0/ 1<