jmaxzh/sdlc-ui-design

Design de UI

Aplicabilidade

• Aplicar ao design, implementação, modificação, revisão, otimização ou orientação de princípios de interface visual solicitados para desktop, dispositivos móveis e web. Tarefas exclusivamente de backend, exclusivamente de banco de dados e outras tarefas sem trabalho de interface visual estão fora do escopo desta skill.
• Esta skill funciona independentemente do fluxo de trabalho SDLC e pode ser instalada sozinha. Para tarefas que também envolvam organização da informação, comportamento de interação ou recuperação, use a orientação de UX disponível, como sdlc-ux-design, para essas decisões.
• Quando apenas uma orientação de princípios for solicitada, forneça uma resposta breve nesse nível, em vez de expandir para design específico do produto, implementação ou teste de aceitação.
• Para solicitações apenas de revisão, relate descobertas e recomendações sem criar um novo design ou alterar a implementação.
• Exploração de design, propostas, comparação de conceitos e validação de protótipos criam ou modificam apenas artefatos de design independentes. Altere o código de produção somente quando a solicitação incluir implementação.
• Para solicitações mistas, entregue o design antes de prosseguir com a implementação autorizada. Entregue e avalie cada um separadamente; a validação de protótipo não estabelece aceitação de implementação.
• Para implementação, siga as verificações de projeto existentes. Quando o ambiente atual suportar a reprodução de um defeito, use uma reavaliação focada nesse defeito; escolha verificações para outras alterações de comportamento de acordo com seu risco e escopo. Não configure ambientes de verificação adicionais, produza relatórios de verificação formais ou duplique verificações existentes apenas para satisfazer esta skill.
• Para resultados de implementação, relate verificações realizadas, observações e escopo não verificado. Diferencie evidências de tempo de execução, inferência baseada em código e julgamento subjetivo; a autoavaliação do modelo não é aceitação do usuário.

Leitura sob demanda

• Siga os princípios compartilhados abaixo e leia as referências da plataforma para o alvo e cenário reais.
• Desktop: leia princípios de desktop.
• Dispositivos móveis: leia princípios para dispositivos móveis.
• Web: leia princípios da web.
• Para web móvel, leia os princípios de dispositivos móveis e da web. Para outras combinações, carregue referências adicionais de acordo com as condições dos documentos selecionados.
• Se a plataforma não for especificada, primeiro infira-a a partir do contexto da tarefa e do projeto. Para conselhos gerais, use apenas os princípios compartilhados. Peça esclarecimentos somente se uma tarefa concreta ainda não tiver uma decisão de plataforma necessária.
• Para o contexto ou limites de uma adaptação, consulte sua entrada vinculada em contexto da fonte e, quando necessário, a passagem original. As instruções em inglês nesta skill definem a adaptação local; a consulta não importa fluxos de trabalho ou toolchains upstream.

Entrega de design

Use esta seção para exploração visual solicitada, propostas, comparação de conceitos ou validação de protótipos, independentemente do tamanho da alteração. Em tarefas mistas, aplica-se à parte do design; a entrega e aceitação da implementação seguem a tarefa e os requisitos de projeto existentes.

• Apresente propostas de design de UI primeiro por meio de geração de imagem. Capturas de tela de interface existentes podem servir como referências. Se a geração de imagem estiver indisponível ou falhar, apresente a proposta como um artefato HTML de página única. Contexto da fonte.
• Para design combinado de UI/UX, forneça a imagem de design da UI e um protótipo HTML de UX interativo. Quando a UI usar o fallback de HTML, use um artefato HTML para ambos.
• Para artefatos HTML, use por padrão CSS e JavaScript embutidos para que abram diretamente. Use estado local e dados ilustrativos claramente identificados para demonstrar o escopo de interação acordado.
• Inspecione o design renderizado na viewport pretendida usando conteúdo real quando disponível; caso contrário, use conteúdo representativo claramente identificado. Contexto da fonte.
• Lidere a entrega com imagens, pré-visualizações e arquivos abertos. Mantenha a prosa de acompanhamento breve e limitada a instruções de abertura, escopo de simulação e limitações necessárias.

Princípios compartilhados

Aplicação dos princípios

• Aplique princípios relevantes ao trabalho solicitado, plataforma alvo e cenário.
• Explique condições e trade-offs que afetam a recomendação. Não prescreva um estilo visual específico universalmente.
• Antes de citar requisitos ou recomendações numéricos, verifique sua fonte, unidades e aplicabilidade à plataforma alvo.

Princípios de design

• Pontos de entrada e affordances: torne os pontos de entrada primários visualmente reconhecíveis. Use a aparência, o rótulo e o posicionamento de um controle para comunicar como usá-lo e o que sua ação significa. Contexto da fonte.
• Consistência e estilo: alinhe ícones, componentes e decoração com o propósito do produto e as convenções de design existentes. Mantenha o conteúdo legível e as ações utilizáveis ao adicionar decoração. Escolha um estilo visual que se adapte ao tipo de produto, público-alvo, contexto de uso e preferências visuais declaradas. Contexto da fonte.
• Sistema de design visual: use regras de design visual de todo o produto por padrão, com exceções explícitas no nível da página tendo precedência nessas páginas. Organize valores e padrões de design reutilizáveis por função semântica, extraindo definições compartilhadas quando necessidades repetidas forem estabelecidas. Preserve distinções de intenção ao decidir o que reutilizar. Contexto da fonte.
• Direção estética: siga as escolhas estéticas explícitas do usuário quando elas entrarem em conflito com as preferências estilísticas da skill. Contexto da fonte.
• Conceito de apresentação: baseie o conceito visual de uma página de apresentação em características específicas de seu assunto. Contexto da fonte.
• Adequação do conteúdo: escolha layouts que acomodem a forma, comprimento e quantidade do conteúdo real. Quando uma estrutura não puder conter o conteúdo necessário, adapte a estrutura preservando fatos e informações necessárias. Contexto da fonte.
• Mídia disponível: quando uma abordagem visual depender de mídia, baseie-a em ativos que existam ou que possam realmente ser obtidos. Escolha uma composição viável quando os ativos necessários não estiverem disponíveis. Contexto da fonte.
• Tipografia: escolha fontes, tamanhos e espaçamento entre linhas para as condições de leitura. Estabeleça hierarquia por meio de tamanho e peso. Mantenha o texto do corpo e de suporte legível, inclusive quando ampliado, sem cortar ou ocultar conteúdo ou controles necessários.
• Idiomas alvo: para os idiomas e sistemas de escrita que o produto suporta, acomode a expansão de texto, direção de leitura e modelagem específica de script na tipografia e layout. Contexto da fonte.
• Layout e espaçamento: use posição e agrupamento para expressar importância e relacionamentos. Aplique alinhamento e espaçamento de forma consistente. Combine densidade com as necessidades de leitura, comparação e operação. Evite ênfase concorrente. Escolha a estrutura de layout com base no espaço disponível para a interface ou contêiner. Reorganize o conteúdo conforme necessário quando esse espaço mudar, mantendo o conteúdo e as ações principais acessíveis. Contexto da fonte.
• Cor, estados e foco: defina cores primárias, de suporte e de status e use-as de forma consistente. Garanta contraste adequado para texto, controles e estados. Quando a cor transmitir informação, complemente-a com texto ou formas. Torne os estados dos controles e o foco visualmente identificáveis. Para cada aparência que o produto suportar, verifique a legibilidade do texto e dos controles e as distinções de estado. Onde a plataforma alvo expuser preferências de alto contraste, respeite-as na interface renderizada. Contexto da fonte.
• Alvos de interação: dimensione e espaçe os alvos para mouse, toque ou outros métodos de entrada, tornando-os fáceis de selecionar sem ativação acidental adjacente.
• Codificação de dados: ao apresentar dados graficamente, escolha codificações visuais adequadas aos relacionamentos que os usuários precisam entender. Torne claras as unidades e escalas aplicáveis. Contexto da fonte.
• Propósito do movimento: use movimento em superfícies orientadas a tarefas e de leitura para feedback, mudanças de estado ou continuidade. Quando o movimento explicar uma mudança, torne sua causa e efeito compreensíveis. Em superfícies persuasivas ou experienciais, o movimento pode servir a um propósito expressivo claro por si só. Quando um usuário ativar uma preferência de movimento reduzido suportada pelo ambiente alvo, respeite-a. Ao reduzir ou substituir o movimento, mantenha o conteúdo legível e as mudanças de estado necessárias compreensíveis. Movimento não essencial não deve bloquear a entrada. Onde uma interação suportar troca ou cancelamento, torne sua animação interrompível e faça a transição para o estado de interação mais recente; interromper uma animação não cancela por si só uma operação em segundo plano. Contexto da fonte.