[Dúvida] Os componentes para responsividade é igual para o Mobille, muda os tamanhos também?

Oii! Tudo bem contigo?

Bem, os componentes são projetados para serem adaptáveis, o que significa que você pode ajustá-los para diferentes tamanhos de tela. No entanto, isso não acontece automaticamente. Você precisa configurar os componentes para que se adaptem conforme necessário. Isso geralmente envolve ajustar as configurações de redimensionamento e ancoragem para cada componente dentro do seu design.

Por exemplo, se você tem um campo de busca que precisa funcionar tanto em desktop quanto em mobile, você pode definir o componente para que ele se estique horizontalmente preenchendo o espaço disponível, mas mantenha uma altura constante. Isso é feito ajustando as opções de redimensionamento do componente para 'Esticar horizontalmente' e fixando a altura. Aqui compartilho contigo um guia da própria Adobe.

Lembre-se de testar o comportamento dos componentes em diferentes tamanhos de tela usando o modo de visualização e ajustando a largura da tela de visualização para ver como os componentes respondem, okay?

Espero ter te auxiliado e caso tenha dúvidas ou perguntas estou aqui.

Até mais!

Sim entendo, mas a questão é a altura também muda? Pois a tela mobile é menor que a de desktop então seria obrigatório os componentes terem também uma altura menor, não somente a largura é modificada nesse caso é isso mesmo? Outro ponto é que eu vi que não tem um material especifico que mostre como seriam as dimensões para desktop ou existe alguma diretriz para ajudar com isso? Porque o Material design e outros é mais para mobile.

Oi! Como está?

Em muitos casos, a altura dos componentes também precisa ser ajustada para acomodar diferentes tamanhos de tela, especialmente quando você está desenhando para mobile. A ideia é que os componentes não só ocupem o espaço horizontal de forma eficiente, mas também não tornem a interface muito carregada ou difícil de interagir em telas menores.

Quanto às diretrizes de dimensões para desktop, muitos sistemas de design como o Material Design focam mais realmente em mobile. No entanto, você ainda pode usar esses mesmos princípios e adaptá-los para desktop. Uma boa prática é começar com as diretrizes para mobile e então ajustar para telas maiores mantendo a consistência do design. Além disso, é útil observar as recomendações de tamanhos mínimos de toque e distância entre elementos, que podem ser aplicadas em ambas as plataformas para melhorar a usabilidade.

Para desktops, você também pode considerar as diretrizes de UI/UX que falam sobre "áreas de conforto" para interações, o que pode ajudar na definição de tamanhos e espaçamentos adequados.

Gostaria de te indicar alguns recursos úteis que podem te ajudar a entender melhor as práticas de design responsivo e as diretrizes para diferentes tamanhos de tela, incluindo desktop:

• Material Design Guidelines: Embora seja mais conhecido por suas diretrizes para mobile, o Material Design também oferece insights sobre adaptabilidade e responsividade que podem ser aplicados em desktop. Pode explorar a seção sobre layouts adaptáveis para entender melhor como ajustar elementos de UI para diferentes tamanhos de tela.

• Smashing Magazine: Um recurso excelente para designers de todos os níveis. Eles têm uma série de artigos detalhados sobre design responsivo e práticas de UI/UX, muitos dos quais incluem diretrizes específicas para desktop.

• A List Apart: Este site oferece uma profundidade incrível em seus artigos, abordando tópicos como design responsivo e acessibilidade.

• Web Design Ledger: Um ótimo recurso para encontrar dicas práticas e tutoriais sobre como projetar para diferentes dispositivos, incluindo desktops.

Espero que isso ajude a esclarecer suas dúvidas! Se precisar de mais auxílio ou quiser discutir mais sobre o assunto, só me chamar.

Até mais!