Desenhando aplicativos mobile IOS
•
13 gostaram•2,908 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Desenhando aplicativos mobile IOS
Semelhante a Desenhando aplicativos mobile IOS (20)
Último
Último (9)
Desenhando aplicativos mobile IOS
- 1. Desenhando aplicativos mobile IOS Por: Daniel Mack The Developer’s conference, Julho 2012 Tw: @dnmack thedevelopersconference.com.br
- 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
- 6. Web Apps IOS GUIDELINE
- 8. Native Apps IOS GUIDELINE
- 10. Por que devo seguir o Guideline? IOS GUIDELINE
- 11. Os princípios de Design IOS GUIDELINE
- 12. Integridade Estética A forma estética é atrelada com a principal função do app IOS GUIDELINE
- 13. Consistência FLIPBOARD PARA IPHONE FLIPBOARD PARA IPAD IOS GUIDELINE
- 14. Consistência FACEBOOK PARA IPHONE FACEBOOK PARA IPAD IOS GUIDELINE
- 15. Consistência BAND OF THE DAY PARA IPHONE BAND O THE DAY PARA IPAD IOS GUIDELINE
- 16. Manipulação direta Use gestos para manipular objetos na tela IOS GUIDELINE
- 17. 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
- 18. Metáfora Metáforas em iOS incluem: • Controles de reprodução de música tocando • Arrastar, tap rápido em objetos de um jogo • Switches de correr on/off • Folhear páginas de fotos • Girar selecionador (fazer escolhas) IOS GUIDELINE
- 19. Controle do usuário Os usuários querem ter controle de um sistema, caso queiram cancelar algum tipo de atualização ou uma sincronização muito longa. No caso o que torna mais previsível é o uso de controles em que o usuário já está familiarizado com a interface. IOS GUIDELINE
- 20. Estratégias para criar um app IOS GUIDELINE
- 21. Otimizar o contexto para plataforma touch IOS GUIDELINE
- 22. Funcionar bem em iPhone e iPad IOS GUIDELINE
- 23. Promova experiências diferentes nas orientações horizontal e vertical IOS GUIDELINE
- 24. Trabalhe nos detalhes certifique-se que os ícones estão em navegação retina display aparência de estado on/off em ações cores em o que tamanho mínimo realmente de fontes (24px) importa (call to action) IOS GUIDELINE
- 25. Prototipe e Itere IOS GUIDELINE
- 26. Retenção Meu produto irá reter o usuário? IOS GUIDELINE
- 27. Elementos de UI IOS GUIDELINE
- 28. Status bar IOS GUIDELINE
- 29. Tamanhos e formatos 44x44 px 88x88 px - retina display Tab bar iphone - 960x640 pixels iPad - 2048 x 1536 pixels IOS GUIDELINE
- 30. Controls Action sheet Picker Alert IOS GUIDELINE
- 31. Segmented control IOS GUIDELINE
- 32. Modal View IOS GUIDELINE
- 33. 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
- 34. Cases IOS GUIDELINE
- 35. Frisbee Rush IOS GUIDELINE
- 36. Ness IOS GUIDELINE
- 37. Discovr IOS GUIDELINE
- 38. Paper IOS GUIDELINE
- 39. Stanford University IOS GUIDELINE
- 40. Stanford University IOS GUIDELINE
- 41. Resources UI / Pattern Books http://mobile-patterns.com/ The Mobile Frontier by Rachael Hinman http://mobiledesignpatterngallery.com http://pttrns.com/ Mobile Design Pattern Gallery: UI http://iosicongallery.com/ Patterns for Mobile Applications http://www.tappgala.com/ by Theresa Neil IOS Library: http://developer.apple.com/library/ios twitter: @dnmack www.naranjo.com.br IOS GUIDELINE
- 42. Thanks :) twitter: @dnmack i.ndigo.com.br/blog portfolio: www.naranjo.com.br images from: dribbble users, Theresa Neil (mobile design pattern), itunes store. IOS GUIDELINE
Notas do Editor
- Apresentação\n\n
- \n\n
- \n\n
- Introdução ao mobile apps.\n- Espaço\n- A partir do momento em que vc já tem sua grande sacada\n- Experiência agradável\n\n
- \n
- \n
- \n
- \n
- \nDiferente em projetar para web, no cenário mobile nós temos diversos ítens para seguir e ter uma experiência agradável intuitiva e atraente. A principal diferença é que no mobile utilizamos Gestures (tap, swipe, pinch, doubletap) e não cliques.\n \n- Displays (3g e retina display) \n- Orientações vertical e horizontal.\n- Multikasting (após o sistema IOS 4)\n- Preferencias de geolocation e push notification podem ser configuradas no sistema do ios\n- A maioria dos aplicativos começaram / ainda fornecem uma UI bem próxima do sistema IOS sabendo que o usuário está mais familiarizado com interface dos devices. (exemplo disso é o próprio tw, face e foursquare).\n\n
- \n\n
- A forma estética é atrelada com a principal função do aplicativo.\nOferece aos usuários uma mensagem clara e unificada sobre sua identidade e sua finalidade\n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n\n
- \n1 ponto é saber em que contexto o usuário esta inserido, e identificando a audiência. No exemplo, temos o NYY onde o conteúdo é a essência do app. Neste caso a interface tem de ser mais familiar possível dos padrões de elementos do IOS.\nhá outros aplicativos, como nativos em que os elementos são simples: Ibooks, Calendar etc.\n\n\n\n\n
- Certifique-se de que irá funcionar bem em iphone e ipad (caso haja as duas versões).\n
- Sound Hound\n
- \n
- itere quantas vezes for necessário. Mesmo que for implementar novos elementos, tenha a arquitetura de informação pronta e trabalhe na evolução e melhoria do aplicativo\n
- Todo aplicativo deve ser tratado como um principal funcionalidade.(mobile payments, games, new contents, education, product/service). Baseado nessa funcionalidade você deve ver qual o principal motivo para reter o usuário. Será que neste caminho é a melhor forma de reter o usuário? Será que nesse ponto as pessoas irão voltar e utilizar meu aplicativo?\n
- \n\n
- é obrigatório o uso da barra de status uma vez em que o usuário está no aplicativo, ele necessita em saber o horário e sinal 3g, as regras para não usar a barra de status é quando o usuário está totalmente voltado para uma atividade em ação. Neste caso os aplicativos de jogos não utilizam a status bar, por serem interfaces não exploratória e sim em uma ação direta.\n
- \n
- Action Sheet - Motrar escolhas para o usuário iniciar uma tarefa partindo de uma ação desejada\n\nPicker - controle nativo - Os elementos podem ser customizados, porém o desenvolvimento é totalmente do zero.\n\n
- \n
- \n
- Dicas\n
- \n\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n\n
- \n\n