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 encan...
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
Wind...
Fácil de projetar em toda gama de devices
• API unificada
• Converged Commons Controls
• Construção com base nos métodos d...
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 24ep...
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úmero mágico 4
Algoritmo de escala
Effective Pixel
Considerações do dispositivo
• Tamanho das telas
• Compatibilidade de hardware
• Conectividade
• Inputs primários
• Pessoa...
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 an...
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
...
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
Desenvolvendo APPs para múltiplas resoluções
Próximos SlideShares
Carregando em…5
×

Desenvolvendo APPs para múltiplas resoluções

363 visualizações

Publicada em

Desenvolvendo APPs para múltiplas resoluções

Publicada em: Design
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
363
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 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.
  • 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.
  • 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.
  • 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!
  • 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

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

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

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


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

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

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

  • Desenvolvendo APPs para múltiplas resoluções

    1. 1. Desenvolvendo APPs para múltiplas resoluções Alessandra Rosa
    2. 2. Palestrante Alessandra Peguim Rosa alessandra.rosa@eldorado.org.br @ux_rosa
    3. 3. Identidade Visual e Design da Microsoft
    4. 4. Identidade Visual e Design da Microsoft • Mantenha simples • Pense universal • Projete para um • Faça pessoal • Crie encantamento
    5. 5. Como o Windows torna o design fácil
    6. 6. 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
    7. 7. 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
    8. 8. O quê eu estou projetando?
    9. 9. 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
    10. 10. Icones
    11. 11. 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ê
    12. 12. O número mágico 4
    13. 13. Algoritmo de escala
    14. 14. Effective Pixel
    15. 15. Considerações do dispositivo • Tamanho das telas • Compatibilidade de hardware • Conectividade • Inputs primários • Pessoal vs Compartilhados • Ambiente • Duração de uso
    16. 16. Técnicas de UI Adaptativa
    17. 17. Planejando seu design • Adapte o input • Construa com effective pixel • Leve em consideração o algoritmo de escalonamento
    18. 18. 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”
    19. 19. Planejando seu design | Breaking Points phablet & tablet desktopphone 720 1024320epx
    20. 20. 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
    21. 21. Planejando seu design | Reposition
    22. 22. Planejando seu design | Resize
    23. 23. Planejando seu design | Reflow
    24. 24. Planejando seu design | Reveral
    25. 25. Planejando seu design | Replace
    26. 26. Planejando seu design | Re-architect
    27. 27. Adaptive UI
    28. 28. Tailored | Customize o design • Construa experiências únicas em diferentes dispositivos
    29. 29. Para saber mais www.talkitbr.com

    ×