Material design - Teoria e prtica

download Material design - Teoria e prtica

of 34

  • date post

    06-Jul-2015
  • Category

    Software

  • view

    193
  • download

    4

Embed Size (px)

description

Apresentação feita no Meetup do GDG Poa de Novembro sobre material desing

Transcript of Material design - Teoria e prtica

  • 1. Material Design:Teoria e prticaEduardo Costa@eduardoscosta

2. Sobre...Talvez j tenha sido colega de vocs...Com isso, provavelmente tive contato com um pouco de cadatecnologia e linguagem que se trabalha por ai...Instrutor de cursos de iOS, Android e Windows Phone...Organizer do GDG POA 3. Material Design? 4. Desenvolvimento de um sistema nico que possibilita experincias similares nas diversasplataformas e dispositivos. 5. Conceitos 6. Aceleradoras einvestidoresSuperfcies tangveisAnimaesExperinciamultiplataformaPrint like design 7. SuperfciesTangveis 8. Eixo ZO ambiente do Material 3D, logo todosobjetos tem dimenses x, y, e zCada folha tem espessura de 1dpA tela pode ser vista como um conjunto defolhas de papel 9. Folhas criam sombra nas folhas abaixoEvitar muitas superfcies, entre 2 e 10 orecomendadoElementos de uma lista, ao serem tocados,podem sofrer uma animao de elevao 10. Exemplo de animaoElevao no click 11. Luz e sombraNo ambiente Material temos luzes virtuaisque iluminam o ambiente, permitindo assimque objetos tenham sombrasA sombra composta em conjunto com onovo eixo ZPermite criar um ambiente de sobreposiode superficiesDar diferentes importncias para cadasuperfcie 12. CardsCards so um agregador que estendeFrameLayout e representam um conjunto deinformaes.Os Cards da support lib j trazem elevao,sombra e cantos arredondadosUso exagerado de cards ruim, eles devem sercolocados onde o contedo exija maior nmerode aes, informaes, etcPara contedo com menos informaes, comfoco em imagens ou muito homogneas temos asListas e Grids 13. Print like Design 14. TipografiaFoi criada uma Escala tipogrfica, onde vocpode verificar qual melhor estilo para suaTitulo, Sub Titulo, contedo, etcandroid:textAppearance= @style/TextAppearance.AppCompat.Title 15. KeylinesO uso de espao em branco para criarestruturas incentivado, assim como autilizao de cores vibrantes e de grandecontraste (primary e accent) 16. CoresIdealmente a cor primria e a de destaque(accent) devem possuir grande contraste,possibilitando maior destaque para oselementos chave da UI como FAB, abaselecionada e campos de formulrio 17. Material theme 18. Material theme @android:style/Theme.Material (dark version)@android:style/Theme.Material.Light (light version)@android:style/Theme.Material.Light.DarkActionBar 19. PaletasPermite extrair cores das imagensPalette.generateAsync(bitmap,new Palette.PaletteAsyncListener() {@Overridepublic void onGenerated(Palette palette) {Palette.Swatch vibrant =palette.getVibrantSwatch();if (swatch != null) {// If we have a vibrant color// update the title TextViewtitleView.setBackgroundColor(vibrant.getRgb());titleView.setTextColor(vibrant.getTitleTextColor());}}}); 20. ImagensImagens, icones e fotos no deveriam tersombra, nem elevao em relao asuperfcieImagens devem ser imersivas, de prefernciaocupando de ponta a ponta 21. Animaes 22. O que fazer?Elementos nunca aparecem e desaparecem,todos agem em harmonia com animaesque fazem sentido para o usurio.Ajudam a dar maior noo do que estacontecendo para o usurio.No fazer animao sem uma razo. 23. Transition Animationna origem:ActivityOptionsCompat options =ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),view.findViewById(R.id.icon),Constantes.EXTRA_IMAGE);ActivityCompat.startActivity(getActivity(), intent,options.toBundle());no destino:ViewCompat.setTransitionName(icon, Constantes.EXTRA_IMAGE); 24. E mais...RipplePodem ser usadas em mudana de estado decones (um + virando um x)AnimatedStateListDrawableAnimaes no deveriam durar mais do que300 ms 25. Multiplataforma 26. ExperinciaTorna a aplicao mais simples de serutilizada independente da plataforma,usurio consegue aplicar seu conhecimentode usabilidade em qualquer dispositivo.A experincia do usurio deve serconsistente entre todas as Telas (phone,tablet, laptop, TV, relogio, carros... 27. Na prtica... 28. Sai ActionBar, entraToolBarActionBar- dificil de manipular- no faz parte da hierarquia de viewsToolBar- fcil de usar- emula todo comportamento da actionbarantiga- uma view dentro da hierarquia que podeser manipulada e estilizada como qualquerViewGroup 29. ToolBar ... 30. ToolBar import android.support.v7.widget.Toolbar;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.my_layout);Toolbar toolbar = (Toolbar)findViewById(R.id.my_awesome_toolbar);setSupportActionBar(toolbar);} 31. Navigation Drawer 32. Navigation DrawerTela toda! 33. Referncias Guideline Oficialhttp://www.google.com/design/spec/material-design/introduction.htmlAndroid Developers Guidehttps://developer.android.com/training/material/index.htmlAndroid Checklisthttp://android-developers.blogspot.com.br/2014/10/material-design-on-android-checklist.htmlChris Banes - appCompat v21https://chris.banes.me/2014/10/17/appcompat-v21/ 34. Obrigado!Eduardo Costaeducosta@gmail.com@eduardoscostacraftbox.com.br