O documento discute como projetar aplicativos para várias resoluções de tela. Ele explica que manter uma identidade visual simples e pensar em todos os dispositivos é importante. Também discute técnicas como escalonamento de pixels efetivos, pontos de quebra e reorganização de elementos na tela para se adaptar a diferentes tamanhos.
O documento apresenta um design para aplicativos da plataforma Nokia S40. Apresenta uma introdução à família S40, dicas de otimização e boas práticas, e um estudo de caso de design para um aplicativo de cinema.
Quando desenvolvemos uma aplicação, é importante executarmos testes para garantir o funcionamento dos diferentes módulos da aplicação. Este slide foi apresentado na trilha Javascript do TDC 2016 em São Paulo.
Este documento apresenta um mini curso sobre projetos centrados no usuário. O curso ensina conceitos como pesquisa com usuários, criação de personas, ideação e prototipação para desenvolver soluções centradas nas necessidades dos usuários. O curso é dividido em atividades práticas para que os participantes criem um projeto em equipe.
Este documento fornece uma introdução ao design thinking, explicando que não é interface, interação ou design, mas sim uma abordagem centrada no usuário. Ele descreve as etapas do processo de design thinking, incluindo a imersão, análise, ideação e prototipação, fornecendo exemplos de técnicas em cada etapa.
Live Tiles e Background Executions - TDC SP 2015talkitbr
Palestra sobre Live Tiles e Background executions em Windows Universal Platform. Ministrada pelos evangelistas Diego Castro e João Ronaldo Cunha no The Developer Conference (TDC) São Paulo 2015 na trilhe de Universal Windows.
O documento apresenta as principais características e vantagens do Silverlight para desenvolvimento de aplicações web ricas. Discute como criar interfaces gráficas atraentes e interativas de forma simples no Silverlight e como transformar aplicações web em aplicações desktop nativas. Também mostra como conectar aplicações Silverlight a serviços de dados e utilizar recursos como Deep Zoom para criar galerias de fotos interativas.
Este documento discute os conceitos de design de websites, arquitetura da informação e usabilidade. Aborda tendências atuais de layout como simplicidade, destaque do conteúdo e uso moderado de efeitos visuais e cores. Também explica a evolução do desenvolvimento client-side, da separação entre conteúdo e formatação usando XHTML e CSS.
O documento apresenta um design para aplicativos da plataforma Nokia S40. Apresenta uma introdução à família S40, dicas de otimização e boas práticas, e um estudo de caso de design para um aplicativo de cinema.
Quando desenvolvemos uma aplicação, é importante executarmos testes para garantir o funcionamento dos diferentes módulos da aplicação. Este slide foi apresentado na trilha Javascript do TDC 2016 em São Paulo.
Este documento apresenta um mini curso sobre projetos centrados no usuário. O curso ensina conceitos como pesquisa com usuários, criação de personas, ideação e prototipação para desenvolver soluções centradas nas necessidades dos usuários. O curso é dividido em atividades práticas para que os participantes criem um projeto em equipe.
Este documento fornece uma introdução ao design thinking, explicando que não é interface, interação ou design, mas sim uma abordagem centrada no usuário. Ele descreve as etapas do processo de design thinking, incluindo a imersão, análise, ideação e prototipação, fornecendo exemplos de técnicas em cada etapa.
Live Tiles e Background Executions - TDC SP 2015talkitbr
Palestra sobre Live Tiles e Background executions em Windows Universal Platform. Ministrada pelos evangelistas Diego Castro e João Ronaldo Cunha no The Developer Conference (TDC) São Paulo 2015 na trilhe de Universal Windows.
O documento apresenta as principais características e vantagens do Silverlight para desenvolvimento de aplicações web ricas. Discute como criar interfaces gráficas atraentes e interativas de forma simples no Silverlight e como transformar aplicações web em aplicações desktop nativas. Também mostra como conectar aplicações Silverlight a serviços de dados e utilizar recursos como Deep Zoom para criar galerias de fotos interativas.
Este documento discute os conceitos de design de websites, arquitetura da informação e usabilidade. Aborda tendências atuais de layout como simplicidade, destaque do conteúdo e uso moderado de efeitos visuais e cores. Também explica a evolução do desenvolvimento client-side, da separação entre conteúdo e formatação usando XHTML e CSS.
O documento apresenta o RealSense SDK da Intel, que permite o desenvolvimento de aplicativos que reconhecem gestos, rostos e o ambiente por meio de câmeras 3D. O SDK oferece APIs e ferramentas para Windows, Unity e HTML5/Javascript. Exemplos demonstram recursos como detecção de mãos e rostos.
Aula 1
O que é software?
Quem faz o software?
Por que um software é importante?
Quais são os passos para se fazer um software?
Como tenho certeza que fiz um software corretamente?
Apresentação de Vinicius Quaiato no TDC2011 mostrando como criar aplicações Windows Phone 7 utilizando o Windows Azure para processamento e serviços.
Esta apresentação mostra os motivos pelos quais devemos considerar ser
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
O documento fornece 7 dicas para criação de layouts para sites em WordPress: 1) Considerar diferentes tamanhos de tela, 2) Criar layout para mobile, 3) Escolher fontes, 4) Manter padrões de consistência, 5) Seguir a estrutura padrão de blog, 6) Incluir um guia de estilo visual simples, 7) Validar o layout com o desenvolvedor.
O documento apresenta as principais características e funcionalidades da plataforma Silverlight para desenvolvimento de aplicações web ricas. Discute tópicos como interface gráfica, multiplataforma, acesso a dados, ferramentas de desenvolvimento e introduz o desenvolvimento para Windows Phone.
João Roberto Almeida é um desenvolvedor .NET desde 2005 com certificação MCTS em aplicações web. Seu documento resume sua experiência com tecnologias Microsoft como COM, ASP, Visual Basic, .NET Framework, C#, Windows Forms, WPF, ASP.NET, Azure e promove a qualidade de software através de técnicas como DDD, TDD e desenvolvimento ágil.
O documento apresenta as principais ferramentas da Adobe Flash Platform, incluindo o Flash Builder 4 e o novo Flash Catalyst. Resume que essas ferramentas oferecem maior produtividade no desenvolvimento, melhor integração com servidores e serviços, e capacidade de criar aplicações mais ricas. O Flex 4 é a base dessas ferramentas, e o Flash Builder agora é chamado de Flash Builder para melhor alinhamento de marca. Também é apresentado o primeiro preview público do Flash Catalyst.
Milton Onodera - Prototipação para Windows Phone usando o Expression BlendINdT
Prototipar aplicativos para Windows Phone usando o Expression Blend é fácil, criativo, produtivo e integrado. O documento descreve como o Expression Blend permite criar protótipos de alta e média fidelidade rapidamente e testá-los no aparelho, integrando designers e desenvolvedores. Um estudo de caso sobre um aplicativo de cinema é usado para ilustrar o processo de prototipagem.
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
O Instituto INFNET me convidou para apresentar a palestra "Criando layouts em PSD pensando no front-end e back-end" com várias dicas de integração e sinergia entre os designers e desenvolvedores.
Essa palestra foi a mesma que eu dei no 2º WPMeetupRJ no Espaço de Coworking BeesOffice em 2012, porém ganhou uma atualização de novas ideias com a experiência acumulada nesses últimos dois anos.
O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.
O documento apresenta o produto RAD Studio XE7 da Embarcadero Technologies, que permite o desenvolvimento rápido de aplicações multiplataforma. O documento discute as principais funcionalidades do RAD Studio XE7, incluindo o FireUI para design responsivo, a biblioteca de programação paralela para melhor desempenho, e suporte aprimorado para plataformas como Android, iOS, Windows e OS X.
Este documento discute a criação de um framework chamado InfraGUIBuilder para geração dinâmica de interfaces gráficas de usuário. O framework permite que as telas sejam geradas a partir de objetos de negócio e configuradas pelo programador e usuário, simplificando a manutenção de aplicações e aumentando a produtividade. Ainda há melhorias a serem feitas como integração com outros frameworks e suporte a telas mais complexas.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
O documento apresenta as principais ferramentas da plataforma Adobe Flash, incluindo Flex Framework, Flash Catalyst e Flash Builder. Ele descreve os recursos e fluxos de trabalho aprimorados para design, desenvolvimento e integração com serviços e servidores dessas ferramentas.
O documento discute as melhorias na convergência entre Windows e Windows Phone, incluindo 90% de convergência de API e suporte para aplicativos universais que podem ser executados em ambas as plataformas. Também menciona melhorias nas notificações push e nos recursos de armazenamento em nuvem para sincronizar dados entre dispositivos.
As aplicações RIA revolucionaram o mercado de web nos últimos anos. Você verá alguns exemplos de como explorar o potencial do framework Adobe Flex na construção deste tipo de aplicações interativas, seja para a internet, desktop ou dispositivos móveis como iPhone, Android, etc.
O documento apresenta uma palestra sobre arquitetura de software no evento .NET Architects Days 2013. A palestra aborda tópicos como machine learning, arquitetura RESTful, desempenho de APIs, testes, acessibilidade, programação concorrente e funcional.
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesWilliam S. Rodriguez
O documento discute as vantagens do uso da plataforma Xamarin para desenvolvimento de aplicativos móveis nativos multiplataforma utilizando a linguagem C#. Xamarin permite compartilhamento de código entre plataformas iOS, Android e Windows enquanto mantém a interface e desempenho nativos.
O documento descreve um projeto de plataforma digital para apoiar profissionais de design gráfico no processo de produção gráfica. Foi realizado um mapeamento de usuários, desenvolvimento de protótipo e testes de usabilidade para identificar necessidades e especificar elementos para desenvolvedores. O objetivo de fornecer ferramentas que agilizem tarefas e aumentem autonomia dos designers foi satisfatoriamente atendido.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
Mais conteúdo relacionado
Semelhante a Desenvolvendo APPs para múltiplas resoluções
O documento apresenta o RealSense SDK da Intel, que permite o desenvolvimento de aplicativos que reconhecem gestos, rostos e o ambiente por meio de câmeras 3D. O SDK oferece APIs e ferramentas para Windows, Unity e HTML5/Javascript. Exemplos demonstram recursos como detecção de mãos e rostos.
Aula 1
O que é software?
Quem faz o software?
Por que um software é importante?
Quais são os passos para se fazer um software?
Como tenho certeza que fiz um software corretamente?
Apresentação de Vinicius Quaiato no TDC2011 mostrando como criar aplicações Windows Phone 7 utilizando o Windows Azure para processamento e serviços.
Esta apresentação mostra os motivos pelos quais devemos considerar ser
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
O documento fornece 7 dicas para criação de layouts para sites em WordPress: 1) Considerar diferentes tamanhos de tela, 2) Criar layout para mobile, 3) Escolher fontes, 4) Manter padrões de consistência, 5) Seguir a estrutura padrão de blog, 6) Incluir um guia de estilo visual simples, 7) Validar o layout com o desenvolvedor.
O documento apresenta as principais características e funcionalidades da plataforma Silverlight para desenvolvimento de aplicações web ricas. Discute tópicos como interface gráfica, multiplataforma, acesso a dados, ferramentas de desenvolvimento e introduz o desenvolvimento para Windows Phone.
João Roberto Almeida é um desenvolvedor .NET desde 2005 com certificação MCTS em aplicações web. Seu documento resume sua experiência com tecnologias Microsoft como COM, ASP, Visual Basic, .NET Framework, C#, Windows Forms, WPF, ASP.NET, Azure e promove a qualidade de software através de técnicas como DDD, TDD e desenvolvimento ágil.
O documento apresenta as principais ferramentas da Adobe Flash Platform, incluindo o Flash Builder 4 e o novo Flash Catalyst. Resume que essas ferramentas oferecem maior produtividade no desenvolvimento, melhor integração com servidores e serviços, e capacidade de criar aplicações mais ricas. O Flex 4 é a base dessas ferramentas, e o Flash Builder agora é chamado de Flash Builder para melhor alinhamento de marca. Também é apresentado o primeiro preview público do Flash Catalyst.
Milton Onodera - Prototipação para Windows Phone usando o Expression BlendINdT
Prototipar aplicativos para Windows Phone usando o Expression Blend é fácil, criativo, produtivo e integrado. O documento descreve como o Expression Blend permite criar protótipos de alta e média fidelidade rapidamente e testá-los no aparelho, integrando designers e desenvolvedores. Um estudo de caso sobre um aplicativo de cinema é usado para ilustrar o processo de prototipagem.
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
O Instituto INFNET me convidou para apresentar a palestra "Criando layouts em PSD pensando no front-end e back-end" com várias dicas de integração e sinergia entre os designers e desenvolvedores.
Essa palestra foi a mesma que eu dei no 2º WPMeetupRJ no Espaço de Coworking BeesOffice em 2012, porém ganhou uma atualização de novas ideias com a experiência acumulada nesses últimos dois anos.
O objetivo dessa palestra era influenciar os designers a criarem peças amigáveis para os desenvolvedores em busca de agilidade no processo de implementação de layouts baseados em Photoshop.
O documento apresenta o produto RAD Studio XE7 da Embarcadero Technologies, que permite o desenvolvimento rápido de aplicações multiplataforma. O documento discute as principais funcionalidades do RAD Studio XE7, incluindo o FireUI para design responsivo, a biblioteca de programação paralela para melhor desempenho, e suporte aprimorado para plataformas como Android, iOS, Windows e OS X.
Este documento discute a criação de um framework chamado InfraGUIBuilder para geração dinâmica de interfaces gráficas de usuário. O framework permite que as telas sejam geradas a partir de objetos de negócio e configuradas pelo programador e usuário, simplificando a manutenção de aplicações e aumentando a produtividade. Ainda há melhorias a serem feitas como integração com outros frameworks e suporte a telas mais complexas.
O documento discute estratégias de design responsivo para websites adaptarem-se a diferentes dispositivos. Aborda tags semânticas do HTML5 que melhoram a acessibilidade e o SEO, além de técnicas como viewport, grid layout fluido, imagens flexíveis e media queries para estilização condicional de acordo com características dos dispositivos.
O documento apresenta as principais ferramentas da plataforma Adobe Flash, incluindo Flex Framework, Flash Catalyst e Flash Builder. Ele descreve os recursos e fluxos de trabalho aprimorados para design, desenvolvimento e integração com serviços e servidores dessas ferramentas.
O documento discute as melhorias na convergência entre Windows e Windows Phone, incluindo 90% de convergência de API e suporte para aplicativos universais que podem ser executados em ambas as plataformas. Também menciona melhorias nas notificações push e nos recursos de armazenamento em nuvem para sincronizar dados entre dispositivos.
As aplicações RIA revolucionaram o mercado de web nos últimos anos. Você verá alguns exemplos de como explorar o potencial do framework Adobe Flex na construção deste tipo de aplicações interativas, seja para a internet, desktop ou dispositivos móveis como iPhone, Android, etc.
O documento apresenta uma palestra sobre arquitetura de software no evento .NET Architects Days 2013. A palestra aborda tópicos como machine learning, arquitetura RESTful, desempenho de APIs, testes, acessibilidade, programação concorrente e funcional.
Construindo Aplicativos móveis conectados com Xamarin e Azure Mobile ServicesWilliam S. Rodriguez
O documento discute as vantagens do uso da plataforma Xamarin para desenvolvimento de aplicativos móveis nativos multiplataforma utilizando a linguagem C#. Xamarin permite compartilhamento de código entre plataformas iOS, Android e Windows enquanto mantém a interface e desempenho nativos.
O documento descreve um projeto de plataforma digital para apoiar profissionais de design gráfico no processo de produção gráfica. Foi realizado um mapeamento de usuários, desenvolvimento de protótipo e testes de usabilidade para identificar necessidades e especificar elementos para desenvolvedores. O objetivo de fornecer ferramentas que agilizem tarefas e aumentem autonomia dos designers foi satisfatoriamente atendido.
O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
Semelhante a Desenvolvendo APPs para múltiplas resoluções (20)
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. 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
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ê
16. Considerações do dispositivo
• Tamanho das telas
• Compatibilidade de hardware
• Conectividade
• Inputs primários
• Pessoal vs Compartilhados
• Ambiente
• Duração de uso
18. Planejando seu design
• Adapte o input
• Construa com effective pixel
• Leve em consideração o algoritmo de escalonamento
19. 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”
21. 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
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.