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