Adaptive UI – effective pixel – talkitbr
28 de agosto de 2015 28 de agosto de 2015 Alessandra Rosa
Adaptive UI – effective pixel
Recentemente foi lançado o Windows 10 e com ele uma nova plataforma de desenvolvimento que objetiva entregar o mesmo aplicativo para diferentes famílias de dispositivos, sejam eles um smartphone, um tablet, o Microsoft Surface HUB e até o Hololens.
Para que este aplicativo esteja apto a rodar em todos estes dispositivos diferentes, a Microsoft apresentou o conceito de Adaptive UI, que nada mais é que a capacidade de utilização de uma mesma interface para múltiplos tamanhos de telas, desde um smartphone pequeno até grandes telas de televisores rodando Xbox, controlando assim, como a UI se adapta aos inúmeros dispositivos.
Mas isso ai é web responsiva? Na verdade, o Adaptive UI vai um pouco além da web responsiva. Para explicar isso vamos ter uma série de posts sobre o tema, neste post vou começar pelo pixel.
O termo pixel, não mais representa somente a menor unidade de uma tela, isso por que os dispositivos atuais (smartphones, phablets e tablets) mudaram como as telas se relacionam com as imagens. O HTML e CSS podem trabalhar com os chamados pixels virtuais, conseguindo assim, ajustar uma imagem de 900px para 320px, se adequando proporcionalmente e fazendo-a ocupar exatos ¼ da tela do dispositivo, por exemplo. Isso equivale a um zoom out que adapta o conteúdo ao tamanho da tela e a esta funcionalidade chamamos de layout viewport.
Mas como a resolução dos aparelhos influenciam na formação e visualização das imagens?
Resolução é a definição de quantas vezes uma imagem será fragmentada na tela, indicando qual será o tamanho de cada pixel e como ele vai se comportar em uma superfície para compor uma imagem ou ícone. Para chegar no valor da resolução de um device precisamos de 2 informações: o tamanho da tela em polegadas e a sua resolução em pixel, a divisão entre eles é o que resulta no que conhecemos por DPI – Dots Per Inch, essa sim é a medida que usamos para definir o tamanho que vamos desenhar os ícones dos nossos aplicativos. E os dispositivos variam na resolução: dos menores com 320dpi até os maiores com 1024dpi – esta é a resolução de um monitor, por exemplo.
Estes conceitos são comuns tanto para a web responsiva quanto pelo Adaptive UI, mas a versão da Microsoft apresenta uma característica importante: a visualização de uma interface que leva em consideração o dispositivo que está sendo usado e a distância deste para com o usuário que está interagindo com ele, a esta caraterística de maleabilidade do pixel deu-se o nome de Effective Pixel. Deixando para o pixel real o nome de Physical Pixel.
O que é Effective pixel e Physical Pixel?
Physical Pixel ou Pixel Físico é o tamanho real do pixel, independentemente do tamanho do device, uma imagem de tamanho 150px terá o mesmo tamanho em um telefone ou um monitor, ficando pequeno ou gigantesco, de acordo com a resolução do dispositivo.
Legal, mas como isso funciona no meu aplicativo Universal Windows?
Usar o fator auto-resized permite que os elementos de interface, como um ícone por exemplo, fiquem sempre com o mesmo aspecto em qualquer dispositivo, e seja percebido pelo usuário como algo proporcional em uma interface que flui muito bem por todos os tamanhos de telas e dispositivos além de ajustar adequadamente a quantidade de conteúdo no espaço disponível: são os chamados layouts dinâmicos. No código fica assim:
<Image Source="Assets/name.png" Width="24"/>
Já para os tamanhos de imagens existe um fator de escala adequado à cada dispositivo, sendo que os mais comuns são 100%, 200% e 400%. Neste caso, se você tem uma imagem de 24px e ela representa a escala 100%, esta imagem terá 48px em 200% e 96px em 400%. Além disso, para cada imagem deve especificar um sufixo em seu nome indicando a escala:
100% | nomedoasset.scale-100.png
200% | nomedoasset.scale-200.png
400% | nomedoasset.scale-400.png
Para os próximos posts vamos falar um pouco mais sobre Adaptive UI. Se dúvidas surgirem pelo caminho, fiquem à vontade para perguntar e entrar em contato!
layout dinamicos
physyical pixel
Anterior Criando sites que funcionam
Próximo Teste seu site em diferentes versões de browsers
Valdemir de Souza disse:
28 de agosto de 2015 às 16:34
Ao ler entrei em "tela azul", pelo fato de sempre lidar com a adaptação responsiva no sentido do maior para o menor. Agora esses novos conceitos não só envolvendo o tamanho e diretamente o pixel, me deixou muito curioso de entender.
Resumo da experiência: Vou ler novamente!
28 de agosto de 2015 às 16:51
Oi Valdemir, confesso que também fiquei confusa no início, mas a ideia é criar pensando na menor tela e depois ir para nossa zona de conforto que são as telas maiores, exatamente para pensarmos melhor na interação, mas como aconselho no próprio post, crie em vetor exatamente porque teremos que fazer os assets do menor pro maior, qualquer problema de redesign você tem o arquivo para mudar a vontade o tamanho sem perder qualidade!