IHC aula07 Tecnicas de Interação

Prévia do material em texto

Interação Humano-Computador 
aula 07 
aula 01 
 
 
 
 
IHC 
Interação Humano-Computador 2 
IHC 
Ciência da Computação 
 Linha de comando 
 Menus 
 Teclas de Atalho 
 Linguagem natural 
 Interfaces de Pergunta/Resposta 
 Formulários 
 Manipulação Direta 
 WIMP 
Estilos de Interação 
Interação Humano-Computador 3 
IHC 
Ciência da Computação 
 Linha de comando: 
 Primeiro estilo de interação amplamente usado 
 Proporcionam ao usuário a possibilidade de enviar instruções 
diretamente ao sistema através de comandos específicos 
 Teclas de função, caracteres únicos, abreviações curtas, palavras 
ou uma combinação 
 Bom para tarefas repetitivas 
 Melhor para especialistas do que para novatos 
 Dá acesso direto à funcionalidade do sistema 
 Considerável tempo de aprendizagem 
 Comandos e sintaxes precisam ser relembrados 
 Erros de digitação são freqüentes mesmo para os mais experientes 
 Nomes ou abreviações de comando deveriam fazer sentido! 
 Exemplo típico: Unix, DOS, shell 
Estilos de Interação 
Interação Humano-Computador 4 
IHC 
Ciência da Computação 
 Linha de comando: 
Estilos de Interação 
Interação Humano-Computador 5 
IHC 
Ciência da Computação 
 Menus: 
 Conjunto de opções mostrada na tela 
 Opções visíveis: 
 Reconhecimento ao invés de lembrança (mais fácil de usar) 
 Se precisa de reconhecimento, logo nomes devem fazer sentido 
 Seleção por: 
 Números, letras, teclas de setas, mouse ou combinação 
 Frequentemente as opções são agrupadas de maneira hierárquica 
 Necessário ter cuidados com o agrupamento dos itens e com a 
profundidade 
 
Estilos de Interação 
Interação Humano-Computador 6 
IHC 
Ciência da Computação 
 Teclas de atalho: 
 Comuns nas interfaces, pois agilizam a 
realização de algumas funções. 
 Devem ser apresentadas para o usuário de 
modo que ele possa conhecê-las e utilizá-
las. 
 É importante manter a consistência interna 
e externa. 
Estilos de Interação 
Interação Humano-Computador 7 
IHC 
Ciência da Computação 
 Linguagem Natural: 
 Familiar ao usuário 
 Reconhecimento de voz ou digitação 
 Problemas: 
 Vago 
 Ambíguo 
 Gírias e abreviações 
 ...difícil de se obter um resultado efetivo ! 
 Soluções possíveis (mas sem garantia de sucesso): 
 Tentar entender um subconjunto do vocabulário 
 Capturar palavras-chave 
Estilos de Interação 
Interação Humano-Computador 8 
IHC 
Ciência da Computação 
 Interfaces de pergunta/resposta: 
 Usuário guiado pela interação através de uma série de perguntas 
 Bom para usuários novatos 
 Pouco flexível para usuários experientes 
 Funcionalidade geralmente é muito específica 
 Exemplos: 
 Programas de instalação/desinstalação 
 Programas de configuração 
 Wizards 
 
Estilos de Interação 
Interação Humano-Computador 9 
IHC 
Ciência da Computação 
 Formulários: 
 Aplicada principalmente na entrada ou busca de dados 
 Tela baseada no formulário de papel 
 Requer: 
 Ter um layout coerente com a tarefa a que se destina 
 Deixar explícitos os dados obrigatórios e formatos de entrada 
 Guiar o usuário no preenchimento de campos específicos 
 Facilitar a correção dos dados 
Estilos de Interação 
Interação Humano-Computador 10 
IHC 
Ciência da Computação 
 Formulários: 
Estilos de Interação 
Interação Humano-Computador 11 
IHC 
Ciência da Computação 
 Formulários: 
Estilos de Interação 
Interação Humano-Computador 12 
IHC 
Ciência da Computação 
 Hipertexto: 
 Modelo de estruturação que permite ao usuário fazer referências 
cruzadas entre diferentes partes através de links (ligações). 
 Este estilo ficou conhecido também como browsing 
(folheamento) 
 Utilizado em: 
 Sistemas de Ajuda (Help) 
 Versões eletrônicas de enciclopédias 
Estilos de Interação 
Interação Humano-Computador 13 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 
 O que exatamente é a manipulação direta? 
 
 Imagine-se dirigindo um carro em que, em vez de direção, 
pedais e câmbio tem apenas um teclado... e R20:E:A35 seria 
usado para “reduza para 20km/h, vire para a esquerda, acelere 
até 35 km/h” 
Estilos de Interação 
Interação Humano-Computador 14 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 
 Shneiderman (1983) foi quem usou o termo pela primeira vez 
para se referir a uma classe emergente de sistemas bastante 
atraentes na década de oitenta, como as primeiras planilhas 
eletrônicas, editores de texto, sistemas CAD, videogames, etc. 
Estilos de Interação 
Interação Humano-Computador 15 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 Os sistemas que usam a Manipulação Direta: 
 Possuem interfaces gráficas que permitem operá-los 
“diretamente” usando ações manuais em vez de instruções 
fornecidas via teclado 
 Mudaram o paradigma da interação humano-computador: 
 Do “diálogo” baseado em linguagem de comando para a 
“manipulação” baseada na linguagem visual (Frohlich, 
1997) 
 
 Do mundo que se “comanda” passou-se para o mundo com o 
qual se “interage” 
 
Estilos de Interação 
Interação Humano-Computador 16 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 Sketchpad - Um programa para design gráfico criado por 
Sutherland em 1963 
 1º marco em interface de manipulação direta por antecipar: 
 A concepção da saída na tela como “folha de papel” 
 O uso de dispositivos de apontamento 
 A importância de mostrar abstrações graficamente 
Estilos de Interação 
Interação Humano-Computador 17 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 
 A “ilusão” da manipulação direta foi sumarizada por Shneiderman 
(1998) em três princípios de design: 
 
 1. Representação contínua do objeto de interesse em seus 
diversos estados 
 2. Ações físicas (cliques, arraste, etc.) em vez de sintaxe 
complexa 
 3. Operações incrementais reversíveis, cujo impacto no objeto de 
interesse é imediatamente visível 
 
 
Estilos de Interação 
Interação Humano-Computador 18 
IHC 
Ciência da Computação 
 Manipulação Direta: 
 
Estilos de Interação 
Interação Humano-Computador 19 
IHC 
Ciência da Computação 
 Apontar e Clicar 
 
 Clique em alguma coisa ! 
 Ícones, links de texto, localização no mapa, etc. 
 
 Muito usado em: 
 Multimídia 
 Browsers 
 Hipertextos 
 
 Pouca digitação 
Estilos de Interação 
Interação Humano-Computador 20 
IHC 
Ciência da Computação 
 Realidade Virtual (Interfaces tridimensionais) 
 
 Oferece ao usuário, através de tecnologias avançadas, a 
sensação de estar presente num ambiente que simule certas 
condições de trabalho de um domínio 
 
 Pode ser imersiva ou não-imersiva. 
 
Estilos de Interação 
Interação Humano-Computador 21 
IHC 
Ciência da Computação 
 Realidade Virtual (Interfaces tridimensionais) 
 
 Imersiva - quando o usuário utiliza todo um aparato que lhe dá a 
sensação de estar presente no ambiente virtual. 
 
Estilos de Interação 
Interação Humano-Computador 22 
IHC 
Ciência da Computação 
 Realidade Virtual (Interfaces tridimensionais) 
 
 Não-Imersiva - é aquela na qual o usuário utiliza um computador 
comum, com uma tela gráfica e um dispositivo apontador, para 
interagir com o mundo virtual. 
Estilos de Interação 
Interação Humano-Computador 23 
IHC 
Ciência da Computação 
 WIMP 
 
 Windows (janelas) 
 Icons (ícones) 
 Menus (menus) 
 Pointers (apontadores) Permite a interação através da manipulação de componentes virtuais 
chamados widgets: 
 Janelas e caixas de diálogo 
 Menus pull-down, menus pop-up 
 List boxes, combo boxes, radio buttons, check boxes 
 Barra de rolagem 
 Campos de texto 
 Controles deslizantes 
 Indicadores de progressão 
 Cursores 
 ... 
Estilos de Interação 
Interação Humano-Computador 24 
IHC 
Ciência da Computação 
• O modelo gráfico deve permitir que muitas aplicações 
compartilhem a tela do computador. 
• As aplicações interagem com partes da tela (janelas), ao 
invés da tela inteira. 
• Uma aplicação poderá coexistir com outras aplicações e os 
usuários poderão comutar entre essas aplicações a 
qualquer instante. 
• O controle do tamanho e disposição dessas janelas é 
realizado pelos usuários e não pela aplicação. 
• A aplicação não deve controlar o ambiente do usuário. 
 
 
Ambiente Multitarefa 
Interação Humano-Computador 25 
IHC 
Ciência da Computação 
• Aspectos que descrevem a interface de uma aplicação : 
– Apresentação – aspecto visual da interface, como os 
controle e objetos são apresentados; 
– Interação – como os usuários interagem com os 
componentes; 
– Ações – como a similaridade das ações estão 
implementadas; 
– Seqüência de processos – como os usuários e a 
máquina se comunicam um com o outro. 
 
Ambiente Multitarefa 
Interação Humano-Computador 26 
IHC 
Ciência da Computação 
• O modelo conceitual de uma interface deve permitir que os 
usuários trabalhem diretamente com os dados, sem 
necessariamente ter que localizar uma aplicação. 
• O sistema deve chamar a aplicação tão logo o usuário 
comece a interagir com o dado. 
• O usuário se concentra na informação e nas tarefas, sem 
precisar procurar pela aplicação e ferramentas. 
 
Projeto centrado nos dados 
Interação Humano-Computador 27 
IHC 
Ciência da Computação 
• Nas primeiras versões Windows, os usuários eram forçados 
a pensar em termos de aplicações ao invés de documentos, 
dados e informações. 
• Atualmente no Windows, uma janela é uma vista para um 
documento, ao invés de ser um aplicativo. 
• Usuários podem arrastar e soltar dados entre documentos 
sem se preocupar com a compatibilidade entre aplicativos. 
• Os documentos possuem seus próprios ícones no desktop 
• O nome do documento aparece na barra de título, junto ao 
nome da aplicação 
Projeto centrado nos dados 
Interação Humano-Computador 28 
IHC 
Ciência da Computação 
• É o que o usuário pode manipular como única unidade. 
• É o foco da atenção do usuário, sendo constantemente 
criado e modificado. 
• Quando o foco é o objeto, o usuário pode se concentrar na 
tarefa a realizar, em vez de tentar descobrir como a 
aplicação irá realizar a tarefa. 
• A maioria dos objetos são compostos de sub-objetos. 
• Exemplo: 
– Objeto (Processador de Textos) = {Documentos} 
– Sub-objetos (Processador de Textos) = Objetos 
(Documento) = {parágrafos, sentenças, palavras, letras} 
Objetos 
Interação Humano-Computador 29 
IHC 
Ciência da Computação 
• Termo genérico para os modos como o usuário pode 
modificar, manipular e criar objetos. 
• As ações modificam as propriedades ou manipulam um 
objeto. 
• Pela análise dos objetos e sub-objetos, pode-se identificar 
suas propriedades e determinar as ações que irão suportar. 
• As ações de uma aplicação modificam uma propriedade e 
implementam as funções suportadas. 
Ações 
Interação Humano-Computador 30 
IHC 
Ciência da Computação 
• Propriedades 
– são características únicas de um objeto. 
– descrevem um objeto. 
– podem ser alteradas pelo usuário. 
– Exemplo: Propriedade (Documento) = {estilo, tipo} 
• Manipulações 
– não alteram as características do objeto. 
– inserem o objeto em contextos e/ou ambientes diferentes. 
– Exemplo: Save e Print são ações que manipulam objetos. 
Ações 
Interação Humano-Computador 31 
IHC 
Ciência da Computação 
• Fundo da tela – uso de cores com contraste adequado. 
• Janela - é a componente da interface através da qual são 
apresentados os objetos e as ações para o usuário. 
• Ícones - representam aplicações que estão disponíveis para 
utilização. 
• Ponteiro/cursor – permite que o usuário faça escolhas de 
forma desestruturada através do movimento livre do 
“mouse”. É o símbolo que se move sobre a tela à medida 
que se movimenta o "mouse". 
• Barra de tarefas (taskbar) – registra as janelas ativadas no 
fundo da tela, contém o botão “Iniciar” (start button) 
Componentes da Interface Desktop 
Interação Humano-Computador 32 
IHC 
Ciência da Computação 
Componentes da Interface Desktop 
Fundo da 
Tela 
Ponteiro ou 
Cursor do mouse 
Janelas 
Ícone 
Barra de Tarefas 
Iniciar 
Interação Humano-Computador 33 
IHC 
Ciência da Computação 
• Um aplicativo pode conter vários “containers” (“forms”), 
sendo cada um deles armazenados em um arquivo separado 
(podendo ser compartilhado com outros aplicativos). 
• Modelo Simplificado de interface: 
– Apresentação de objetos através de janelas; 
– Definição de ícone para a aplicação; 
– Suporte ao ponteiro do mouse. 
Componentes da Interface Desktop 
Interação Humano-Computador 34 
IHC 
Ciência da Computação 
A Janela (“Window”) 
• É uma vista para um documento. 
• É a componente da interface através da qual a aplicação 
apresenta objetos e ações aos usuários. 
• Pode ser de dois tipos: janela primária e janela suplementar. 
• Janela Ativa – é a janela que o usuário está utilizando 
Componentes da Interface Desktop 
Interação Humano-Computador 35 
IHC 
Ciência da Computação 
• É o ponto focal do trabalho do usuário, objeto principal de 
transação do usuário em qualquer aplicação. 
• É onde todas as ações do usuário iniciam e terminam. 
• Todas as janelas criadas pela aplicação estão subordinadas 
à janela primária. 
• Ações que afetam a janela primária também afetam as 
janelas suplementares da aplicação. 
• Objetivo: fornecer as ações mais freqüentes para serem 
usadas diretamente nos objetos colocados na área cliente 
sem ser necessário usar a barra de menu. 
Janela Primária (Primary Window) 
Interação Humano-Computador 36 
IHC 
Ciência da Computação 
• Janela móvel – pode ser arrastada na tela através da barra de título 
• Janela dimensionável – as bordas podem ser estendidas através de 
clique e arrasto, possui ícones na barra de título para maximizar e 
minimizar. 
• Área Cliente – Normalmente apresentada completamente branca (como 
nos editores de texto) ou com um aspecto de formulário (como nas 
planilhas). 
– Suporta “containers”, barras de rolagens, botões e textos. 
– É onde a capacidade gráfica da aplicação é utilizada. 
• Objetos da aplicação são apresentados na área cliente 
• Ações disponíveis para realização das as tarefas – são apresentadas na 
barra de menu 
Janela Primária - Características 
Interação Humano-Computador 37 
IHC 
Ciência da Computação 
Janela Primária - Características 
Nome Aplicativo – Nome Arquivo 
Barra de Menu 
Área Cliente 
Barra de Título 
Borda 
dimensionável 
Interação Humano-Computador 38 
IHC 
Ciência da Computação 
• Habilitam as aplicações a estenderem o diálogo com o 
usuário. 
• São de dois tipos: 
– janelas secundárias 
– caixas de diálogo. 
Janelas Suplementares 
Interação Humano-Computador 39 
IHC 
Ciência da Computação 
Devem ser usadas quando a informação apresentada na janela 
primária não se ajusta ao espaço da área cliente e a 
rolagem é inadequada para a apresentaçãode certo tipo de 
informação adicional 
– Por ex: no caso de existirem botões e caixas de texto. 
Características: 
• Janela móvel; 
• Janela dimensionável; 
• Subordinada à Janela Primária; 
• Usadas para diálogos não modais (independentes da janela 
que a requisitou) e paralelos (por exemplo: Janela de Help). 
Janelas Secundárias 
Interação Humano-Computador 40 
IHC 
Ciência da Computação 
Devem ser usadas quando a informação apresentada na janela 
primária não se ajusta ao espaço da área cliente e a 
rolagem é inadequada para a apresentação de certo tipo de 
informação adicional 
– Por ex: no caso de existirem botões e caixas de texto. 
Características: 
• Janela móvel; 
• Janela dimensionável; 
• Subordinada à Janela Primária; 
• Usadas para diálogos não modais (independentes da janela 
que a requisitou) e paralelos (por exemplo: Janela de Help). 
Janelas Secundárias 
Interação Humano-Computador 41 
IHC 
Ciência da Computação 
• É usada para obter informação do usuário. 
Características 
• Janela móvel e não dimensionável (tamanho fixo) – as 
bordas da janela não podem ser estendidas através de 
clique e arrasto, não possui ícones na barra de título para 
maximizar e minimizar a janela; 
• Está subordinada à Janela Primária ou a outras janelas 
suplementares; 
• Apresenta e/ou solicita informações necessárias para 
completar uma ação definida pelo usuário; 
• O usuário pode se deslocar livremente entre as janelas. 
Caixas de Diálogo 
Interação Humano-Computador 42 
IHC 
Ciência da Computação 
• Uma caixa de diálogo modal requer que o usuário responda 
ao diálogo antes de retornar à janela primária (ex: caixa de 
diálogo de abertura de arquivos). 
• Uma caixa de diálogo não modal deixa o usuário interagir 
com a janela primária e secundária ao mesmo tempo (ex: 
substituição de textos e inserção de símbolos especiais nos 
editores de texto). 
Caixas de Diálogo 
Interação Humano-Computador 43 
IHC 
Ciência da Computação 
• Borda da Janela 
• Barra de título 
• Barra de menu 
• Barra de ferramentas 
• Área cliente 
• Barra de rolagem horizontal / vertical 
• Barra de estados 
Componentes da janelas 
Interação Humano-Computador 44 
IHC 
Ciência da Computação 
Componentes da janelas 
Barra de 
Título 
Barra de Menu 
Caixa de 
Ferramentas 
Janela de 
trabalho 
Paleta e Caixas 
de diálogo 
Barra de status 
Workspace 
Interação Humano-Computador 45 
IHC 
Ciência da Computação 
• Para janelas redimensionáveis – o contorno (borda) possui 8 
regiões com retorno visual na forma de dupla seta, 
indicando que podem ser arrastadas na tela para aumentar 
ou reduzir a área da janela. 
Borda da Janela 
Nome Aplicativo – Nome Arquivo 
Interação Humano-Computador 46 
IHC 
Ciência da Computação 
• Para janelas redimensionáveis – o contorno (borda) possui 8 
regiões com retorno visual na forma de dupla seta, 
indicando que podem ser arrastadas na tela para aumentar 
ou reduzir a área da janela. 
Borda da Janela 
Nome Aplicativo – Nome Arquivo 
Interação Humano-Computador 47 
IHC 
Ciência da Computação 
• Localizada no topo da janela do aplicativo 
• Usada para identificar o conteúdo da janela, tal como 
documento, planilha ou aplicação. 
• Servir de suporte visual para movimentação da janela. 
Barra de título 
PhotoX 
Arquivo Editar Exibir Janela Ajuda 
Barra de Título 
Interação Humano-Computador 48 
IHC 
Ciência da Computação 
Composta por 5 partes: 
• Ícone do aplicativo – apresenta um menu pull-down contendo as 
opções mais comuns: Restaurar, Mover, Tamanho, Minimizar, 
Maximizar, Fechar, etc. 
• Texto da barra - identifica o nome do objeto da janela (dado). 
Opcionalmente pode ser incluído o nome da aplicação antes do 
nome do dado 
• Ícone de Minimização – minimiza a janela, para a barra de tarefas 
onde fica representada pelo ícone do aplicativo 
• Ícone de Restauração / Maximização – maximiza ou restaura 
(para a configuração inicial) a janela. 
• Ícone de Fechamento – encerra o aplicativo fechando a janela 
Barra de título 
Interação Humano-Computador 49 
IHC 
Ciência da Computação 
• Está diretamente abaixo da barra de título. 
• Cada opção da barra de menu possui uma lista de ítens pull-
down. 
• Dentro do possível, os nomes das opções devem estar 
escritos com uma única palavra. 
• Menus padrões: File, Edit, View, Window (para aplicações 
MDI), Help 
• Uma interface consistente torna fácil o aprendizado e o uso 
da aplicação pelos usuários. Portanto é apropriado o uso de 
menu padrão. 
Barra de menu 
Interação Humano-Computador 50 
IHC 
Ciência da Computação 
• É uma caixa horizontal secundária localizada na parte 
inferior da janela primária. 
• Provê informação sobre o conteúdo corrente da janela. 
• É usada para apresentar texto descritivo sobre o menu 
selecionado ou botão da barra de ferramenta. 
• Para apresentar mais de um tipo de informação de uma vez, 
a janela de estado deve ser dividida em múltiplos painéis 
(maximo de 255). 
Barra de estado 
Interação Humano-Computador 51 
IHC 
Ciência da Computação 
Barras de título, menu e estado 
PhotoX 
Arquivo Editar Exibir Janela Ajuda 
Barra de Estado 
Barra de Menu 
Barra de Título 
Interação Humano-Computador 52 
IHC 
Ciência da Computação 
• Fornece aos usuários um retorno visual que informa existir 
disponível mais informações que podem ser manipuladas 
através do mouse através da rolagem (scroll) da tela. 
• As barras de rolagens devem ser incluídas em todas as 
janelas redimensionáveis. 
Acionamento 
• “Click” do mouse 
• “Sensitive” (basta ao cursor estar sobre o objeto, não 
precisa de clique) 
• “Dragging” (arrasto de ponteiro) 
Barra de Rolagem 
Interação Humano-Computador 53 
IHC 
Ciência da Computação 
Barra de Rolagem 
• Ícones Up e Down 
 
 
Em barra fixa Em eixo Em recorte Em condutor Em manivela 
• Cursor deslizante: 
Interação Humano-Computador 54 
IHC 
Ciência da Computação 
• Alguns aspectos da interface visual do Windows são definidos pelo sistema e 
não podem ser alterados numa aplicação. 
Efeitos de elementos 3-D 
• A aparência de três dimensões de algumas partes da interface do Windows 
estão definidas rigidamente. 
• Assume-se uma fonte de luz vindo de cima pela esquerda. 
• Elementos em 3-D melhoram o aspecto visual da interface gráfica 
• Efeitos nas bordas dos painéis, tabelas e janelas, imitando botões 3-D, fazem 
estes objetos aparecerem em relevo, ressaltando seu conteúdo. 
• As sombras e iluminações devem parecer consistentes 
• Apresentar estilos de borda em 3-D separa grupos de informações distintas. 
• Para o efeito 3D são utilizadas as seguintes cores: 
– Cinza escuro RGB# 128-128-128 
– Cinza claro RGB# 192-192-192 
Padrões Visuais do Sistema 
Cancel
Interação Humano-Computador 55 
IHC 
Ciência da Computação 
Onde o efeito 3-D deve ser aplicado (cont) 
• O mercado alvo do Windows inclui os computadores com resolução VGA. 
• Devido a isto, e à limitação em 16 cores, são usadas linhas de contorno na cor 
preta para ícones, frames, botões e controles. 
• Os dois níveis de cinza disponíveis em VGA não fornecem contraste suficiente 
para distinguir um do outro. 
• Linhas cinza de um único pixel são difíceis de focalizar e causam tensão nos 
olhos e dificuldade de leitura. 
• Os ícones possuem contorno com linha preta para enfatizar a forma do ícone de 
maneira a facilitar uma localização rápida. 
• No mínimo são necessárias 4 cores para criar uma aparência efetiva 3-D 
(branco,cinza claro, cinza escuro e preto) . 
Padrões Visuais do Sistema 
Interação Humano-Computador 56 
IHC 
Ciência da Computação 
Onde o efeito 3-D deve ser aplicado (cont) 
• O mercado alvo do Windows inclui os computadores com resolução VGA. 
• Devido a isto, e à limitação em 16 cores, são usadas linhas de contorno na cor 
preta para ícones, frames, botões e controles. 
• Os dois níveis de cinza disponíveis em VGA não fornecem contraste suficiente 
para distinguir um do outro. 
• Linhas cinza de um único pixel são difíceis de focalizar e causam tensão nos 
olhos e dificuldade de leitura. 
• Os ícones possuem contorno com linha preta para enfatizar a forma do ícone de 
maneira a facilitar uma localização rápida. 
• No mínimo são necessárias 4 cores para criar uma aparência efetiva 3-D 
(branco, cinza claro, cinza escuro e preto) . 
Padrões Visuais do Sistema