Padres de Design para Aplicativos Mveis

Padres de Design para Aplicativos Mveis

Padres de Design para Aplicativos Mveis
Padres de Design para Aplicativos Mveis
Hewerson Freitas
Hewerson Freitas

Apresentao
Apresentao
Hewerson Freitas
Estudante de Sistemas de Informao
hewerson.freitas@gmail.com
/hewerson.freitas

Sumrio
Sumrio
Navegao
Formulrios
Tabelas e listas
Busca, Ordenao e filtragem
Convites
Feedback
Ajuda

Navegao
Navegao
Padres primrios de navegao
Aplicativos com boa
navegao
simplesmente so
intuitivos e facilitam a
realizao de qualquer
tarefa
Primary Navigation Patterns, Fonte: [!

Navegao
Navegao
!ringboard
"ervem como
plataforma de partida,
que se utiliza como
ponto de partida para
as aplica#es
Faceboo$ "pringboard and %vi &aps, Fonte: [!

Navegao
Navegao
!ringboard
'rades de ()(, *)(, *)*, )* e so os layouts mais comuns+
'rid layouts for springboards, Fonte: [!

Navegao
Navegao
"enu de lista
&enu de listas so
bastante similares ao
"pringboard, contendo
suas varia#es de
menus com listas
avanadas,
personalizadas+
,n-anced list, Amazon &P(. grouped list, "tratus, Fonte: [!

Navegao
Navegao
Abas
A navegao no se
torna neutra em
termos de "%, uma
vez que cada "istema
%peracional tem sua
forma de localizao e
design de abas+
/amie %liver 0ecipes and &olome, bottom tabs, Fonte: [!

Navegao
Navegao
#aleria
,ste padro e)ibe
itens de conte1do
individuais para
navegao+ Funciona
mel-or com conte1do
atualizado
frequentemente, que
as pessoas dese2am
navegar+
334 and P56",, Fonte: [!

Navegao
Navegao
$as%board
Fornecem um resumo
de indicadores
principais de
desempen-o+ 4ada
m7trica pode ser
e)aminada para
informa#es
adicionais+
&int and ego das-oards, Fonte: [!

Navegao
Navegao
"etfora
,ste padro se
caracteriza por uma
landing page
modelada para refletir
a met8fora do
aplicativo+ 5tilizado
principalmente em
2ogos+
9o:t;omorro< and ;rip/ournal, Fonte: [!

Navegao
Navegao
"egamenu
= um grande painel
sobreposto com
formatao e
agrupamento
personalizados das
op#es de menu+
Faceboo$ <eb%" and >almart Android, Fonte: [!

Navegao
Navegao
Navegao secundria
%s padr#es
prim8rios de
navegao podem
ser combinados
para padr#es
secund8rios de
navegao+
"econdary navigations patterns, Fonte: [!

Navegao
Navegao
Carrossel de !ginas
5tilizado para uma
navegao
rapidin-a em um
con2unto discreto
de paginas,
utilizando o
arrastar do dedo+
Nigella ?uic$ 4ollection and @appos, Fonte: [!

Navegao
Navegao
Carrossel de imagens
5tilizado em
dimens#es *9 ou
coverflo< Auma
interface
tridimensional
para navegao
em bibliotecasB,
para e)ibir filmes,
imagens em
destaque+
;apCnC"crap, ;-e P-oto 4oo$boo$, Fonte: [!

Navegao
Navegao
&ista e'!andida
Permite que em uma
1nica tela se2a
acessada para revelar
mais informa#es+
Android 4all 6og, Fonte: [!

Formulrios
Formulrios
Forms
"empre precisamos
utilizar formul8rios
para diversos tipos de
tarefas, desde 6ogins
D 3uscas+
Form patterns, Fonte: [!

Formulrios
Formulrios
&ogin
6ogins devem ter
o menor n1mero
de campos de
entrada, para
tornar intuitivo+
P-otobuc$et and 'roupon, Fonte: [!

Formulrios
Formulrios
(egistro
:gualmente ao
login o registro
deve ter o menor
n1mero de
campos de
entrada, para
tornar intuitivo+
%ferea feedbac$
para mel-or
aproveitamento+
Page%nce and 'o<alla, Fonte: [!

Formulrios
Formulrios
C%eckout
%ferea um
mecanismo para
um c-ec$out mais
r8pido em visitas
posteriores, com
informa#es de
login ou para
c-ec$out+
4-ec$out: Apple and @appos, Fonte: [!

Formulrios
Formulrios
Busca
4omo outros
padr#es de
formul8rio, os
crit7rios de busca
devem ser
limitados somente
a campos
essenciais+
Eaya$ and %pen ;able, Fonte: [!

a!elas e listas
a!elas e listas
Tabelas
5tilizados para
apresentar dados
em v8rios formatos
em aplicativos que
necessitem+
;able patterns, Fonte: [!

a!elas e listas
a!elas e listas
Tabela bsica
,st8 7 sF uma
tabela padro com
cabeal-os de
coluna fi)os e um
layout em grade+
&icro"trategy &obile and Fan'rap-s 3aseball, Fonte: [!

a!elas e listas
a!elas e listas
Tabela sem cabeal%o
A tabela sem
cabeal-o 7
caracterizada por
lin-as de grossas
apresentam
m1ltiplas vari8veis
sobre um ob2eto, e
no rFtulos de
coluna+
0,A6;%0+com and 3an$ of America, Fonte: [!

a!elas e listas
a!elas e listas
)iso geral de dados
% padro geral
mais dados
refereGse a um
resumo ou sum8rio
do conte1do da
tabela e)ibida
acima das lin-as
de dados
individuais+
9iscover "pendAnalyzer, Fonte: [!

a!elas e listas
a!elas e listas
&istas agru!adas
% agrupamento de
lin-as pode tornar
os dados de uma
tabela mais f8ceis
de resumir+
&int and &icro"trategy, Fonte: [!

a!elas e listas
a!elas e listas
&istas em cascatas
Por raz#es Fbvias,
uma tabela de
8rvore seria muito
complicado em
uma tela do
telefone, mas uma
lista em cascata
pode fornecer a
mesma estrutura
-ier8rquica
>ine"pectator, Fonte: [!

"uscas# ordenao e $iltragem
"uscas# ordenao e $iltragem
Busca autocom!letar
9igitar ir8 e)ibir
automaticamente
um con2unto de
resultados
possHveis,
bastando tocar em
um para
selecion8Glo, e a
busca ser8
realizada+
Android &ar$etplace and Netfli), Fonte: [!

"uscas# ordenao e $iltragem
"uscas# ordenao e $iltragem
Busca salvas e recentes
Para respeitar o
esforo dos
usu8rios utilizamos
salvas e recentes
fazem isso
tornando mais f8cil
selecionar a partir
de buscas
anteriores+
e3ay and >almart, Fonte: [!

"uscas# ordenao e $iltragem
"uscas# ordenao e $iltragem
Formulrio de ordenao
5tilizado para
I0efinarJ as
pesquisas podeGse
tornar trabal-oso
pois requer
interao direta do
usu8rio,
confirmando sua
ao+
;arget and A<esome Note, Fonte: [!

"uscas# ordenao e $iltragem
"uscas# ordenao e $iltragem
Filtragem na tela
A filtragem na tela
7 e)ibida com os
resultados ou lista
de ob2etivos+ %nde
o filtro 7 aplicado
com apenas um
toque+
Key@ap and 'oogle, Fonte: [!

"uscas# ordenao e $iltragem
"uscas# ordenao e $iltragem
Formulrio de filtro
5tilizado para
pesquisas mais
avanadas e
refinadas, onde
alguns aplicativos
podem se
beneficiar com isto+
Eaya$ and @appos, Fonte: [!

%onvites
%onvites
$ica
9ica pode ser
utilizada em
qualquer lugar da
tela, pode ser
e)ibida em
qualquer local da
tela no
necessariamente
no inicio+
e3ay and Android %", Fonte: [!

%onvites
%onvites
Trans!ar*ncia
Normalmente visto
em tela inicial, uma
transparLncia 7
uma camada a
qual podeGse ver,
com um diagrama
de uso posicionado
sobre o conte1do
da tela real+
Pulse and P-oster, Fonte: [!

Feed!ac&
Feed!ac&
"ensagem de erro
&ensagens de erro
devem ser
e)pressas em
linguagens
simples, indicar
precisamente o
problema e sugerir
construtivamente
uma soluo+
;a)4aster and &int, Fonte: [!

Feed!ac&
Feed!ac&
Confirmao
A confirmao
deve ser fornecida
quando uma ao
7 tomada+ Procure
uma maneira de
fornecer feedbac$
sem interromper o
flu)o do usu8rio+
Android &ar$etplace, Fonte: [!

A'uda
A'uda
Tour
5mas da mel-ores
solu#es pois
oferecem um
contato ao primeiro
uso mostrando as
ferramentas e
utilidades do
aplicativo de forma
interativa+
Adidas mi4oac-, Fonte: [!

Perguntas(
Perguntas(
?
?
?
?
?
?
? ?

Agradecimentos)
Agradecimentos)
:magem: -ttp:MMlinu)Gblog+orgMt-an$GyouGdearGreaderM

"i!liogra$ia
"i!liogra$ia
[1] NEIL, THEREZA. Padres de design para aplicativos !veis. "#o
pa$lo% Novatec Editora& "e'astopol, (A% )*Reill+,,-1,.