Esta apresentação explica o que se deve levar em consideração na criação das aplicações adaptativas para múltiplas resoluções - seguindo o ponto de vista da Microsoft
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.
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Alessandra Rosa
Quando vemos filmes que usam tecnologia em uma realidade futurística, nos deparamos com supercomputadores, assistentes pessoais imersivos, casas interativas e as mais variadas formas de interações. O que pouca gente percebe é que a tecnologia do futuro já está acontecendo e, nesta palestra, vamos mostrar como podemos construir hoje as soluções do futuro.
Agile UX vs Lean UX | Eu devo escolher uma delas?Alessandra Rosa
Esta palestra fará um introdução básica e rápida aos conceitos de UX para sedimentar e fundamentar os conceitos de Agile UX e Lean Ux, passando pelas Lean Startups. A ideia é mostrar os conceitos, o surgimento de cada uma e colocar uma técnica frente com a outra para ajudar os leitores a entender, escolher uma técnica adequada ao seu time, seu produto e sua filosofia de trabalho.
Lean UX para Construir uma Solução Centrada no UsuárioAlessandra Rosa
Este documento descreve o desenvolvimento de uma solução para melhorar a comunicação e rastreamento da equipe de transporte de macas dentro de hospitais utilizando abordagens de Lean UX. A solução foi desenvolvida por meio de pesquisas com usuários, análise de insights, prototipagem e testes de usabilidade. O resultado foi um aplicativo que otimiza a comunicação e fornece visibilidade do status e localização dos funcionários.
Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...Alessandra Rosa
O documento descreve a evolução da interação entre os Project Owners e a equipe de UX/Design de uma instituição de pesquisa. Inicialmente, os designers trabalhavam separados dos times de desenvolvimento. Posteriormente, testaram trabalhar junto aos times, mas isso não funcionou bem. Atualmente, os designers auxiliam nas propostas comerciais e trabalham integrados aos times e ao PO, melhorando o alinhamento e a precisão das estimativas.
o Design tem poderosas metodologias de trabalho que podem ajudar empresas serem inovadoras, nesta apresentação algumas ideias que podem ajudar a vender as ferramentas de design como valor para empresas.
O Futuro das Interfaces: Zero UI e Interfaces HápticasAlessandra Rosa
Nesta palestra serão abordadas as diferentes interfaces de dispositivos wearables e assistentes pessoais, mostrando as diferentes formas de interações: como eram pensados no passado e como isso está evoluindo para os dias de hoje.
O documento discute as diferenças entre UX Ágil e UX Lean. O UX Ágil enfatiza a colaboração entre times de desenvolvimento e design, enquanto o UX Lean se baseia nos princípios de construir, medir e aprender. Embora os métodos tenham inspirações diferentes, na prática eles não são mutuamente exclusivos e ambos buscam entregar valor ao usuário de forma iterativa.
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.
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Alessandra Rosa
Quando vemos filmes que usam tecnologia em uma realidade futurística, nos deparamos com supercomputadores, assistentes pessoais imersivos, casas interativas e as mais variadas formas de interações. O que pouca gente percebe é que a tecnologia do futuro já está acontecendo e, nesta palestra, vamos mostrar como podemos construir hoje as soluções do futuro.
Agile UX vs Lean UX | Eu devo escolher uma delas?Alessandra Rosa
Esta palestra fará um introdução básica e rápida aos conceitos de UX para sedimentar e fundamentar os conceitos de Agile UX e Lean Ux, passando pelas Lean Startups. A ideia é mostrar os conceitos, o surgimento de cada uma e colocar uma técnica frente com a outra para ajudar os leitores a entender, escolher uma técnica adequada ao seu time, seu produto e sua filosofia de trabalho.
Lean UX para Construir uma Solução Centrada no UsuárioAlessandra Rosa
Este documento descreve o desenvolvimento de uma solução para melhorar a comunicação e rastreamento da equipe de transporte de macas dentro de hospitais utilizando abordagens de Lean UX. A solução foi desenvolvida por meio de pesquisas com usuários, análise de insights, prototipagem e testes de usabilidade. O resultado foi um aplicativo que otimiza a comunicação e fornece visibilidade do status e localização dos funcionários.
Interação e relacionamento PO com equipe de UX e Designers do Instituto de Pe...Alessandra Rosa
O documento descreve a evolução da interação entre os Project Owners e a equipe de UX/Design de uma instituição de pesquisa. Inicialmente, os designers trabalhavam separados dos times de desenvolvimento. Posteriormente, testaram trabalhar junto aos times, mas isso não funcionou bem. Atualmente, os designers auxiliam nas propostas comerciais e trabalham integrados aos times e ao PO, melhorando o alinhamento e a precisão das estimativas.
o Design tem poderosas metodologias de trabalho que podem ajudar empresas serem inovadoras, nesta apresentação algumas ideias que podem ajudar a vender as ferramentas de design como valor para empresas.
O Futuro das Interfaces: Zero UI e Interfaces HápticasAlessandra Rosa
Nesta palestra serão abordadas as diferentes interfaces de dispositivos wearables e assistentes pessoais, mostrando as diferentes formas de interações: como eram pensados no passado e como isso está evoluindo para os dias de hoje.
O documento discute as diferenças entre UX Ágil e UX Lean. O UX Ágil enfatiza a colaboração entre times de desenvolvimento e design, enquanto o UX Lean se baseia nos princípios de construir, medir e aprender. Embora os métodos tenham inspirações diferentes, na prática eles não são mutuamente exclusivos e ambos buscam entregar valor ao usuário de forma iterativa.
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.
O documento discute como o design thinking pode ser usado como uma ferramenta para iniciar a transformação digital de empresas tradicionais. Ele explica que o design thinking ajuda a entender os objetivos da transformação digital, é eficiente em qualquer modelo de negócios, e tem um processo de investigação para entender clientes e problemas. O documento também lista barreiras comuns a mercados tradicionais e dicas para a transformação digital.
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.
Semelhante a Desenvolvendo APPs para múltiplas resoluções (20)
O documento discute como o design thinking pode ser usado como uma ferramenta para iniciar a transformação digital de empresas tradicionais. Ele explica que o design thinking ajuda a entender os objetivos da transformação digital, é eficiente em qualquer modelo de negócios, e tem um processo de investigação para entender clientes e problemas. O documento também lista barreiras comuns a mercados tradicionais e dicas para a transformação digital.
Computação Cognitiva: a tecnologia das telas de cinema para o nosso dia a dia...Alessandra Rosa
O documento discute conceitos de computação cognitiva como processamento de linguagem natural e aprendizado de máquina. Também aborda como essas tecnologias são aplicadas em assistentes virtuais, reconhecimento de imagem e facial, e chatbots. Big data e inteligência artificial são apresentados como possibilitadores dessas aplicações.
1) Apresentação sobre design centrado no usuário e sua importância para criar soluções que melhor atendam às necessidades das pessoas.
2) Mini-curso prático ensina o passo a passo do processo, incluindo pesquisa com usuários, criação de personas, ideação e prototipação.
3) Participantes são divididos em equipes para aplicar cada etapa do processo e criar soluções para desafios reais.
Beacons em um Hospital de Clínicas | Design ThinkingAlessandra Rosa
A apresentação descreve um projeto de design thinking para implementar beacons em um hospital público para melhorar a comunicação entre a equipe de transporte e a secretária, otimizar o fluxo de informações, e dar mais visibilidade sobre o status das tarefas e localização dos funcionários. A equipe realizou pesquisas com usuários para entender os desafios atuais e desenvolver soluções que não mudassem a rotina, resultando em um protótipo para testes.
O documento fornece uma introdução ao Design Thinking, descrevendo o que ele não é e o que é, incluindo seus principais processos e técnicas como imersão, análise e síntese, ideação e prototipação. O foco é entender as necessidades do usuário através de pesquisas qualitativas para desenvolver soluções criativas.
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.