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.

distancia de uso de cada dispositivo

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%

tamanhos dos ícones

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.visualização por device

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!

Anúncios

3 comentários

  1. 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!

    Curtir

    • 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!

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s