Aula_08

Prévia do material em texto

DESENVOLVIMENTO NATIVO
AULA-8 ASPECTOS DE DESIGN DA PLATAFORMA WINDOWS MOBILE
INTRODUÇÃO
Similar a Google, a Microsoft possui uma série de princípios de design como um conjunto de recomendações aos desenvolvedores para criação de apps para seus dispositivos móveis.
Esses princípios guiam o desenvolvedor para a criação de apps com uma experiência de usuário satisfatória, garantindo assim o sucesso da aplicação. 
Os princípios se baseiam em conceito de design adotado pela Microsoft, que preza pela leveza, fluidez e organização da interface, de forma que essa possa ser manipulada com praticidade em momentos em que dispõe de pouco tempo e onde requer agilidade. 
PRINCÍPIOS DE DESIGN PARA APPs DA PLATAFORMA WINDOWS
Pride in craftsmanship
Do more with less
Fast and fluid
Authentically digital
Win as one
PRIDE IN CRAFTSMANSHIP
Pequenos detalhes importam
Cuide dos detalhes
Assegure balanceamento e simetria
Alinhe com a grade (grid)
Encontre a tupografia que melhor represente o significado da app.
FAZER MAIS COM MENOS (Do more with less)
Reduza conteúdo desnecessário
Foco nos elementos mais relevantes
Crie uma app limpa
Conteúdo antes do chrome
Exiba o que o usuário espera ver.
RÁPIDO E FLÚIDO (Fast and fluid)
Respostas rápidas como reflexo das ações
Interfaces atraentes
Tiles vivos
Crie experiências reais
Buy east and simple for interaction.
AUTENTICAMENTE DIGITAL (Authentically digital)
Faça uso do mundo digital
Faça a app trabalhar de forma dinâmica com cores
Faça uso da nuvem (cloud)
VENÇA COM ÚNICO (Win as one)
Não se esqueça de que é uma app para smartphones
Faça-o caber em medidas específicas
Reflita inovação em paralelo com a experiência do usuário
PROCESSO DE DESIGN DE APPS PARA PLATAFORMA WINDOWS
Usando toques (Using touch)
Design visual e interativo (Visual and interaction design)
Aprenda mobile (Learn mobile)
USANDO TOQUES (Using Touch)
Interações baseadas em toques introduzem novas considerações de design.
Um design de sucesso para dispositivos baseados em toque direciona seus usuários em como realizar tarefas e adiciona marcações a app.
As melhores apps guiam os usuários de forma eficiente através de tarefas, criando a sensação de fluidez.
DESIGN VISUAL E INTERATIVO (Visual and interaction design)
O processo de planejamento de um aplicativo é realizada através de uma combinação de design de interação e design visual, realizada de forma iterativa. 
Design de interação - taxonomia de comportamentos, gestos e respostas ao projetar o aplicativo. 
Projeto Visual - traz os elementos para vida na tela com cor e arte original. 
Prototipar a app - Planejar a interação e designs visuais antes, fazendo maquetes, desenhos e wireframes, em seguida, iniciar o desenvolvimento. 
DESIGN VISUAL E INTERATIVO (Visual and interaction design)
Design visual adiciona beleza e branding para a experiência do usuário, porém nunca deve tirar a atenção do conteúdo ou atrapalhar a navegação. 
Planeje os projetos visuais de sua app para que ajudam os usuários a entender como interagir com seu aplicativo.
Os usuários devem ser informados intuitivamente onde e como eles devem tocar, arrastar objetos.
Design visual envolvente consiste de formas, cores, e controles que guia os usuários através de tarefas.
SAIBA MOBILE (Learn mobile)
Projetos visuais e interação para apps de qualidade para Windows Phone/Mobile são muito diferentes dos utilizados na computação tradicional. 
Investa tempo em interagir com um dispositivo Windows Phone/Mobile durante o planejamento; 
Sinta como a plataforma funciona, 
Considere os aplicativos nativos do Windows Phone como um paradigma que pode auxiliar seu processo de concepção.
PROJETANDO A INTERFACE DE APLICAÇÕES PARA A FILOSOFIA UWP
A Microsoft elaborou um guia de recomendações para auxiliar os desenvolvedores a projetar interfaces voltadas a sua filosofia de aplicativos UWP – Universal Windows Platform.
Projetar aplicativos de forma universal para todos os tipos de dispositivos baseados na plataforma Windows 10.
Fonte: https://msdn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide
PLATAFORMA UNIVERSAL WINDOWS (UWP)
Uma app UWP (Universal Windows Platform) consiste em uma aplicação construída sobe um único conjunto de API que alcance todos os dispositivos baseados no Windows 10, tais como PC’s, tablet’s e smartphones.
Suporte da dispositivos com tamanhos de telas diferentes,
Suporte a diversos modelos de interação – mouse, toque ou teclado, controle de jogos ou canetas.
Fonte: https://msdn.microsoft.com/en-us/windows/uwp/get-started/whats-a-uwp
DESIGN E INTERFACE PARA APPS UWP
A Microsoft possui uma lista de artigos que auxiliam os desenvolvedores a projetar e codificar um aplicativo segundo seu modelo UWP.
Layout
Estilo
Controles e padrões
Entrada e dispositivos
Usabilidade
Recursos e downloads
Sobre a linguagem de design da Microsoft
Fonte: https://developer.microsoft.com/pt-br/windows/design
LAYOUT PARA UWP
A estrutura, o layout de página e a navegação do aplicativo são a base de cada experiência do usuário.
Ao projetar e codificar um aplicativo UWP deve-se considerar que sejam de fácil navegação e tenha um visual espetacular em uma variedade de dispositivos e tamanhos de tela.
Fonte: https://developer.microsoft.com/pt-br/windows/design/layout
DESIGN DE APLICATIVOS UWP
Um aplicativo UWP (Plataforma Universal do Windows) pode ser executado em qualquer dispositivo baseado no Windows 10 (smartphone, tablet ou pc).
Devido ao desafio de projetar um aplicativo com boa aparência para uma grande variedade de dispositivos, a UWP (Plataforma Universal do Windows) fornece um conjunto de diretrizes de design de alto nível que auxilia desenvolvedores a criar aplicativos UWP.
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
DESIGN DE APLICATIVOS UWP
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
RECURSOS DE APLICATIVO UWP
Aplicativos UWP ajustam automaticamente o tamanho de controles, fontes e outros elementos da interface do usuário para que eles sejam legíveis em todos os dispositivos.
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
ENTRADA UNIVERSAL E INTERAÇÕES INTELIGENTES
Ao criar aplicativos para dispositivos e modos de entrada específicos é realizado de forma transparente, uma vez que o Windows UWP por padrão se baseiam em interações inteligentes.
Ao criar uma aplicação ao realizar a interação através de clique não é necessário saber nem definir se o clique vem de um clique do mouse real ou do toque de um dedo.
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
ENTRADA UNIVERSAL E INTERAÇÕES INTELIGENTES
A complexidade de uma interface do usuário moderna é composta de texto, formas, cores e animações, em que ao final todos esses elementos são compostas de pixels individuais da tela do dispositivo que se está usando. 
Complexidade devido a grande quantidade de opções para criar uma interface do usuário. 
A anatomia de um aplicativo de uma perspectiva de design auxilia a simplificar o processo de criação de uma interface de usuário. 
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
ENTRADA UNIVERSAL E INTERAÇÕES INTELIGENTES
Um aplicativo é composto de páginas e telas. 
Cada página tem uma interface do usuário,
 formada por 3 tipos de elementos de interface 
do usuário:
 
Elementos de navegação, 
Comando,
Conteúdo.
Fonte: https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
ADAPTAR SEU APLICATIVO PARA DISPOSITIVOS E TAMANHOS DE TELA ESPECÍFICOS.
Os aplicativos UWP usam pixels efetivos para garantir que seus elementos de design serão legíveis e utilizáveis em todos os dispositivos do Windows, ou seja não se deve personalizar a interface do usuário do aplicativo para uma família de dispositivos específica.
ADAPTAR SEU APLICATIVO PARA DISPOSITIVOS E TAMANHOS DE TELA ESPECÍFICOS.
O Windows não oferece uma forma que auxilie um aplicativo detectarem qual dispositivo específico está sendo executado, porém ele pode informar a qual família de dispositivos (móvel, área de trabalho etc) o aplicativo está sendo executado, sua resolução efetiva e a quantidade de espaço na tela disponível para o aplicativo (o tamanho da janela do aplicativo).
TÉCNICAS DE DESIGN RESPONSIVO
Consiste em otimizar a interface do usuário de um aplicativo para larguras de tela específicas.
A Microsoft apresenta 6 técnicas de design responsivo que auxiliam o desenvolvedor a personalizar a interface do usuário do aplicativo.
Reposicionar
Redimensionar
Refluxo
Revelação
Substituir
Rearquitetura
CONCLUSÕES SOBRE A PLATAFORMA
Apesar da Microsoft não ser líder de mercado na plataforma móvel ela detém uma parcela considerável do mercado de dispositivos móveis.
Ela possui um conjunto de princípios de design para dispositivos móveis baseados no Windows Phone/Mobile e também para sua nova versão do sistema operacional Windows 10, baseada na filosofia UWP.
CONCLUSÕES SOBRE A PLATAFORMA
Similar a Google, a Microsoft não utiliza seus princípios de design como elemento de aprovação de aplicativos para sua loja virtual. São apenas recomendações que auxiliam os desenvolvedores a projetar e criar interfaces segundo seus critérios de qualidade.