Teste - 08

8. Versão Mobile

Na versão mobile do Portal, as atualizações são referentes ao topo do site e ao menu, que passa a ser na barra inferior (Figura 75).

Figura 75 - Layout da versão mobile

 

8.1 Estrutura do layout

Devido às variações de tela, foi-se estabelecido um valor de y, equivalente à maior largura possível da barra inferior e à 24x (y = 24x), para definir as proporções e distâncias dos vários elementos do layout , adaptando-o aos diferentes tamanhos de tela (Figura 76). Com a finalidade de aproveitar melhor o espaço, a marca da UFG e a assinatura da unidade são utilizadas sem o descritor.

 

- Topo: 4x de altura, alinhado à esquerda;

- Assinatura da unidade: Myriad semibold 28pt, #000000;

- Marca da UFG: versão horizontal com 2x de altura (largura proporcional);

 

- Menu (Barra inferior): 24x de largura (y = 24x) e 3x de altura, #457ba3;

- Ícones: 2x de largura, #ffffff (defaut) e #000000 (quando selecionados);

Figura  76 - Grid do layout

 

8.2 Tela do Menu

O menu, juntamente com as redes sociais, se encontra no primeiro ícone da barra inferior, e possui as seguintes especificações (Figura77):

 

- Ícones: 2x de altura e largura, fundo #d8d8d8 e símbolo #000000;

- Background: #000000, com 87% de opacidade;

- Títulos: Myriad Bold 21pt - #999999;

- Ítens: Myriad Regular 18pt, entrelinha 46pt - #ffffff;

 

Figura 77 - Menu mobile

 

8.3 Tela de Busca

A busca se encontra no segundo ícone da barra inferior, e possui as seguintes especificações (Figura 78):

 

- Texto da caixa de busca: Myriad Regular 21pt - #666666;

- Background: #dddddd e #f4f4f4;

- Título (Sugestões de busca): Myriad Regular 14pt - #4d4d4d;

- Sugestões de busca: Myriad Regular 18pt, entrelinha 46pt - #ffffff;

 

Figura 78 - Busca mobile 

 

8.4 Tela de Acessibilidade

As opções de acessibilidade (língua e padrão cromático) se encontram no terceiro ícone da barra inferior, e possui as seguintes especificações (Figura 79):

 

- Background: #f4f4f4;

- Títulos (Idioma / Padrão cromático): Myriad Regular 14pt - #4d4d4d;

 

Figura 79 - Acessibilidade mobile

 

8.4 Sistemas UFG

Os ítens do Sistemas UFG se encontram no quarto ícone da barra inferior, e possui as seguintes especificações (Figura 80):

 

- Background: #f4f4f4;

- Títulos (Idioma / Padrão cromático): Myriad Regular 14pt - #4d4d4d;

- Ítens: Myriad Regular 18pt, entrelinha 46pt - #ffffff;

 

 

Figura 80 - Sistemas UFG Mobile