Desenhando aplicativos mobile IOS


3.253 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
0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.253
No SlideShare
0
A partir de incorporações
0
Número de incorporações
35
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 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
  • 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

    ×