Colocação em escala nas telas diferentes

Criando o Windows 8

Nos bastidores com a equipe de engenharia do Windows

Colocação em escala nas telas diferentes

  • Comments 2

Há muitas inovações no mundo dos dispositivos de vídeo, que vão desde densidade de pixels e taxa de proporção até tecnologias básicas. O Windows 8 foi projetado para crescer e melhorar juntamente com o ecossistema de vídeo. Nosso objetivo é dar suporte à grande variedade de tecnologias de vídeo para que os fabricantes de PC possam criar seus produtos, ou para que você possa usar dispositivos de vídeos externos que atendam às suas necessidades da melhor forma possível. Sendo assim, projetamos o WinRT para fornecer uma plataforma compatível com toda esta diversidade. Esta é uma postagem complexa, que examina os detalhes e as nuances existentes no oferecimento de suporte a tantas permutações de resoluções, densidade de pixels e dimensões de tela física. Esse assunto vai muito além de um simples “meu monitor de 27 polegadas”, como você poderá observar nesta postagem de David Washington, um gerente de programas sênior da nossa equipe de experiência do usuário.
--Steven


Um dos principais compromissos da plataforma Windows é dar suporte a diversos fatores forma, permitindo que o Windows funcione em mais de um bilhão de PCs atualmente no mercado. No Windows 8, resolvemos ampliar esta vantagem, oferecendo uma ótima experiência, independentemente do fator forma ou tamanho da tela. Os PCs com Windows 8 virão com uma variedade de formas e tamanhos: telas pequenas de tablets, laptops, grandes monitores de desktop e configurações com vários monitores. Também terão dimensões diferentes em relação à densidade de pixels; indo do tablet mais simples até os novos tablets de alta definição. Os seguintes princípios nos guiaram durante o processo de design:

  1. Oferecer aos clientes várias opções de fatores forma e uma experiência de usuário refinada, consistente e previsível.
  2. Permitir que os desenvolvedores criem facilmente aplicativos que ficam ótimos em todos os fatores forma do ecossistema do Windows.

Com o Windows, você pode escolher o PC que você deseja, com uma tela que atenda às suas necessidades, preferências ou estilo. Por exemplo, um estudante pode comprar um laptop sensível ao toque com uma tela grande para poder escrever os seus trabalhos acadêmicos e também se divertir com jogos ou assistindo a filmes em uma tela sensível ao toque. As famílias podem optar por desktops multifuncionais com uma imensa tela sensível ao toque para exibir e organizar todas as fotos da família. Uma contadora que trabalha longe de casa pode escolher um tablet pequeno, que ela pode facilmente levar na bolsa, para navegar na web ou colocar suas leituras em dias durante suas viagem de ida e vinda de trem. Um arquiteto ou corretor financeiro pode ter três telas em um configuração que mistura orientação retrato com paisagem e, de quebra, uma tela sensível ao toque.

O Windows 8 funcionará em todos esses PCs e proporcionará todas essas experiências e, à medida que as pessoas, em suas rotinas diárias, forem passando pelos diferentes tamanhos de telas, elas continuarão encontrando uma experiência consistente e familiar. Essa grande quantidade de opções de hardware só pode ser encontrada no Windows e é fundamental para a maneira como vemos a evolução do Windows.

No Windows 8, os aplicativos potencializam a experiência do usuário. Então, fornecer uma plataforma de desenvolvimento que torne mais fácil para os desenvolvedores criar uma bela interface do usuário que possa ser vista em todas as telas é imprescindível. Por esse motivo, o Windows 8 foi projetado desde o princípio para ser uma plataforma para criar aplicativos incríveis que funcionem numa variedade de telas.  

Monitores tradicionais de desktop, um laptop, um conversível e um tablet PC

Diversidade de dispositivos

Examinando a gama de dispositivos que executarão o Windows 8, podemos classificar suas telas de várias formas.

  • Tamanho de tela: teremos PCs com diferentes tamanhos de tela, incluindo as telas menores dos tablets, as telas médias dos laptops e as grandes dos computadores desktop e multifuncionais. Essas telas também virão em diferentes formatos e taxas de proporção.
  • Resolução de tela: as telas terão um número crescente de pixels na tela ou resolução de tela. Em geral, quanto maior a tela, maior a resolução de tela. Entretanto, esse nem sempre é o caso.
  • Densidade de pixels: as telas também terão densidades de pixels diferentes, que é o número de pixels em uma área física ou pontos por polegada (DPI). A densidade de pixels aumenta conforme a resolução de tela aumenta, mas o tamanho da tela permanece o mesmo.

O tamanho de tela, resolução e densidade de pixels foram considerados cuidadosamente durante a criação do Windows 8 para usuários e desenvolvedores. Quando falamos sobre telas, é importante deixar claro as variáveis ou dimensões sobre as quais estamos falando. Por exemplo, uma tela de 13 polegadas pode ser executada em qualquer resolução (o que significa qualquer valor de densidade de pixels) e pode ter uma entre várias opções diferentes de taxas de proporção.

Este gráfico mostra um exemplo da diversidade de taxas de proporção e tamanhos de tela widescreens comuns em que o Windows 8 pode ser executado. O Windows dará suporte a praticamente todas as dimensões de tela, desde que a combinação de hardware e o driver de gráficos forneçam as informações corretas ao Windows. Além disso, algumas telas serão dimensionadas para diferentes taxas de proporção por meio de cortes e/ou ampliações. E, embora, haja indicações de slate ou laptop no diagrama abaixo, é preciso ter em mente que há limites "difusos" e eles ficam cada vez mais difusos com o tempo.

10,1" 2560x1440; 11,6" 2560x1440; 10,1" 1920x1080; 11,6" 1920x1080; 10,1" 1366x768; 11,6" 1366x768; 14" 1920x1080; 14" 1366x768; 12" 1280x800; 15,6" 1920x1080; 17" 1920x1080; 23" 1920x1080; 27" 2560x1440.

    

Resolução mínima

Eu vi alguns comentários nos blogs perguntado especificamente sobre a resolução mínima. Por exemplo, em Criando a tela Iniciar, publicado em outubro de 2011, @wolf perguntou:

“Uma ideia melhor seria obrigar todos os desenvolvedores a garantirem que os aplicativo[s] estilo Metro [sejam projetados para] um tamanho de tela mínimo de 800x600. Limitar os aplicativos estilo Metro a somente 1024x768 deixará de fora todos os usuários de netbooks e prejudicará a Loja de Aplicativos do Windows."

Escolhemos uma resolução de tela mínima de 1024x768 para que seja mais fácil para os desenvolvedores criarem aplicativos fantásticos que funcionem em diferentes telas, disponíveis agora e posteriormente. Uma resolução mínima oferece o ponto de partida que os desenvolvedores precisam. Eles podem usar essa informação para garantir que toda a navegação, controles e conteúdo caibam na tela. Enquanto trabalhávamos em layouts de design diferentes para os aplicativos, descobrimos que quanto maior a resolução mínima, melhor e mais personalizado será o aplicativo. Queremos que os desenvolvedores possam personalizar e refinar seus layouts para usar todos os pixels disponíveis em 1024x768, sem comprometer o layout em resoluções menores.

Aplicativo de ações perto de aplicativo ajustado de tempo

O Windows 8 possui uma resolução mínima para permitir que os desenvolvedores criem layouts sofisticados e aproveitem ao máximo o espaço em 1024x768

Por que escolher 1024x768 como um mínimo?

Escolhemos 1024x768 como o mínimo para os aplicativos estilo Metro por 3 motivos.

  • É grande o suficiente para dar suporte aos layouts bonitos e sofisticados que esperamos ver nos aplicativos estilo Metro. As resoluções mais baixas (por exemplo, 800x600) requerem layouts mais básicos com menos conteúdo.
  • Os sites são normalmente projetados com 1024x768 como a resolução mínima (ou a única), e os desenvolvedores de web estão acostumados a usar esta resolução.   
  • Examinando os dados sobre dispositivos no mercado atualmente, observamos que somente 1,2% dos usuários ativos do Windows 7 têm telas com uma resolução de menos de 1024x768. Quando projetamos uma nova plataforma com suporte para os dispositivos de hoje e amanhã (que sem dúvida terão resoluções mais altas), obtemos o melhor para a maioria das telas de hoje (98,8%) sem sacrificar a experiência e complicar a vida dos desenvolvedores em relação às telas herdadas. Além disso, a taxa de execução de novos PCs com tamanhos de tela de 1024x600 e 1280x720 caiu drasticamente e, pelo que a gente sabe, praticamente nenhum dos novos PCs principais estão sendo fabricados com essas resoluções. Estamos cientes da existência de computadores construídos para um fim específico que são executados com resoluções menores, que também são criados para aplicativos de desktop especializados. Embora muitos executem máquinas virtuais, as VMs podem facilmente dar suporte a resoluções de 1024x768, mesmo que, por padrão, usem uma resolução mais baixa.

Gráfico de barras mostrando todos os aplicativos do Windows 8 com suporte para 1366x768, 1280x800, 1600x900, 1920x1080, 1280x1024, 1440x900, 1680x1050, 1024x768, 1360x768, 1920x1200 e 1280x768. Há suporte para os aplicativos de desktop somente em 1024x600 e 1280x720 (que abrangem, cada uma, 1% das telas)

Um mundo sem um mínimo

Algumas pessoas perguntaram por que estamos impondo uma resolução mínima em vez de simplesmente fazer uma recomendação geral de suporte. Exigir um requisito simplifica a vida dos desenvolvedores, já que eles não precisarão levar as resoluções de tela mais baixa em consideração — eles podem simplesmente descartá-las. Se um aplicativo não for projetado levando em consideração as resoluções mais baixas, alguns layouts poderão ser truncados, escondidos ou quebrados de forma imprevisível. Os desenvolvedores não poderiam criar aplicativos com a certeza de que eles ficariam bons em todos os dispositivos com o suporte do Windows 8. Se o requisito não fosse obrigatório, alguns desenvolvedores poderiam criar e testar com base nestas resoluções mais baixas, e outros não, gerando um ecossistema onde os desenvolvedores voltam-se a dispositivos específicos em vez da plataforma como um todo. Além disso, os desenvolvedores podem focar no denominador mais incomum e escolher a resolução mais baixa possível, o que seria prejudicial à experiência de usuário e à qualidade dos aplicativos.

O aplicativo do jogo 5inarow, exibido com uma barra vermelha na parte de baixo da tela do 5th para indicar onde a tela seria cortada em 1024x600.

O layout deste jogo seria cortado embaixo se a execução em 1024x600 fosse permitida

Resolução mínima e o ajuste

A resolução que dá suporte a todos os recursos do Windows 8, incluindo multitarefas com ajuste, é 1366x768. Escolhemos esta resolução porque ela tem pixels horizontais o bastante para colocar 320px de largura de um aplicativo ajustado, ao lado de um aplicativo principal de 1024px de largura. As especificações do tablet da Samsung que anunciamos na conferência //build/ são 11,6 polegadas com uma resolução de 1366x768 (o tablet Samsung Series 7 já disponível no mercado). Essas especificações correspondem à resolução de tela mínima que dá suporte a todos os recursos do Windows 8 em um tamanho físico útil.Aplicativo ajustado com 320px de largura, aplicativo principal com 1024px de largura e 768px de altura

        

A exibição ajustada é sempre definida com 320px de largura, permitindo que os desenvolvedores aprimorem e criem as exibições com este tamanho de exibição em mente. Uma largura de 320px é um tamanho comum e familiar que os desenvolvedores já estão usando em seus designs para várias plataformas de telefone.

Algumas pessoas perguntaram por que não permitimos que a exibição ajustada tenha tamanhos aleatórios ou por que não oferecemos vários tamanhos de multitarefas diferentes. O suporte a tamanhos aleatórios para esse layout pequeno aumentaria significativamente a complexidade de criação de um aplicativo e exigiria dos desenvolvedores um trabalho maior e mais complicado.

Embora a largura de um aplicativo ajustado permaneça fixa, o espaço vertical aumenta para ajustar-se à tela, de modo que você não precise usar muito a barra de rolagem em telas maiores. A palestra da //build/ Oito características de ótimos aplicativos estilo Metro oferece bons exemplos de layout ajustado. Discutiremos mais sobre ajustes e multitarefas em uma futura postagem.

Abaixo há vários exemplos com o layout de aplicativo ajustado à esquerda e o layout de aplicativo principal à direita.

3 aplicativos diferentes exibidos com o layout principal ao lado do layout de aplicativo ajustado

Existe uma resolução máxima?

Você deve estar se perguntando por que não existe uma resolução máxima. Com resoluções maiores, há mais espaço. Assim, o layout nunca quebra ou fica truncado em telas de resolução mais alta. Você pode executar aplicativos estilo Metro em telas grandes como as de 30 polegadas com uma resolução de 2560x1600! Mas, embora os aplicativos não sejam cortados quando há mais espaço, os desenvolvedores devem ter algumas considerações em mente sobre essas telas de resolução mais alta, usando o espaço de forma que os seus aplicativos fiquem com um belo visual.

Telas de tamanho maiores

Em telas maiores, como em monitores de desktop, as pessoas normalmente esperam que caiba mais conteúdo nas telas. Conforme o tamanho das telas aumentam, aumenta o número de pixels da telas. O diagrama abaixo demonstra como, quando o tamanho da tela e o número de pixels aumentam, o número de objetos do mesmo tamanho na tela também aumenta. Na pequena tela abaixo podemos colocar cerca de 40 quadrados laranjas, e na tela maior podemos colocar 84 quadrados do mesmo tamanho.

11,6" 1366x768 comparada com 17" 1920x1080, mostrando muitas caixas na tela

  As telas maiores geralmente têm mais pixels e podem mostrar mais conteúdo 

Mas não é só porque mais conteúdo pode ser colocado na tela que todos os aplicativos usarão este espaço. Se um aplicativo for projetado com dimensões fixas ou com apenas um fator forma em mente, talvez os monitores maiores exibam uma grande região vazia, como mostrado abaixo. Assim, a experiência não é boa, como muitos já comentaram.

Sem considerar a resolução da sua tela grande, a maioria dos sites atuais não está preparado para telas grandes e costumam deixar muito espaço sobrando (a maioria dos usuários prefere ampliar o texto usando a tecla CTRL e a rolagem do mouse ou os atalhos de teclado CTRL+, CTRL -, CTRL 0). O mesmo acontece na Web para dispositivos móveis, quando os sites são muito grandes para caber na exibição do celular. Cada vez mais desenvolvedores da Web estão adaptando seu conteúdo para os diferentes fatores forma, utilizando uma combinação de detectores de fatores forma e o uso de aplicativos.

Aplicativo de notícias exibido no canto superior esquerdo da tela com espaços vazios embaixo e à direita.

Sem considerar os tamanhos de tela diferentes, muitos aplicativos ficam com grandes regiões vazias quando exibidos em telas maiores

A plataforma do Windows 8 deixa a criação de aplicativos que se ajustam a diferentes tamanhos de tela mais fácil para os desenvolvedores fornecendo controles e técnicas de layout interno. Os aplicativos do Windows 8 preenchem o espaço disponível introduzindo mais conteúdo quando possível. Um desenvolvedor pode criar facilmente o mesmo aplicativo para mostrar mais conteúdo quando o tamanho da tela mudar de um tablet para um laptop com tela grande ou chegar até um monitor de desktop. Por exemplo, o aplicativo de notícias pode mostrar mais artigos em telas maiores. É preciso também lembrar de que a plataforma subjacente e as ferramentas foram desenvolvidas para oferecer suporte à programação assíncrona, que também permite "preencher" as grandes exibições e torná-las tão rápidas e fluídas quanto as exibições menores. Não há motivo para bloquear o usuário enquanto grandes quantidades de conteúdo são introduzidas.

Aplicativo de notícias na tela de 11,6" 1366x768 possui 10 artigos, na tela de 13" 1400x1050 possui 15 artigos e na tela de 20" 1920x1080 possui 21 artigos

Criando aplicativos para telas maiores

O Windows 8 foi projetado para funcionar de maneira consistente e previsível em telas de diferentes tamanhos e formas em tablets, laptops e monitores de desktop. Quando um usuário altera o tamanho da tela, é importante que os sistema e os aplicativos aproveitem ao máximo o espaço disponível na tela para oferecer a melhor experiência imersiva.

Aplicativo de exemplo mostrado em três telas de tamanhos diferentes

Com layouts adaptáveis como este aplicativo de exemplo criado para o Developer Preview
na //build/, os usuários podem ver mais conteúdo em telas maiores

O Windows 8 ajuda os desenvolvedores de aplicativos a adaptarem seus aplicativos para essa variedade por meio do suporte na plataforma de aplicativos a layouts adaptáveis baseados em padrões. Criar um layout de aplicativo que pareça maravilhoso em telas diferentes é um desafio antigo na Web. Em vez de criar um novo conjunto de controle de layouts de propriedade particular, o Windows 8 oferece suporte interno a técnicas conhecidas de layout adaptável usando XAML e ao conjunto de recursos CSS3 aprovados pelo W3C, que foram projetados justamente para facilitar esse processo para os desenvolvedores da Web.

Em HTML, os layouts com grade, caixa flexível e várias colunas do CSS3 ajudam os desenvolvedores a usar o espaço na tela com mais eficiência em vários dispositivos e resoluções.

O layout de grade do CSS3 permite que os desenvolvedores especifiquem as linhas e colunas de seus layouts; é semelhante ao uso de uma tabela HTML, mas fornece muito mais controle e flexibilidade. A grade também é ótima para definir um layout adaptável de nível superior, parecido com os que você na interface do usuário do Windows 8 (como a tela Iniciar e o seletor de arquivos). Você define as linhas e colunas e depois coloca o seu conteúdo nas células da grade. É fácil definir quais células devem se adaptar e fluir novamente na tela.

Grade de quatro caixas, com pares de números: 1,1; 1,2; 1,2; 2,2

O layout de caixa flexível do CSS3 permite que os desenvolvedores distribuam as margens e espaços em branco de forma uniforme e previsível. É ótimo para fazer o layout de componentes individuais e coleções como barras de ferramentas e coleções de imagens.

Finalmente, o layout de várias colunas do CSS3 pode ser usado para organizar o conteúdo em várias colunas na página, parecido com o layout de um jornal ou revista. Todos os modelos fornecidos com o Visual Studio 11, por padrão, usam essas construções de layout e aproveitam o ListView e outros controles para dar suporte a diferentes tamanhos de tela. Os desenvolvedores podem usar as mesmas técnicas e controles de layout baseados em padrões que os ajudam a acomodar diferentes tamanhos de tela para ajudá-los a adaptar o layout a diferentes orientações e exibições ajustadas. Todas as construções de layouts disponíveis em HTML também estão disponíveis para desenvolvedores de XAML.

Alguns aplicativos, principalmente os de jogos e interfaces de usuário renderizadas como jogos, não querem aproveitar o espaço a mais com as resoluções de telas mais altas. Para esses aplicativos, nós fornecemos uma forma muito fácil de dimensionar o aplicativo que foi projetado em 1366x768 para que ele se ajuste a qualquer tela. Se a taxa de proporção não corresponde ao conteúdo, o sistema também fornece regiões com formato letterbox temático. Embora isso não seja o ideal para todas as interfaces de usuário, já que pode fazer com que os itens pareçam muito grandes em monitores de desktop, funciona muito bem para muitos jogos e interfaces de usuário com estilo de jogo que são compostas em sua maioria por gráficos bitmap. Esta solução também permite que aplicativos permaneçam imersivos em uma variedade de telas, sem dar muito trabalho para os desenvolvedores.

        

O jogo aparece maior em telas maiores

Com layouts fixos como o do jogo 5inarow, usuários veem o jogo num formato maior em telas grandes

Achamos importante que os desenvolvedores possam escolher qual técnica de layout (adaptável ou dimensionadas para caber) faz mais sentido para eles, dependendo do conteúdo e fluxo de trabalho. Se todos os aplicativos fossem adaptáveis, seria difícil criar interfaces de usuário renderizadas com o estilo de jogos que pudessem preencher uma tela de 23” 1920x1080 sem deixar grandes margens vazias. Por outro lado, se todos os aplicativos fossem dimensionados para caber na tela, os usuários não poderiam mais ver mensagens de email em suas telas de 23” 1920x1080. Acreditamos que a nossa solução seja a melhor nesse caso, oferecendo aos desenvolvedores a opção e as ferramentas para otimizar seus aplicativos em diferentes telas com base nos cenários que forem mais importantes para eles.

Você pode estar se perguntando por que não permitimos o redimensionamento aleatório dos aplicativos e não paramos logo de nos preocupar com isso? É uma boa pergunta dado o histórico de redimensionamento das janelas do Windows. Na verdade, a primeira versão do Windows usava o Windows "lado a lado" e foi só a partir do Windows 2.0 que se permitiu que as janelas se sobrepusessem. Focamos nos layouts de tela cheia personalizados para os aplicativos estilo Metro por todos os motivos que você acabou de ler, além do desejo de proporcionar experiências confiáveis em várias resoluções.

Isso pode até parecer contra-intuitivo dada nossa experiência diária no Windows. Mas, à medida que examinávamos vários aplicativos e o aumento contínuo dos tamanhos das telas disponíveis a todos, ficou claro que os desenvolvedores não estão mais otimizando para atender à grande diversidade de telas disponíveis. Embora a maioria dos produtos de software listem os requisitos mínimos, na prática, vemos muitos erros: interfaces do usuário cortadas, mal posicionadas ou renderização inadequada quando as janelas são redimensionadas ou maximizadas. Também vemos ativos (ícones e elementos de interface do usuário) que não são dimensionados corretamente para várias densidades de pixels. Até mesmo nos designs da faixa de opções do Office 2007, houve muito empenho para colocar a faixa de opções em escala, como você pode ver nesta série de capturas de tela.

quatro tamanhos da parte "Organizar": Grande, Médio, Pequeno, Pop-up, Pop-up Expandido

Imagem de Maior escala, menor escala em Jensen Harris: um blog sobre a interface do usuário do Office (em inglês)

Infelizmente, a maioria dos aplicativos não aproveita os controles que já estão disponíveis (como a faixa de opções do Windows) para dimensionar com êxito. Consequentemente, os usuários finais precisam aprender como aumentar e diminuir uma janela. E os desenvolvedores tem que lidar com bugs e inconsistências em resoluções que talvez não tenham sido testadas, já que eles não estão preparados para todas as resoluções, taxas de proporção e densidades de pixels. À medida que os desenvolvedores criam seus próprios layouts, controles e metáforas de interface do usuário, eles também criam suposições sobre a resoluções de tela e a densidade de pixels que seus códigos requerem, mas raramente eles exigem esses requisitos (mesmo hoje, as folhas de propriedade do Windows são cortadas abaixo de 600 pixels como visto nos primeiros netbooks ou em VMs).

Em geral, embora muitos leitores deste blog acreditem que possam facilmente gerenciar e organizar os tamanhos aleatórios das janelas, os dados mostram sistematicamente duas coisas. Primeiro, em laptops (mais de 75% dos PCs comprados pelos consumidores) a maioria dos aplicativos são executados maximizados o tempo todo. Isso faz sentido se levarmos em conta o espaço disponível e os pontos de design da maioria das interfaces e sites. Segundo, em exibições de tela grandes, a maioria das janelas tem a escala ajustada em um número razoável de dimensões brutas , principalmente, porque a maioria dos programas não dá suporte à colocação em escala "infinita".

Veremos novas abordagens na interface do usuário e novas formas de organizar os comandos. O Windows 8 contém uma biblioteca muito rica de controles e mais ferramentas flexíveis e idiomas para a codificação de layouts de interface do usuário do que qualquer versão anterior. E, é claro, a área de trabalho do Windows ainda está lá (e foi aprimorada). Nela, você pode continuar a trabalhar com as funcionalidades que você já conhece nos aplicativos que você usa atualmente.

Diferentes densidades de pixels

A densidade de pixels é um novo conceito para muitas pessoas, mas está intimamente ligada a esta discussão sobre o tamanho e a resolução de tela. Basicamente, a densidade de pixels é o número de pixels na área física. Definida normalmente como pontos por polegada ou DPI. Conforme a densidade de pixels aumenta, diminui o tamanho físico dos pixels fixos. Alguns de vocês podem ter percebido como o texto pode ficar bem pequeno em laptops com resoluções muito altas. Historicamente, muitos estão familiarizados com as configurações de "fontes grandes" ou "fazer o texto maior" dos desktops que compensa esses casos. O Windows 8 leva isso a um novo patamar de suporte para os aplicativos do WinRT.

Tela de 135 DPI possui 4 linhas de quadrados maiores

Tela de 190 DPI possui 6 linhas de quadrados menores

Em telas de densidade de pixels mais alta, sem colocação em escala, os tamanhos físico são menores.

A maior parte das pessoas está acostumada a densidades de pixels bem baixas em laptops e monitores de desktop. Por exemplo, um laptop comum com uma tela de 13” e uma resolução de 1280x800, tem 116 DPI. Por causa do ecossistema ativo que traz exibições diferentes para o mercado, estamos vendo avanços incríveis nas densidades de pixels das telas no mercado. Muitos tablets PCs com o Windows 8 terão densidades de pixels de pelo menos 135 DPI, bem maior do que muitos de nós estão acostumados a ver. Naturalmente, vimos a introdução de tablets HD com Full HD, resolução de 1920x1080 em uma tela de 11,6” e densidade de pixels de 190 DPI ou tablets quad-XGA com resolução de 2560x1440 em uma tela de 11.6” e uma densidade de pixels de 253 DPI. As densidades de pixels podem aumentar ainda mais em taxas de proporções mais baixas e telas menores, como visto no novo iPad. Conforme a densidade de pixels aumenta, o tamanho físico dos objetos na tela fica menor. Se o Windows não tivesse sido criado para acomodar diferentes densidades de pixels, os objetos seriam muito pequenos, o que tornaria difícil tocar nos itens ou ler nestes tablets.

Dedo focalizando um botão em 1366x768 e depois em 1920x1080. Em uma resolução mais alta, a área de toque é muito pequena para ser tocada com eficiência

Sem a colocação em escala, os objetos seriam muito pequenos, o que tornaria difícil tocar em telas com densidades de pixels altas, como no tablet HD à direita.

Queremos garantir, para as pessoas que compram estas telas de densidade de pixels mais alta, que os aplicativos, textos e imagens fiquem bonitos e sejam utilizáveis nestes dispositivos. A princípio, exploramos a colocação de densidade de pixels em escala contínua, que manteria o tamanho de um objeto em polegadas, mas descobrimos que a maioria dos aplicativos usa imagens de bitmap, que poderiam parecer embaçadas quando ampliássemos ou reduzíssemos a escala em um tamanho imprevisível. Em vez disso, o Windows 8 usa porcentagens de escala previsíveis para garantir que o Windows tenha uma aparência ótima nesses dispositivos. Existem três porcentagens de escala no Windows 8:

  • 100% quando nenhuma colocação de escala for aplicada
  • 140% para tablets HD
  • 180% para tablets quad-XGA

Um close-up no texto na tela de densidade mais alta é mais nítido do que na tela de densidade baixa, enquanto o tamanho das áreas de toque é constante.

Com a colocação em escala do Windows 8, os tamanhos físicos são mantidos nos dispositivos com densidade de pixels alta, e o texto e o conteúdo na tela ficam mais nítidos.

As porcentagens são otimizadas para dispositivos reais do ecossistema. 140% e 180% podem parecer escolhas estranhas de porcentagem de escala, mas elas fazem sentido se pensarmos em como isso funcionará em um hardware real.

Por exemplo, o ajuste de escala de 140% está otimizado para tablets HD de 1920x1080, que possui 140% de uma resolução de tablet de linha de base de 1366x768. Esses fatores de ajuste de escala mantêm os layouts consistentes entre o tablet de linha de base e o tablet HD, já que a resolução efetiva é a mesma nos dois dispositivos. Cada porcentagem de escala foi escolhida para garantir que um layout projetado para 100% em tablets 1366x768 mantenha o seu conteúdo com o mesmo tamanho físico e layout a 140% em tablets HD ou a 180% em tablets quad-XGA.

O gráfico mostra 3 pontos ideias para 1366x768, 1920x1080 e 2560x1440

As porcentagens de escala no Windows foram projetadas para manter as áreas de toque e
layouts, enquanto otimizam para os próximos lançamentos de tablets do mercado.

Alguns podem estar curiosos sobre a nova tela do iPad. Para essa tela, a Apple escolheu um fator de escala de 200%. A nova tela tem o dobro da densidade de pixels (132 PPI a 264 PPI)* no mesmo tamanho de tela. Como o iOS e os desenvolvedores só precisam dar suporte às resoluções predefinidas, eles precisam apenas projetar para este fator de escala adicional. No caso do iPad 2 em comparação com o novo iPad, o fator de escala de 200% significa que o que você vê em uma resolução de 1024x768 é a mesma coisa que você vê na nova resolução, mas é mais nítido porque mais pixels são usados (como na imagem do aplicativo acima). Além disso, em telas de densidade de pixels mais alta como a do novo iPad, os desenvolvedores de jogos e outros aplicativos de alto desempenho precisam encontrar o equilíbrio adequado entre o formato letterbox e a execução de fidelidade inferior para oferecer a melhor experiência (por exemplo, a taxa de quadros).

A colocação em escala é invisível para o usuário. O Windows a implementa automaticamente com base nas dimensões da tela, sem nenhuma intervenção do usuário, administrador de TI ou fornecedor OEM. Os desenvolvedores só precisam garantir que as imagens fiquem ótimas em todas as porcentagens de escala. Como essas porcentagens de escala são previsíveis, os desenvolvedores que fornecem imagens para cada uma das porcentagens evitam desfoques ou artefatos devido a ampliações de imagens.

A densidade de pixels oferece outra variável, na qual os paradigmas existentes das barras de ferramentas e menus estão dando muito trabalho. Os "Hacks" como fontes grandes ou utilizar um macete para que o sistema use um DPI diferente são simplesmente isso — hacks. Como qualquer um que já tenha usado uma tela de DPI alto pode atestar, os aplicativos existente e os paradigmas da interface do usuário simplesmente não funcionam e tornam-se inúteis. Um exemplo comum é quando um botão qualquer da barra de tarefas torna-se um quadrado muito pequenininho e o menu e o texto ficam tão pequenos que mal dá para ler ou navegar. É claro que as preferências pessoais também contam, e poder ajustar o sistema ajuda, mas essas não são formas seguras de garantir que o Windows possa ser usado na nova geração de hardware.

O Windows 8 foi projetado para oferecer aos desenvolvedores a forma mais fácil de criar com segurança software que funcione na mais ampla variedade de hardware e para fornecer aos consumidores a melhor experiência possível, consistente e sofisticada, ao usarem esse software. É importante não classificar isso isoladamente como "chega de redimensionar janelas", mas ver essa nova abordagem como parte de todo um esforço maior para oferecer mais opções de tamanho de tela, resolução e densidade, permitindo que os desenvolvedores saibam que seus aplicativos funcionarão e os consumidores tenham certeza de que os aplicativos serão compatíveis com seu hardware. Fazemos isso para que você não tenha que escolher entre ter um software que não seja totalmente funcional ou ter poucas opções de tamanho de tela (e preços, consumo de energia etc.).

Criando aplicativos para densidades de pixels mais altas

O Windows 8 também simplifica o desenvolvimento de aplicativos que funcionem em diferentes densidades de pixels. Em primeiro lugar, não é necessário nenhum trabalho manual para colocar o aplicativo em escala. Ao contrário de versões anteriores, você não precisará fazer nada para que seus aplicativos reconheçam DPI. Existem estruturas prontas para dimensionar o aplicativo para você. Basta usar as unidades de pixel CSS padrão da Web ou um layout XAML que os layouts de aplicativos serão colocados em escalas proporcionais. Quando a escala de um aplicativo aumenta, as imagens são ampliadas e podem ficar embaçadas, mas com o Windows 8 é mais fácil para os desenvolvedores manter estas imagens nítidas e lindas.

Bitmap ampliada está embaçada, enquanto a bitmap a 180% é nítida

   

No Windows 8, a plataforma originalmente dá suporte aos gráficos vetoriais. Qualquer imagem exportada como SVG (Elementos Gráficos Vetoriais Escaláveis) ou arte XAML serão escaladas sem embaçar. Além disso, o Windows 8 apresenta o carregamento de recursos automáticos. Dessa forma, os desenvolvedores podem salvar três versões de imagens com uma convenção de nomenclatura; imagens que correspondem a cada uma das porcentagens de escala atuais (100%, 140% e 180%) são carregadas automaticamente para manter as imagens nítidas em DIP alto. Os desenvolvedores também podem usar a consulta de mídia de resolução CSS3 ou eventos de sistema para recarregar as imagens em diferentes escalas. A colocação da densidade de pixels em escala no Windows 8 permite que os desenvolvedores alcancem uma qualidade de nível de linha de base sem fazer muito esforço e depois personalizem as imagens mantendo uma aparência refinada e nítida em telas de densidade de pixels alta. Bitmap está nítida a 100%, 140%, e 180%

Testando aplicativos em telas diferentes

Embora com o Windows seja mais fácil criar belos aplicativos que funcionem bem em várias telas, ainda é importante testar os aplicativos nesses tamanhos de tela diferentes. Sabemos que a maioria das pessoas não tem tudo quanto é dispositivo à sua disposição. Então, criamos suporte para testar aplicativos em telas diferentes com as ferramentas. O Visual Studio 11 oferece o Windows Simulator, que permite que os desenvolvedores executem seus aplicativos em uma variedade de tamanhos de tela, orientações e densidades de pixels. A troca para uma tamanho de tela diferente é tão fácil quanto escolher uma opção de menu.

A tela Iniciar do Windows 8 no simulador, com controles à direita para testar resoluções diferentes

O Windows Simulator permite que você realize testes em diferentes telas

O Microsoft Expression Blend 5 oferece um menu de plataforma que permite que você desenvolva um aplicativo para tamanhos de tela e densidades de pixels diferentes. Os canvas do Blend podem ser atualizados automaticamente, dependendo das dimensões de vídeo que você escolher no menu da plataforma.

As opções de menu incluem diferentes resoluções de tela, mostrar cromado, substituir colocação em escala, implantar destino, exibições e vídeo

O Microsoft Expression Blend 5 inclui opções para criar designs para telas diferentes

Resumindo

Há muito planejamento, troca de ideias e desenvolvimento envolvidos em todo o processo para garantir que o Windows 8 coloque em escala várias telas e fatores forma diferentes. Para os usuários, o Windows 8 oferece uma experiência previsível e consistente em todos os dispositivos. Em telas maiores, eles podem ver mais conteúdo em cada aplicativo. Em telas de densidade de pixels mais alta, eles têm uma experiência nítida e especial: é fácil ler e interagir usando a tela sensível ao toque ou o teclado e o mouse. Para os desenvolvedores, o Windows 8 facilita o suporte a diferentes tamanhos de tela e densidades de pixels usando técnicas de layout padrão conhecidas e colocando a densidade de pixels em escala automaticamente. E, ao mesmo tempo, permite que os desenvolvedores personalizem seus produtos para que as experiências sejam incríveis em cada um dos fatores forma.

Esperamos que você experimente o Windows 8 em telas diferentes!

Obrigado,
David

 

*Erro de digitação no número do segundo PPI foi corrigido em 22/03/2012. Pedimos desculpas pelo erro.