interface pixel a pixel
Post on 30-Jun-2015
2.155 Views
Preview:
DESCRIPTION
TRANSCRIPT
Interface Pixel a Pixel
Thiago Vieira
Code Squad
Programador e Analista
Cliente
Designer
Separando a boiada
Programador e Analista
ClienteNecessidade
Designer
Separando a boiada
Programador e Analista
ClienteNecessidade
Desenvolvimento
DesignerDesenvolvimento
Separando a boiada
DesignerConceito,
identidade visual, escalas de cores...
UsabilidadeUsabilidadeUsabilidade
Modelagem, regras de negócio,
tecnologia...Programador
e Analista
Comunicação
Acessibilidade
Hierarquia Visual
Consistência
Affordance
Interação (touch)
Usabilidade
Hierarquia VisualUsabilidade
Itens
Item1Descrição curta...
Item2Descrição curta...
Item3Descrição curta...
Item4Descrição curta...
Qual a ordem de leitura?
Qual a principal informação?
Hierarquia VisualUsabilidade
Itens
Item1Descrição curta...
Item2Descrição curta...
Item3Descrição curta...
Item4Descrição curta...
Qual a ordem de leitura?
Qual a principal informação?
AcessibilidadeUsabilidade
Lista de Itens do Projeto...
Item1 - Descrição curta do item...
Item2 - Descrição curta do item...
Item3 - Descrição curta do item...
Item4 - Descrição curta do item...
Item5 - Descrição curta do item...
Item9 - Descrição curta do item...
Item6 - Descrição curta do item...
Item7 - Descrição curta do item...
Item8 - Descrição curta do item...
Praticidade
Relevância
Clareza
AcessibilidadeUsabilidade
Itens
Item1Descrição curta...
Item2Descrição curta...
Item3Descrição curta...
Item4Descrição curta...
Praticidade
Relevância
Clareza
ConsistênciaUsabilidade
Alinhamento
Posicionamento
Espaçamento
ConsistênciaUsabilidade
Alinhamento
Posicionamento
Espaçamento
AffordanceUsabilidade
Qualidade de um ambiente, que permite que um indivíduo execute uma ação.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.�Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
AffordanceUsabilidade
Qualidade de um ambiente, que permite que um indivíduo execute uma ação.
Item1Descrição curta...
Item2Descrição curta...
Item3Descrição curta...
Item4Descrição curta...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
Item2Descrição curta...
Lista de Itens do Projeto... Itens Detalhes
Item1 - Descrição curta do item...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
Item2 - Descrição curta do item...
Item3 - Descrição curta do item...
InteraçãoUsabilidade
Tap and Hold
Swipe
Pull to Refresh
Multitouch
→ → →
→
Exemplos
Twitter (iOS)
Exemplos
Twitter (iOS)
ExemplosEnviando Tweet...
Twitter (iOS)
Exemplos
Path (iOS e Android)
Exemplos
Facebook (iOS e Android)
Exemplos
yap.TV (iOS)
Exemplos
Tumblr (Android)
Exemplos
Foursquare (iOS)
Exemplos
Foursquare (iOS)
Discuta as ideias, o designer pode estar viciado no layout
Na dúvida, pergunte ao designer
Observe padrões
Tente experimentar o que fez
Considerações Finais
iO S ™ G u id e l in e s http://senta.la/okdf
ustwo™ Pixel Perfect Precision™ http://senta.la/okdd
A n d r o id ™ G u id e l in e s http://senta.la/okdg
Referências
Thiago Vieira
@thiagovieiracom
thiagovieiracom
thiagovieiracom
www.thiagovieira.com
Code Squad
top related