Partilhar: WhatsApp
aulify
UC UC02286 · T. Multimédia, T. Design de Comunicação G

Ficha 01 · UI mobile, guidelines e redesign

Princípios, violações de guidelines e redesenho de ecrã
Versão · Aluno
Tempo · 90 minutos
Cotação · 100 pontos
Aluno(a)
Turma
Data
Objectivos da ficha

Parte I · Verdadeiro ou Falso (30 pts)

Indica se cada afirmação é verdadeira (V) ou falsa (F) e justifica.

  1. O alvo de toque mínimo recomendado em iOS é 44×44 pt. (5 pts)
  2. O dark mode deve usar preto puro (#000000) como superfície base para poupar bateria em todos os ecrãs. (5 pts)
  3. Um ecrã deve ter, em regra, um só botão primário. (5 pts)
  4. O FAB (Floating Action Button) é um padrão típico do iOS/HIG. (5 pts)
  5. A safe area é a zona do ecrã livre de obstruções do sistema como o notch. (5 pts)
  6. Um placeholder dentro do campo dispensa a necessidade de label visível. (5 pts)

Parte II · Identificar violações de guidelines (35 pts)

Uma equipa apresentou o ecrã de "Detalhe de produto" de uma app de e-commerce iOS, descrito assim:

O ecrã tem 7 separadores numa tab bar inferior. O botão "Comprar" e o botão "Adicionar à lista" são ambos azuis sólidos do mesmo tamanho. O preço está escrito a cinzento-claro (#BBBBBB) sobre fundo branco, em corpo 11 pt. O botão "Voltar" foi colocado no canto inferior direito. Os ícones de "partilhar" e "favorito" têm 24×24 pt de área tocável e estão colados um ao outro. Existe um FAB azul flutuante no canto inferior direito com o ícone de carrinho. As imagens do produto vão até à borda do ecrã, incluindo por baixo do notch e do home indicator, e há texto importante dentro dessa zona.

Identifica 5 violações de guidelines e explica como corrigir cada uma. (7 pts cada)

Parte III · Redesenhar um ecrã (35 pts)

Recebes o ecrã de registo (sign up) de uma app mobile com os seguintes problemas:

Formulário com 9 campos (nome, apelido, email, confirmar email, telefone, password, confirmar password, data de nascimento, código postal), todos com o mesmo aspecto. Não há labels, só placeholders. O teclado é sempre alfabético. O botão "Registar" é cinzento e do mesmo tamanho do "Cancelar". Não há indicação de erros nem de campos obrigatórios. O ecrã não tem título.

Descreve em texto (ou wireframe textual) o teu redesenho, justificando cada decisão. (35 pts)