Projeto Interface Usuário 05 Componentes UI

Prévia do material em texto

Projeto Interface Usuario
05 – Componentes UI
Interação Humano-Computador
Analise e Desenvolvimento de Sistemas| UNIP
Prof. Sérgio Soares
Componentes
de Interface de Usuário
Interface de Usuário ou User Interface (UI)
28/02/2020 2
Aplicações Gráficas
• São aquelas destinadas a operar 
nas GUI (Graphical User Interfaces).
• São (deveriam ser) mais bonitas, 
mais fáceis de usar e mais 
intuitivas.
• Sua construção se baseia no uso 
de:
• componentes padronizados de 
software; e
• um modelo de eventos para 
integração com o sistema 
operacional.
2/28/2020 3
Componentes
• Windows Gadgets (widgets),
ou dispositivos de janelas
ou componentes GUI são:
• elementos construtivos das interfaces gráficas
• que encapsulam funcionalidade e comportamento padronizados.
• Cada componente é como um mini-janela tratada de 
maneira independente pelo sistema gráfico do sistema 
operacional.
2/28/2020 4
Aplicações Gráficas
• A grande facilidade decorrente do uso de interfaces gráficas reside no 
fato de que:
• Os componentes têm aparência própria que permite sua fácil 
identificação;
• Os componentes possuem conjunto limitado de funções simples;
• Os usuários conseguem reconhecer visualmente os componentes e também 
usá-los com facilidade, pois seu comportamento é padronizado.
2/28/2020 5
Esforço e memória 
mínima do usuário!
Aplicações Gráficas
• Cada sistema operacional (de desktop, tablet, smartphone ou mesmo 
de mainframe) pode disponibilizar um sistema gráfico baseado em 
componentes.
• Não existe, de fato, um padrão, na aparência, funcionalidade ou 
comportamento!
• Mas existem componentes comuns, reconhecidos por anos de 
experiência no projeto de interfaces.
28/02/2020 6
Inovação nesta área 
nem sempre é 
sinônimo de sucesso!
Componentes Básicos
•Janela
•Diálogos
•Rótulo
•Caixa de Texto
•Área de Texto
•Botão
•Botão c/ retenção
•Botão de opção
•Caixa de opção
•Caixa de Lista
•Lista Suspensa
•Árvore
•Tabela/Grade
•Painel
•Painel de Rolagem
•Painel com Abas
•Painel de Edição
28/02/2020 7
Painéis
Dados
Estruturados
Listas
Janelas
Texto
Botões
Componentes Básicos
28/02/2020 8
Janelas
• Servem para organizar conjuntos 
de componentes que, em em 
conjunto, prestam um ou mais 
serviços correlacionados.
• Quanto menos componentes, 
mais simples, mais fácil, mas 
menos flexível.
28/02/2020 9
Jan
e
la
Janelas têm bordas, 
título e controles
Janelas
28/02/2020 10
Permitem separar 
aplicações e seus 
documentos
Auxiliam o usuário 
na organização de 
suas tarefas
Caixas de Texto e Rótulos 
• Componentes específicos 
para entrada ou saída de 
texto.
• Caixas de Texto
Apresentam um texto (de 
uma ou muitas linhas) 
editável pelo usuário.
• Rótulos
Apresentam um texto fixo 
(que o usuário não edita).
28/02/2020 11
C
aixa d
e
 texto
R
ó
tu
lo
s
Botões
• Componentes específicos 
para acionamento de 
funções (execução de 
ações).
• Existem vários tipos de 
botões, mas o mais 
comum é o push button
ou botão de apertar!
28/02/2020 12
B
o
tã
o
Toggle Button (botão com retenção)
28/02/2020 13
RadioButton & CheckBox
28/02/2020 14
Checkboxes 
permitem a seleção 
de nenhum, um ou 
vários itens
RadioButtons 
permitem a seleção 
de apenas um item
Listas
•As listas são comumente 
apresentadas como:
• Caixas de lista
ou ListBoxes
• Listas suspensas
ou ComboBoxes
28/02/2020 15
Listas: modos de seleção
•Seleção simples
(de apenas um item)
•Seleção de intervalo
(de um ou mais itens numa faixa contínua)
•Seleção de intervalos múltiplos
(de uma ou mais faixas,
com um ou mais itens)
28/02/2020 16
Listas suspensas
28/02/2020 17
Outros Componentes
28/02/2020 18
Diálogos
28/02/2020 19
Diálogos Especializados
28/02/2020 20
Paineis, Painéis com Abas
28/02/2020 21
Barras de Menu, Menus
e Itens de Menu
28/02/2020 22
Menus de contexto 
não estão vinculados 
à barras de menus
Árvores
28/02/2020 23
Sliders
28/02/2020 24
Paineis de Rolagem
28/02/2020 25
Considerações Finais
• Existem muitos componentes.
• Cada componente tem um objetivo e possui um 
comportamento esperado, ou seja, o uso de cada 
componente implica numa expectativa específica de 
interação entre o usuário e a interface.
• O projeto de uma interface é, neste sentido, complexo e 
importante, pois a seleção de componentes precisa oferecer 
uma experiência adequada para usuário, ou seja, a interface 
precisa ser usável!
28/02/2020 26