Desenvolvendo APPs para múltiplas resoluções

Alessandra Rosa

Palestrante

Alessandra Peguim Rosaalessandra.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 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