Repository navigation
Guia de Estilo
- 1. Introdução
- 2. Resultado de análise
- 3. Elementos de Interface
- 4. Elementos de interação
- 5. Elementos de ação
- 6. Vocabulários e padrões
O objetivo do guia de estilo é agrupar os princípios e as diretrizes usadas para registrar as principais decisões de design decididas, de forma que elas sempre estejam guardadas para no futuro serem usadas na produção do produto final, que no caso do projeto atual é a loja e-commerce "Geekies".
O guia de estilo é formado por 5 principais tópicos:
- Resultado da análise: Onde se descreve toda a pesquisar em todo do usuário-alvo e seu ambiente de trabalho.
- Elementos de interface: Onde se descreve e padroniza alguns elementos que estarão presente na interface do produto final.
- Elementos de interação: Onde se descreve os estilos e os modos de interação que o usuário tem com o sistema.
- Vocabulários e padrões: Onde se descreve e padroniza como será as mensagens de feedback ou de confirmação e etc.
- Fontes utilizadas na aplicação. Disponível em: https://www.dafont.com/pt Acesso em: 24 de novembro de 2017.
- Ícones. Disponível em: https://www.flaticon.com/ Acesso em: 24 de novembro de 2017.
- BARBOSA, Simone Diniz Junqueiro, SILVA, Bruno Santana da, Interação Humano-Computador, 1a. Edição, Editora Campus, 2010.
O Geekies é uma loja mobile que vende artigos relacionados à tecnologia, games, séries e etc. Então, o usuário deve ter um celular/tablet com os sistema operacionais Android ou IOS para poder utilizar a loja, além da conexão com a internet para pode acessar e comprar produtos no sistema.
A interface do produto tem 3 principais pontos:
- Navbar: É a barra de navegação onde contém os elementos principais para usar as funcionalidades da aplicação.
- Área de conteúdo: É onde fica os elementos do site (produtos) para venda e informações sobre o mesmo.
- Barra de pesquisa: É onde o usuário pesquisa o produto que deseja comprar, e fica logo abaixo a navbar.
As fontes utilizadas nesse projeto foram tiradas do site Dafont.
a) SugarPunch: Foi usada no logo da loja.
Link da Fonte.
b) Helvetica: Foi usado nos textos gerais da loja.
Os ícones utilizados no projeto foram tiradas do site Flaticon. E o pacote utilizado foi o Multimedia Collection e nem todos ícones do pacote foram utilizados, apenas aqueles que entram no contexto do projeto.
a) Multimedia Collection
Para a paleta de cores, foram escolhidas cores fortes e alegres, para representar a essência da loja e seus produtos.
O sistema permite os seguintes tipos de interação:
- Linguagem natural - via texto: A linguagem única do sistema será o português.
- Menu: Um menu contento as categorias de produto que o sistema vende.
- Preenchimento de formulários: O usuário terá que preencher dados para se cadastrar na loja.
- Ícones: O usuário poderá navegar na aplicação através de ícones que melhor presentam o contexto de determinada funcionalidade.
Os principais aceleradores do sistema são os ícones, eles podem levar o usuário direto para objetivo principal. Por exemplo:
- Ícone do carrinho de compras: Ao clicar no ícone do carrinho o usuário é levado diretamente para os produtos que deseja comprar, e não precisa seguir nenhum fluxo específico pra conseguir chegar lá.
O usuário terá que preencher campo com dados para pode realizar login ou fazer cadastro. Os seguintes campos serão exigidos.
- Para cadastrar e fazer login:
| Campo | Formato | Obrigatoriedade | Valor |
|---|---|---|---|
| String de até 32 caracteres | Sim | Exemplo: exemplo@email.com | |
| Senha | String de no minimo 6 caracteres | Sim | Exemplo: abc123 |
Os tipos de telas para tarefas comuns no sistema serão baseadas nos casos de uso e são separadas em:
- Tela de Cadastro de conta
- Tela inicial
- Tela de cadastrar produtos
- Tela de Login
- Tela do Carrinho
- Tela inicial do administrador
- Tela de visualização do produto
O sistema sempre deve dar feedback para o usuário e uma das formas é enviando mensagens, há vários tipos de mensagens que o sistema pode enviar mas as principais são:
-
Mensagens de erro: Deve indicar o que está errado e ajudar o usuário a corrigir seus erros. Por exemplo:
-
Mensagens de Sucesso: Deve indicar que a operação que o usuário fez foi completada com sucesso. Por exemplo:
-
Mensagens de Atenção: Deve indicar ao usuário que algo precisa de mais cuidado e atenção. Por exemplo:
