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

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