A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Interfaces Homem-Computador Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis

Apresentações semelhantes


Apresentação em tema: "Interfaces Homem-Computador Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis"— Transcrição da apresentação:

1 Interfaces Homem-Computador Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis

2 Interfaces Homem-Computador Princípios Básicos de Design Tanto a diagramação de materiais para o suporte impresso quanto para o online está submetida a princípios básicos de design. A questão é saber em que grau os princípios válidos para papel estão sendo aproveitados também na Web. A designer Robin Williams destaca quatro destes princípios que regem o design gráfico de páginas em geral. São eles: proximidade, alinhamento, repetição e contraste.

3 Interfaces Homem-Computador Proximidade O princípio da proximidade é baseado no agrupamento de itens que têm relação entre si. Itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação. Itens ou conjuntos de informações que não estão relacionados entre si não deveriam estar próximos; isto oferece ao leitor uma pista visual imediata da organização e do conteúdo da página. (Williams, p.15, 1995)

4 Interfaces Homem-Computador Proximidade Acima temos um exemplo de cartão de visitas dando um endereço. É baseado num exemplo do livro de William. Neste cartão, o seu olho pára cinco vezes, pois há cinco itens separados. Onde você começará a ler? No meio, provavelmente, pois a letra é mais grossa. Onde você vai ler depois? Em geral, da esquerda pra direira, porque somos ocidentais. Quando você chega ao canto inferior direito, onde seus olhos vão?

5 Interfaces Homem-Computador Proximidade Exercício 1: Resolva o problema de proximidade do cartão.

6 Interfaces Homem-Computador Alinhamento O princípio do alinhamento é, segundo Williams, uma forma de conexão visual entre os elementos de um material gráfico, e, portanto, nada deve ser colocado arbitrariamente em uma página. Quando os itens são alinhados na página, há uma unidade coesa, mais forte. Mesmo quando os elementos estiverem fisicamente separados uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os, tanto em relação aos seus olhos quanto a sua mente. (...) é o princípio do alinhamento que avisará ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo material. (Williams, p. 27, 1995)

7 Interfaces Homem-Computador Alinhamento Exercício 2: Resolva o problema de alinhamento do cartão.

8 Interfaces Homem-Computador Repetição A repetição é o princípio que prega que algum aspecto do design deve repetir-se no material inteiro, conforme diz Williams. Este aspecto pode ser qualquer elemento que o leitor reconheça visualmente. O elemento repetitivo pode ser uma fonte em bold (negrito), um fio (linha) grosso, algum sinal de tópico, um elemento do design, algum formato específico, relações espaciais etc. (Williams, p. 43, 1995) Williams coloca no seu livro que elementos de repetição como fonte em negrito, linhas grossas, marcadores de litas, color, elementos de design, formato, relações espaciais e outros podem dar um reconhecimento visual ao relacionamento dos elementos.

9 Interfaces Homem-Computador Repetição Exercício 3: Resolva o problema de repetição do cartão.

10 Interfaces Homem-Computador Contraste Contraste é o princípio que funciona como um atrativo visual e cria uma hierarquia organizacional. Williams define o contraste como algo que realmente faz com que uma pessoa queira olhar para um determinado produto gráfico.... para o contraste ser realmente eficaz, ele deve ser forte. (...) Cria-se o contraste quando dois elementos são diferentes. Se eles diferirem um pouco mas não muito, não acontecerá contraste e sim um conflito. (Williams, p.53, 1995)

11 Interfaces Homem-Computador Contraste Contraste pode ser criado em várias maneiras, como por exemplo: –Letras grandes e pequenas; –Linhas finas e grossas; –Cores quentes e cores frias; –Elementos horizontais e verticais; –Figura pequena e figura grande. O exemplo pode ser visto no próximo slide. Observe que a figura da direita é muito mais fácil de ler que a da esquerda.

12 Interfaces Homem-Computador Contraste

13 Interfaces Homem-Computador Princípios Básicos de Design Estes conceitos básicos aqui apresentados podem dar soluções muito simples que vão auxiliar imensamente na leitura e visualização da maioria das telas. Tais ferramentas são extremamente úteis no começo, portanto, pratique bastante e compare seus trabalhos com os de profissionais. Vá atrás e estude bastante para poder melhorar sempre.

14 Interfaces Homem-Computador Exercício Aplique os conceitos de design para a construção de uma tela de cadastro (Web) no Visual Studio.Net. Cadastro de carros a venda – Loja de veículos: –Dados da Loja Nome, Logo.. –Dados pessoais Nome, endereço, CEP, cidade, estado, telefone, , celular –Dados do Carro Marca, ano, cor, modelo, kilometragem, foto –Ações

15 Interfaces Homem-Computador BIBLIOGRAFIA Básica: JAKOB NIELSEN, Projetando Websites. São Paulo. Campus, (2000). ISBN OLIVEIRA NETTO, A. A. IHC - Modelagem e Gerência de Interfaces com o Usuário. Visual Books, (2004). ISBN Williams, Robin / Tollett, John, Web Design para Não Designers. Ciência Moderna (1995) ISBN: Complementar: PAULA FILHO, W. P. Engenharia de Software: fundamentos, métodos e padrões. Rio de Janeiro. LTC, (2003). ISBN Apoio: Prof. Daniel Di Domênico pelo material e orientação.


Carregar ppt "Interfaces Homem-Computador Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis"

Apresentações semelhantes


Anúncios Google