O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Guidelines - Design de apps (Apple iOS e Google Material Design) 2019

1.084 visualizações

Publicada em

Comparação entre guidelines para o design de aplicativos em iOS e em Material Design. Junho/2019

Publicada em: Tecnologia
  • Login to see the comments

Guidelines - Design de apps (Apple iOS e Google Material Design) 2019

  1. 1. 
 rodrigo@gonzatto.com rodrigo gonzatto gonzatto.com guidelines Material Design & Human Interface Guidelines
  2. 2. • Linhas-guia, Diretrizes < Design Systems, Design Language • Porquê? https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759 • Definir uma aparência comum para os aplicativos? • Definir base para uma boa UX 
 (Interação, Usabilidade e Arq. de Info, etc) • Mantém consistência: ajuda no aprendizado • Manual/site que oferece informação comum de referência: não precisa recriar tudo do 0
 Metro UI, Microsoft Human Interface Guidelines,Apple Material Design, Google Porquê Guidelines?
  3. 3. Apple iOS Human Interface Guidelines
  4. 4. • Marca • Controle: experiência consistente entre plataformas • Verificação de apps detalhada • Segurança e Privacidade • Limitação e vantagem: 
 limitação na variedade de dispositivos iOS, iPhone, Apple
  5. 5. • Human Interface Guidelines (HIG)
 https://modelessdesign.com/backdrop/204 • 1978:1st Draft 
 https://www.apple.asimov.net/images/non-english/french/ apple_forumdesdeveloppeurs/ apple_forumdesdeveloppeurs_02_interface.pdf • 1987: Human Interface Guidelines • 1995: Macintosh 
 Human Interface Guidelines
 http://interface.free.fr/Archives/Apple_HIGuidelines.pdf Guidelines na Apple
  6. 6. Human Interface Guidelines • Clarity: legibilidade de texto, ícones, composição, etc • Deference: conteúdo primeiro, ocupando toda a tela. Motion ajuda pessoas a entenderem e interagirem com conteúdo. mínimos detalhes • Depth: camadas visuais distintas dão sensação de hierarquia e compreensão, transições oferecem profundidade https://developer.apple.com/ios/human-interface-guidelines/ 6 princípios: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
  7. 7. Google Android Material Design
  8. 8. • Abertura • Adaptação • Verificação de apps mais rápida • Mercado maior • Limitação e vantagem: 
 atende a uma diversidade de dispositivos Android, Google
  9. 9. • 2014 • Evolução dos "cards" do Google Now • Uso não muitos consiste das Guidelines pela própria empresa Guidelines no Google
  10. 10. Material Design • Material como metáfora: inspiração no mundo (3D): física e propriedades dos objetos, luz e sombras, 
 camadas de papeis/cartões sobrepostas • Hierarquia: tipografia, grid, espaço, escala, color e imagem • Motion produz significado: foca atenção,
 mantém continuidade, oferece feedback https://material.io/design/ https://material.io/archive/guidelines/material-design/introduction.html#introduction-goals https://www.youtube.com/watch?v=Q8TXgCzxEnw https://www.youtube.com/watch?v=rrT6v5sOwJg
  11. 11. estudos comparativos
  12. 12. home button e voltar  3 botões: voltar, home e overview  voltar com botão universal disponível botão de home vai para
 tela principal voltar com swipe 
 e na interface navegação no sistema operacional
  13. 13. voltar (variações) o texto de voltar pode ser 
 trocado pelo nome do lugar 
 para onde se está voltando (navegação)
  14. 14. navigation bar / app bar (action bar) variações e possibilidades navigation bars apps bars (action bars)
  15. 15. navegação no app navegação do aplicativo: nome (onde estou), voltar, o que mais existe? para onde ir
  16. 16. título título alinhado à esquerdatítulo centralizado title of the current view
  17. 17. variações no iOS após scroll e antes do scroll
  18. 18. navegação no app drawer menu no topo (menu hamburguer) drop-down para uma lista no lado da tela longe do dedo discreto. mas como saber 
 o que está ali dentro? tab bar em baixo bottom navigation mais perto do dedo. ocupa espaço, mas deixa itens visíveis itens: não mais que 5. não menos que 2. no caso de 2, considerar segmented (iOS) ou tabs (Android)
  19. 19. menu hamburguer
  20. 20. navigation drawer tab bottom navigation tab bar problema da bottom navigation no Android: proximidade com a “global navigation bar"
  21. 21. duas navigations próximas (Android), e diferentes (global, contextual) a diferença se faz pelo contraste - preto e branco - que diminui opções de personalização https://material.io/design/components/bottom-navigation.html# tab bar / bottom navigation
  22. 22. “toolbar” ações possíveis na ferramentas da navigation bar / app bar (action bar) geralmente contextuais da interface atual
  23. 23. overflow icon é uma área “outros”, “mais”, “veja mais”… (escondida) existe padrão? algumas variedades
  24. 24. toolbar ≠ navigation bottom toolbar
  25. 25. overflow icon no caso de mais de 3 ações, o overflow icon pode aparecer
 nele ficam as ações menos importantes e menos usadas porém, se você precisa ter mais do que 3 ações… além de com voltar e título da tela ….repense a estrutura
  26. 26. principal ação / ação primária FAB button próximo da base perto do dedo consistente (sempre no mesmo lugar) ‘’call to action’’ 
 no canto superior direito longe do dedo consistente (sempre no mesmo lugar) destaque para a principal ação (mais usada) de uma tela
  27. 27. ação principal / ação primária center of tab bars CTA buttons próximo da base, perto do dedo possibilidade de confundir tools com navigation destaque para a principal ação (mais usada) de uma tela
  28. 28. FAB button (variações) no Android ?
  29. 29. principal ação
  30. 30. uso do swipe para ações contextuais https://material.io/design/interaction/gestures.html#properties right (trailing) side padrão de deletar left (leading) side ação não destrutiva: like, salvar (table) swipe actions / leave-behinds bottom
  31. 31. tipografia Roboto (Android) https://material.io/design/typography/the-type-system.html San Francisco (iOS) https://developer.apple.com/fonts/ sistema de fonte próprio
  32. 32. e a f g e a f g e a f g e a f g
  33. 33. SF PRO Display fonte para títulos (vem no mac, mas não vem para uso, tem que baixar) SF PRO Texto fonte para textos subtítulos, blocos de texto, elementos secundários, etc trecho da palestra da Apple sobre a fonte San Francisco https://developer.apple.com/videos/play/wwdc2015/804/ 11:29 porque mudar da Fonte Display para a fonte Text
  34. 34. comparações: diferenças sutis
  35. 35. botões Android: com profundidade e texto em caixa alta iOS: flat design sem sombras e texto com inicial maiúscula cuidar com uso de sombras em cards
  36. 36. o que faz isso ser um botão? uso de caixa alta
  37. 37. drop lists: action sheets / bottom sheets Android: a camada mostra as opções em lista, com ícones e cores, e usa sombra iOS: a camada inteira é um pouco transparente, sem sombra. botão de cancelar bem demarcado modais: próximos do dedo.
  38. 38. quando bottom sheets (em baixo) possuem a mesma importância que 
 o conteúdo principal (em cima), para ter ambas as informações visíveis persistent bottom
  39. 39. segmented control / tabs Android: tabs próprios nomes. lembra menu iOS: segmented control parecem botões. remete a switch para transitar entre views localizadas em uma mesma tela
  40. 40. segmented control / tabs (variações)
  41. 41. novo segmented control (iOS)
  42. 42. tables e lists tables cells grouped lists rows divider
  43. 43. tables e lists subheadergrouped section
  44. 44. comportamento: scrolling
  45. 45. list controls (multiple) Multiple Selection: Checkboxes VS. Checkmark with Circle
  46. 46. list controls (single) Single Selection: Radio Buttons/ Checkmarks VS. Checkmarks
  47. 47. gripper / reorder remete ao “grip” de segurar algo 3 linhas (não tem menu hamburguer para confundir) pode lembrar um menu hamburguer por isso 4 linhas
  48. 48. ícones e grids
  49. 49. date selector
  50. 50. export / share icon
  51. 51. boas práticas para padronizar
  52. 52. ações: botão ou texto? botão em botão: ação preferencial, recomendada. 
 deixa explícito a ação possível botão em texto: ação possível, mas secundária. 
 pode confundir com o conteúdo
  53. 53. campos vazios / empty states primeira impressão do usuário. usar ilustrações, descrições breves e ''call to action'' para conduzir para a ação possível/desejada
  54. 54. carets (>) discoverability: como usuário consegue descobrir opções do app? use carets to indicate that the user should tap into the row to view more create visual cues and conversational content design to indicate tap targets to view more
  55. 55. drop lists: action sheets / bottom sheets para apresentar múltiplas ações 
 associadas a uma ação (call to action) cancelar sempre distinto
  56. 56. drop lists: 
 action sheets / bottom sheets não usar para: permissões, alertas críticos (ações destrutivas)
 ou qualquer coisa que bloqueie o sistema
  57. 57. caixas de diálogo: alertas 3 principais usos:
 1) Alertas: interrompe o que a pessoa está fazendo para informar da situação
 2) Menus: opçõa para mudar configurações 
 3) Confirmation: como um poka-yoke, 
 para confirmar a ação escolhida e previnir erros iOS: conteúdo pode ser omitido, título não Android: título pode ser omitido, conteúdo não
  58. 58. caixas de diálogo: alertas use as caixas de diálogos nativas do sistema para alertas críticos, alertas de permissão, etc. Tudo que for alerta, que se relacionar a ações destrutivas, sem volta. Se não for este o caso, use action sheets. botões claramente demarcados consistentes
  59. 59. tiles ou cards container retangular com conjunto de informações e ações: action card ou info card. iOS mais flat. Android segue Material Design, com mais sombras.
  60. 60. toggle switches dispara ações binárias (liga/desliga)
 equivalente ao checkbox (web) equivale ao checkbox
  61. 61. fontes preferir fontes nativas (SF ou Roboto). 
 usar outras fontes para personalizar e dar identidade
  62. 62. tendências
  63. 63. ícones e grids Youtube’s structure evolution: The important features, My subscriptions, History and Playlist are put into a drawer -> 
 App structure is reorganized, drawer is removed and main features are moved into tabs -> Trending is added into tabs. Google Photos’s structure evolution: Main features are put into drawer -> Main features are moved into button navigation -> Search floating action button, which may interrupt browsing photos, is transformed into a search bar.
  64. 64. • https://www.ready4s.com/blog/android-vs-ios-comparing-ui-design • https://medium.com/blueprint-by-intuit/native-mobile-app-design-overall- principles-and-common-patterns-26edee8ced10 • https://www.freecodecamp.org/news/stop-the-overuse-of-overflow- menus-5caa4b54e843/ • https://androidworld.nl/apps/nos-teletekst-menuknop/ • https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui- components-patterns-part-1-ad33c2418b45 Estes slides são baseado nestas referências. Consulte:
  65. 65. diferenças Android x iOS https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca https://medium.com/@vedantha/interaction-design-patterns-ios-vs-android-111055f8a9b7 https://lunapps.com/blog/android-vs-ios-uiux-differences/ https://dyna.mo/blog/a-beginners-introduction-to-the-differences-in-ios-and-android-design/ desenhar para ambos https://webdesign.tutsplus.com/pt/articles/a-tale-of-two-platforms-designing-for-both- android-and-ios--cms-23616 detalhes forms https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400 design language systems https://uxplanet.org/design-language-system-d438f4aa30e0 design app https://medium.muz.li/the-design-guide-to-ios-and-android-app-icons-c1a73d3f278f tipografia iOS https://uxdesign.cc/how-to-make-the-typography-of-your-ios-app-not-suck-a6de09fb7c41 livros: form design patterns, designing UX: forms, web form design, e livro: bureaucracy ui patterns design notes: https://www.designnotes.co/ comparação de 4 técnicas de avaliação de interfaces http://citeseerx.ist.psu.edu/viewdoc/download? doi=10.1.1.330.1188&rep=rep1&type=pdf human guidelines cards https://hig.kde.org/components/editing/card.html tendencias UX https://uxplanet.org/review-of-ui-design-trends-we-start-2019-with-68f128151215 https://uxplanet.org/2019-ui-and-ux-design-trends-92dfa8323225 Outros

×