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

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

1. 

[email protected]
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?

3. Apple
iOS
Human Interface 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/

7. Google
Android
Material Design

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 feedbackhttps://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. estudos
comparativos

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

32. e
a
f
g e a f g e
a
f
ge a f g

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. comparações:
diferenças sutis

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

40. segmented
control / tabs
(variações)

41. novo segmented control (iOS)

42. tables e lists
tables
cells
grouped
lists
rows
divider

43. tables e lists
subheadergrouped section

44. comportamento: scrolling

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

52. boas práticas
para padronizar

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