desenho de ecrãs i - autenticação · protótipos de papel fazer e avaliar. perguntas ......
TRANSCRIPT
Inte
rfac
es
Pe
sso
a M
áqu
ina
Desenho de Ecrãs I
07
Cap. 8 – Desenho de Ecrãs
Melhor e Pior ?
Melhor e Pior ?
Resumo Aula Anterior
O que são protótipos?
CaracterísticasAbrangência e ProfundidadeFidelidade e Funcionalidade
Tipos de ProtótiposCenários de InteraçãoStoryboardsProtótipos de PapelProtótipos FuncionaisWizard-of-Oz
Protótipos de PapelFazer e Avaliar
Perguntas
Qual a diferença entre um PAF e um PBF
Qual a diferença entre um Cenário de Interacção e um Cenário de Actividade?
Sumário
Desenho Visual
Proximidade
Alinhamento
Repetição
Contraste
Ordenação
Espaço em branco
Proporção
Decoração
01
MOTIVAÇÃO
Um desenho de ecrã
Outro desenho de ecrã
Outro desenho de ecrã
02PRINCÍPIOS DE
DESIGN GRÁFICO
Desenho Visual
Proximidade
Alinhamento
Repetição
Contraste
Ordenação
Espaço em branco
Proporção
Decoração
Proximidade
Proximidade
Relacionado Junto
Proximidade
Proximidade
Alinhamento
Alinhamento
Alinhamento – Hierarquias
Alinhamento – Texto
Alinhamento – Texto
Alinhamento – Texto
Alinhamento – Centrado
Fraco!
Alinhamento – Números
Inteiros – Direita 434325454
76335462
43356464323
Alinhamento – Números
Reais – Vírgula 45354.764565.86887.3243455.23566.2
88.42
Alinhamento – Números
Zeros à esquerda? 000434320000545400000763000354620433564600004323
Alinhamento – Números
Zeros à esquerda?
Qual é maior?
000434320000545400000763000354620433564600004323
Alinhamento – Números
Zeros à esquerda?
Qual é maior?
434325454
76335462
43356464323
Alinhamento – Números
Zeros à esquerda?
Não!
000434320000545400000763000354620433564600004323
Alinhamento – Números
1828763863,76
Alinhamento – Números
1 828 763 863,76
Alinhamento – Datas
21/11/2012
2/1/2012
5/10/2012
Alinhamento – Datas
21/11/2012
2/1/2012
5/10/2012
21/11/2012
2/1/2012
5/10/2012
Alinhamento – Datas
21/11/2012
02/01/2012
05/10/2012
21/11/2012
2/01/2012
5/10/2012
Alinhamento – Datas
21/11/2012
02-01-2012
05 Out 2012
7-Out-2012
Alinhamento – Datas
21/11/2012
02-01-2012
05 Out 2012
7-Out-2012
Alinhamento – Datas
21-Nov-2012
2-Jan-2012
5-Out-2012
7-Out-2012
Alinhamento – Datas
21-Nov-2012
2-Jan-2012
5-Out-2012
7-Out-2012
Alinhamento – Tabelas
Nome Telefone
André Silva 294 543 345
Mário Almeida 546 321 213
Rui Lopes 976 233 122
Teresa Gusmão 267 364 234
Vasco Simões 244 766 876
Alinhamento – Tabelas
Nome Telefone
André Silva ……………………………………... 294 543 345
Mário Almeida ……………………………….. 546 321 213
Rui Lopes …………………………………….…. 976 233 122
Teresa Gusmão …………………….………… 267 364 234
Vasco Simões …………………………….…… 244 766 876
Alinhamento – Tabelas
Nome Telefone
André Silva 294 543 345
Mário Almeida 546 321 213
Rui Lopes 976 233 122
Teresa Gusmão 267 364 234
Vasco Simões 244 766 876
Alinhamento – Tabelas
Nome Telefone
André Silva 294 543 345
Mário Almeida 546 321 213
Rui Lopes 976 233 122
Teresa Gusmão 267 364 234
Vasco Simões 244 766 876
Repetição
Repetição
Repetição
Repetição
Repetição
Repetição
Repetição
Repetição
Repetição
Repetição
•Garfo•Faca•Colher•PratoBolacha•Toalha•Copo
Contraste
Tamanho Tamanho
Contraste
Cor Cor
Contraste
calorconfortodescansofériassestacalma
stresscansaçotrabalho
pressaazáfama
exaustão
Ordenação
Qual a ordem mais natural?
Ordenação – Alfabética
Ordenação – Tarefa
Ordenação – Importância
Ordenação – Frequência
Ordenação – Tab Order
Espaço em Branco
Separar – parágrafos, seções, blocos
Espaço em Branco
Separar – parágrafos, seções, blocos
Estruturar
Espaço em Branco
Separar – parágrafos, seções, blocos
Estruturar
Realçar(usado nas revistas e jornais)
Espaço em Branco
Uma boa vista sobre a parte velha da cidade, a partir de um dos seus miradouros
Uma boa vista sobre a parte
velha da cidade, a
partir de um dos seus
miradouros
Espaço em Branco
Uma boa vista sobre a parte velha da cidade, a partir de um dos seus miradouros
Uma boa vista sobre a parte
velha da cidade, a
partir de um dos seus
miradouros
Espaço em Branco
Uma boa vista sobre a parte velha da cidade, a partir de um dos seus miradouros
Uma boa vista sobre a parte
velha da cidade, a
partir de um dos seus
miradouros
Decoração
Proporção – Proporção Áurea
1.618
1
Proporção – Proporção Áurea
Proporção – Proporção Áurea
Proporção – Regra dos Terços
Exemplo:
Micro-ondas
Exemplo: Micro-ondas
Agrupamento
Exemplo: Micro-ondas
Agrupamento
Descongelar
Exemplo: Micro-ondas
Agrupamento
Tipo de comida
Descongelar
Exemplo: Micro-ondas
Agrupamento
Tipo de comida
Tempo
Descongelar
Exemplo: Micro-ondas
Agrupamento
Ordenação
11) Tipo de Cozedura
Exemplo: Micro-ondas
Agrupamento
Ordenação
2
2) Temperatura
11) Tipo de Cozedura
Exemplo: Micro-ondas
Agrupamento
Ordenação
2
2) Temperatura
3
3) Tempo
11) Tipo de Cozedura
Exemplo: Micro-ondas
Agrupamento
Ordenação
4
4) Início/Fim2
2) Temperatura
3
3) Tempo
11) Tipo de Cozedura
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Cores diferentes funções diferentes
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Cores diferentes funções diferentes
Linhas em torno de botões relacionados (aumentar/diminuir temperatura)
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
botões alinhados
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Espaços em branco
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Espaços em branco
Espaços para separargrupos de botões
OriginalExemplo: página web
ProximidadeExemplo: página web
AlinhamentoExemplo: página web
ContrasteExemplo: página web
RepetiçãoExemplo: página web
RepetiçãoExemplo: página web
RepetiçãoExemplo: página web
03DIVISÃO DE
TAREFAS PORECRÃS
Divisão Por Ecrãs!
Um Exemplo Conhecido…
Como Dividir?
Dividir Tarefa em Sub-Tarefas
Manter o Contexto!
Cuidado!
Muitos ecrãs demasiado simples
Algumas tarefas requerem múltiplos ecrãs abertos simultaneamente
Resumo
Desenho Visual
Proximidade
Alinhamento
Repetição
Contraste
Ordenação
Espaço em branco
Proporção
Decoração