SlideShare uma empresa Scribd logo
1 de 6
Baixar para ler offline
Una posible solución
Paso1. Mantener la coherencia visual con el estilo GUI
• componentes incluyen barra de título, los controles de las
ventanas, cuadros de diálogo ...
• Las localizaciones de algunos de estos componentes se
muestran en la cuadrícula en el siguiente paso.
Paso 2. Construir la red, incluyendo el diseño de navegación
+ espacio en blanco + legibilidad
• La imagen muestra ahora la red con anotaciones
Incluyendo donde irán los componentes genéricos (como
las barras de título y así sucesivamente). Algunos de estos
otros componentes genéricos pueden tener sus propias
redes
Layout general
Barra de título

Imagen en
columna vacía
Etiquetas de 1er
orden (Arial Bold 10pt)
Casillas de
verificación
Controles de 2do
orden (normal Arial 10pt)
Espaciado entre
grupos

controles de
cuadro de diálogo
Una posible solución
Paso 3. Determinar las relaciones, estructura de navegación
Paso 4. Economiza al colapsar (dos ventanas en una sola,
ajuste de texto)
• La imagen siguiente muestra el ejemplo que iniciamos
con la claridad de la estructura de navegación en la
cuadrícula, y que trata de economizar el colapso de
algunos de los elementos que están juntos (es decir, dos
ventanas colapsaron en una sola).
• También recortamos un poco de texto (esto es, el diálogo
de sonido)
Solución casi final
Paso 5. Evaluar reconsiderando ejemplos reales
• Aquí está el ejemplo real con la cuadrícula retirada
Paso 6. Economice, cheque las imágenes
• Hemos eliminado el icono de imagen de la parte superior
izquierda, lo que nos permitió compartir la ventana. En
este momento, ya podemos decidir cual preferimos.

Mais conteúdo relacionado

Destaque

Misión Morochucos
Misión MorochucosMisión Morochucos
Misión MorochucosCody
 
Projeto My life' history
Projeto My life' historyProjeto My life' history
Projeto My life' historyro1000da
 
PetróLeo
PetróLeoPetróLeo
PetróLeoFEUC
 
Twittando: A construção das marcas na era dos diálogos reais.
Twittando: A construção das marcas na era dos diálogos reais.Twittando: A construção das marcas na era dos diálogos reais.
Twittando: A construção das marcas na era dos diálogos reais.Brunno Barranco de Souza
 
Primer Treball: Inés i Mireia
Primer Treball: Inés i MireiaPrimer Treball: Inés i Mireia
Primer Treball: Inés i MireiaVirginia
 
Manuscrito CodeFreaking
Manuscrito CodeFreakingManuscrito CodeFreaking
Manuscrito CodeFreakingElisa
 
Trabalho Cleber Google Docs,Slideshare
Trabalho Cleber Google Docs,SlideshareTrabalho Cleber Google Docs,Slideshare
Trabalho Cleber Google Docs,Slideshareclebercleber
 
Agilizando seu projeto de software
Agilizando seu projeto de softwareAgilizando seu projeto de software
Agilizando seu projeto de softwarebrunopedroso
 
Escola Impress Nte
Escola Impress NteEscola Impress Nte
Escola Impress Nteweruska05
 
Solução para as queimadas na Amazônia
Solução para as queimadas na AmazôniaSolução para as queimadas na Amazônia
Solução para as queimadas na AmazôniaLeo De Moraes
 
Entorno de la mercadotecnia2
Entorno de la mercadotecnia2  Entorno de la mercadotecnia2
Entorno de la mercadotecnia2 guillely
 
ASP.Net Módulo 2
ASP.Net   Módulo 2ASP.Net   Módulo 2
ASP.Net Módulo 2michellobo
 
Aula 6 Metodologia
Aula 6 MetodologiaAula 6 Metodologia
Aula 6 Metodologiagestao
 

Destaque (20)

Misión Morochucos
Misión MorochucosMisión Morochucos
Misión Morochucos
 
Projeto My life' history
Projeto My life' historyProjeto My life' history
Projeto My life' history
 
Trabalho De Fisica
Trabalho De FisicaTrabalho De Fisica
Trabalho De Fisica
 
CoesãO 22
CoesãO 22CoesãO 22
CoesãO 22
 
Hoje (B.F)
Hoje (B.F)Hoje (B.F)
Hoje (B.F)
 
PetróLeo
PetróLeoPetróLeo
PetróLeo
 
Twittando: A construção das marcas na era dos diálogos reais.
Twittando: A construção das marcas na era dos diálogos reais.Twittando: A construção das marcas na era dos diálogos reais.
Twittando: A construção das marcas na era dos diálogos reais.
 
Agama islam
Agama islamAgama islam
Agama islam
 
Primer Treball: Inés i Mireia
Primer Treball: Inés i MireiaPrimer Treball: Inés i Mireia
Primer Treball: Inés i Mireia
 
Manuscrito CodeFreaking
Manuscrito CodeFreakingManuscrito CodeFreaking
Manuscrito CodeFreaking
 
Trabalho Cleber Google Docs,Slideshare
Trabalho Cleber Google Docs,SlideshareTrabalho Cleber Google Docs,Slideshare
Trabalho Cleber Google Docs,Slideshare
 
Agilizando seu projeto de software
Agilizando seu projeto de softwareAgilizando seu projeto de software
Agilizando seu projeto de software
 
Escola Impress Nte
Escola Impress NteEscola Impress Nte
Escola Impress Nte
 
.
..
.
 
Solução para as queimadas na Amazônia
Solução para as queimadas na AmazôniaSolução para as queimadas na Amazônia
Solução para as queimadas na Amazônia
 
Entorno de la mercadotecnia2
Entorno de la mercadotecnia2  Entorno de la mercadotecnia2
Entorno de la mercadotecnia2
 
ASP.Net Módulo 2
ASP.Net   Módulo 2ASP.Net   Módulo 2
ASP.Net Módulo 2
 
uso do blog na educação
uso do blog na educaçãouso do blog na educação
uso do blog na educação
 
.
..
.
 
Aula 6 Metodologia
Aula 6 MetodologiaAula 6 Metodologia
Aula 6 Metodologia
 

Semelhante a Diseño GUI paso a paso

Semelhante a Diseño GUI paso a paso (20)

10 tipos de herramientas
10 tipos de herramientas10 tipos de herramientas
10 tipos de herramientas
 
crear una web
crear una web crear una web
crear una web
 
HTML
HTMLHTML
HTML
 
Omar
OmarOmar
Omar
 
Winedt minitutorial
Winedt minitutorialWinedt minitutorial
Winedt minitutorial
 
Unidad 3 topicos avanzados de programacion
Unidad 3 topicos avanzados de programacionUnidad 3 topicos avanzados de programacion
Unidad 3 topicos avanzados de programacion
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xml
 
Html 5
Html 5Html 5
Html 5
 
Manualautocad2009
Manualautocad2009Manualautocad2009
Manualautocad2009
 
Manual autocad 2009 (español)
Manual autocad 2009 (español)Manual autocad 2009 (español)
Manual autocad 2009 (español)
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
1. introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 11.  introduccion al desarrollo web php parte 1
1. introduccion al desarrollo web php parte 1
 
Controles de Interfaz Introduccion.pdf
Controles de Interfaz Introduccion.pdfControles de Interfaz Introduccion.pdf
Controles de Interfaz Introduccion.pdf
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
UDA-Herramientas para contenido estático
UDA-Herramientas para contenido estáticoUDA-Herramientas para contenido estático
UDA-Herramientas para contenido estático
 
Tutorhtml 2014
Tutorhtml 2014Tutorhtml 2014
Tutorhtml 2014
 
Colegio nacional nicolás esguerra 5
Colegio nacional nicolás esguerra 5Colegio nacional nicolás esguerra 5
Colegio nacional nicolás esguerra 5
 
Actividad 2
Actividad 2Actividad 2
Actividad 2
 
Actividad 2
Actividad 2Actividad 2
Actividad 2
 

Diseño GUI paso a paso

  • 1. Una posible solución Paso1. Mantener la coherencia visual con el estilo GUI • componentes incluyen barra de título, los controles de las ventanas, cuadros de diálogo ... • Las localizaciones de algunos de estos componentes se muestran en la cuadrícula en el siguiente paso. Paso 2. Construir la red, incluyendo el diseño de navegación + espacio en blanco + legibilidad • La imagen muestra ahora la red con anotaciones Incluyendo donde irán los componentes genéricos (como las barras de título y así sucesivamente). Algunos de estos otros componentes genéricos pueden tener sus propias redes
  • 2. Layout general Barra de título Imagen en columna vacía Etiquetas de 1er orden (Arial Bold 10pt) Casillas de verificación Controles de 2do orden (normal Arial 10pt) Espaciado entre grupos controles de cuadro de diálogo
  • 3. Una posible solución Paso 3. Determinar las relaciones, estructura de navegación Paso 4. Economiza al colapsar (dos ventanas en una sola, ajuste de texto) • La imagen siguiente muestra el ejemplo que iniciamos con la claridad de la estructura de navegación en la cuadrícula, y que trata de economizar el colapso de algunos de los elementos que están juntos (es decir, dos ventanas colapsaron en una sola). • También recortamos un poco de texto (esto es, el diálogo de sonido)
  • 5. Paso 5. Evaluar reconsiderando ejemplos reales • Aquí está el ejemplo real con la cuadrícula retirada
  • 6. Paso 6. Economice, cheque las imágenes • Hemos eliminado el icono de imagen de la parte superior izquierda, lo que nos permitió compartir la ventana. En este momento, ya podemos decidir cual preferimos.