Anda di halaman 1dari 29

Dicas para melhorar a

interface de usuário
feita em LabVIEW
Luciano Borges
Engenheiro de Vendas

Ilton Pereira
Gerente de Engenharia de Aplicações

ni.com 1
Antes de começarmos…

• Existem gostos diferentes – pode ser que nossas dicas


não sejam aplicáveis
• Essa apresentação assume um nível básico de experiência
• Visite (e junte-se) ao UI Community Group para encontrar:
• Parte 1 dessa apresentação online
• Demonstrações e exemplos disponíveis para download
• Usuários do LabVIEW que são apaixonados por UI (e que as
compartilham)

decibel.ni.com/content/groups/ui
ni.com 2
Tópicos
• Revisão: Introdução ao design de UI parte um
• Como dar um visual customizado à sua UI
• Organização de UIs complexas
• Indicando o progresso de operações demoradas
• Conclusão

ni.com 3
“Bons artistas pedem empresetado…

…grandes artistas roubam.”


– Pablo Picasso

ni.com 4
Fontes de inspiração
• Apple
• Microsoft Office
• Aplicações no seu próprio computador
• Galerias de ícones
• Tutoriais de web design
• Sua equipe corporativa de design
• Fotografia, arte
• Livros de:
• Design de interface de usuário
• Design de interação de usuário
• Usabilidade
• Design gráfico
• Visualização de informações

ni.com 5
Os três mandamentos da parte um

I. Pense no seu usuário

II. Não seja inovador

III. Menos é mais

ni.com 6
I. Pense no seu usuário
• Eles sabem tanto quanto você (eles nunca sabem)?
• Como eles vão interagir com a aplicação?
• Por que eles estão usando o seu software?
• O software (e a UI) deve cumprir os objetivos deles

ni.com 7
II. Não seja inovador
• Utilize elementos familiares
• Não altere a funcionalidade esperada
• Melhore – não reinvente

Os comandos do sistema imitam controles comuns do


sistema operacional com os quais a maioria dos usuários estão familiarizados

ni.com 8
III. Menos é mais
• Muito de uma vez só causa distração; direcione-se ao
minimalismo
• Atenha-se aos requisitos
• Não faça o que não é necessário
• Você terá o seu trabalho pronto mais cedo
• Possuí-lo vai te custar menos
• O foco deve ser no que é importante
• Exemplo: guie o usuário com cores

ni.com 9
Guiando o usuário com cores

O efeito de caixa de cereais:


Qual cereal chama a sua atenção
em primeiro lugar?

Por quê?

ni.com 10
“Parece que a perfeição é atingida não quando não há mais
nada a ser acrescentado, mas quando não há mais nada a ser
removido.
– Antoine de Saint-Exupéry

ni.com 11
Técnicas de customização de UI

Imagens e decoração no painel frontal

• Torne controles padrão transparentes


• Adicione uma imagem através do menu Edit » Paste

Controles customizados

• Use para para customizar a estética de controles e


indicadores
• Acesse pelo painel frontal clicando com o botão
direito depois em Advanced » Customize

ni.com 12
Adicionando uma imagem ao painel frontal
• Simples como copiar e colar!
• Utilize um editor de imagem para apagar, adicionar
transparência
• Preencha controles nativos do LabVIEW

Início: Clipart do PowerPoint


ni.com 13
Diferenças no editor de controles (Control Editor)
Painel frontal
normal
Janela do editor de
controles

ni.com 14
Quando você deve usar controles

• Para criar controles esteticamente diferentes e reutilizáveis


• Exemplo: redimensionamento de um botão de parada para torná-lo mais fácil de clicar

Quando você deve usar Type Defs


• Para atualizar automaticamente o tipo de dados em controles customizados
• Exemplo: reutilização de um Enum cujos valores podem mudar

Quando você deve usar Strict Type Defs


• Para criar controles reutilizáveis que são cópias idênticas
• Exemplo: propagação de mudanças feitas em tamanho e cores de um Gauge

ni.com 15
Edit Mode vs. Customize Mode

Edit Mode Customize Mode


• Alterar o tamanho ou a cor de • Fazer vastas mudanças a
um controle ou indicador controles ou indicadores
• Acesso a um menu de atalhos • Mudar partes individuais de
clicando com o botão direito um controle ou indicador

ni.com 16
Componentes de um controle (slide)
Índice do Incremento
Alojamento
array de pixel

Ponteiro, Decremento
preenchimento e de pixel Estética
escala
ni.com 17
Componentes de um controle (Gauge)
Índice do Alojamento
array

Parte
Ponteiro e adicional da
escala Borda
borda

ni.com 18
Visualizando componentes de controles
• Visualize componentes individuais de controles usando o
menu Window » Show Parts Window

ni.com 19
Adicionando uma decoração e imagens customizadas para um controle de
Gauge

CUSTOMIZANDO UM CONTROLE
DE GAUGE
ni.com 20
Organização de Uis complexas

Tab Control

• Use quando não é necessário que todos os controles estejam visíveis de


uma só vez
• Limite ao número de abas que você pode usar normalmente
• Carrega todos os controles na memória de uma só vez

Visualização de conteúdo e categoria usando SubPainéis

• Use para decidir dinamicamente quais controles serão mostrados


• Sem limite ao número que você pode interagir normalmente
• Você controla quando o VI é carregado ou liberado da memória

ni.com 22
Usando um Tab Control
1. Adicione ao painel frontal
2. Customize o tab control
3. Preencha com controles

• Mais flexível do que a maioria das pessoas percebem


• Abas transparentes
• Abas verticais
• Abas com imagens

ni.com 23
Exemplo de aplicação de Tab Control
Utilizando o LabVIEW para imitar o NI DIAdem, software que ofusca em
Excel em pós-processamento de dados

ni.com 24
Usando um subpainel
1. Determine os componentes imóveis da tela do VI de nível mais
alto
2. Desenvolva SubVIs modulares de tamanho apropriado
3. Execute o SubVI dinamicamente
4. Insira o SubVI no subpainel dinamicamente

ni.com 26
Exibindo subpainéis baseado em seleções do usuário

SUBPANEL OPTIONS
DIALOG
ni.com 27
Indicando o progresso de operações demoradas
• Telas de splash são eficazes quando as aplicações demoram um
longo tempo para carregar
• Forneça informações de suporte e desenvolvimento
• Cursores ocupados
• Barras de progresso

Para dicas do uso de cursores ocupados, veja a parte 1 dessa


apresentação, disponível no NI Community UI Interest Group no site

ni.com 28
Utilização de uma estrutura Event para criar uma tela de splash

DEMO DE TELA DE SPLASH


ni.com 29
Pontos principais

• Não seja inovador


• Menos é mais
• Pense no seu usuário

• Customize controles usando o Control Editor


• Encapsule funcionalidade via XControls
• Limpe os seus painéis frontais com abas e subpainéis
• Disfarce tempos de carregamento usando telas de
splash

ni.com 30
Aprenda e compartilhe – UI Interest Group

decibel.ni.com/content/groups/ui

ni.com 31