Paleta de cores
Para a paleta de cores do Material Design, o Google prefere um sistema de “duas cores” com variantes:
Por exemplo, como nesta foto. Sua cor primária seria roxa, com sua cor secundária ciano. E então, para outros elementos de sua IU, você usaria variações de tonalidade de roxo e ciano, para que tudo se misture.
este Editor de material design é uma ferramenta muito útil que o ajuda a reunir variações de cores. Você também pode buscar inspiração em agências profissionais de design de UI / UX, como Argila , ou esta lista de empresas de web design com melhor classificação em 2019.
Layout de grade responsivo
Compreender o layout da grade responsiva significa entender como densidade de pixels e a adaptação automática da tela funciona. Na maior parte, o DPI médio do telefone Android está entre 300 a 480 DPI.
Com isso em mente, uma tela de 300 DPI normalmente será capaz de exibir até 4 colunas:
Já uma tela com 600 dpi exibirá até 8 colunas.
Entre cada coluna estão as “calhas”, basicamente as áreas que separam cada coluna. Então, em um celular com 360 dp, cada calha teria cerca de 16 dp.
Compreendendo o DPI da tela
Ao projetar a IU, seja a IU do sistema ou a IU do seu aplicativo, você precisa levar em consideração as diferentes densidades de pixel de diferentes tamanhos de telefone. Aqui está um gráfico das resoluções de tela e densidades de pixel mais comuns:
Portanto, como regra geral, ao projetar um tema ou aplicativo “global”, e não se concentrar na criação de temas para um único dispositivo, você deve começar com a densidade mais baixa. Isso ocorre porque se você iniciar seu projeto em 1x, você simplesmente terá que fazer medições em pixels, e os valores permanecerão os mesmos nos DPs.
No entanto, se você projetar para 3,5x, precisará dividir todos os valores por 3,5 para se adaptar a outras densidades, e então se torna uma dor de cabeça calcular vários valores de DP.
Dicas adicionais para design de IU / UX do Android 10
Se você precisa de uma cor personalizada para os componentes do tema, como rádios, botões, caixas de seleção, etc, você deve não use drawables para mostrar os vários estados ( verificado, clicado, etc) . Porque quando você usa drawables, você perde os efeitos nativos do Material Design (como ondulação) que o Google atualizou amplamente no Android 9 e no Android 10.
Ao trabalhar com material design, o Google inclui muitos recursos dos quais você pode tirar proveito e que fluirão mais naturalmente com sua IU / UX.
Então, por exemplo, aqui estão algumas palavras-chave para componentes de temas com elementos de design de material integrados, e seu aplicativo ou UI / UX ainda apreciará o comportamento do sistema nativo e os estados da UI.
Botão com cor personalizada android: backgroundTint = '@ color / red' ----- Botão de opção com cor personalizada android: buttonTint = '@ color / red' ----- Imagens e ícones android: drawableTint = '@ color / red '----- ProgressBar com cor personalizada android: progressTint =' @ color / red '
Para mostrar uma sombra simples abaixo dos componentes, como no modo Cardview, você só precisa usar a propriedade elevation.
android: elevação = '1dp'
Mesclar tags e propriedades pai é extremamente útil, para fornecer a você um melhor controle e arquivos XML gerenciáveis.
Mudanças de layout animadas podem realmente melhorar sua experiência do usuário e quase todos os ViewGroup respeitarão isso. Portanto, sempre que houver uma mudança na hierarquia de visualização, ela virá com uma animação. Com um pouco de know-how, você também pode projetar efeitos de transição personalizados .
android: animateLayoutChanges = 'true'Tag andróide Desenvolvimento 4 minutos lidos
