O slideshow foi denunciado.

Desenhando aplicativos mobile IOS


3.300 visualizações

Publicada em

Palestra realizada (08/07) para o TDC 2012 - The Developers Conference - Trilha Mobile
--


Nos dias de hoje combinar design e inovação na plataforma Mobile nos exige um cuidado especial em usabilidade e design de interface.


A medida que você começar a projetar um aplicativo iOS, certifique-se de compreender os padrões da Apple e aprenda a incorporar os princípios de design (HIG) para que você possa oferecer ao usuário uma experiência agradável e única.

Publicada em: Design
  • Seja o primeiro a comentar

Desenhando aplicativos mobile IOS


  1. 1. Desenhandoaplicativosmobile IOSPor: Daniel Mack The Developer’s conference, Julho 2012Tw: @dnmack thedevelopersconference.com.br
  2. 2. Introdução de aplicativos Mobile IOS Os princípios de Design Estratégias ao criar um aplicativo Elementos de UI Cases Referências IOS GUIDELINE
  3. 3. IOS GUIDELINE
  4. 4. IOS GUIDELINE
  5. 5. Web Apps IOS GUIDELINE
  6. 6. IOS GUIDELINE
  7. 7. Native Apps IOS GUIDELINE
  8. 8. IOS GUIDELINE
  9. 9. Por que devo seguir o Guideline? IOS GUIDELINE
  10. 10. Os princípios de Design IOS GUIDELINE
  11. 11. Integridade Estética A forma estética é atrelada com a principal função do app IOS GUIDELINE
  12. 12. Consistência FLIPBOARD PARA IPHONE FLIPBOARD PARA IPAD IOS GUIDELINE
  13. 13. Consistência FACEBOOK PARA IPHONE FACEBOOK PARA IPAD IOS GUIDELINE
  14. 14. ConsistênciaBAND OF THE DAYPARA IPHONE BAND O THE DAY PARA IPAD IOS GUIDELINE
  15. 15. Manipulação direta Use gestos para manipular objetos na tela IOS GUIDELINE
  16. 16. Feedback As pessoas esperam um feedback imediato quando eles operam um controle. Elas também apreciam atualizações de status sob operações curtas e longas IOS GUIDELINE
  17. 17. MetáforaMetáforas em iOS incluem:• Controles de reprodução de músicatocando• Arrastar, tap rápido em objetos de umjogo• Switches de correr on/off• Folhear páginas de fotos• Girar selecionador (fazer escolhas) IOS GUIDELINE
  18. 18. Controle do usuárioOs usuários querem tercontrole de um sistema,caso queiram cancelaralgum tipo deatualização ou umasincronização muitolonga.No caso o que tornamais previsível é o usode controles em que ousuário já estáfamiliarizado com ainterface. IOS GUIDELINE
  19. 19. Estratégias para criar um app IOS GUIDELINE
  20. 20. Otimizar o contexto para plataforma touch IOS GUIDELINE
  21. 21. Funcionar bem em iPhone e iPad IOS GUIDELINE
  22. 22. Promova experiências diferentesnas orientações horizontal e vertical IOS GUIDELINE
  23. 23. Trabalhe nos detalhescertifique-seque os íconesestão em navegaçãoretina display aparência de estado on/off em ações cores em o quetamanho mínimo realmentede fontes (24px) importa (call to action) IOS GUIDELINE
  24. 24. Prototipe e Itere IOS GUIDELINE
  25. 25. RetençãoMeu produto irá reter o usuário? IOS GUIDELINE
  26. 26. Elementos de UI IOS GUIDELINE
  27. 27. Status bar IOS GUIDELINE
  28. 28. Tamanhos e formatos 44x44 px 88x88 px - retina display Tab bar iphone - 960x640 pixels iPad - 2048 x 1536 pixels IOS GUIDELINE
  29. 29. ControlsAction sheet Picker Alert IOS GUIDELINE
  30. 30. Segmented control IOS GUIDELINE
  31. 31. Modal View IOS GUIDELINE
  32. 32. Icon Artwork 512x512 px - 326 dpi 1024x1024px Recomendações da Apple: - Utilizar transparência pode ajudar a reforçar a ideia de vidro ou plástico - Não utilizar elementos do IOS nativo - Crie um ícone que demonstre o que seu app realmente é ao invez de fotos. - Não insira textos com quebra de linhas - Contrate um designer :) IOS GUIDELINE
  33. 33. Cases IOS GUIDELINE
  34. 34. Frisbee Rush IOS GUIDELINE
  35. 35. Ness IOS GUIDELINE
  36. 36. Discovr IOS GUIDELINE
  37. 37. Paper IOS GUIDELINE
  38. 38. Stanford University IOS GUIDELINE
  39. 39. Stanford University IOS GUIDELINE
  40. 40. ResourcesUI / Pattern Bookshttp://mobile-patterns.com/ The Mobile Frontier by Rachael Hinmanhttp://mobiledesignpatterngallery.comhttp://pttrns.com/ Mobile Design Pattern Gallery: UIhttp://iosicongallery.com/ Patterns for Mobile Applicationshttp://www.tappgala.com/ by Theresa NeilIOS Library: http://developer.apple.com/library/ios twitter: @dnmack www.naranjo.com.br IOS GUIDELINE
  41. 41. Thanks :) twitter: @dnmack i.ndigo.com.br/blog portfolio: www.naranjo.com.brimages from: dribbble users, Theresa Neil (mobile design pattern), itunes store. IOS GUIDELINE

×