Pular para o conteúdo principal

Requisitos de Capturas de Ecrã - Documentação do PDF Connect v3

Prioridade 1: Fluxo principal (obrigatório) 📸​

Interface principal da app​

  1. Painel do PDF Connect v3 - Interface principal com o design atualizado
  2. Gestão da biblioteca de PDFs - Vista em grelha com pesquisa, etiquetas e operações em massa
  3. Página de detalhes do PDF - Vista individual do PDF com o botão “Link” em destaque

Ligação universal​

  1. Seletor de tipo de página - Todos os tipos suportados (Produtos, Coleções, Artigos, Páginas, Página inicial, Pesquisa)
  2. Modal de seleção de recursos - Barra de pesquisa, lista de recursos, paginação e seleção em massa
  3. Ligação em curso - Estados de carregamento e mensagens de confirmação
  4. Recursos ligados - Páginas ligadas com opções para desligar

Sistema de publicação​

  1. Modal de opções de publicação - Três estilos de apresentação lado a lado
  2. Integração com o editor de temas - Adicionar blocos de PDF aos templates
  3. Configuração de blocos - Painel de definições para cada tipo de apresentação

Estilos de apresentação em ação​

  1. Exemplo de PDF incorporado - Página de produto com PDF incorporado
  2. Exemplo de botão de PDF - Botão com o popup/overlay aberto
  3. Exemplo de lista de PDFs - Vários PDFs numa lista organizada

Prioridade 2: Funcionalidades avançadas (importante) 📸​

Estratégia multi-bloco​

  1. Página de produto com vários blocos - A mesma página com incorporado + botão + lista
  2. Visão geral do estado dos templates - Que templates têm blocos configurados
  3. Interface de seleção em massa - Vários itens selecionados com contador

Experiência em mobile​

  1. Visualização de PDFs em mobile - Os três estilos de apresentação em dispositivos móveis
  2. Interface de administração em mobile - Ligar e publicar em mobile
  3. Comportamento responsivo - Como os PDFs se adaptam a diferentes tamanhos de ecrã

Exemplos de fluxo de trabalho​

  1. Comparação antes/depois - Interface antiga vs. nova
  2. Ligação entre páginas - O mesmo PDF ligado a vários tipos de página
  3. Funcionalidade de pesquisa - Resultados de pesquisa em tempo real

Prioridade 3: Conteúdo de apoio (opcional) 📸​

Exemplos de casos de uso​

  1. Documentação de produto - Integração de manual técnico
  2. Catálogos de coleções - Página de coleção com catálogo em PDF
  3. Recursos no blog - Artigo com PDF para download
  4. Destaques na página inicial - Brochura da empresa na homepage

Erros e casos-limite​

  1. Estados de carregamento - O que os utilizadores veem enquanto as ações são processadas
  2. Mensagens de erro - Comunicação clara de erros
  3. Estados vazios - O que novos utilizadores veem antes de adicionar conteúdo

Analítica e desempenho​

  1. Analítica de utilização - Métricas de interação com PDFs (se disponível)
  2. Indicadores de desempenho - Dados de velocidade e otimização
  3. Analítica de templates - Que templates são mais utilizados

Especificações das capturas de ecrã​

Requisitos técnicos​

  • Resolução: High-DPI para apresentação nítida na documentação
  • Browser: Chrome ou Safari para renderização consistente
  • Tamanho da janela: Desktop standard (1920x1080) e mobile (375x812)
  • Tema: Tema Shopify limpo e profissional para demonstrações

Requisitos de conteúdo​

  • PDFs de exemplo: Documentos de negócio realistas (manual, catálogo, guia)
  • Loja de teste: Produtos, coleções, artigos e páginas preenchidos com conteúdo relevante
  • Dados “limpos”: Nomes e descrições profissionais, conteúdo bem organizado

Requisitos de branding​

  • UI consistente: Todas as capturas devem mostrar a mesma versão da app
  • Aspeto profissional: Interface limpa e organizada
  • Foco claro: Destacar a funcionalidade específica que está a ser demonstrada

Fluxo de trabalho das capturas​

Fase de preparação​

  1. Preparar uma loja de teste com conteúdo realista
  2. Criar PDFs de exemplo com nomes profissionais
  3. Configurar os três estilos de apresentação
  4. Verificar que todas as funcionalidades funcionam corretamente

Fase de captação​

  1. Tirar capturas de ecrã em desktop na resolução máxima
  2. Captar versões mobile das interfaces principais
  3. Documentar estados de carregamento e de erro
  4. Obter comparações antes/depois quando fizer sentido

Fase de pós-processamento​

  1. Recortar para focar os elementos relevantes da interface
  2. Adicionar destaques/anotações quando for útil
  3. Garantir um estilo visual consistente em todas as imagens
  4. Otimizar o tamanho dos ficheiros para publicação na web

Utilização na documentação​

Estratégia de colocação​

  • Imagens de destaque: Mudanças importantes de interface no início dos documentos
  • Passo a passo: Uma captura por ação nos tutoriais
  • Comparação: Antes/depois para melhorias relevantes
  • Referência: Confirmação visual rápida de localização/aparência

Requisitos de texto alternativo​

Todas as capturas precisam de texto alternativo descritivo para acessibilidade:

  • Descrever o que aparece na interface
  • Incluir texto importante visível na imagem
  • Indicar elementos/ações de UI relevantes
  • Manter abaixo de 125 caracteres, sempre que possível

Convenção de nomes de ficheiros​

Usar uma nomenclatura consistente para gestão fácil:

  • pdf-guru-v3-[feature]-[context].png
  • Exemplo: pdf-guru-v3-linking-page-types.png
  • Exemplo: pdf-guru-v3-display-embedded-product.png

Esta abordagem sistemática garante uma documentação visual completa, à altura da qualidade das funcionalidades melhoradas do PDF Connect v3.