Your SlideShare is downloading. ×
Seminario Dispositivos moviles
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Seminario Dispositivos moviles

453
views

Published on

Diseño de Interfaces de Usuario …

Diseño de Interfaces de Usuario
Grado de Ingeniería Informática.
Universidad de Granada

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
453
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SEMINARIO Guía de estilos Dispositivos Móviles Miguel Gea http://lsi.ugr.es/mgea Dpt. Lenguajes y Sistemas Informáticos ETSI. Ingeniería Informática Universidad de Granada Ene- 2014 Creative Commons by-nc-sa
  • 2. Características •  Visualización completa de pantalla con orientación vert/horiz •  Basados en gestos, no en botones (pantalla multitouch) •  Una aplicación en cada momento, una sola ventana Otras funcionalidades •  Acelerómetro •  Sensor de proximidad •  GPS •  Reconocedor voz •  Doble Cámara Miguel Gea. Guía de Estilos en Dispositivos Móviles 2
  • 3. Características Vista de Pantalla: •  La vista (viewport) es el área rectangular que determina el contenido que se muestra •  Se puede cambiar la escala de la vista (con zoom), pero no el tamaño •  Se puede girar en formato apaisado/vertical Interacción: •  Las acciones se realizan con diferentes gestos Tipos de aplicaciones: •  Basadas web (navegador) •  Apps Miguel Gea. Guía de Estilos en Dispositivos Móviles 3
  • 4. Tamaño pantalla 480x320 pixel 960x640 pixel Pantalla 4” retina: 1.136x640 pixel 1.024x768pixel pantalla 7” Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 4
  • 5. Organización y Zoom Esquema espacial simple Miguel Gea. Guía de Estilos en Dispositivos Móviles 5
  • 6. Tamaño pantalla: adaptación Miguel Gea. Guía de Estilos en Dispositivos Móviles 6
  • 7. Layout: Barra de estado (status bar) •  •  •  Muestra información importante acerca del dispositivo y del entorno (estado conexión de red, fecha y hora, carga de batería) Siempre se coloca en la parte superior de la pantalla (en cualquier orientación) El color puede variar, pero en el iPad siempre es negra. iOS Human Interface Guidelines: iOS UI Element Usage Guidelines Miguel Gea. Guía de Estilos en Dispositivos Móviles 7
  • 8. Layout: Barra navegación (navigation bar) •  •  •  Permite la navegación entre una jerarquía de información e incluso puede gestionar su contenido Ubicada siempre en la parte superior (por debajo de la barra de estado) Contiene el titulo de la página actual (centrado). En caso de jerarquía, se incluye botón de vuelta hacia atrás iOS Human Interface Guidelines: iOS UI Element Usage Guidelines Miguel Gea. Guía de Estilos en Dispositivos Móviles 8
  • 9. Layout: Barra de Pestañas (tab bar) •  •  •  La barra de pestañas permite pasar rápidamente entre diferentes tareas, vistas o modos. Ubicada siempre en la parte inferior de a pantalla y siempre es accesible desde cualquier lugar en la aplicación No debería tener más de 5 items (en iPhone), uso de “más…” iOS Human Interface Guidelines: iOS UI Element Usage Guidelines Miguel Gea. Guía de Estilos en Dispositivos Móviles 9
  • 10. Layout: Barra de herramientas (toolbar) •  •  Contiene los controles que realizan acciones sobre los elementos de la pantalla. Ubicada siempre en la parte inferior (puede estar en la parte superior en iPad) iOS Human Interface Guidelines: iOS UI Element Usage Guidelines Miguel Gea. Guía de Estilos en Dispositivos Móviles 10
  • 11. Layout: Listas simples Miguel Gea. Guía de Estilos en Dispositivos Móviles 11
  • 12. Layout: Listas agrupadas Miguel Gea. Guía de Estilos en Dispositivos Móviles 12
  • 13. Navegación Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 13
  • 14. Navegación Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 14
  • 15. Controles: introducción de datos Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 15
  • 16. Controles: Cuadro de Diálogo Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 16
  • 17. Introducción datos (texto/fechas) Date/Time Picker" Miguel Gea. Guía de Estilos en Dispositivos Móviles -- 17
  • 18. Tablets (Ipad) Características •  •  Posee mayor tamaño, izquierda= menu, derecha = detalle Controles específicos: PopOver: Panel emergente (sólo visible cuando se pulsa) Miguel Gea. Guía de Estilos en Dispositivos Móviles ScopeBar: menú contextual (cambia la información desplegada) 18
  • 19. Interaccion por gestos Select Zoom Center Scroll/ pan Move Viewport/pan Zoom out Zoom in Miguel Gea. Guía de Estilos en Dispositivos Móviles Content Action Scroll (inline) 19
  • 20. Navegación web adaptada Miguel Gea. Guía de Estilos en Dispositivos Móviles 20 20
  • 21. Wireframing http://mockupbuilder.com Miguel Gea. Guía de Estilos en Dispositivos Móviles 21 21
  • 22. Recursos Guía de Gestos http://static.lukew.com/TouchGestureGuide.pdf Apple Human Interfce Guidelines http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/ mobilehig/Introduction/Introduction.html iPhone: Manual del usuario http://manuals.info.apple.com/es_ES/iphone_manual_del_usuario.pdf All about iPad: Resolution, UI Elements, Gestures, UX Guidelines http://curiouxblog.wordpress.com/2010/08/20/all-about-ipad-resolution-ui-elementsgestures-ux-guidelines/ Wireframing: http://mockupbuilder.com Miguel Gea. Guía de Estilos en Dispositivos Móviles 22