SlideShare a Scribd company logo
1 of 30
Download to read offline
Desenvolvendo APPs para
múltiplas resoluções
Alessandra Rosa
Palestrante
Alessandra Peguim Rosa
alessandra.rosa@eldorado.org.br
@ux_rosa
Identidade Visual e Design da
Microsoft
Identidade Visual e Design da Microsoft
• Mantenha simples
• Pense universal
• Projete para um
• Faça pessoal
• Crie encantamento
Como o Windows torna o
design fácil
A jornada de Convergência
Xbox 360
Xbox One
Windows 8
Windows Phone 8
Windows Phone 7.5
Windows 8.1
Windows
Phone 8.1
Windows on Devices
Converged
OS kernel
Converged
App model
Unified core
And app plataform
Easy to users to
Get & stay current
Fácil de projetar em toda gama de devices
• API unificada
• Converged Commons Controls
• Construção com base nos métodos de input
• Effective pixel scaling
• Breaking points
O quê eu estou projetando?
Fontes XAML style key
SEGOE UI
Segoe UI Light 56epx para cabeçalhos HeaderTextBlockStyle
SEGOE UI
Segoe UI Semi-light 24epx para títulos TitleTextBlockStyle
SEGOE UI
Segoe UI regular 15epx para corpo BodyTextBlockStyle
Icones
Nós queremos que você use SEUS projetos:
SUAS Fontes, Ícones, Design, etc...
Mas se você não tem um, ou precisa de inspiração, nós
compartilhamos nossas inspirações e pesquisas com você
O número mágico 4
Algoritmo de escala
Effective Pixel
Desenvolvendo APPs para múltiplas resoluções
Considerações do dispositivo
• Tamanho das telas
• Compatibilidade de hardware
• Conectividade
• Inputs primários
• Pessoal vs Compartilhados
• Ambiente
• Duração de uso
Técnicas de UI Adaptativa
Planejando seu design
• Adapte o input
• Construa com effective pixel
• Leve em consideração o algoritmo de escalonamento
Planejando seu design | separe em famílias
Phone
Viewing Distance: 16.3”
Tablets and 2 in 1
Viewing Distance:
20”
Small and Large Laptops
Viewing Distance:
24.5”
Small and Large Desktop Monitors
Viewing Distance:
28”
TV
Viewing Distance:
84”
Planejando seu design | Breaking Points
phablet &
tablet
desktopphone
720 1024320epx
Planejando seu design | 6Rs
1. Reposition
Reposicione os elementos na tela
2. Resize
Redimensione ítens na tela
3. Reflow
Refaça os fluxos se necessário
4. Reveral
Revele | Mostre
5. Replace
Redesenhe - Substitua
6. Re-architect
Reorganize a arquitetura
Planejando seu design | Reposition
Planejando seu design | Resize
Planejando seu design | Reflow
Planejando seu design | Reveral
Planejando seu design | Replace
Planejando seu design | Re-architect
Adaptive UI
Tailored | Customize o design
• Construa experiências únicas em diferentes dispositivos
Para saber mais
www.talkitbr.com

More Related Content

Similar to Desenvolvendo APPs para múltiplas resoluções

HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1Jose Berardo
 
Construindo aplicações ricas com Silverlight
Construindo aplicações ricas com SilverlightConstruindo aplicações ricas com Silverlight
Construindo aplicações ricas com SilverlightFelipe Pocchini
 
Windows Phone 7 & Windows Azure
Windows Phone 7 & Windows AzureWindows Phone 7 & Windows Azure
Windows Phone 7 & Windows AzureVinicius Quaiato
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 
Introdução ao silverlight
Introdução ao silverlightIntrodução ao silverlight
Introdução ao silverlightFelipe Pocchini
 
Microsoft .Net
Microsoft .NetMicrosoft .Net
Microsoft .Netjaumnc
 
Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricioFabricioManzi
 
Milton Onodera - Prototipação para Windows Phone usando o Expression Blend
Milton Onodera - Prototipação para Windows Phone usando o Expression BlendMilton Onodera - Prototipação para Windows Phone usando o Expression Blend
Milton Onodera - Prototipação para Windows Phone usando o Expression BlendINdT
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
 
Apresentação de Lançamento do RAD Studio XE7
Apresentação de Lançamento do RAD Studio XE7Apresentação de Lançamento do RAD Studio XE7
Apresentação de Lançamento do RAD Studio XE7Fernando Rizzato
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009FabricioManzi
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoLeonardo Braga
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013André Borgonovo
 

Similar to Desenvolvendo APPs para múltiplas resoluções (20)

HTML5 Mobile Aula 1
HTML5 Mobile Aula 1HTML5 Mobile Aula 1
HTML5 Mobile Aula 1
 
Construindo aplicações ricas com Silverlight
Construindo aplicações ricas com SilverlightConstruindo aplicações ricas com Silverlight
Construindo aplicações ricas com Silverlight
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
RealSense SDK
RealSense SDKRealSense SDK
RealSense SDK
 
Engenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - IntroEngenharia de Software Aula 1 - Intro
Engenharia de Software Aula 1 - Intro
 
Windows Phone 7 & Windows Azure
Windows Phone 7 & Windows AzureWindows Phone 7 & Windows Azure
Windows Phone 7 & Windows Azure
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Introdução ao silverlight
Introdução ao silverlightIntrodução ao silverlight
Introdução ao silverlight
 
Microsoft .Net
Microsoft .NetMicrosoft .Net
Microsoft .Net
 
Adobe flash platform fabricio
Adobe flash platform fabricioAdobe flash platform fabricio
Adobe flash platform fabricio
 
Milton Onodera - Prototipação para Windows Phone usando o Expression Blend
Milton Onodera - Prototipação para Windows Phone usando o Expression BlendMilton Onodera - Prototipação para Windows Phone usando o Expression Blend
Milton Onodera - Prototipação para Windows Phone usando o Expression Blend
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Apresentação de Lançamento do RAD Studio XE7
Apresentação de Lançamento do RAD Studio XE7Apresentação de Lançamento do RAD Studio XE7
Apresentação de Lançamento do RAD Studio XE7
 
InfraGUIBuilder
InfraGUIBuilderInfraGUIBuilder
InfraGUIBuilder
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Adobe flash platform bem 2009
 Adobe flash platform bem 2009 Adobe flash platform bem 2009
Adobe flash platform bem 2009
 
Domain driven design - Visão Geral
Domain driven design - Visão GeralDomain driven design - Visão Geral
Domain driven design - Visão Geral
 
Windows Universal Apps
Windows Universal AppsWindows Universal Apps
Windows Universal Apps
 
RIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à InovaçãoRIA e Flex - Dando formas à Inovação
RIA e Flex - Dando formas à Inovação
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013
 

More from Alessandra Rosa

Design Thinking para Transformação Digital
Design Thinking para Transformação DigitalDesign Thinking para Transformação Digital
Design Thinking para Transformação DigitalAlessandra Rosa
 
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Alessandra Rosa
 
Projetos Centrados no Usuário
Projetos Centrados no UsuárioProjetos Centrados no Usuário
Projetos Centrados no UsuárioAlessandra Rosa
 
Beacons em um Hospital de Clínicas | Design Thinking
Beacons em um Hospital de Clínicas | Design ThinkingBeacons em um Hospital de Clínicas | Design Thinking
Beacons em um Hospital de Clínicas | Design ThinkingAlessandra Rosa
 

More from Alessandra Rosa (6)

Design Thinking para Transformação Digital
Design Thinking para Transformação DigitalDesign Thinking para Transformação Digital
Design Thinking para Transformação Digital
 
Wiad17
Wiad17Wiad17
Wiad17
 
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...
 
Projetos Centrados no Usuário
Projetos Centrados no UsuárioProjetos Centrados no Usuário
Projetos Centrados no Usuário
 
Beacons em um Hospital de Clínicas | Design Thinking
Beacons em um Hospital de Clínicas | Design ThinkingBeacons em um Hospital de Clínicas | Design Thinking
Beacons em um Hospital de Clínicas | Design Thinking
 
Design thinking
Design thinkingDesign thinking
Design thinking
 

Desenvolvendo APPs para múltiplas resoluções

Editor's Notes

  1. Os princípios da Microsoft vem do Windows 8, passou pelo 8.1 e não mudou nada para o Windows 10 – é consistente para você não se confunda e não confunda seu usuário. Manter-se simples é deixar tão fácil de usuário que ele não precise de uma curva de aprendizado para usar seu aplicativo, ele precisa pegar na mão e sair usando, intuitivo, fácil e que simplesmente funcione, que dê a sensação de que o aplicativo foi feito para aquele dispositivo. Pensar universal é pensar em todos o usuário como centro do seu aplicativo a partir daí você analisar, meu usuário usa smartphone, preciso fazer meu aplpicativo para ele, meu usuário usa desktop? Preciso fazer uma versão para desktop, mas qual ele usa mais? Ah preciso melhorar a experiência para o dispositivo mais atuante na vida do usuário a partir daí o encamento vai ser facilmente encontrado – ao projetar colocando o usuário como centro do seu projeto você está fazendo simples, pessoal, projetando para um e pensando na gama de dispositivos que o usuário trabalha – o encatamento é consequência de um trabalho bem feito focado no usuário.
  2. Uma informação importante aqui, quando falo de Breaking point em Adaptive UI não estou falando de Breaking Point de Depuração, por coincidência em interfaces quando um tamanho de tem uma medida maxima ou minima que faz a transição para outro tamanho de dispositivo chamamos de breaking points também. Para nós designers é a transição de uma tela de smartphone para uma tela de tablet, do tablet para o monitor ou tv e assim por diante.
  3. Você não tem que usar a fonte Segoe UI para tudo. Você pode usar outras fontes para determinados cenários, tais como a leitura, ou quando o texto de exibição em idiomas diferentes do inglês. Aqui está a lista de fontes que são garantidos para estar disponível em todas as edições do Windows 10 que suportam aplicativos UWP.
  4. O Windows 8 usava da fonte Segoe UI Symbol para ícones, na versão 10 ela foi substituída pela Segoe MDL2 Assets mais eficaz. Mas que pode ser utilizada da mesma maneira que a versão anterior, porém a versão nova está com os estilos e as métricas definidas pelo Windows 10, então os ícones estão alinhados dentro de uma fonte quadrada em vez de uma base tipográfica isso significa que elas não serão sempre do mesmo tamanho e se encaixará direitinho dentro do espaço destinado para os ícones melhorando visualmente o alinhamento e espaçamento entre elas. Mas eu vou perder o meu app com os ícones que fiz usando a Segoe UI symbol? Não! Ela ainda estará disponível como recurso legado, mas é interessante que você mude para o novo padrão: Segoe MDL2 Assets pelo recursos disponibilizados para ele, vale a pena!
  5. A Microsoft já foi rígida quando a layout, navegação e interação das aplicações, no passado chegou a não aprovar aplicações de serem publicadas na loja por não seguir a risca a guideline do Sistema Operacional. Agora no Wind. 10 ela disponibiliza conjuntos de controles, faz recomendações MAS é você que vai escolher e o que melhor se encaixa na sua identidade visual, no aplicativo que está projetando e o que gostaria de usar para melhorar a experiência do usuário. Um exemplo de layout é o menu hamburguer, inserido
  6. Primeira regra importante do projeto UWP é que seus tamanhos, margens, espaçamento devem ser limpas todos divisível por quatro. A razão para isso é que a microsoft adotou um tamanho de pixel efetivo comum em todos os nossos dispositivos. Você vai criar layouts usando effective pixel, que é independente da resolução de ecrã físico. No entanto, como seu aplicativo é executado em muitas telas diferentes em muitos diferentes resoluções de tela físicas, o sistema de exibição escalas sua UI para cima ou para baixo, conforme necessário. Ao fazer todas as suas dimensões forma limpa divisível por quatro, você vai acabar com mais nítidas layout e texto e evitar a imprecisão, pois não corre o risco do pixel ser aumentado e sua imagem criar o que chamamos de pixel fantasma – isso faz com a imagem fique meio borrada e passe a sensação de que está com baixa qualidade, não foi feito para aquele dispositivo e fique mal feito.
  7. O sistema de pixel efetiva leva em conta uma série de fatores que permitem dispor suas páginas sem precisar ajustar para o tipo de dispositivo ou a resolução da tela física. Um fator que determina o quão grande o sistema irá processar um item em uma tela especial é o algoritmo de escalonamento. Isso leva em conta a distância típica de uma classe de dispositivo de visualização - um telefone é normalmente realizada perto dos olhos, enquanto PCs / há uma distância um pouco maior enquanto o Surface HUB é normalmente visto em uma sala. O algoritmo de escalonamento assegura que quando você dimensionar alguma característica UI usando pixels efetivos, terá o mesmo tamanho perceptível independentemente se qual dispositivo ele é exibido em cima.
  8. 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% Tudo que você precisa pensar quando for aplicar os ícones usando effective pixel é: Utilizar elementos de auto-resized e painéis de layout dinâmicos do XAML, que automaticamente aplica o fator de escala denominado pelo device. 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. 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.
  9. Entenda o dispositivo para o qual você vai projetar, pense no método de input, se for para um telefone, entenda sobre ele, pegue na mão, use com um única mão (de preferencia a esquerda, assim você entende a dificuldade de deficientes motores, tbém) entenda que usar dispositivos pessoais na rua não é tão fácil quanto parece – talvez seja por isso que vemos as pessoas com telefone na mão andando na rua tão distraídos! Coloque-se na pele dos usuários entenda o tempo de uso adequado para cada tipo de dispotivo – por mais que parecemos “viciados” nos nossos smartphones não conseguimos ficar tanto tempo nele mexendo numa única aplicação e nem preciso falar sobre conectividade no Brasil – por mais que em nossa volta achamos que todos tem planos 3G com conexões e podem o tempo todo acessar suas informações – essa não é a realidade de todo o Brasil. As vezes a conexão não é boa, não pega ou simplesmente eles são como eu que não tem planos de dados e dependem de wifi! SIM, existem pessoas que dependem de WIFI!!!!!!!! E isso estou falando só de telefone – precisamos analisar a fundo cada dispositivo – Desktop, tablet, hub e XBOX – qual o cenário de uso, tamanho das telas tipo de conectividade é pessoal, é compartilhado??? A minha dica aqui é – pense bem quais dispositivos seu aplicativo vai fazer sentido, para você fazer o melhor que pode em aplicativos que sabe que será bem aproveitado pelo usuário, senão vc gasta tempo e esforço para um app que nunca será usado enquanto poderia estar fazendo melhor para um dispositivo realmente necessário analisando dispositivo e uso do aplicativo no dispositivo.
  10. Quando você pensa da ampla gama de tamanhos de tela disponíveis em todos os dispositivos do Windows 10, de 4.5“ telefones até o 84" Surface Hub, pode parecer assustador para criar uma interface adaptável que vai funcionar bem em todos estes. Nosso conselho é alvo de alguns cenários principais: 5“ no telefone retrato 8“ tablet em retrato e paisagem 13“ laptop / PC na paisagem Se você se concentrar sobre esses alvos-chave, e usar técnicas de layout adaptativas, tais como layout e controles de grade que pode envolver e fluxo de saída, como o TextBlock com envolvimento definido como verdadeiro, então você deve achar que você vai acabar com bons resultados em todas as dispositivos visados e também sobre os intermediários. Você pode então alvo telas adicionais, tais como monitores grandes, Surface Hub ou Xbox se faz sentido para o seu app.
  11. Como você pensa sobre o que mostrar em telas diferentes, muitas vezes você vai decidir mostrar mais conteúdo em telas maiores, onde a tela é grande Um grande exemplo é o aplicativo Mail. Em uma exibição de mesa, este adota um layout de três colunas, com um painel de navegação à esquerda, listando para o seu direito e, em seguida, talvez algo como um painel de visualização no lado direito da tela À medida que caminhamos para baixo a uma phablet ou tablet, o layout encolhe a um projeto de duas colunas. Aqui, o painel de navegação não no layout principal é, mas tem sido escondido e é acessível por um botão "Hamburger". A listagem mail e painel de visualização permanece embora.
  12. Não deve ser nenhuma surpresa que as técnicas que você deve usar para páginas XAML são exatamente os mesmos que os utilizados por web designers para criar páginas web adaptativos. O que temos feito com o Windows 10 é trazer técnicas de interface do usuário web adaptáveis ​​para aplicações XAML nativas. Reposicionar - É possível mover blocos de conteúdo em torno da página. Por exemplo, na paisagem, você pode ter ilhas de conteúdo que se estende através da página na horizontal, mas em um layout de tela estreita, mover o conteúdo de modo que ela é definida mais como uma única coluna. Redimensionar - Você pode simplesmente permitir que o conteúdo na página para aumentar e diminuir como as mudanças de tamanho da janela. Usando uma grade com tamanhos de coluna / linha proporcionais é uma ótima maneira de conseguir isso. Refluxo - Isto significa que têm de texto, por exemplo, mudar de um única coluna em uma tela estreita para abranger duas ou mais colunas de telas mais amplas. Revelar - aqui você vai mostrar áreas de conteúdo adicionais, como a largura da tela aumenta, escondê-los como a largura da tela diminui. Substituir - Com esta técnica você substituir um esquema de algum conteúdo com um layout diferente, dependendo do tamanho da tela, para garantir um layout grande, tela apropriada em todos os tamanhos de tela Re-arquiteto - Quando você re-arquiteto, você vai para um layout substancialmente diferente em telas de tamanho diferente, ou em diferentes famílias de dispositivos. Em termos de XAML, isso geralmente significa para navegar até uma página específica para algum cenário, como quando executado em um Xbox, onde as interações do usuário por meio de um controlador pode ser substancialmente diferente para o mesmo aplicativo em execução em um PC ou telefone.
  13. Reposition – Altere as localizações e posicionamento de elementos de interfaces para tirar melhor proveito do tamanho das telas de cada dispositivo, neste caso é importante que a diagramação dos elementos dê boa leitura e passe fluidez para o usuário e respeite as interações naturais e NUI (Natural User Interface) próprias de cada device;
  14. Resize – Redimensione o conteúdo ao tamanho da página, caso seja necessário diagrame a página para que passe a sensação de que o conteúdo foi feito para aquele tamanho de tela, no exemplo de simulação de texto, note que o conteúdo expandiu em uma tela maior, foi pensado para dar uma boa experiência de leitura
  15. Reflow – Pense no tamanho do device e como as pessoas usam suas telas, caso seu aplicativo tenha uma versão landscape e portrait é importante que o conteúdo se ajuste a posição em que o dispositivo esteja, adicione colunas, aumente imagens e repense as interações para que o usuário possa usar o aparelho como mais gosta, e assim se sentir satisfeito com o seu aplicativo
  16. Reveral – sempre que seu conteúdo não couber na tela em que o usuário está, seja ele por ser muito pequeno ou por escolha de UI deve-se indicar ou revelar ao usuário sobre o conteúdo “escondido”, assim como funcionalidades adicionais, situações específicas ou orientações de telas, uma funcionalidade muito utilizada em telefones e phablets Windows são os cortes estratégicos das imagens que indicam swipe de conteúdo.
  17. Repleace – uma transição da interface que permite alternar a interface de um dispositivo: na classe, no tamanho e orientações específicas. Note na imagem de exemplo que um item de menu em um smartphone fica dentro do menu hamburger enquanto em um tablet ou desktop estes itens de menu ficam na barra de navegação acima do conteúdo da aplicação.
  18. Re-architect – é importante lembrar que cada dispositivo além das especificidades dos tamanhos das telas, também tem fluxos de navegação e interações próprias, considere redesenhar seu aplicativo para que adapte bem o conteúdo ao device em que o usuário está naquele momento.
  19. Em muitos casos, você vai usar a mesma tela, mas adaptá-lo usando Unidos Visuais e - um novo recurso do UWP XAML - Adaptive Triggers para mover o conteúdo ao redor, ou para mostrar / esconder pedaços de conteúdo. Outro novo controle, RelativePanel, é ótimo para reposicionar o conteúdo sob o controle dos Estados Visuais - por exemplo, reposicionando o botão 'Call End' debaixo dos outros botões de controle no visor do telefone mostrado aqui.
  20. Também como você projeta, acho que da forma como o usuário interage com yor aplicativo em um dispositivo específico. Um grande exemplo é o aplicativo de calendário. Em uma tela grande, você vai aproveitar a grande área de exibição para mostrar um seletor de data mês completo, talvez alguns seletores de grupo, e um display rico, como uma visão mês inteiro. Em um telefone no entanto, o usuário geralmente olha para o seu telefone para saber o que os próximos compromissos estão naquele dia. O cenário de uso primário muda. Toda a informação que é transmitida pela tela grande ainda está disponível no telefone, mas apenas por navegar através de alguns níveis adicionais de menu e páginas.