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.

Um Effective Pixel ou Pixel Efetivo é a evolução do pixel, criado para se adaptar ao tamanho do device para o qual será utilizado. Ele é pensado em porcentagem, assim, um ícone criado com 100px para um telefone de 320dpi terá 100% do seu tamanho no dispositivo para qual for projetado (pensando em projetar do menor para o maior). E quando você levar este ícone para um tablet, este mesmo ícone terá 150% do seu tamanho. E da mesma forma, em uma TV ele terá 200% e assim por diante até o limite de 400%

Legal, mas como isso funciona no meu aplicativo Universal Windows?

Tudo que você precisa pensar quando for aplicar os ícones usando effective pixel é:

1. Utilizar elementos de auto-resized e painéis de layout dinâmicos do XAML, que automaticamente aplica o fator de escala denominado pelo device.
2. Definir a imagem em diferentes tamanhos de pixel para que possam ser usados pelos diferentes dispositivos.

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

Como resultado teremos um aplicativo com imagens que se pareçam do mesmo tamanho nos diferentes dispositivos, levando em consideração a distância de uso, e a isto chamamos Adaptive UI.

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!

Até o próximo!