Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Muito parecida como a Tela de Login (Imagem 2), essa tela tem campos para o código do atendente e senha (3.1, 3.2). Ela também tem o botão toggle para exibir ou ocultar a senha. Além do toggle, a tela também apresenta botões de “Ajuda” (3.3) e “Config.” (3.6) que levam para as telas de Ajuda e de Configuração Geral, respectivamente. Após preencher os campos, o usuário deve clicar o botão “Entrar” (3.2) que, se o código e senha estiverem certos, leva o usuário para a próxima tela: a Tela de Check-in.   Porém, se o usuário usar um código do Atendente ou senha inválido, a tela apresenta um toast, um alerta, notificando o usuário que há um erro com os dados inseridos nos campos da tela, idêntico ao alerta na Tela de Login (Imagem 3; 1.6).




CampoDescrição
(3.
1Código
1) - Código do AtendenteCampo para o código do atendente.
(3.2) - SenhaCampo para a senha do atendente.
(3.3) - Exibir SenhaBotão Toggle para exibir/ocultar a senha do Atendente.
(3.4) - EntrarBotão "Entrar".
(3.5) - AjudaBotão "Ajuda".
(3.6) - ConfiguraçãoBotão "Configurar".





Tela de Check-in

Essa é a tela inicial do aplicativo após a configuração. A listagem dos postos de trabalho disponíveis, e seus respectivos horários, de entrada e saída, está presente na Tela de Check-in.


CampoDescrição
(4.1) - Card Check-inCard de um dos Postos de Trabalho para dar entrada (check-in) e seu horario.
(4.2) - Card Check-outCard de um dos Postos de Trabalho para dar saída (check-out) e seu horario.
(4.3) - Barra de FerramentaFerramenta Tabs para a navegação dentro do aplicativo.

...

O Tabs é uma ferramenta simples, mas eficaz, para a navegação dentro de um aplicativo mobile (Imagem 7; 4.2). Ele permite o usuário a acessar as páginas do aplicativo e mostrar a página atual onde o usuário está.


CampoDescrição
(5.1) - CheckinBotão "Checkin" no Tabs.
(5.2) - AgendaBotão "Agenda" no Tabs.
(5.3) - AjudaBotão "Ajuda" no Tabs.
Sair
(5.4) - SairBotão "Sair" no Tabs.


Imagem 8 – Tabs


Quando o usuário está em uma das telas principais do aplicativo (Tela de Check-in, Tela de Agenda ou Tela de Ajuda), o ícone e nome da página entra em destaque no Tabs. Na Imagem 8, a página atual do usuário é a Tela de Check-in.

...

O último botão do Tabs, o botão “Sair” (5.4), não é um botão para a navegação dentro do aplicativo. É um botão para levar o usuário de dentro do aplicativo para fora, para a Tela de Acesso do Atendente. Por exemplo, caso o usuário clique o botão “Sair” enquanto estiver na Tela de Ajuda, o seguinte alerta aparecerá na tela:


CampoDescrição
(5.5) - MensagemAlerta confirmando com usuário se ele realmente deseja sair.
(5.6) - NãoBotão "Não" cancela a ação de sair do aplicativo.
(5.7) - SimBotão "Sim" confirmada a saída do aplicativo.


Imagem 9 – Clicando botão “Sair” do Tabs enquanto página de Ajuda

...

Quando o atendente clica nos cards dos postos de trabalho (Imagem 7; 4.1, 4.3), a Tela de Detalhes de Check-in/Check-out surge. A tela é idêntica para check-in (entrada) e check-out (saída) porque os processos para os dois são iguais. O processo é explicado em mais detalhe seção “Funcionalidades: Realizando um Check-in/Check-out”.


 

CampoDescrição
(6.1) - PostoCampo de Seleção do Posto.
(6.2) - íconeÍcone da self.
(6.3) - ComentárioCampo para comentário.
(6.4) - CâmeraBotão "Câmera" para tirar self.
(6.5) - BotãoBotão para adicionar mais fotos.



CampoDescrição
(6.6) - Fazer CheckinBotão fazer Checkin.


Imagens 10.1 e 10.2 – Tela de Detalhes Check-in/Check-out

...