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

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

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”

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

Organización y Zoom

Esquema espacial simple

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

Tamaño pantalla: adaptación

Miguel Gea. Guía de Estilos en Dispositivos Móviles 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 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 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 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 11

Layout: Listas simples

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

Layout: Listas agrupadas

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

Navegación

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

Navegación

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

Controles: introducción de datos

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

Controles: Cuadro de Diálogo

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

Introducción datos (texto/fechas)

Date/Time Picker"

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

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)

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

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

Miguel Gea. Guía de Estilos en Dispositivos Móviles 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-elements-gestures-ux-guidelines/

Wireframing: http://mockupbuilder.com