Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
7 gostaram2,080 visualizações
O documento discute as diretrizes de interface humana da Apple (HIG) e do Material Design do Google, comparando suas abordagens para manter a consistência entre aplicativos em suas respectivas plataformas. As HIG da Apple datam de 1978 e buscam controlar a experiência do usuário através de verificações detalhadas de aplicativos, enquanto o Material Design se inspira no mundo físico e nas propriedades dos materiais. As diretrizes abordam temas como navegação, botões, ícones e boas práticas de design.
Guidelines - Design de apps (Apple iOS e Google Material Design) 2019
- 1. rodrigo@gonzatto.com rodrigo gonzatto gonzatto.com guidelines Material Design & Human Interface Guidelines
- 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?
- 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. • 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. 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/
- 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. • 2014 • Evolução dos "cards" do Google Now • Uso não muitos consiste das Guidelines pela própria empresa Guidelines no Google
- 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
- 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. voltar (variações) o texto de voltar pode ser trocado pelo nome do lugar para onde se está voltando (navegação)
- 14. navigation bar / app bar (action bar) variações e possibilidades navigation bars apps bars (action bars)
- 15. navegação no app navegação do aplicativo: nome (onde estou), voltar, o que mais existe? para onde ir
- 16. título título alinhado à esquerdatítulo centralizado title of the current view
- 17. variações no iOS após scroll e antes do scroll
- 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. menu hamburguer
- 20. navigation drawer tab bottom navigation tab bar problema da bottom navigation no Android: proximidade com a “global navigation bar"
- 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. “toolbar” ações possíveis na ferramentas da navigation bar / app bar (action bar) geralmente contextuais da interface atual
- 23. overflow icon é uma área “outros”, “mais”, “veja mais”… (escondida) existe padrão? algumas variedades
- 24. toolbar ≠ navigation bottom toolbar
- 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. 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. 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. FAB button (variações) no Android ?
- 29. principal ação
- 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. 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
- 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
- 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. o que faz isso ser um botão? uso de caixa alta
- 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. 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. 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
- 41. novo segmented control (iOS)
- 43. tables e lists subheadergrouped section
- 45. list controls (multiple) Multiple Selection: Checkboxes VS. Checkmark with Circle
- 46. list controls (single) Single Selection: Radio Buttons/ Checkmarks VS. Checkmarks
- 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. ícones e grids
- 50. date selector
- 51. export / share icon
- 53. 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
- 54. 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
- 55. 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
- 56. drop lists: action sheets / bottom sheets para apresentar múltiplas ações associadas a uma ação (call to action) cancelar sempre distinto
- 57. 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
- 58. 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
- 60. 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
- 61. 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.
- 63. toggle switches dispara ações binárias (liga/desliga) equivalente ao checkbox (web) equivale ao checkbox
- 64. fontes preferir fontes nativas (SF ou Roboto). usar outras fontes para personalizar e dar identidade
- 65. tendências
- 66. í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.
- 67. • 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:
- 68. 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