Data	Versão	Descrição	Autor
08/03/2018	1.0.0	Criação do documento	Geovanni Oliveira
28/03/2018	1.1.0	Especificação da Tipografia	Eduardo Vital
28/03/2018	1.2.0	Especificação das cores	Eduardo Vital
28/03/2018	1.3.0	Especificação dos ícones e disposição espacial	Eduardo Vital

---

• 1. Introdução
  • 1.1. Objetivo do guia de estilo
  • 1.2. Organização e conteúdo do guia de estilo
  • 1.3. Público alvo do guia de estilo
  • 1.4. Como utilizar o guia
  • 1.5. Como manter o guia
• 2. Resultados da análise
  • 2.1. Descrição do ambiente do usuário
• 3. Elementos de interface
  • 3.1. Disposição espacial e grid
  • 3.2. Tipografia
  • 3.3. Símbolos não tipográficos
  • 3.4. Cores
• 4. Elementos de interação
  • 4.1. Estilos de interação
  • 4.2. Seleção de um estilo
  • 4.3. Aceleradores

Este documento tem o objetivo de registrar as principais decisões de design tomadas para o projeto MapaFGA, estabelecendo padrões para os elementos de interface e de interação.

O documento está dividido em Introdução, Resultados da análise, Elementos de interface e Elementos de interação. A seção Introdução contém informações gerais a cerca do documento e dicas de como utilizá-lo e mantê-lo. A seção Resultados da Análise traz uma breve descrição sobre os requisitos necessários para que o usuário utilize o produto. Em Elementos de interface são padronizadas as janelas, tipografia, símbolos não tipográficos e as cores do sistema. Finalmente, em Elementos de interação são definidos os estilos de interação e os aceleradores.

Todos os participantes do planejamento e desenvolvimento do projeto irão utilizar este documento, envolvendo toda a equipe de desenvolvimento e design e gerentes.

Antes de qualquer alteração no frontend do produto, deve-se consultar e seguir as orientações presentes neste documento.

Sempre que forem definidas mudanças de design, o documento deve ser atualizado e o sistema deve ser revisado.

O MapaFGA é um software mobile, desta forma, para que o usuário possa utilizá-lo, ele precisará de um dispositivo mobile, e não será necessário ter conexão com a internet.

A interface contém três elementos principais: cabeçalho(header), área de conteúdo e tabbar. O cabeçalho sempre aparece no extremo superior e tem prioridade sobre os outros elementos, a área de conteúdo é disposta na parte central da tela, por fim, o tabbar está concatenado à área de conteúdo e nem sempre é visível. A interface ainda conta com dois elementos secundários que tem prioridade sobre os outros elementos. O cabeçalho pode assumir o papel de apenas descrever a área de conteúdo, provendo um título, como pode servir para acessar funcionalidades extras de controle do app.

A tipografia utilizada será a família de fontes San Francisco, seguindo as regras abaixo:

Estilo	Peso	Tamanho (Pontos)	Direção (Pontos)
Título Grande	Regular	34	41
Título 1	Regular	28	34
Título 2	Regular	22	28
Título 3	Regular	20	25
Manchete	Semi-Bold	17	22
Corpo	Regular	17	22
Mensagem de aviso	Regular	16	21
Sub-cabeçalho	Regular	15	20
Nota de rodapé	Regular	13	18
Legenda 1	Regular	12	1
Legenda 2	Regular	11	13

Os seguintes ícones serão utilizados na aplicação:

Ícone	Nome	Significado
	Compartilhar	Usado para ações de compartilhamento de conteúdo com aplicativos externos, e funcionalidades de copiar e pesquisar conteúdo
	Adicionar	Ícone destinado a criação de recurso
Cancelar	Cancelar	Saí do modo de edição sem salvar alterações
Concluir	Concluir	Concluí edição e salva alterações
Editar	Editar	Entra no mode edição de recurso usando a tela atual
	Compor	Usado para abertura de nova tela específica para a edição ou criação de recurso

| Deletar | Deleta recurso selecionado | || Pesquisar | Exibe campo de pesquisa de recurso |

As cores utilizadas no aplicativo devem estar de acordo com o Manual de Identidade Visual da UnB seguindo as seguintes especificações:

Elemento	Cor	Código RGB	Cor (Hex)
Plano de fundo	Cor Preto 5%	R 246 G 246 B 246	#f6f6f6
Texto principal	Preto	R 29 G 29 B 29	#1d1d1d
Texto secundário	Preto 75%	R 93 G 93 B 93	#5d5d5d
Links	Azul Médio	R 0 G 104 B 180	#0068b4
Butões ativos	Azul Médio	R 0 G 104 B 180	#0068b4
Butões inativos	Preto 50%	R 152 G 152 B 152	#989898
Elementos destacados	Verde UnB	R 0 G 130 B 46	#00822e
Plano de fundo da Tabbar	Preto 25%	R 208 G 208 B 208	#d0d0d0
Texto de fundo da Tabbar	Preto 75%	R 93 G 93 B 93	#5d5d5d
Icone selecionado da Tabbar	Azul violeta	R 46 G 29 B 134	#2e1d86
Icone não selecionado da Tabbar	Preto 50%	R 152 G 152 B 152	#989898

A interação com o usuário será realizada na língua portuguesa, principalmente por meio de símbolos padronizados e intuitivos, textos, botões, menus e preenchimento de formulários. A linguagem deve obedecer às normas cultas da língua portuguesa.

O estilo de interação será selecionado de acordo com a necessidade do usuário. Se o mesmo deseja navegar pela aplicação, estilo de interação mais utilizado será por meio de símbolos e ícones, caso o usuário deseje se cadastrar no sistema, o preenchimento de formulários será utilizado e assim por diante.

Com o intuito de aumentar a eficiência da aplicação, serão utilizados ícones de atalho para voltar para a página inicial e retornar para a tela anterior.