Seminario Dispositivos moviles

Guía de estilos Dispositivos Móviles

SEMINARIO

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

Miguel Gea. Guía de Estilos en Dispositivos Móviles 2

•  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

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

Características

Miguel Gea. Guía de Estilos en Dispositivos Móviles 4 --

480x320 pixel 960x640 pixel Pantalla 4” retina: 1.136x640 pixel

Tamaño pantalla

1.024x768pixel pantalla 7”


Organización y Zoom

Esquema espacial simple


Tamaño pantalla: adaptación


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


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



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…”



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)



Layout: Listas simples


Layout: Listas agrupadas


Navegación


Navegación


Controles: introducción de datos


Controles: Cuadro de Diálogo


Introducción datos (texto/fechas)

Date/Time Picker"


Tablets (Ipad) Características

•  Posee mayor tamaño, izquierda= menu, derecha = detalle •  Controles específicos:

ScopeBar: menú contextual (cambia la información desplegada)

PopOver: Panel emergente (sólo visible cuando se pulsa)


Zoom in Zoom out Content Action Scroll (inline)

Zoom Center Select Move Viewport/pan

Scroll/ pan

Interaccion por gestos

Miguel Gea. Guía de Estilos en Dispositivos Móviles 20 20

Navegación web adaptada

Miguel Gea. Guía de Estilos en Dispositivos Móviles 21 21

Wireframing

http://mockupbuilder.com


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-elements-gestures-ux-guidelines/

Wireframing: http://mockupbuilder.com

Education

Seminario Dispositivos moviles