SlideShare una empresa de Scribd logo
1 de 6
iOS Human Interface
Guidelines




                      Desarrollo de App
                           Moviles
                      Cesar Yenque Leon
Display
• 44x44 puntos es lo minimo que se requiere para
  crear una interfaz de usuario.
• En una resolucion standard un punto es igual a
  un pixel.
• Para retina display, un punto es igual a 2 pixels
App responden a Gestos, no clicks
Gestos           Accion
Tap              Presiona o selecciona un control o item

Drag             Para desplazamiento vertical u
                 horizontal
                 Para arrastrar un elemento.
Flick            Para desplazarse rapidamente.
Swipe            Con un dedo, revela el boton Eliminar
                 de una tabla, un vista oculta (iPad)
Double Tap       Para acercar y centrar un un bloque de
                 contenido, o para volver si esta la
                 imagen estirada.
Pinch            Pellizcar para agradandar o acercar la
                 imagen.
Touch and hold   Toque y mantenga en el texto editable y
                 le da una vista ampliada en la posicion
                 del cursor.
Shake            Para iniciar una accion de deshacer o
                 rehacer.
Ventana Unica
• Muchas de las app iOS tienen una unica ventana.
• Una ventana en iOS tiene suele ser muy
  diferente a una ventana de app informatica, en
  iOS no tiene barra de titulo o un boton de cierre
• La mayoria de usuarios experimentan que una
  app iOS es un conjunto de pantallas por donde
  se desplazan.
UI
• Si un gran app no tiene una
  interfaz atractiva nos puede
  parecer una tarea mas.
• Pero si esta interfaz es atractiva,
  intiutiva y convincente mejora
  la funcionalidad de una app e
  inspira a un vinculo emocional
  positivo entre los usuarios.
Definir la applicacion
• Listar todas las caracteristicas que pienses que al
  usuario le gusten
• Determinar quienes son los usuarios
• Filtrar las caracteristicas atravez de la definicion
  de la audiencia.
• No deternerse en pensar nuevas ideas.

Más contenido relacionado

La actualidad más candente

Códigos de la imagen
Códigos de la imagenCódigos de la imagen
Códigos de la imagenfabrikante
 
Juan esteban vasquez pantallas led y 3d
Juan esteban vasquez pantallas led y 3dJuan esteban vasquez pantallas led y 3d
Juan esteban vasquez pantallas led y 3djuanesvg
 
Sustentación del proyecto 3
Sustentación del proyecto 3Sustentación del proyecto 3
Sustentación del proyecto 3jazoncito
 
UTILIZANDO ROBOT EDUCADOR NXT
UTILIZANDO ROBOT EDUCADOR NXTUTILIZANDO ROBOT EDUCADOR NXT
UTILIZANDO ROBOT EDUCADOR NXTmixerboy12
 
Tutorial photo scape vf
Tutorial photo scape vfTutorial photo scape vf
Tutorial photo scape vfLidia Cerecedo
 
Pixlr gamboa maria cristina
Pixlr gamboa maria cristinaPixlr gamboa maria cristina
Pixlr gamboa maria cristinamariakriz
 
Editores de video e imágenes
Editores de video e imágenesEditores de video e imágenes
Editores de video e imágenesdagoto1999
 
El anuncio publicitario. Elementos
El anuncio publicitario. ElementosEl anuncio publicitario. Elementos
El anuncio publicitario. Elementosislarosa68
 

La actualidad más candente (10)

Códigos de la imagen
Códigos de la imagenCódigos de la imagen
Códigos de la imagen
 
Juan esteban vasquez pantallas led y 3d
Juan esteban vasquez pantallas led y 3dJuan esteban vasquez pantallas led y 3d
Juan esteban vasquez pantallas led y 3d
 
Sustentación del proyecto 3
Sustentación del proyecto 3Sustentación del proyecto 3
Sustentación del proyecto 3
 
UTILIZANDO ROBOT EDUCADOR NXT
UTILIZANDO ROBOT EDUCADOR NXTUTILIZANDO ROBOT EDUCADOR NXT
UTILIZANDO ROBOT EDUCADOR NXT
 
Tutorial photo scape vf
Tutorial photo scape vfTutorial photo scape vf
Tutorial photo scape vf
 
InstaSquare
InstaSquareInstaSquare
InstaSquare
 
Pixlr gamboa maria cristina
Pixlr gamboa maria cristinaPixlr gamboa maria cristina
Pixlr gamboa maria cristina
 
Editores de video e imágenes
Editores de video e imágenesEditores de video e imágenes
Editores de video e imágenes
 
Phiwr poweer
Phiwr poweerPhiwr poweer
Phiwr poweer
 
El anuncio publicitario. Elementos
El anuncio publicitario. ElementosEl anuncio publicitario. Elementos
El anuncio publicitario. Elementos
 

Destacado

Crear Tu Correo Personalizado Con Windows Live Domain
Crear Tu Correo Personalizado Con Windows Live DomainCrear Tu Correo Personalizado Con Windows Live Domain
Crear Tu Correo Personalizado Con Windows Live DomainJuan Carlos Sánchez Tapia
 
JESSICA MENDÍA LÓPEZ
JESSICA MENDÍA LÓPEZJESSICA MENDÍA LÓPEZ
JESSICA MENDÍA LÓPEZJess Mendia
 
Presentación curso Ahorro y Eficiencia Energética
Presentación curso Ahorro y Eficiencia EnergéticaPresentación curso Ahorro y Eficiencia Energética
Presentación curso Ahorro y Eficiencia EnergéticaAdolfo García Garaikoetxea
 
[Es] Air France caso cliente: Proyecto de eReputación
[Es] Air France caso cliente: Proyecto de eReputación [Es] Air France caso cliente: Proyecto de eReputación
[Es] Air France caso cliente: Proyecto de eReputación Akio
 
Integrando Swift y Objective-C
Integrando Swift y Objective-CIntegrando Swift y Objective-C
Integrando Swift y Objective-CErick Camacho
 
Curso Swift
Curso SwiftCurso Swift
Curso SwiftPlatzi
 
Code igniter spanish_userguide
Code igniter spanish_userguideCode igniter spanish_userguide
Code igniter spanish_userguideDavid Delgado
 
Ahorro energetico en neumatica
Ahorro energetico en neumaticaAhorro energetico en neumatica
Ahorro energetico en neumatica1977antonio
 
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?Roberto Taborda
 
Compresores en mantenimiento
Compresores en mantenimientoCompresores en mantenimiento
Compresores en mantenimientoEvert Fabian
 
Areal ahorro energia aire comprimido
Areal ahorro energia aire comprimidoAreal ahorro energia aire comprimido
Areal ahorro energia aire comprimidoAlvaro Real Larrinaga
 
NSCoder Swift - An Introduction to Swift
NSCoder Swift - An Introduction to SwiftNSCoder Swift - An Introduction to Swift
NSCoder Swift - An Introduction to SwiftAndreas Blick
 
Clase de Outlook 2007 1ro de sept
Clase de Outlook 2007 1ro de septClase de Outlook 2007 1ro de sept
Clase de Outlook 2007 1ro de septElliot Torres
 
Planificación por competencias
Planificación por competenciasPlanificación por competencias
Planificación por competenciasGerardo Mora
 

Destacado (20)

Crear Tu Correo Personalizado Con Windows Live Domain
Crear Tu Correo Personalizado Con Windows Live DomainCrear Tu Correo Personalizado Con Windows Live Domain
Crear Tu Correo Personalizado Con Windows Live Domain
 
JESSICA MENDÍA LÓPEZ
JESSICA MENDÍA LÓPEZJESSICA MENDÍA LÓPEZ
JESSICA MENDÍA LÓPEZ
 
Presentación curso Ahorro y Eficiencia Energética
Presentación curso Ahorro y Eficiencia EnergéticaPresentación curso Ahorro y Eficiencia Energética
Presentación curso Ahorro y Eficiencia Energética
 
[Es] Air France caso cliente: Proyecto de eReputación
[Es] Air France caso cliente: Proyecto de eReputación [Es] Air France caso cliente: Proyecto de eReputación
[Es] Air France caso cliente: Proyecto de eReputación
 
Transporte Gases
Transporte GasesTransporte Gases
Transporte Gases
 
Integrando Swift y Objective-C
Integrando Swift y Objective-CIntegrando Swift y Objective-C
Integrando Swift y Objective-C
 
Curso Swift
Curso SwiftCurso Swift
Curso Swift
 
Code igniter spanish_userguide
Code igniter spanish_userguideCode igniter spanish_userguide
Code igniter spanish_userguide
 
Ahorro energetico en neumatica
Ahorro energetico en neumaticaAhorro energetico en neumatica
Ahorro energetico en neumatica
 
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
 
Compresores en mantenimiento
Compresores en mantenimientoCompresores en mantenimiento
Compresores en mantenimiento
 
Areal ahorro energia aire comprimido
Areal ahorro energia aire comprimidoAreal ahorro energia aire comprimido
Areal ahorro energia aire comprimido
 
NSCoder Swift - An Introduction to Swift
NSCoder Swift - An Introduction to SwiftNSCoder Swift - An Introduction to Swift
NSCoder Swift - An Introduction to Swift
 
Aire Comprimido
Aire ComprimidoAire Comprimido
Aire Comprimido
 
Ejemplo a amb may jul 2011
Ejemplo a amb may jul 2011Ejemplo a amb may jul 2011
Ejemplo a amb may jul 2011
 
Clase de Outlook 2007 1ro de sept
Clase de Outlook 2007 1ro de septClase de Outlook 2007 1ro de sept
Clase de Outlook 2007 1ro de sept
 
Planificación por competencias
Planificación por competenciasPlanificación por competencias
Planificación por competencias
 
Exposicion modbus rtu
Exposicion modbus rtuExposicion modbus rtu
Exposicion modbus rtu
 
Tema 4 Neumatica red de distribucion
Tema 4 Neumatica red de distribucionTema 4 Neumatica red de distribucion
Tema 4 Neumatica red de distribucion
 
01ppt emprendedor y plan empresa
01ppt emprendedor y plan empresa01ppt emprendedor y plan empresa
01ppt emprendedor y plan empresa
 

Similar a iOS human interface guidelines yenq

Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletasInterfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletasArmando Fidalgo
 
Conociendo p ower point
Conociendo p ower pointConociendo p ower point
Conociendo p ower pointwenorro
 
Como hacer un prezi
Como hacer un preziComo hacer un prezi
Como hacer un preziLu Gutierrez
 
MANEJADOR DE PRESENTACIONES
MANEJADOR DE PRESENTACIONESMANEJADOR DE PRESENTACIONES
MANEJADOR DE PRESENTACIONESLuisGomez858
 
Presentacion examen Francisco Mancilla
Presentacion examen Francisco MancillaPresentacion examen Francisco Mancilla
Presentacion examen Francisco MancillaeiciUV
 
Nos familiarizamos con la pdi smart board
Nos familiarizamos con la pdi smart boardNos familiarizamos con la pdi smart board
Nos familiarizamos con la pdi smart boardJUNTA DE ANDALUCIA
 
Edición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaEdición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaKarla Cr
 
Manejador de Presentaciones
Manejador de Presentaciones Manejador de Presentaciones
Manejador de Presentaciones KrysmarLinares
 
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...Recomendaciones para el diseño de diapositivas y Recomendaciones para present...
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...MarianelaSolrzano
 
Pizarra digital interactiva Guía de aprendizaje
Pizarra digital interactiva Guía de aprendizajePizarra digital interactiva Guía de aprendizaje
Pizarra digital interactiva Guía de aprendizajefacruiz
 
Prezi prezipreziprezi
Prezi preziprezipreziPrezi prezipreziprezi
Prezi prezipreziprezijairo
 
Edicion de presentaciones electronicas
Edicion de presentaciones electronicasEdicion de presentaciones electronicas
Edicion de presentaciones electronicasNaomi Jimenez
 
Edición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaEdición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaLinda Martinez
 
Recomendaciones para el diseño de diapositivas en power point
Recomendaciones para el diseño de diapositivas en power pointRecomendaciones para el diseño de diapositivas en power point
Recomendaciones para el diseño de diapositivas en power pointJose Zamora
 
POWER POINT Y SUS CONTENIDOS
POWER POINT Y SUS CONTENIDOSPOWER POINT Y SUS CONTENIDOS
POWER POINT Y SUS CONTENIDOSNieto Danixa
 

Similar a iOS human interface guidelines yenq (20)

Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletasInterfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
 
Unidad 11
Unidad 11Unidad 11
Unidad 11
 
Primeros pasos
Primeros pasosPrimeros pasos
Primeros pasos
 
Conociendo p ower point
Conociendo p ower pointConociendo p ower point
Conociendo p ower point
 
Como hacer un prezi
Como hacer un preziComo hacer un prezi
Como hacer un prezi
 
MANEJADOR DE PRESENTACIONES
MANEJADOR DE PRESENTACIONESMANEJADOR DE PRESENTACIONES
MANEJADOR DE PRESENTACIONES
 
Presentacion examen Francisco Mancilla
Presentacion examen Francisco MancillaPresentacion examen Francisco Mancilla
Presentacion examen Francisco Mancilla
 
Nos familiarizamos con la pdi smart board
Nos familiarizamos con la pdi smart boardNos familiarizamos con la pdi smart board
Nos familiarizamos con la pdi smart board
 
Edición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaEdición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-linda
 
Manejador de Presentaciones
Manejador de Presentaciones Manejador de Presentaciones
Manejador de Presentaciones
 
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...Recomendaciones para el diseño de diapositivas y Recomendaciones para present...
Recomendaciones para el diseño de diapositivas y Recomendaciones para present...
 
Pizarra digital interactiva Guía de aprendizaje
Pizarra digital interactiva Guía de aprendizajePizarra digital interactiva Guía de aprendizaje
Pizarra digital interactiva Guía de aprendizaje
 
Prezi prezipreziprezi
Prezi preziprezipreziPrezi prezipreziprezi
Prezi prezipreziprezi
 
El afiche
El aficheEl afiche
El afiche
 
Edicion de presentaciones electronicas
Edicion de presentaciones electronicasEdicion de presentaciones electronicas
Edicion de presentaciones electronicas
 
UX para dispositivos móviles
UX para dispositivos móvilesUX para dispositivos móviles
UX para dispositivos móviles
 
Edición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-lindaEdición de-presentaciones-electrónicas-linda
Edición de-presentaciones-electrónicas-linda
 
Dayana
DayanaDayana
Dayana
 
Recomendaciones para el diseño de diapositivas en power point
Recomendaciones para el diseño de diapositivas en power pointRecomendaciones para el diseño de diapositivas en power point
Recomendaciones para el diseño de diapositivas en power point
 
POWER POINT Y SUS CONTENIDOS
POWER POINT Y SUS CONTENIDOSPOWER POINT Y SUS CONTENIDOS
POWER POINT Y SUS CONTENIDOS
 

iOS human interface guidelines yenq

  • 1. iOS Human Interface Guidelines Desarrollo de App Moviles Cesar Yenque Leon
  • 2. Display • 44x44 puntos es lo minimo que se requiere para crear una interfaz de usuario. • En una resolucion standard un punto es igual a un pixel. • Para retina display, un punto es igual a 2 pixels
  • 3. App responden a Gestos, no clicks Gestos Accion Tap Presiona o selecciona un control o item Drag Para desplazamiento vertical u horizontal Para arrastrar un elemento. Flick Para desplazarse rapidamente. Swipe Con un dedo, revela el boton Eliminar de una tabla, un vista oculta (iPad) Double Tap Para acercar y centrar un un bloque de contenido, o para volver si esta la imagen estirada. Pinch Pellizcar para agradandar o acercar la imagen. Touch and hold Toque y mantenga en el texto editable y le da una vista ampliada en la posicion del cursor. Shake Para iniciar una accion de deshacer o rehacer.
  • 4. Ventana Unica • Muchas de las app iOS tienen una unica ventana. • Una ventana en iOS tiene suele ser muy diferente a una ventana de app informatica, en iOS no tiene barra de titulo o un boton de cierre • La mayoria de usuarios experimentan que una app iOS es un conjunto de pantallas por donde se desplazan.
  • 5. UI • Si un gran app no tiene una interfaz atractiva nos puede parecer una tarea mas. • Pero si esta interfaz es atractiva, intiutiva y convincente mejora la funcionalidad de una app e inspira a un vinculo emocional positivo entre los usuarios.
  • 6. Definir la applicacion • Listar todas las caracteristicas que pienses que al usuario le gusten • Determinar quienes son los usuarios • Filtrar las caracteristicas atravez de la definicion de la audiencia. • No deternerse en pensar nuevas ideas.